Html

HTML
Ing. Ruth Mary VianaIng. Ruth Mary Viana

HTML
HTMLHTML es un lenguaje de marcado de hipertexto y
significa, por sus siglas en inglés, (hyper text markup
language).
Cabe mencionar que HTML no es un lenguaje de
programación como lo es Java, C++, Delphi, etc.
HTML es un sistema de códigos que permite crear
páginas web.
Este lenguaje está hecho de etiquetas y atributos
que trabajan conjuntamente para dar alguna
característica específica a la página web; el
navegador interpreta dichas etiquetas y atributos y las
despliega en la pantalla.

HTML
Para empezar a crear páginas web con HTML
es necesario contar con:
 Un editor de texto (bloc de notas, Wordpad en
Windows; para Unix VI o Pico, y en el caso de
Mac, SimpleText o Teachtext ).
 Un navegador, que puede ser Netscape
Navigator o Microsoft Internet Explorer.

Estructura Básica
 La estructura de las etiquetas y atributos hacen uso
de los picoparéntesis < >, de tal forma que el
navegador pueda reconocer las instrucciones de
HTML y no confundirlas con el contenido que
desplegará la página.
El texto que se encuentra entre los picoparéntesis
indica, por un lado la instrucción que se ejecutará y
por otro lado, las especificaciones de la misma.
 Para indicar el final de la instrucción se utiliza la
misma etiqueta pero añadiendo una diagonal.
Ejemplo: <TITLE>Mi primera página</TITLE>.

Estructura Básica
La estructura principal de una página web está
conformada por las siguientes etiquetas:
<HTML>Empieza un documento HTML <HEAD>Zona
de cabecera
<TITLE>Zona de título
</TITLE> Termina zona de título
</HEAD>Termina zona de cabecera
<BODY>Zona de cuerpo del documento
</BODY>Termina zona de cuerpo del documento
</HTML> Termina documento HTML

Ejemplo
<html>
<head>
<title> Mi primer ejemplo.
</title>
</head>
<body >
Mi primer documento HTML
</body>
</html>

TEXTO
Para incluir texto en una página basta teclear éste entre las
etiquetas<BODY> y </BODY>; sin embargo, podemos
hacer uso de etiquetas para mejorar la apariencia de la
información. Las etiquetas que se utilizan con mayor
frecuencia para dar formato al texto son:
 Texto en negrilla
 Texto en itálica
Texto subrayado
Etiqueta de párrafo
 Etiqueta para introducir saltos de línea
<BLOCKQUOTE></BLOCKQUOTE>Etiqueta para
introducir sangría.
 Fuente

TEXTO
Los atributos que permiten hacer modificaciones
sobre la tipografía se incluyen en la etiqueta ;
a continuación mostramos los atributos de esta
etiqueta.
FACE="x"Para definir el tipo de letra (este tipo de letra
deberá estar precargado en la computadora del
usuario de lo contrario no se verá esta fuente y la
máquina ocupara otra), COLOR="x"Color de la fuente
SIZE="x"Tamaño de la letra

TEXTO (Ejemplo)
<html>
<head>
<title> Modificando el texto.
</title>
</head>
<body bgcolor=navy text=white>
Este es un texto sin algún tipo de formato
br>Introduje un salto de línea 
 Y este es un texto en italica 
 Texto en negrillas 
 Texto subrayado 
<blockquote> Texto con sangria </blockquote>
</body>
</html>

LIGAS O HIPERTEXTO
El uso de ligas o hipertexto caracteriza a las páginas
web ya que permite enlazar diferentes páginas, ya
sean de un mismo sitio, o bien, hacia otro lado en
Internet. A las ligas que se encuentran en un mismo
sitio se le llaman absolutas, las que se encuentran
fuera de éste se llaman relativas.
La etiqueta para hacer los enlaces o ligas es la
siguiente:
<a> </a> insertar liga
y tiene varios atributos, entre ellos HREF y TARGET.

HREF
El texto que se pone en el atributo href es el nombre del
documento al cual nos queremos enlazar. La información que se
desplegará en pantalla para indicar a dónde irá la liga se escribe
entre las dos etiquetas.
<a href="http://www.facebook.com">ENTREMOS A NUESTRO
FACEBOOK</a>
Cuando una página es muy extensa podemos crear enlaces
entre ella misma, para ello es necesario utilizar dos ligas. La
primera indica la palabra a la cual saltará el texto y la segunda
sirve para identificar dicha palabra como un "ancla".
<a href="#Palabraclave">Ir hacia palabra </a>
<a name="Palabraclave"></a>
También existen ligas hacia una dirección de email.
<a href=" mailto:persona@abc.com"> Texto de enlace </a>

TARGET
El atributo target se utiliza para indicar la ventana en la
cual se desplegará el contenido de la liga que se ha
activado.
TARGET="_blank" se desplegará la liga en una ventana
nueva TARGET="_Parent"se desplegará en la ventana
original TARGET="_self" se desplegará en la misma
ventana que estamos utilizando
TARGET="_top" se desplegará en una ventana superior
TARGET="nombre_de_frame"se desplegará en la ventana
indicada (se utiliza cuando empleamos frames)

Ejemplo
<html>
<head>
<title> Las ligas
</title>
</head>
<body text=white bgcolor=navy>
Introduciremos una liga 
<a href="1.htm">ir hacia liga</a>
</body>
</html>

IMAGENES
Las páginas en Internet intentan ser llamativas visualmente y
para logralo es necesario introducir imágenes y combinar
éstas con la información que se desea dar al usuario. La
etiqueta para insertar imágenes en un documento es:
<IMG SRC="ABC.GIF">Insertar imagenes
Las imágenes trabajan de manera similar a las ligas, de modo
que si no hacemos la referencia correcta, es decir no
escribimos bien el nombre y/o su extensión, además de la
ruta; la imagen no aparecerá. Al insertar una imagen, es
importante escribir el nombre de la misma exactamente igual
que como aparece en el archivo, de lo contrario no será
posible verla; así mismo, se recomienda que el nombre de las
imágenes estén en mínusculas y que no contengan acentos o
caracteres especiales ya que los sistemas Unix tienen
problemas al leer estos datos.

Algunos de los atributos de las imágenes son:
WIDTH="X"Ancho de la imagen. HEIGHT="X"Altura de la imagen.
ALIGN="X"
Alineamiento de la imagen.
Los primeros dos atributos pueden expresarse en pixeles o en el
porcentaje de espacio que ocupará la imagen en la pantalla. El
atributo ALIGN alineará el objeto, ya sea al centro, a la derecha o a
la izquierda
Ejemplo:
<IMG SRC="ABC.GIF" WIDTH=300 HEIGHT=300 ALIGN=MIDDLE>
Las imágenes acompañadas de texto alterno son una buena
elección en la forma de presentar información. Para ello podemos
alinear el texto en un extremo de la pantalla y la imagen en el lado
contrario.
El atributo ALIGN tiene tres opciones: top, middle y bottom (arriba,
abajo y enmedio, respectivamente).

Ejemplo
<html>
<head>
<title> Insertando imágenes.
</title>
</head>
<body text=white bgcolor=navy>
Alineación y dimensionamiento de imágenes 
<img src="zebra.jpg"> 
</body>
</html>

Html

Más contenido relacionado

La actualidad más candente

Similar a Html

Último

Html

Notas del editor