HTML
¿Qué es una página web?
Una página web es un documento de texto con marcas. Las marcas permiten modificar la
presentación del documento, incluir elementos no contenidos en el texto (por ejemplo,
imágenes), crear hiperenlaces, añadir significado al texto (todavía de forma limitada), etc. A
las marcas se les llaman también etiquetas.
Las páginas web están pensadas para ser vistas mediante los programas llamados
navegadores web.
Los navegadores son capaces de interpretar las marcas y presentar el documento tal y
como lo diseñó el autor.
- Las marcas se escriben entre desigualdades (<p>, <h1>, <div>, etc.) y suelen ir por
parejas, rodeando porciones de texto.
- La marca de apertura contiene como mínimo el nombre de la marca y la marca de
cierre empieza por el carácter barra (/) y contiene únicamente el nombre de la
marca (</p>, </h1>, </div>, etc.).
Algunas marcas (imágenes, saltos de líneas, separadores, etc.) no necesitan
marca de cierre y sólo es necesario escribir la marca de apertura. A estas
marcas se las llama marcas vacías (void).
Las marcas vacías de HTML son: <area>, <base>, <br>, <col>, <embed>,
<hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> y <wbr>.
Los navegadores pueden modificar el aspecto visual del texto en función de las
marcas existentes, aunque hay marcas que no tienen ningún estilo predeterminado
asociado.
*Es una buena práctica no utilizar etiquetas html para modificar el aspecto visual y dejar ese trabajo a las
hojas de estilo, como veremos más adelante.
Las marcas pueden anidarse, aunque no de cualquier manera. Algunas marcas pueden
estar contenidas por otras, pero no se puede insertar cualquier marca dentro de otra.
Los saltos de línea, espacios en blanco y tabuladores no son en general
significativos. Es decir, el navegador no tiene en cuenta los saltos de línea ni
la cantidad de espacios en blanco ni los tabuladores a la hora de mostrar la
página web, simplemente los convierten en un espacio en blanco.
Nota: la etiqueta <pre> es la única etiqueta que de forma predeterminada respeta los saltos
de línea, espacios en blanco y tabuladores. Sin embargo, para obtener este resultado, es
una buena práctica utilizar la propiedad white-space.
Si bien los navegadores modifican visualmente el contenido según las etiquetas
que lo enmarcan, el objetivo de marcar el texto con ellas no es dar estilo, sino
brindar al navegador un significado semántico para ese contenido. Es decir,
explicar qué papel cumple en nuestra página web.
Atributos
Las marcas de apertura pueden contener uno o varios atributos. Los atributos
especifican alguna característica de la marca. Algunos atributos pueden incluirse en
casi todas las marcas, pero otros son específicos de cada marca. Los atributos
pueden a su vez tener valores (uno o varios valores, separados por espacios):
<etiqueta atributo="valor_de_atributo" atributo2="valor_de_atributo">
Se puede modificar el aspecto visual de cualquier marca utilizando propiedades de estilo.
Nota: aunque es posible utilizar propiedades de estilo en una página web, como en el ejemplo anterior,
se recomienda hacerlo en hojas de estilo, como se explica en lecciones posteriores.
Comentarios
Una página web puede contener comentarios, que el navegador no muestra (salvo
cuando muestra el código fuente de la página). La etiqueta de comentario es <!-- ....
-->.
Los comentarios pueden estar insertados en cualquier lugar de la página web. En el
ejemplo pueden verse dos comentarios, uno incluido en una etiqueta (párrafo <p>) y
otro no incluido en ninguna etiqueta.
Página básica
El ejemplo siguiente muestra una página web básica HTML 5 escrita con sintaxis
HTML.
En este ejemplo se pueden reconocer algunos bloques anidados donde cada bloque
corresponde a una etiqueta:
● La primera etiqueta <!DOCTYPE ... > es obligatoria e indica el tipo de documento
(DOCTYPE) de la página. Existen varios tipos de documentos que corresponden a
las diferentes versiones de HTML y XHTML. El tipo "html" es el que corresponde al
HTML5.
● La etiqueta <html> ...</html> engloba todo el documento html.
● Un documento html se divide en dos partes, la cabecera <head> ...</head> y el
cuerpo <body> ...</body>.
● La cabecera <head> ...</head> contiene información de identificación y control que
en general no se muestra en la ventana del navegador, aunque puede afectar a la
presentación (por ejemplo, los enlaces a hojas de estilo).
● La etiqueta de título <title> ...</title> es obligatoria y debe incluirse en todas las
páginas web. Contiene el texto que se muestra en la pestaña del navegador. Si el
texto es largo, la pestaña sólo mostrará el principio, pero situando el ratón sobre la
pestaña, el texto completo se mostrará en una pequeña ventana flotante.
● La etiqueta <link> permite hacer referencia a otro documento. El atributo rel indica
en general la relación entre los dos documentos. En este caso, el valor del atributo
rel="stylesheet" indica que se está haciendo referencia a una hoja de estilo CSS.
● La cabecera <head> ...</head> podría contener también una etiqueta <script>
...</script>, que permite incluir directamente código JavaScript en el documento o
hacer referencia al documento en el que se encuentra ese código.
● El cuerpo <body> ....</body> contiene lo que se verá en la ventana del navegador.
En el ejemplo sólo contiene un párrafo.
Sintaxis de HTML
La sintaxis de un lenguaje es el "conjunto de reglas que definen las secuencias correctas de
los elementos de un lenguaje de programación"
Aunque el HTML no es un lenguaje de programación, sino un lenguaje de marcas, en
el HTML también existen una serie de reglas para que los documentos sean
correctos.
Si un documento contiene errores de sintaxis se dice que es un documento inválido.
Aunque un documento HTML no sea sintácticamente correcto, los navegadores intentan
mostrar el documento de la mejor manera posible. Los navegadores a menudo consiguen
mostrar correctamente documentos inválidos, pero se aconseja validar y corregir los
documentos para asegurar que los navegadores puedan mostrarlos correctamente.
Nota: en HTML 5 se define también una sintaxis
llamada XHTML que está basada en el XML (aunque
tampoco la cumple estrictamente). En general, la
sintaxis XHTML es más "estricta", en el sentido de
imponer restricciones en la forma de escribir
etiquetas, atributos o valores, mientras que la sintaxis
HTML es más "flexible".
Generalidades
El carácter < (menor que) sólo puede utilizarse para indicar el comienzo de una etiqueta. Si
se quiere mostrar el carácter <, se debe escribir la entidad de carácter <.
Los nombres de los elementos, los nombres de los atributos y los valores de los atributos se
suelen escribir en minúsculas, aunque se pueden escribir en mayúsculas.
Elementos (etiquetas)
El nombre del elemento debe ir a continuación del carácter < (sin espacios).
El nombre del elemento en la etiqueta de cierre tiene que coincidir con el nombre en la
etiqueta de apertura.
Los documentos HTML suelen tener un único elemento raíz de todo el documento, el
elemento <html>...</html>, aunque puede omitirse
Todos los elementos tienen que estar completamente contenidos en otros elementos (no se
pueden cruzar las etiquetas).
Los elementos no vacíos (los que pueden contener texto) suelen tener
etiquetas de cierre, aunque la norma define algunas circunstancias en las se
pueden omitir las etiquetas de cierre.
Los elementos vacíos (los que no pueden contener texto) no tienen etiqueta de cierre. La
etiqueta de apertura puede acabar en "/>". Las etiquetas vacías (void) de HTML son <area>,
<base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>,
<track> y <wbr>.
Atributos
Los atributos sólo pueden aparecer en la etiqueta de apertura:
Los valores de los atributos se suelen escribir entre comillas (dobles o simples), pero no es
necesario si el valor no contiene espacios en blanco.
El valor de un atributo id no se puede repetir en un documento (es decir, en un documento
no puede haber dos elementos cualesquiera con el mismo valor en el atributo id).
[Link]