En esta lección se introduce el doctype HTML.
Este ejemplo muestra la estructura básica de un archivo HTML.
En esta lección se explica dicha estructura.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title>Hola Mundo</title> |
| 8 | </head> |
| 9 | <body> |
| 10 | 👽 ¡Hola Mundo! |
| 11 | </body> |
| 12 | </html> |
html
El elemento
html
representa una página. Es el elemento principal. Solo puede haber uno de
estos elementos en un archivo.
El elemento
body
tiene 2 elementos hijos:
head
y
body.
El atributo
lang
indica el código del idioma del documento y se aconseja anotarlo en todos
los documentos.
| 1 | <html lang="es"> |
| 2 | <head> |
| 3 | ... |
| 4 | </head> |
| 5 | <body> |
| 6 | 👽 ¡Hola Mundo! |
| 7 | </body> |
| 8 | </html> |
La especificación técnica del elemento
html
está en
https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
head
El elemento
head
define la forma de procesar el archivo.
Es uno de los elementos hijos de
html.
| 1 | <head> |
| 2 | <meta charset="UTF-8"> |
| 3 | <meta name="viewport" |
| 4 | content="width=device-width"> |
| 5 | <title>Hola Mundo</title> |
| 6 | </head> |
La especificación técnica del elemento
head
está en
https://html.spec.whatwg.org/multipage/semantics.html#the-head-element
Los caracteres son los diferentes símbolos de comunicación que puede usar una computadora, por ejemplo: letras, dígitos, signos de puntuación o emojis.
La codificación de un archivo es asignar a cada caracter del archivo una combinación de varios 1 y 0.
El elemento
meta
define información sobre el archivo, también conocida como
metadato.
El atributo
charset
define la codifcación del archivo.
El estándar UTF-8 es un sistema de codificación para muchos idiomas del mundo entero y está definido en https://home.unicode.org/.
| 1 | <meta charset="UTF-8"> |
La especificación técnica del elemento
meta
está en
https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element.
viewportEl metadato viewport indica como manejar la pantalla en navegadores de dispositivos móviles.
Si no se pone esta etiqueta y la página se muestra en un navegador móvil, aparece reducida en tamaño.
También se usa el elemento
meta.
El atributo
name
permite definir un metadato.
El atributo
content
permite definir el valor de un metadato.
El content
width
indica el ancho de la página en dispositivos móviles.
El valor
device-width
indica que el ancho de la página en dispositivos móviles es el ancho
del dispositivo.
| 1 | <meta name="viewport" |
| 2 | content="width=device-width"> |
title
El elemento con contenido
title
define el título de la página. No se muestra en el contenido de la
página, sino en las pestañas o en las barras de título de las ventanas
que muestran la página.
| 1 | <title>Hola Mundo</title> |
La especificación técnica del elemento
title
está en
https://html.spec.whatwg.org/multipage/semantics.html#the-title-element
body
El elemento
body
define el contenido que se muestra.
| 1 | <body> |
| 2 | 👽 ¡Hola Mundo! |
| 3 | </body> |
La especificación técnica del elemento
body
está en
https://html.spec.whatwg.org/multipage/sections.html#the-body-element
Se usa para representar caracteres que son complicados de incluir en el texto, o para evitar que sean interpretados como parte del lenguaje de marcas.
Inicia con
&
y termina con
;
| 1 | <body> |
| 2 | © < |
| 3 | </body> |
La especificación técnica de la referencia a caracter está en https://html.spec.whatwg.org/multipage/syntax.html#character-references
En esta lección se revisaron los siguientes elementos:
html.
head.
meta
title
body
También se revisaron los siguientes conceptos:
Especificar la codificación de caracteres.
Especificar el metadato
viewport.
Referencias a caracteres.