En esta lección se presenta el lenguaje SGML.
Es un lenguaje que consta de texto y marcas, también conocidas como etiquetas.
Las
marcas
Inician con el caracter
<
y terminan con
>.
Indican como desplegar el texto; por ejemplo, el texto entre
<h1>
y
</h1>
resalta más.
| 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>Ejemplo</title> |
| 8 | </head> |
| 9 | <body> |
| 10 | <h1>Ejemplo</h1> |
| 11 | <p>Hola mundo.👶</p> |
| 12 | </body> |
| 13 | </html> |
Es una etiqueta que define las etiquetas permitidas en un documento y sus características.
Es la marca inicial de un archivo SGML y para algunos navegadores debe ser la primera línea del archivo.
Aparte de HTML hay otros tipos de documentos; por ejemplo SVG.
| 1 | <!DOCTYPE html> |
El DOCTYPE de HTML5 está definido de forma muy técnica en https://html.spec.whatwg.org/multipage/.
Inicia con
<!--
y termina con
-->.
Puede ocupar más de un renglón.
No puede llevar 2 guiones seguidos
(--).
No es procesado por el lenguaje.
No se despliega en la página.
Permite añadir información para entender mejor el código.
Normalmente se pone al final de la línea que explican o una línea antes.
| 1 | <!DOCTYPE html> |
| 2 | <!-- |
| 3 | Comentario acerca de html. |
| 4 | --> |
| 5 | <html lang="es"> |
| 6 | <head> |
| 7 | <meta charset="UTF-8"><!--meta--> |
| 8 | </html> |
El contenido y otras partes de la página se representan con texto.
La forma de mostrar el texto se puede cambiar usando marcas.
| 1 | <!DOCTYPE html> |
| 2 | ❤Este texto es el contenido 📖 de |
| 3 | la página!!!! |
Es un objeto que representa una forma de procesar el texto.
Normalmente se indican usando marcas.
Cada elemento tiene asociado un tipo, que representa su forma de procesamiento.
Cada tipo de elemento tiene un funcionamiento preestablecido por el navegador, aunque también es posible crear elementos personalizados.
El tipo es la primera palabra de la etiqueta.
| 1 | <!DOCTYPE html> |
| 2 | <!-- Elemento de tipo html--> |
| 3 | <html lang="es"> |
| 4 | <!-- Elemento de tipo head--> |
| 5 | <head> |
| 6 | <!-- Elemento de tipo meta--> |
| 7 | <meta charset="UTF-8"> |
| 8 | </head> |
| 9 | </html> |
Los elementos tienen preestablecidas características llamadas atributos.
Cada atributo tiene asociado un nombre y un valor.
Los atributos tienen valores predeterminados que se pueden modificar en el código.
Los atributos se colocan en una etiqueta después del tipo de elemento.
Se coloca el nombre del atributo, seguido por el signo
=,
seguido por el valor entre comillas
(").
Hay atributos que solo pueden valer
true
o
false,
también llamados booleanos. En este caso, solo se pone el nombre del
atributo y se asume que vale
true;
cuando valen
false,
simplemente no se ponen.
Hay un atributo especial, llamado
id,
que pueden definir todos los elementos y los
identifica de forma única, para HTML, CSS y JavaScript. Su valor no
se puede repetir en ningún otro elemento del documento.
| 1 | <!DOCTYPE html> |
| 2 | <!-- |
| 3 | El atributo |
| 4 | id |
| 5 | No se puede repetir en el |
| 6 | documento y vale |
| 7 | raíz |
| 8 | |
| 9 | El atributo |
| 10 | lang |
| 11 | tiene el valor |
| 12 | es |
| 13 | |
| 14 | El atributo booleano |
| 15 | hidden |
| 16 | tiene el valor |
| 17 | true |
| 18 | --> |
| 19 | <html id="raíz" lang="es" hidden> |
| 20 | </html> |
Lleva:
tipo,
atributos (opcionalmente) y
contenido (opcionalmente), que incluye texto y más etiquetas.
Se escribe usando 2 tipos de etiquetas:
Inicia la definición del elemento.
Lleva el tipo y opcionalmente los atributos.
Termina la definición del elemento.
Inicia con / y luego el tipo del elemento que cierra.
El contenido se coloca entre la etiquetas inicial y final.
El doctype determina si un elemento lleva contenido.
| 1 | <!DOCTYPE html> |
| 2 | <!-- |
| 3 | html es un elemento con contenido. |
| 4 | Puede contener comentarios, otros |
| 5 | elementos y texto. |
| 6 | --> |
| 7 | <html lang="es"><!--Inicia html--> |
| 8 | <!-- |
| 9 | head es contenido de html. |
| 10 | También es elemento con contenido. |
| 11 | --> |
| 12 | <head> <!-- Inicia head --> |
| 13 | <!-- |
| 14 | meta es contenido de head. |
| 15 | No es un elemento con contenido. |
| 16 | --> |
| 17 | <meta charset="UTF-8"> |
| 18 | </head> <!-- Termina head --> |
| 19 | 💪Este texto es contenido de html. |
| 20 | </html><!-- Termina html --> |
Lleva:
tipo
atributos (opcionalmente)
Se escribe usando solo una etiqueta inicial.
El doctype determina si un elemento no lleva contenido.
| 1 | <!DOCTYPE html> |
| 2 | <!-- |
| 3 | meta es un tipo de elemento sin |
| 4 | contenido. |
| 5 | --> |
| 6 | <meta charset="UTF-8"> |
| 7 | <meta name="viewport" |
| 8 | content="width=device-width"> |
| 9 | <!-- |
| 10 | br es un tipo de elemento sin |
| 11 | contenido. |
| 12 | --> |
| 13 | <br> |
Un elemento es padre de todos los textos, comentarios, y elementos que formen parte de su contenido.
| 1 | <!DOCTYPE html> |
| 2 | <!-- |
| 3 | El elemento html es padre de los |
| 4 | elementos head y body. |
| 5 | --> |
| 6 | <html lang="es"> |
| 7 | <!-- |
| 8 | El elemento head es padre de los |
| 9 | 2 elementos meta y del title. |
| 10 | --> |
| 11 | <head> |
| 12 | <meta charset="UTF-8"> |
| 13 | <meta name="viewport" |
| 14 | content="width=device-width"> |
| 15 | <title>Ejemplo</title> |
| 16 | </head> |
| 17 | <!-- |
| 18 | El elemento body es padre de los |
| 19 | elementos h1 y p. |
| 20 | --> |
| 21 | <body> |
| 22 | <h1>Ejemplo</h1> |
| 23 | <p>Hola mundo.👶</p> |
| 24 | </body> |
| 25 | </html> |
Un elemento es hijo de otro elemento si pertenece al contenido de este último.
| 1 | <!DOCTYPE html> |
| 2 | <!-- |
| 3 | El elemento html no es hijo de |
| 4 | nadie. |
| 5 | --> |
| 6 | <html lang="es"> |
| 7 | <!-- |
| 8 | El elemento head es hijo del |
| 9 | elemento html. |
| 10 | --> |
| 11 | <head> |
| 12 | <!-- |
| 13 | Los 2 elementos meta y el title |
| 14 | son hijos del elemento head. |
| 15 | --> |
| 16 | <meta charset="UTF-8"> |
| 17 | <meta name="viewport" |
| 18 | content="width=device-width"> |
| 19 | <title>Ejemplo</title> |
| 20 | </head> |
| 21 | <!-- |
| 22 | El elemento body es hijo del |
| 23 | elemento html. |
| 24 | --> |
| 25 | <body> |
| 26 | <!-- |
| 27 | Los elementos h1 y p son hijos |
| 28 | del elemento body. |
| 29 | --> |
| 30 | <h1>Ejemplo</h1> |
| 31 | <p>Hola mundo.👶</p> |
| 32 | </body> |
| 33 | </html> |
En esta lección se definieron los siguientes conceptos:
SGM.
DOCTYPE.
Comentario de SGML.
Texto.
Elemento.
Atributo.
Elemento con contenido.
Elemento sin contenido.
Elemento padre.
Elemento hijo.