ESTRUCTURA DEL HTML Y ELEMENTOS 1
I. Estructura básica de un documento HTML
La estructura básica de un documento HTML está formada por dos partes: el encabezado
HEAD y el cuerpo BODY. Ambas partes se incluyen dentro del elemento HTML.
Elemento HTML son las etiquetas que determinan el inicio y el fin de un documento
HTML. Su formato es el siguiente: <HTML> <HTML/>.
Encabezado de un documento de HTML: elemento HEAD contiene información
general, o metainformación, sobre el documento. El contenido de esta parte no aparece en
la presentación final del documento. El encabezado de un documento HTML es como el
tema principal de una portada de un documento. Los motores de búsqueda utilizan la
metainformación para indexar las páginas web. Además de la metainformación, el
elemento <HEAD> puede incluir la información de contacto del creador, las secuencias de
comandos, las hojas de estilo, comentarios, y lo que es más importante, el título de la
página. Su formato es: <HEAD>…</HEAD>.
El elemento HEAD a su vez agrupa una serie de directivas, tales como:
Elemento TITLE: define el título del documento, que normalmente, aparece en la barra
de título del explorador Web que se esté utilizando. Este elemento es obligatorio, es
decir, todos los documentos deben tener un elemento TITLE. El título no puede
contener vínculos de hipertexto o comandos especiales de marcas, debe ser texto
simple. Se recomienda que sea corto, generalmente menos de 64 caracteres. Su
formato es: <TITLE> Título del documento </TITLE> .
Ejemplo: <TITLE>Introducción a HTML</TITLE>
Elemento LINK: debe encontrarse dentro del elemento HEAD de un documento de
HTML. Se utiliza para indicar una relación entre el documento y otros documentos u
objetos. Por tanto, un documento puede tener varios elementos LINK, para
relacionarlos con tantos documentos u objetos se desee. Este elemento es vacío, es
decir, no termina con </LINK>. Normalmente se utiliza para indicar el autor, los
índices y los documentos relacionados, entre otros. Su formato es: <LINK
HREF=”archivo.html” REL=”tipo de relación”>
Ejemplo: <HEAD>
ESTRUCTURA DEL HTML Y ELEMENTOS 2
<LINK HREF=”index.html” REL=”principal”>
<LINK HREF=”toc.html” REL=”contenido”>
<LINK HREF=”historia.html” REL=”siguiente”>
</HEAD>
Elemento BASE: especifica una dirección URL absoluta que se utiliza para
proporcionar información del servidor y del directorio a las direcciones URL que se
utilicen en el documento y se especifiquen parcialmente. Se conocen como vínculos
relativos. Su formato es: <BASE HREF=”dirección URL”>
Ejemplo: <HEAD>
<BASE HREF=http://latina.com/archivos/index.html>
……
</HEAD>
Elementos principales del cuerpo de un documento HTML: Elemento BODY
Elemento BODY: engloba todo el contenido de un documento. Su formato es el
siguiente: <BODY> contenido del documento </BODY>
Solo puede aparecer un <BODY> por documento. Como el elemento <BODY>
delimita el propio documento, sus atributos se utilizan principalmente para realizar
cambios en el documento como, por ejemplo, el establecimiento de las imágenes de
fondo, los colores de fondo y el color del texto y del vínculo.
A continuación se detallan los diversos atributos que forman parte del elemento
<BODY>:
Atributo BACKROUND: permite especificar un archivo de imagen que se
desea utilizar como fondo, a modo de marca de agua, en el cuerpo del
documento. Su formato es:
<BODY BACKGROUND=”nombre de la imagen”>
Se recomienda que los formatos de las imágenes sean GIF o JPEG, ya que los
otros formatos existentes hacen a las imágenes muy pesadas.
Otros atributos del elemento BODY: estos atributos resultan muy importantes a
la hora de establecer la forma en que se visualizará la página en el explorador.
Existen los siguientes atributos:
o BGCOLOR=”#rrggbb”: establece el color de fondo del documento al
valor especificado de color RGB (Red Green Blue), donde RR, GG y BB
ESTRUCTURA DEL HTML Y ELEMENTOS 3
son los códigos hexadecimales para los niveles de rojo, verde y azul, con
valores posibles de 0 a 255, esto es, de 00 a FF en hexadecimal. El
color “000000” es negro, mientras que “FFFFFF” es blanco.
o TEXT=”#rrggbb”: establece el color predeterminado de texto al
especificado en el valor de color RGB.
o LINK=”#rrggbb”: establece el color predeterminado de anclas de
hipertexto no visitadas al especificado en el valor de color RGB.
o VLINK=”#rrggbb”: establece el color predeterminado de enlaces de
hipertexto visitados con anterioridad al especificado en el valor de color
RGB.
o ALINK=”#rrggbb”: establece el color predeterminado de los vínculos
de hipertexto en el momento de seleccionarlo al especificado en el valor
de color RGB.
II. Etiquetas básicas en HTML
Tamaños y tipos de letra
Elemento Hn (Encabezados): para definir distintos tamaños de letra, en HTML se
utiliza el elemento <Hn> </Hn> donde n es un nùmero que puede variar entre 1 y
6, siendo 1 el tamaño mayor. Se escribiràn así:
<H1> Texto de prueba (H1)</H1>
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>
<H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5>
<H6> Texto de prueba (H6)</H6>
Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que después del
cierre automáticamente el visualizador inserta un salto de párrafo.
Ejemplo: <H1> Texto en H1</H1> <H3> Texto en H3 </H3>
se visualizará: Texto en H1
Texto en H3
Elemento FONT: es otra forma de cambiar los tamaños de letra; con el atributo
SIZE, que es un número entre 1 y 7. El valor por defecto del texto es 3, por lo que
valor puede ser positivo (+) o negativo (-) respecto a 3. una gran ventaja de esta
ESTRUCTURA DEL HTML Y ELEMENTOS 4
notación respecto a la anterior es que no se produce un salto de párrafo después de
cada cambio, por lo que pueden hacerse cosas como esta:
<FONT SIZE=3>A</FONT><FONT SIZE=4>A</FONT><FONT SIZE=5>A</FONT>
<FONT SIZE=6>A</FONT><FONT SIZE=7>A</FONT><FONT SIZE=6>A</FONT>
<FONT SIZE=5>A</FONT><FONT SIZE=4>A</FONT><FONT SIZE=3>A</FONT>
Se puede cambiar el tamaño por defecto (3) de toda la página con el elemento
<BASEFONT SIZE=valor>. El texto tomará el tamaño indicado por valor y lo mantendrá
hasta que aparezca otro elemento <BASEFONT SIZE=valor> y lo restaure o lo cambie por
otro diferente.
Este elemento posee otros atributos, tales como:
Atributo FACE: permite elegir tipos de letra entre los varios de que dispone por
defecto Windows. Este atributo permite forzar el tipo de letra que el diseñador de
la página quiere que vea el cliente, sin importar el que por defecto tenga establecido
el visualizador.
Ejemplo:
<FONT FACE=”arial”>Texto de prueba 12345 con tipo ARIAL</FONT>
<FONT FACE=”courier”>Texto de prueba 12345 con tipo COURIER</FONT>
<FONT FACE=”script”>Texto de prueba 12345 con tipo SCRIPT</FONT>
el resultado que se visualizará es el siguiente:
Texto de prueba 12345 con tipo ARIAL Texto de pueba 12345 con tipo
COURIER Texto de prueba 12345 con tipo SCRIPT
Este atributo es compatible con todos los demás ya conocidos, como color y tamaño.
Ejemplo: <FONT FACE=”verdanal” SIZE=6 color=”red”>Texto de prueba 12345 con tipo
VERDANA</FONT>
Elemento P (párrafo): para definir los saltos de párrafo. Se utiliza <P> </P>, aunque no
suele utilizarse el cierre </P>.
ESTRUCTURA DEL HTML Y ELEMENTOS 5
El elemento <P> admite cuatro atributos: ALIGN=LEFT (por defecto),
ALIGN=RIGHT, ALIGN=CENTER Y ALIGN=JUSTIFY.
Ejemplo:
Podemos establecer un color base para todas tus tablas o para todos tus títulos, uno para el fondo y otro
para el título en las tablas o en tus logotipos. <P>Después elegimos un color contrastante con el que
tienes de base para cada una de las secciones.
<P ALIGN=LEFT>El rojo es el único color brillante de verdad y puro en su composición. es exultante y
agresivo.
<P ALIGN=RIGHT>El rojo es el único color brillante de verdad y puro en su composición. es exultante y
agresivo.
<P ALIGN=CENTER>El rojo es el único color brillante de verdad y puro en su composición. es exultante y
agresivo.
<P ALIGN=JUSTIFY>El rojo es el único color brillante de verdad y puro en su composición. es exultante y
agresivo.
<br> salto de línea: El efecto <br> no deja línea vacía, sin embargo <P> si deja.
Ejemplo
Podemos establecer un color base para todas tus tablas , uno para el fondo y otro para el título .
<br>Después elegimos un color contrastante con el que tienes de base para cada una de las secciones.
III. Elemento DIV: se comporta de forma parecida a <BR>, la diferencia es que éste admite los
mismos atributos que <P>: ALIGN=LEFT, ALIGN=RIGHT, ALIGN=CENTER Y
ALIGN=JUSTIFY.aquí si se utiliza el cierre </DIV>.
EJEMPLO
<DIV ALIGH=LEFT>
Color fundamental, ligado al principio de la vida, sugiere vitalidad, entusiasmo, pasión,
agitación, fuerza, sexo, calor, fuego, estando asociado con sentimientos enérgicos, con
la excitación apasionada o erótica. Es el color más sensual de todo el círculo cromático.
</DIV>
ESTRUCTURA DEL HTML Y ELEMENTOS 6
Elemento BLOCKQUOTE: sirve para presentar párrafos adentrados. Su formato
es <BLOCKQUOTE> </BLOCKQUOTE>, debe utilizarse el cierre por cada
BLOCKQUOTE utilizado.
Ejemplo
<BLOCKQUOTE>
Es el color más sensual de todo el círculo cromático
<BLOCKQUOTE>
Es el color más sensual de todo el círculo cromático
Es el color más sensual de todo el círculo cromático
</BLOCKQUOTE>
</BLOCKQUOTE>
Elemento HR: es un separador de bloques <HR> (Horizontal Rule). Despliega
una línea horizontal. Admite dos parámetros: WIDTH (define la longitud de la
línea) y SIZE (define la anchura). Se puede usar los atributos ALING=CENTER
(por defecto), ALIGH=LEFT, ALIGH=RIGHT. No es necesario usar los dos a la
vez.
Ejemplo:
<HR WIDTH=400 SIZE=5>
<HR WIDTH=80% SIZE=5>
ESTRUCTURA DEL HTML Y ELEMENTOS 7
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
Elemento HR: es un separador de bloques <HR> (Horizontal Rule). Despliega
una línea horizontal. Admite dos parámetros: WIDTH (define la longitud de la
línea) y SIZE (define la anchura). Se puede usar los atributos ALING=CENTER
(por defecto), ALIGH=LEFT, ALIGH=RIGHT. No es necesario usar los dos a la
vez.
Ejemplo:
<HR WIDTH=400 SIZE=5>
<HR WIDTH=80% SIZE=5>
<HR WIDTH=80% SIZE=5 ALIGN=LEFT>
Otros efectos en el texto
Efecto Formato
Texto negrita <B>nnnnnnnnnnnn</B>
Texto resaltado <STRONG>SSSSSS</STRONG>
Texto subrayado <U>ssssssssss</U>
Texto intermitente <BLINK>BBBBBB</BLINK>
Texto superindice <SUP>FFFFFFF</SUP>
Texto subindice <SUB>FFFFFFF</SUB>
Texto grande <BIG>JJJJJJJJJ</BIG>
Texto pequeño <SMALL>JJJJJJJJJ</SMALL>
ESTRUCTURA DEL HTML Y ELEMENTOS 8
Elemento CENTER: una o varias líneas de texto, pueden centrase con respecto a
los márgenes de la ventana, lo cual afectará sólo al texto que hay entre
<CENTER> y </CENTER>, pero no a todo el párrafo.
Ejemplo
texto texto texto texto texto texto texto texto texto texto
<CENTER>texto texto texto texto texto texto </CENTER>
texto texto texto texto texto texto texto texto texto texto
Creación de enlaces (links): con el elemento <A> (por Anchor, en inglés =
ancla o punto de anclaje) puede navegar por 1 o varios documentos, que puede
residir en cualquier parte, a esto se le llama hipertexto.
Para especificar de manera uniforme el objeto al que apunta un vínculo, debe
utilizarse una forma estandarizada denominada URL (Uniform Resource Locator,
Localizador Uniforme de Recursos). El URL esta formado por los siguientes
elementos: servicio://máquina/ruta
en donde:
servicio:// es un protocolo que consiste en un nombre que identifica el tipo de
servicio que se proporciona en el destino del link.
máquina es la identificación del servidor en el cual está situado el objeto al que
apunta el vínculo. Puede ser simplemente el nombre de un equipo
(www.miservidor.pa) o también un nombre y un puerto (www.miservidor.pa:8080).
Ejemplo:
<A HREF=”http://www.google.com”> Link a buscador </A>
se verá así: Link a buscador
El elemento <A> tiene atributos como: HREF (se le asigna el valor que aparece
entre comillas. El texto sobre el que se monta el enlace es Link a buscador) y
ESTRUCTURA DEL HTML Y ELEMENTOS 9
NAME (usado para definir algo así como “un punto de aterrizaje” en cualquier
linea documento de destino. Nos aparecerá desde la línea deseada y no desde el
inicio del documento)
EJEMPLO:
- ver el ejemplo anterior.
- Ir al índice <A HREF=”indice.htm”><img src=”estrella.gif”> </A>
se verá así: Ir al índice
con NAME, en el documento activo:
<A HREF=”http://www.paginaxxxxx.pa/miarchivo.htm#punto1”> Ir al punto 1 </A>
en el documento destino: <A NAME=”punto1”></A>}
Insertar imagen: se utiliza el elemento <IMG>
EJEMPLO
<IMG SRC=”GGGGHHH.gif” ALIGN=TOP> Imagen alineada a la izq y texto
alineado arriba)
<IMG SRC=”GGGGHHH.gif” ALIGN=BOTTOM> (Imagen alineada a la izq y texto
alineado a bajo)
<IMG SRC=”GGGGHHH.gif” ALIGN=MIDDLE> (Imagen alineada a la izq y texto
alineado al centro)
