Los elementos pueden también tener atributos, que se ven así:
 | ||||
Los atributos contienen información adicional acerca del elemento, la
cual no quieres que aparezca en el contenido real del elemento. En este
caso, el atributo class permite darle al elemento un nombre
identificativo, que puede ser usado luego para apuntarle al elemento
información de estilo y demás cosas.
Un atributo debe tener siempre:
- Un espacio entre éste y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).
- El nombre del atributo, seguido por un signo de igual (=).
- Comillas de apertura y de cierre, encerrando el valor del atributo.
Anidando elementos:
Puedes también colocar elementos dentro de otros elementos — esto se llama anidamiento.
Si, por ejemplo, queremos resaltar una palabra del texto (en nuestro
ejemplo la palabra "muy"), podemos encerrarla en un elemento
<strong>, que significa que dicha palabra debe ser enfatizada: <p>Mi gato es <strong>muy</strong> gruñon.</p> Elementos vacíos:
Algunos elementos no poseen contenido, y son llamados elementos vacíos. Toma, por ejemplo, el elemento
<img> de nuestro HTML: <img src="images/firefox-icon.png" alt="Mi imagen de prueba">
Posee dos atributos, pero no hay etiqueta de cierre
</img> ni
contenido encerrado. Esto es porque un elemento de imagen no encierra
contenido al cual afectar. Su propósito es desplegar una imagen en la
página HTML, en el lugar en que aparece.Anatomía de un documento HTML:
Hasta ahora vimos lo básico de elementos HTML individuales, pero
éstos no son muy útiles por sí solos. Ahora veremos cómo los elementos
individuales son combinados para formar una página HTML entera.
Revisitemos el código de nuestro ejemplo en
index.html . <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi pagina de prueba</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
</body>
</html>
Tenemos:
<!DOCTYPE html>— el tipo de documento. Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser considerado bueno, lo que podía significar el chequeo automático de errores y algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.<html></html>— el elemento<html>. Este elemento encierra todo el contenido de la página entera, y, a veces, se le conoce como el elemento raíz (root element).<head></head>— el elemento<head>. Este elemento actúa como un contenedor de todo aquello que queremos incluir en la página HTML que no es contenido visible por los visitantes de la página. Incluye cosas como palabras clave, una descripción de la página que quieres que aparezca en resultados de búsquedas, CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.<body></body>— el elemento<body>. Encierra todo el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.<meta charset="utf-8">— este elemento establece el juego de caracteres que tu documento usará enutf-8, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.<title></title>— establece el título de tu página, que es el título que aparece en la pestaña del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.
No hay comentarios:
Publicar un comentario