Elementos del HTML
Etiquetas
Cada uno de los elementos de un documento HTML será iniciado con una etiqueta. Las etiquetas son palabras definidas por el lenguaje y que encerraremos siempre entre paréntesis angulares (<>). Algunas etiquetas no incluyen nada más.
<BR>
es un elemento completo que introduce un salto de línea.
Otros elementos encierran un contenido. En ese caso habrá una etiqueta de apertura y una etiqueta de cierre. El contenido del elemento será lo que haya entre ambas. La etiqueta de cierre será igual a la de apertura, pero incluyendo el símbolo / justo después de abrir el paréntesis angular.
<TITLE>Título del Documento</TITLE>
Etiqueta de apertura: <TITLE>
Contenido del elemento: Título del Documento
Etiqueta de cierre: </TITLE>
El contenido de un elemento puede incluir, no sólo texto como en el ejemplo, sino nuevos elementos. Cuando esos elementos tengan también apertura y cierre, se estará creando una estructura anidada, en la que siempre se habrá de cerrar en primer lugar la última etiqueta abierta.
<HEAD> <TITLE>Título del Documento</TITLE> </HEAD>
<HEAD>
<TITLE>
Ejemplo de estructura mal anidada. No se hace así
</HEAD>
</TITLE>
El ejemplo anterior está mal anidado porque la etiqueta TITLE se abre en último lugar y por tanto ha de ser la primera en cerrarse.
Nota: La recomendación para HTML 4.01 pide que las etiquetas se escriban siempre en mayúsculas. Aunque escribirlas de otro modo probablemente no cree ningún problema para visualizar los documentos en la mayoría de los navegadores, durante el curso procuraremos seguir las recomendaciones del standard siempre que sea posible. Dicho de otra manera, en los ejercicios y prácticas de este curso, escribir las etiquetas en minúsculas o de forma mixta será considerado un error.
Atributos
Algunas etiquetas permiten concretar su acción mediante atributos. Estos atributos depende de la etiqueta y son en su mayoría opcionales, pero en algunas ocasiones encontraremos etiquetas con atributos obligatorios. Los atributos son también palabras definidas por el lenguaje que escribiremos en minúsculas según la recomendación, en la etiqueta de apertura, justo antes del paréntesis angular de cierre.
<A href=”fichero.html”>Contenido del elemento</A>
En este ejemplo, la etiqueta A se acompaña de un atributo href al que se asigna el valor fichero.html
Una misma etiqueta puede tener varios atributos separados por espacios. No todos los atributos necesitan que se les asigne un valor.
<IMG src="juego.gif" ismap alt="diana">
En este ejemplo IMG se acompaña de 3 atributos: ismap al que no se asigna ningún valor, src y alt
El valor que se asigna a un atributo puede encerrarse entre comillas dobles, como en los ejemplos, o bien, entre comillas simples, siempre que no se mezclen. Puede necesitarse usar las comillas simples si la cadena de texto del valor incluye comillas dobles.
La definición permite evitar las comillas cuando el valor sólo incluye los siguientes caracteres: letras mayúsculas o minúsculas, dígitos, punto, guión, guión bajo y dos puntos (azAZ09.-_:), sin embargo es una buena práctica poner siempre los valores entre comillas.
Comentarios
Como en cualquier otro lenguaje que deba interpretar un ordenador, es posible incluir comentarios destinados al propio autor o a quienes deseen revisar el documento posteriormente. Estos comentarios no tienen ningún efecto sobre la visualización, de hecho, se ignoran. Es una buena práctica incluir comentarios para aclarar detalles del documento que no se entiendan a simple vista, especialmente cuando se trabaje en grupo o el encargado del mantenimiento sea una persona distinta. Pero incluso cuando se trate de una sola persona, los comentarios ayudan a entender lo que se hizo hace meses o incluso años.
Los comentarios se encierran entre los símbolos <!-- y -->
<!-- Esto es un comentario. El navegador lo ignora, pero para ti puede ser útil -->
Texto libre
Al margen de las etiquetas, los atributos y los valores, fuera de los paréntesis angulares, nuestro documento tendrá texto, información que queremos visualizar. Este texto es al que nos referimos con texto libre.
Hay que tener en cuenta que el navegador web no lo visualizará exactamente como lo introduzcamos, en particular, ignorará los saltos de línea y cuando encuentre una secuencia de espacios y/o tabuladores los convertirá en un solo espacio.
Imagenes
Imagen mapa de bits
Imagen vectorial
