032.1 Lección 1
Certificación: |
Conceptos básicos de desarrollo web |
---|---|
Versión: |
1.0 |
Tema: |
032 Marcado de documentos HTML |
Objetivo: |
032.1 Anatomía del documento HTML |
Lección: |
1 de 1 |
Introducción
HTML (HyperText Markup Language) es un lenguaje de marcado que le especifica a los navegadores web cómo estructurar y mostrar páginas web. La versión actual es la 5.0, que se lanzó en 2012. La sintaxis HTML está definida por el World Wide Web Consortium (W3C).
HTML es una habilidad fundamental en el desarrollo web, ya que define la estructura y gran parte de la apariencia de un sitio web. Si desea una carrera en desarrollo web, HTML es definitivamente un buen punto de partida.
Anatomía de un documento HTML
Una página HTML básica tiene la siguiente estructura:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
<!-- This is the Document Header -->
</head>
<body>
<!-- This is the Document Body -->
</body>
</html>
Ahora, analicemos en detalle.
Etiquetas HTML
HTML usa elementos y etiquetas para describir y dar formato al contenido. Las etiquetas constan de paréntesis angulares alrededor de un nombre de etiqueta, por ejemplo, <title>
. El nombre de la etiqueta no distingue entre mayúsculas y minúsculas, aunque el World Wide Web Consortium (W3C) recomienda usar letras minúsculas en las versiones actuales de HTML. Estas etiquetas se utilizan para crear elementos HTML. <title>
es un ejemplo de una etiqueta de apertura de un elemento HTML que define el título de un documento HTML. Sin embargo, un elemento tiene dos componentes más. Un elemento <title>
completo con este aspecto:
<title>My HTML Page</title>
Aquí, My HTML Page
sirve como elemento contenido, mientras que </title>
sirve como etiqueta de cierre que declara que este elemento está completo.
Note
|
No es necesario cerrar todos los elementos HTML; en tales casos, hablamos de elementos vacíos y elementos de cierre automáticos. |
Estos son los otros elementos HTML del ejemplo anterior:
<html>
-
Incluye todo el documento HTML. Contiene todas las etiquetas que componen la página. También indica que el contenido de este archivo está en lenguaje HTML. Su etiqueta de cierre correspondiente es
</html>
. <head>
-
Un contenedor para toda la metainformación relacionada con la página. La etiqueta de cierre correspondiente de este elemento es
</head>
<body>
-
Un contenedor para el cuerpo de la página y su representación estructural. Su etiqueta de cierre correspondiente es
</body>
.
Las etiquetas <html>
, <head>
, <body>
y <title>
son las denominadas etiquetas esqueleto, que proporcionan la estructura básica de un documento HTML. En particular, le especifican al navegador web que está leyendo una página HTML.
Note
|
De estos elementos HTML, el único que se requiere para validar un documento HTML es la etiqueta |
Como puede ver, cada página HTML es un documento bien estructurado e incluso podría denominarse un árbol, donde el elemento <html>
representa la raíz del documento y los elementos <head>
y <body>
son las primeras ramas. El ejemplo muestra que es posible anidar elementos: por ejemplo, el elemento <title>
está anidado dentro del elemento <head>
, que a su vez está anidado dentro del elemento <html>
.
Para asegurarse de que su código HTML sea legible y mantenible, asegúrese de que todos los elementos HTML estén cerrados correctamente y en orden. Los navegadores web aún pueden mostrar su sitio web como se esperaba, pero el anidamiento incorrecto de elementos y sus etiquetas es una práctica propensa a errores.
Finalmente, una mención especial va a la declaración doctype en la parte superior de la estructura del documento de ejemplo. <! DOCTYPE>
no es una etiqueta HTML, sino una instrucción para el navegador web que especifica la versión HTML utilizada en el documento. En la estructura básica del documento HTML mostrada anteriormente, se usó <! DOCTYPE html>
, especificando que se usa HTML5 en este documento.
Comentarios HTML
Al crear una página HTML, es una buena práctica insertar comentarios en el código para mejorar su legibilidad y describir el propósito de bloques de código más grandes. Se inserta un comentario entre las etiquetas <!--
y -->
, como se muestra en el siguiente ejemplo:
<!-- This is a comment. -->
<!--
This is a
multiline
comment.
-->
El ejemplo demuestra que los comentarios HTML se pueden colocar en una sola línea, pero también pueden abarcar varias. En cualquier caso, el resultado es que el texto entre <!--
y -->
es ignorado por el navegador web y, por lo tanto, no se muestra en la página HTML. Con base en estas consideraciones, puede deducir que la página HTML básica que se muestra en el párrafo “Anatomía de un documento HTML” no muestra ningún texto, porque las líneas <!-- This is the Document Header -->
y <!-- This is the Document Body -->
son solo dos comentarios.
Warning
|
Los comentarios no se pueden anidar. |
Atributos HTML
Las etiquetas HTML pueden incluir uno o más atributos para especificar detalles del elemento HTML. Una etiqueta simple con dos atributos tiene la siguiente forma:
<tag attribute-a="value-a" attribute-b="value-b">
Los atributos siempre deben establecerse en la etiqueta de apertura.
Un atributo consta de un nombre, que indica la propiedad que se debe establecer, un signo igual y el valor deseado entre comillas. Tanto las comillas simples como las dobles son aceptables, pero se recomienda utilizar comillas simples o dobles de forma coherente durante todo el proyecto. Es importante no mezclar comillas simples y dobles para un solo valor de atributo, ya que el navegador web no reconocerá las comillas mixtas como una sola unidad.
Note
|
Puede incluir un tipo de comillas dentro del otro tipo sin ningún problema. Por ejemplo, si necesita usar |
Los atributos se pueden categorizar en atributos centrales y atributos específicos como se explica en las siguientes secciones.
Atributos centrales
Los atributos centrales son atributos que se pueden utilizar en cualquier elemento HTML. Incluyen:
title
-
Describe el contenido del elemento. Su valor a menudo se muestra como una información sobre herramientas que se muestra cuando el usuario mueve el cursor sobre el elemento.
id
-
Asocia un identificador único con un elemento. Este identificador debe ser único dentro del documento, y el documento no se validará cuando varios elementos compartan el mismo
id
. style
-
Asigna propiedades gráficas (estilos CSS) al elemento.
class
-
Especifica una o varias clases para el elemento en una lista de nombres de clases separados por espacios. Se puede hacer referencia a estas clases en hojas de estilo CSS.
lang
-
Especifica el idioma del contenido del elemento mediante códigos de idioma de dos caracteres estándar ISO-639.
Note
|
El desarrollador puede almacenar información personalizada sobre un elemento definiendo un atributo llamado |
Atributos específicos
Otros atributos son específicos de cada elemento HTML. Por ejemplo, el atributo src
de un elemento HTML <img>
especifica la URL de una imagen. Hay muchos atributos más específicos, que se tratarán en las siguientes lecciones.
Encabezado del documento
El encabezado del documento define la metainformación con respecto a la página y se describe mediante el elemento <head>
. De forma predeterminada, el navegador web no muestra la información del encabezado del documento. Si bien es posible utilizar el elemento <head>
para contener elementos HTML que podrían mostrarse en la página, no se recomienda hacerlo.
Título
El título del documento se especifica mediante el elemento <title>
. El título definido entre las etiquetas aparece en la barra de título del navegador (web bowser) y es el nombre sugerido para los marcadores (bookmarks) cuando agrega a favoritos la página. También se muestra en los resultados del motor de búsqueda como el título de la página.
Un ejemplo de este elemento es el siguiente:
<title>My test page</title>
La etiqueta <title>
es obligatoria en todos los documentos HTML y debe aparecer solo una vez en cada documento.
Note
|
No confunda el título del documento con el encabezado de la página, que se encuentra en el cuerpo. |
Metadatos
El elemento <meta>
se utiliza para especificar la metainformación para describir con más detalle el contenido de un documento HTML. Es un elemento de cierre automático, lo que significa que no tiene etiqueta de cierre. Aparte de los atributos básicos que son válidos para cada elemento HTML, el elemento <meta>
también usa los siguientes atributos:
name
-
Define qué metadatos se describirán en este elemento. Se puede establecer en cualquier valor personalizado definido, pero los valores más utilizados son
autor
,descripción
ypalabras clave
. http-equiv
-
Proporciona un encabezado HTTP para el valor del atributo
content
. Un valor común esrefresh
, que se explicará más adelante. Si se establece este atributo, no se debe establecer el atributoname
. content
-
Proporciona el valor asociado con el atributo
name
ohttp-equiv
. charset
-
Especifica la codificación de caracteres para el documento HTML, por ejemplo,
utf-8
para configurarlo en formato de transformación Unicode: 8 bits.
Agregar un autor, una descripción y palabras clave
Usando la etiqueta <meta>
, puede especificar información adicional sobre el autor de la página HTML y describir el contenido de la página de esta manera:
<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">
Intente incluir una serie de palabras claves relacionadas con el contenido de la página en la descripción. Esta descripción es a menudo lo primero que ve un usuario cuando navega con un motor de búsqueda.
Si también desea proporcionar palabras claves adicionales relacionadas con la página web a los motores de búsqueda, puede agregar este elemento:
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">
Note
|
En el pasado, los spammers ingresaban cientos de palabras clave y descripciones no relacionadas con el contenido real de la página, de modo que también aparecían en búsquedas no relacionadas con los términos que buscaban las personas. Hoy en día, las etiquetas |
Redirigir una página HTML y definir un intervalo de tiempo para que el documento se actualice.
Con la etiqueta <meta>
, puede actualizar automáticamente una página HTML después de un período determinado (por ejemplo, después de 30 segundos) de esta manera:
<meta http-equiv="refresh" content="30">
Alternativamente, puede redirigir una página web a otra página web después de la misma cantidad de tiempo con el siguiente código:
<meta http-equiv="refresh" content="30; url=http://www.lpi.org">
En este ejemplo, el usuario es redirigido desde la página actual a http://www.lpi.org
después de 30 segundos. Los valores pueden ser los que desee. Por ejemplo, si especifica content="0; url=http://www.lpi.org"
, la página se redirige inmediatamente.
Especificar la codificación de caracteres
El atributo charset
especifica la codificación de caracteres para el documento HTML. Un ejemplo común es:
<meta charset="utf-8">
Este elemento especifica que la codificación de caracteres del documento es utf-8
, que es un conjunto de caracteres universal que incluye prácticamente cualquier caracter de cualquier lenguaje humano. Por lo tanto, al usarlo, evitará problemas al mostrar algunos caracteres que pueda tener al usar otros conjuntos de caracteres como ISO-8859-1 (el alfabeto latino).
Otros ejemplos útiles
Otras dos aplicaciones útiles de la etiqueta <meta>
son:
-
Configurar cookies para realizar un seguimiento de los visitantes del sitio.
-
Tome el control de la ventana gráfica (el área visible de una página web dentro de la ventana de un navegador web), que depende del tamaño de la pantalla del dispositivo del usuario (por ejemplo, un teléfono móvil o una computadora).
Sin embargo, estos dos ejemplos están más allá del alcance del examen y su estudio se deja al lector curioso para que lo explore en otro lugar.
Ejercicios guiados
-
Para cada una de las siguientes etiquetas, indique la etiqueta de cierre correspondiente:
<body>
<head>
<html>
<meta>
<title>
-
¿Cuál es la diferencia entre una etiqueta y un elemento? Utilice esta entrada como referencia:
<title>HTML Page Title</title>
-
¿Cuáles son las etiquetas entre las que se debe colocar un comentario?
-
Explique qué es un atributo y proporcione algunos ejemplos para la etiqueta
<meta>
.
Ejercicios de exploración
-
Cree un documento HTML versión 5 simple con el título
My first HTML document
y solo un párrafo en el cuerpo, que contenga el textoHello World
. Utilice la etiqueta de párrafo<p>
en el cuerpo. -
Agregue el autor (
Kevin Author
) y la descripción (This is my first HTML page.
) del documento HTML. -
Agregue las siguientes palabras claves relacionadas con el documento HTML:
HTML
,Example
,Test
yMetadata
. -
Agregue el elemento
<meta charset="ISO-8859-1">
al encabezado del documento y cambie el textoHello World
a japonés (こんにちは世界
). ¿Qué pasa? ¿Cómo puede solucionar el problema? -
Después de volver a cambiar el texto del párrafo a
Hello World
, redirija la página HTML ahttps://www.google.com
después de 30 segundos y agregue un comentario que explique esto en el encabezado del documento.
Resumen
En esta lección aprendió:
-
El papel de HTML
-
El esqueleto HTML
-
La sintaxis HTML (etiquetas, atributos, comentarios)
-
El encabezado HTML
-
Las metaetiquetas
-
Cómo crear un documento HTML simple
En esta lección se discutieron los siguientes términos:
<!DOCTYPE html>
-
La etiqueta de declaración.
<html>
-
El contenedor de todas las etiquetas que componen la página HTML.
<head>
-
El contenedor para todos los elementos de la cabecera.
<body>
-
El contenedor de todos los elementos del cuerpo.
<meta>
-
La etiqueta de metadatos, que se utiliza para especificar información adicional para la página HTML (como autor, descripción y codificación de caracteres).
Respuestas a los ejercicios guiados
-
Para cada una de las siguientes etiquetas, indique la etiqueta de cierre correspondiente:
<body>
</body>
<head>
</head>
<html>
</html>
<meta>
None
<title>
</title>
-
¿Cuál es la diferencia entre una etiqueta y un elemento? Utilice esta entrada como referencia:
<title>HTML Page Title</title>
Un elemento HTML consta de una etiqueta de inicio, una etiqueta de cierre y todo lo que hay entre ellas. Una etiqueta HTML se utiliza para marcar el comienzo o el final de un elemento. Por lo tanto,
<title>HTML Page Title</title>
es un elemento HTML, mientras que<title>
y</title>
son las etiquetas de inicio y cierre respectivamente. -
¿Cuáles son las etiquetas entre las que se debe colocar un comentario?
Se inserta un comentario entre las etiquetas
<!--
y-->
y se puede colocar en una sola línea o puede abarcar varias líneas. -
Explique qué es un atributo y proporcione algunos ejemplos para la etiqueta
<meta>
.Un atributo se utiliza para especificar con mayor precisión un elemento HTML. Por ejemplo, la etiqueta
<meta>
usa el par de atributosname
ycontent
para agregar el autor y la descripción de una página HTML. En su lugar, usando el atributocharset
puede especificar la codificación de caracteres para el documento HTML.
Respuestas a los ejercicios de exploración
-
Cree un documento HTML simple versión 5 con el título
My first HTML document
y solo un párrafo en el cuerpo que contenga el textoHello World
. Use la etiqueta de párrafo<p>
en el cuerpo.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> </head> <body> <p>Hello World</p> </body> </html>
-
Agregue el autor (
Kevin Author
) y la descripción (This is my first HTML page.
) del documento HTML.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> </head> <body> <p>Hello World</p> </body> </html>
-
Agregue las siguientes palabras clave relacionadas con el documento HTML:
HTML
,Example
,Test
yMetadata
.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> <meta name="keywords" content="HTML, Example, Test, Metadata"> </head> <body> <p>Hello World</p> </body> </html>
-
Agregue el elemento
<meta charset="ISO-8859-1">
al encabezado del documento y cambie el textoHello World
a japonés (こんにちは世界
). ¿Qué pasa? ¿Cómo puede solucionar el problema?Si el ejemplo se lleva a cabo como se describe, el texto en japonés no se muestra correctamente. Esto se debe a que ISO-8859-1 representa la codificación de caracteres del alfabeto latino. Para ver el texto, necesita cambiar la codificación de caracteres, usando por ejemplo UTF-8 (
<meta charset="utf-8">
). -
Después de cambiar el texto del párrafo a
Hello World
, redirija la página HTML ahttps://www.google.com
después de 30 segundos y agregue un comentario que explique esto en el encabezado del documento.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> <meta name="keywords" content="HTML, Example, Test, Metadata"> <meta charset="utf-8"> <!-- The page is redirected to Google after 30 seconds --> <meta http-equiv="refresh" content="30; url=https://www.google.com"> </head> <body> <p>Hello World</p> </body> </html>