Página de prueba

.. highlight:: html .. _html-head: Cabecera ******** La cabecera del documento |HTML| es el contenido del elemento :code:`` e incluye información ajena al contenido estricto de la página |HTML|. .. note:: El orden de los elementos de la cabecera es indiferente. .. index:: title .. _html-title: .. table:: :class: el-html +--------------+----------------------------------------------------------+ | |title| | Define cuál es el título que el navegador mostrará en la | | | barra superior de la ventana. | +--------------+----------------------------------------------------------+ **title** (:devmoz:`title`) Su único contenido posible es simple texto. Por ejemplo:: Página de prueba Es el único elemento **obligatorio** que debe incluir la cabecera. El resto de etiquetas las agruparemos en: .. _html-style: .. _html-script: Etiquetas de complemento ======================== Son aquellas que permiten indicar qué código *Javascript* o |CSS| complementa el contenido |HTML| de la página. .. table:: :class: el-html +--------------+--------------------------------------------------------------+ | |style| | Permite declarar estilos |CSS| exclusivos para el documento | +--------------+--------------------------------------------------------------+ | |script| | Refiere o incrustar código *Javascript* | +--------------+--------------------------------------------------------------+ .. index:: style **style** (:devmoz:`style`) Volveremos a esta etiqueta cuando tratemos :ref:`cómo declarar el CSS aplicable ` a la página. Por ahora, bástenos con un ejemplo:: .. note:: Para referir estilo |CSS| que se encuentre en fichero aparte debe usarse |link|, que se explica un poco más adelante. .. note:: Al igual que con |link|, puede usarse un atributo :code:`title` para dar nombre al estilo. .. index:: script **script** (:devmoz:`script`) Podemos usarla de dos formas. Como :code:` Etiquetas de relación ===================== Son aquellas que permiten establecer relaciones con otros documentos. .. table:: :class: el-html +--------------+----------------------------------------------------------+ | |base| | Establece la URL base para resolver rutas relativas | +--------------+----------------------------------------------------------+ | |link| | Establece una relación entre el documento y otro externo | +--------------+----------------------------------------------------------+ .. index:: base .. _html-base: **base** (:devmoz:`base`) :ref:`Al hablar sobre hiperenlaces ` se definió el :ref:`concepto de ruta relativa relativa ` y cómo formar la ruta absoluta se concatenan la |URL| base y la ruta relativa relativa (a partir de ahora, *ruta relativa* a secas). Este elemento permite redefinir la |URL| base para sea una distinta a la que se esperaría. Así, si nuestro documento tiene la |URL|: .. code-block:: none http://docs.iescdl.es/~josem/XML/05.web/01.html/03.head.html su |URL| base es: .. code-block:: none http://docs.iescdl.es/~josem/XML/05.web/01.html/ y las rutas relativas deberían añadirla para obtener la ruta absoluta. Sin embargo, este elemento permite definir una |URL| distinta. Por ejemplo:: En este caso, la |URL| base para los enlaces será: .. code-block:: none http://docs.iescdl.es/~josem/XML/ El elemento permite también definir el valor predeterminado para el atributo *target* de |a|: .. code-block:: html .. index:: link .. _html-link: **link** (:devmoz:`link`) Es el elemento que propiamente relaciona con documentos externos. Su uso es variado, pero se basa fundamentalmente en dar valor a dos de sus atributos: :code:`rel` y :code:`href`. * El uso más habitual es definir para la página hojas de estilos |CSS| externas:: En este caso el navegador aplicará las reglas de estilo y, si añadimos otro elemento más:: aplicará ambas. Sin embargo, puede añadirse un atributo :code:`title` para nombrar al estilo:: En este caso, tenemos: * Un estilo sin nombre, que el navegador aplica siempre, se encuentra en :file:`siempre.css`. * Un estilo de nombre "clasico" que se encuentra en las hojas de estilos :file:`estilos.css` y :file:`masestilos.css`. * Otro estilo de nombre "moderno" que se encuentra en la hoja :file:`otrosestilos.css`. El navegador aplicará los estilos sin nombre y sólo uno de los nombrados ("clasico" o "moderno" en el ejemplo). Cuál de los nombrados aplique el navegador, no está definido por la especificación, a menos que se especifique expresamente a través de un elemento |meta|. * Otro uso posible es definir versiones alternativas del documento en otros formatos o lenguas:: * Puede servir para definir cuál será el `favicon `_:: * Refiere a páginas que contienen información sobre determinados aspectos:: * Facilita a los buscadores la navegación por las páginas del sitio:: .. seealso:: Para conocer los valores que se pueden asignar al atributo *rel* consulte `la documentación al respecto en MDN `_. Etiquetas de metadatos ====================== Son aquellas que ofrecen metainformación sobre el contenido de la página. .. table:: :class: el-html +--------------+----------------------------------------------------------+ | |meta| | Declara metadatos | +--------------+----------------------------------------------------------+ .. index:: meta .. _html-meta: **meta** (:devmoz:`meta`) Los metadatos pueden definirse de muy diversos modos, aunque lo habitual es que se distingan unos de otros a través del atributo `name `_. Sin embargo, hay una excepción a ello muy importante: la definición de la codificación del documento: .. _html-meta-charset: .. code-block:: html que es recomendable incluir siempre, aunque no sea obligatorio, ya que la codificación predeterminado para los documentos |HTML| es, precisamente *UTF-8*. Otros metadatos que sí se definen con el atributo :code:`name` son: Metadatos sobre el **documento** * *Descripción* del documento:: * *Autor* del documento:: * *Generador* (aplicación que ha generado la página web):: *Software* con el que se ha creado la página. * Comportamiento de la *ventana visible del navegador*:: Consulte `esta entrada `_ para más información. Metadatos para **buscadores** * *Palabras clave* del documento, separadas por comas:: .. warning:: Esta etiqueta no suelen usarla los buscadores, ya que se presta a que se rellene con multitud de términos simplemente con el fin de posicionar mejor la página. * Indica a los buscadores si debe *indexar la página*:: Se pueden indicar *(no)index*, *(no)follow*, *(no)snippet* (mostrar fragmentos de la página en el buscador), *(no)archive* (guardar cacheo), *(no)imageindex* (no indexar imágenes para los buscadores de imágenes), *none* (equivale a *noindex* y *nofollow*). Fuera de este atributo :code:`name`, hay otros metadatos: Metadatos que equivalen a **campos** de cabecera |HTTP|: Para definirlos se utiliza el atributo `http-equiv `_. En este caso, el valor de :code:`http-equiv` define el nombre del campo, y el valor del atributo :code:`content`, el valor de ese mismo campo. Sin embargo, no pueden definirse metadatos para todos los campos definidos en el protocolo y, de hecho, la especificación sólo reconoce unos pocos, algunos de los cuáles, no obstante, desaconseja. Algunos interesantes son: * *Redirige* a otra web después de un tiempo:: * Define el *estilo* predeterminado:: En este caso, :code:`content` introduce el nombre del estilo que el navegador debe considerar predeterminado y que debe coincidir con el nombre que se le haya dado a través del atributo :code:`title` en los elementos |link| o |style|. * También, aunque sólo para la variante |HTML| y no la |XML|, es aún permitido por la especificación `content-type `_ para definir el tipo de documento y la codificación:: .. warning:: Este método, que se usaba en la versión 4 de |HTML| y es aún adminitido, es **mejor no usarlo**, ya que es incompatible con el ya comentado :ref:`charset `, que es modo moderno de indicar la codificación. Se cita, simplemente, por razones históricas. .. caution:: Otros valores para :code:`http-equiv`, que llegaron a usarse, se consideraron en algún momento **obsoletos** y es probable que ya no tengan soporte en los navegadores:: Metadatos para **redes sociales** Algunas redes sociales como Facebook_ o Twitter_ son capaces de leer ciertos elementos :code:`` con el objeto de crear automáticamente enlaces a la página: Facebook_ .. code-block:: html .. seealso:: Puede echar un vistazo a la `web del Open Graph Protocol `_ Twitter_ .. code-block:: html .. seealso:: En *DigitalOcean* tienen `pequeño tutorial al respecto `_. Ejercicios propuestos ===================== .. include:: /99.ejercicios/60.html-head.rst :start-line: 3 :end-line: 79 .. Desarrolla algunos elementos bien: https://html5andcss3.org/html5history.php .. |HTTP| replace:: :abbr:`HTTP (HyperText Transfer Protocol)` .. |link| replace:: :ref:`

` .. |style| replace:: :ref:`