HTML - basic - Lección nº 2
La estructura de un documento HTML
Un documento HTML debe contener las siguientes etiquetas:
<! DOCTYPE html>: define que el documento es HTML5 (actualmente la versión HTML más reciente). Cada archivo HTML comienza con esto.
<html> </html> - marca el inicio y final del documento HTML.
<head> </head> - alberga el encabezado del documento; aquí colocamos el título del documento, otras referencias. Las descripciones incluidas aquí no aparecen dentro de la ventana del navegador.
<body> </body> - incluye el contenido que aparecerá dentro de la ventana del navegador.
Las etiquetas que se colocarán en el encabezado. (Entre las etiquetas <head>):
<title> </title> - el texto adjunto aparece en la barra de título del navegador.
<link> - se refiere a un archivo externo.
<link rel="icon" href="la ruta al icono" type="image/ico"> - Puede usarse para colocar una imagen pequeña antes del texto del título en la barra de título del navegador.
Insertar un comentario en un documento HTML:
Se usa para dejar comentarios en nuestro código, que no deben aparecer en el navegador: tenemos que marcar nuestro texto. Los comentarios pueden ayudar más adelante si queremos continuar el trabajo en nuestra página web.
<!-- escribe tu comentario aquí -->
<! DOCTYPE html>: define que el documento es HTML5 (actualmente la versión HTML más reciente). Cada archivo HTML comienza con esto.
<html> </html> - marca el inicio y final del documento HTML.
<head> </head> - alberga el encabezado del documento; aquí colocamos el título del documento, otras referencias. Las descripciones incluidas aquí no aparecen dentro de la ventana del navegador.
<body> </body> - incluye el contenido que aparecerá dentro de la ventana del navegador.
Las etiquetas que se colocarán en el encabezado. (Entre las etiquetas <head>):
<title> </title> - el texto adjunto aparece en la barra de título del navegador.
<link> - se refiere a un archivo externo.
<link rel="icon" href="la ruta al icono" type="image/ico"> - Puede usarse para colocar una imagen pequeña antes del texto del título en la barra de título del navegador.
Insertar un comentario en un documento HTML:
Se usa para dejar comentarios en nuestro código, que no deben aparecer en el navegador: tenemos que marcar nuestro texto. Los comentarios pueden ayudar más adelante si queremos continuar el trabajo en nuestra página web.
<!-- escribe tu comentario aquí -->
Ejercicios
1. Entre los archivos descargados se encuentra uno llamado index.html. Ábrelo en Notepad ++ y escribe el texto Coders Work en la etiqueta <title>.
Ver el resultado
2. En el mismo archivo index.html, usa Notepad ++ para insertar el icono llamado tw.ico y así establecer un icono en la página web, que aparezca antes del título de la página web en la barra de título del navegador. Usa la etiqueta <link> para resolverlo.
Ver el resultado
3. Inserta el siguiente texto entre las etiquetas <body> </body>: Coders Work - My name is Mike and I’ll tell you my story about how I draw-up a course to help all those who want to improve their employability by using their passive IT skills.
Ver el resultado
4. Escribe algunos comentarios html y verifica si aparece algo en tu página después de la actualización.
Ver el resultado
Cuestionario
1. ¿Cuál de las siguientes afirmaciones con respecto a la estructura de un documento HTML es verdadera?
2. Si movemos el archivo de imagen llamado cw.ico a una carpeta llamada imágenes junto a nuestro archivo index.html, la forma correcta de la etiqueta <link> para mostrar la imagen en la barra de título del navegador es:
3. El texto incluido dentro de las etiquetas <title> en un documento HTML:
4. ¿Cuál de las siguientes afirmaciones relacionadas con la etiqueta <link> es verdadera?
5. Si en un documento HTML ves este texto, ¿cómo aparecerá esto en la ventana del navegador?
<!--must continue here -->
<!--must continue here -->
