ETIQUETAS Y ESTRUCTURA DE HTML

Parrafos

La mayoría de los textos estructurados consisten en encabezados y párrafos, ya sea que esté leyendo una historia, un periódico, un libro de texto universitario, una revista, etc.

Etiqueta
Atributos comunes	Basicos, Internacionalizacion y Eventos
Atributos propios	-
Tipo de elemento	Bloque
Descripción	Delimita el contenido de un párrafo de texto

: Ejemplo:

<body>
<p>Este es el texto que forma el primer párrafo de la página.
Los párrafos pueden ocupar varias líneas y el navegador se encarga
de ajustar su longitud al tamaño de la ventana.</p>

<p>El segundo párrafo de la página también se define encerrando
su texto con la etiqueta p. El navegador también se encarga de
separar automáticamente cada párrafo.</p>
</body>

Encabezados o Secciones

Las páginas HTML habituales suelen tener una estructura más compleja que la que se puede crear solamente mediante párrafos. De hecho, es habitual que las páginas se dividan en diferentes secciones jerárquicas.

Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la página. HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una página puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos

A continuación se muestra la definición formal de la etiqueta <h1>, siendo idéntica la definición del resto de etiquetas referidas a los títulos de sección:

Etiqueta	\<h1>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	-
Tipo de elemento	Bloque
Descripción	Define los títulos de las secciones de mayor importancia de la página.

Al igual que la etiqueta <p>, las etiquetas de título de sección son elementos de bloque y no tienen atributos específicos.

Las etiquetas <h1>, ..., <h6> definen títulos de sección, no secciones completas. Por este motivo, no es necesario encerrar los contenidos de una sección con su etiqueta correspondiente. Solamente se debe encerrar con las etiquetas <h1>, ..., <h6> los títulos de cada sección.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mi Primera Pagina</title>
    </head>
    <body>
        <h1>Titular de la página</h1>

        <p>Párrafo de introducción...</p>

        <h2>La primera sub-sección</h2>

        <p>Párrafo de contenido...</p>

        <h3>Otra subsección</h3>

        <p>Más párrafos de contenido...</p>
    </body>
</html>

Marcado Básico del Texto

Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de los elementos que componen el texto. Los textos habituales están formados por elementos como palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc. HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto.

Entre las etiquetas más utilizadas para marcar texto se encuentran <em> y <strong>. La definición formal de estas dos etiquetas se muestra a continuación:

Etiqueta	\<em>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	-
Tipo de elemento	En línea
Descripción	Realza con la máxima importancia el texto que encierra

: ...

Etiqueta	\<strong>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	-
Tipo de elemento	En línea
Descripción	Realza con la máxima importancia el texto que encierra

La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la página. Ejemplo:

<html>

  <head>
    <title>Ejemplo de etiqueta em y strong</title>
  </head>

  <body>
    <p>El lenguaje HTML permite marcar algunos segmentos de texto
    como <em>muy importantes</em> y otros segmentos como <strong>los
    más importantes</strong>.</p>
  </body>

</html>

HTML también permite marcar de forma adecuada las modificaciones realizadas en el contenido de una página. En otras palabras, HTML permite indicar de forma clara el texto que ha sido eliminado y el texto que ha sido añadido a un determinado texto original. Las etiquetas utilizadas son <ins> y <del>, cuya definición formal es la siguiente:

Etiqueta	\<ins>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	cite = "url" = Indica la URL de la pagina que se puede obtener mas informacion. - `datetime = "fecha"` - Especifica la fecha y hora en la que se realizó el cambio
Tipo de elemento	Bloque y en línea
Descripción	Se emplea para marcar una modificación en los contenidos originales consistente en la inserción de un nuevo contenido.

Etiqueta	\<del>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	cite = "url" = Indica la URL de la pagina que se puede obtener mas informacion. - `datetime = "fecha"` - Especifica la fecha y hora en la que se realizó el cambio
Tipo de elemento	Bloque y en línea
Descripción	Se emplea para marcar una modificación en los contenidos originales consistente en la inserción de un nuevo contenido.

Ejemplo:

<html>
  <head><title>Ejemplo de etiqueta ins y del</title></head>
  <body>

      <h3>Ejemplo de etiqueta ins y del</h3>

      <p>El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de <del datetime="20091025" cite="http://librosweb.es/xhtml/capitulo_3/marcado_basico_de_texto.html">marcado de hipertexto</del> <ins datetime="20091026" cite="http://librosweb.es/xhtml/capitulo_3.html"> marcas hipertextuales</ins>) es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto.</p>

  </body>
</html>

Por otra parte, en muchos tipos de páginas (artículos, noticias) es habitual citar literalmente un texto externo. HTML define la etiqueta <blockquote> para incluir citas textuales en las páginas web. La definición de la etiqueta HTML con el nombre más largo se muestra a continuación:

Etiqueta	\<blockquote>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	`cite = "url"` - Indica la dirección de la página web original de la que se extrae la cita
Tipo de elemento	Bloque
Descripción	Se emplea para indicar que el texto que encierra es una cita textual de otro texto externo

Al igual que <ins> y <del>, la etiqueta <blockquote> permite indicar mediante el atributo cite la dirección de un documento del que se ha extraído la cita. Ejemplo:

<html>
  <head><title>Ejemplo de etiqueta blockquote</title></head>
  <body>
    <p>Según el W3C, el valor del
    atributo <em>cite</em> en las etiquetas <strong>blockquote</strong> tiene el
    siguiente significado:</p>

    <blockquote cite="http://www.w3.org/TR/html401/struct/text.html">"El valor de este atributo
    es una dirección URL que indica el documento original de la cita."</blockquote>
    </body>

</html>

Marcado Avanzado del Texto

Las páginas y documentos más avanzados suelen incluir otros elementos importantes que se deben marcar de forma adecuada. Por ello, HTML incluye muchas otras etiquetas que permiten marcar más elementos del texto.

La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se emplea para marcar las siglas o acrónimos del texto. Su definición es la siguiente:

Etiqueta	\<abbr>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	`title = "texto"` - Indica el significado completo de la abreviatura
Tipo de elemento	En línea
Descripción	Se emplea para marcar las abreviaturas del texto y proporcionar el significado de esas abreviaturas

Etiqueta	\<acronym>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	`title = "texto"` - Indica el significado completo del acrónimo o sigla
Tipo de elemento	En línea
Descripción	Se emplea para marcar las siglas o acrónimos del texto y proporcionar el significado de esas siglas

En ambos casos, el atributo title se puede utilizar para incluir el significado completo de la abreviatura o sigla. Ejemplo:

<html>

  <head>
    <title>Ejemplo de etiqueta acronym</title>
  </head>

  <body>
    <p>El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es estandarizado
    por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
    </body>

</html>

Por otra parte, en ocasiones resulta útil incluir la definición de una palabra extraña o cuyo uso está restringido a un entorno muy determinado. HTML incluye la etiqueta <dfn> para proporcionar al usuario la definición de todas las palabras para las que se considere apropiado. La definición formal de esta etiqueta se muestra a continuación:

Etiqueta	\<dfn>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	`title = "texto"` - Indica el significado completo del término
Tipo de elemento	En línea
Descripción	Se emplea para marcar las definiciones de ciertos términos y proporcionar el significado de esos términos

El siguiente ejemplo muestra cómo se utiliza la etiqueta <dfn> para incluir la definición completa de una palabra cuyo uso no es habitual fuera de los ámbitos médicos y psicológicos:

<p>
  Con estos síntomas, podría tratarse de un caso de <dfn title="Imagen o sensación subjetiva,
  propia de un sentido, determinada por otra sensación que afecta a un sentido
  diferente">sinestesia</dfn>
</p>

Por último, HTML incluye una etiqueta que se puede utilizar para marcar un texto como una citación:

Etiqueta	\<cite>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	-
Tipo de elemento	En línea
Descripción	Se emplea para marcar una cita o una referencia a otras fuentes

En ocasiones, no está clara la diferencia entre <cite> y <blockquote>. El elemento <cite> marca el autor de la cita (persona, documento, etc.) y <blockquote> marca el contenido de la propia cita. En el siguiente ejemplo, <blockquote> encierra el contenido de una frase célebre y <cite> encierra el nombre de su autor:

<cite>Mahatma Gandhi</cite>:
<blockquote>
  Vive como si fueras a morir mañana y aprende como si fueras a vivir para siempre.
</blockquote>

Marcado Genérico de Texto

El estándar HTML/XHTML incluye numerosas etiquetas para marcar los contenidos de texto. No obstante, la infinita variedad de posibles contenidos textuales hace que no sean suficientes. Si se considera el siguiente ejemplo:

Importante: si quiere ponerse en contacto con la empresa ACME, puede hacerlo en el teléfono 900 555 555 o a través de la dirección de correo electrónico contacto@acme.org

El texto del ejemplo anterior contiene elementos de texto importantes, siglas, números de teléfono y direcciones de correo electrónico. XHTML define la etiqueta <strong> para marcar los elementos importantes y <acronym> para marcar las siglas:

<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym>ACME</acronym>, puede hacerlo en el teléfono 900 555 555 o a través de la dirección de correo electrónico contacto@acme.org

Desafortunadamente, XHTML no define ninguna etiqueta específica para marcar números de teléfono o direcciones de correo electrónico. De la misma forma, no define etiquetas para otros posibles elementos que se pueden encontrar en los contenidos de texto.

Por este motivo, el estándar HTML/XHTML incluye una etiqueta llamada <span> que se emplea para marcar cualquier elemento que no se puede marcar con las otras etiquetas definidas. Siguiendo con el ejemplo anterior, la etiqueta <span> se utiliza para marcar el teléfono y la dirección de correo electrónico:

<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym>ACME</acronym>, puede hacerlo en el teléfono <span>900 555 555</span> o a través de la dirección de correo electrónico <span>contacto@acme.org</span>

La etiqueta <span> se visualiza por defecto con el mismo aspecto que el texto normal. Por tanto es habitual utilizar esta etiqueta junto con los atributos id y class para modificar posteriormente su aspecto con CSS:

<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym>ACME</acronym>, puede hacerlo en el teléfono <span class="telefono">900 555 555</span> o a través de la dirección de correo electrónico <span class="email">contacto@acme.org</span>

La etiqueta <span> sólo se puede utilizar para encerrar contenidos y etiquetas en línea. Cuando se quieren estructurar elementos de bloque, se utiliza la etiqueta <div>, tal y como se verá en capítulos posteriores.

Nuevas Lineas

Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta <br>. En cierta manera, insertar la etiqueta <br> en un determinado punto del texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto.

La definición formal de <br> se muestra a continuación:

Etiqueta	\<br>
Atributos comunes	básicos
Atributos propios	-
Tipo de elemento	En línea y etiqueta vacía
Descripción	Fuerza al navegador a insertar una nueva línea

La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La particularidad de <br> es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta forma, la etiqueta debe abrirse y cerrarse de forma consecutiva: <br></br>.

Utilizando la etiqueta <br> se puede rehacer el ejemplo anterior para que respete las líneas que forman el segundo párrafo:

<html>

<head>
  <title>Ejemplo de etiqueta br</title>
</head>

<body>
  <p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>

  <p>Este segundo párrafo sí que contiene saltos <br/>
  de <br/>
  línea <br/>
  y   otro   tipo   de   espaciado.</p>
  </body>

</html>

Espacios en Blanco

<html>

<head>
  <title>Ejemplo de entidad &nbsp;</title>
</head>

<body>
  <p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>

  <p>Este segundo párrafo sí que contiene saltos <br/>
  de <br/>
  línea <br/>
  y &nbsp;&nbsp; otro &nbsp; tipo &nbsp; de &nbsp; espaciado.</p>
</body>

</html>

Texto Preformateado

En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación.

En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. La definición formal de la etiqueta se muestra a continuación:

Etiqueta	\<pre>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	-
Tipo de elemento	Bloque
Descripción	Muestra el texto que encierra tal y como está escrito (respetando los espacios en blanco)

El siguiente ejemplo muestra el uso de la etiqueta <pre>:

<html>
<head><title>Ejemplo de etiqueta pre</title></head>

<body>
<pre>
        La etiqueta pre
   respeta los espacios en blanco
      y
 muestra el texto
     tal y como
   está escrito
</pre>

<p>
        La etiqueta pre
   respeta los espacios en blanco
      y
 muestra el texto
     tal y como
   está escrito
</p>

</body>
</html>

Los elementos <pre> son especiales, ya que los navegadores les aplican las siguientes reglas:

Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas líneas)
Muestra el texto con un tipo de letra especial, denominado "de ancho fijo", ya que todas sus letras son de la misma anchura
No se ajusta la longitud de las líneas (las líneas largas producen un scroll horizontal en la ventana del navegador)

Enlaces Basicos

Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés "anchor", literalmente traducido como "ancla"). A continuación se muestra la definición simplificada de <a> y más adelante se muestra su definición completa:

Etiqueta	\<a>
Atributos comunes	básicos, internacionalización, eventos y foco
Atributos propios	`name = "texto"` - Permite nombrar al enlace para que se pueda acceder desde otros enlaces. `href = "url"` - Indica la URL del recurso que se quiere enlazar
Tipo de elemento	En línea
Descripción	Se emplea para enlazar todo tipo de recursos

El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.

<a href="http://www.google.com"Página principal de Google</a>

Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen, que se mostrará en el navegador cuando el usuario pinche sobre el enlace:

<a href="http://www.ejemplo.com/fondo_escritorio.jpg"Imagen interesante para un fondo de escritorio</a>

De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.

<a href="http://www.ejemplo.com/informe.pdf"Descargar informe completo [PDF]</a>
<a href="http://www.ejemplo.com/informe.doc"Descargar informe completo [DOC]</a>

Un truco muy útil con los enlaces es el uso de URL relativas para poder volver al inicio del sitio web desde cualquier página web interior:

<a 
  href="/">Volver al inicio
</a>

Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.

<a name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>

...

<a name="segunda_seccion"></a>
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p>

...

El atributo name permite crear "enlaces vacíos" que hacen referencia a secciones dentro de una misma página. Una vez definidos los "enlaces vacíos", es posible crear un enlace que apunte directamente a una sección concreta de una página:

<!-- Enlace normal a la página -->
<a href="http://www.ejemplo.com/pagina1.html"Enlace a la página 1</a>

<!-- Enlace directo a la segunda sección de la página -->
<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion"Enlace a la sección 2 de la página 1</a>

La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales, salvo que se añade el símbolo # seguido del nombre de la sección a la que se apunta. Cuando el usuario pincha sobre uno de estos enlaces, el navegador accede a la página apuntada por la URL y baja directamente a la sección cuyo nombre se indica después del símbolo #.

También es posible utilizar este tipo de enlaces con URL relativas en una misma página. El siguiente ejemplo añade enlaces de tipo "Volver al inicio de la página" en varias secciones:

<a name="inicio"></a>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

Los enlaces directos a secciones también funcionan con el atributo id de cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:

<h1 id="inicio">Título de la página</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget, dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>

Enlaces Avanzados

Incluir enlaces básicos mediante la etiqueta <a> es muy sencillo. Sin embargo, la definición completa de <a> es muy compleja, ya que dispone de varios atributos específicos importantes. A continuación se muestra la definición completa de <a>:

Etiqueta	\<a>
Atributos comunes	básicos, internacionalización, eventos y foco
Atributos propios	`name = "texto"` - Permite nombrar al enlace para que se pueda acceder desde otros enlaces. `href = "url"` - Indica la URL del recurso que se quiere enlazar `hreflang = "codigo_idioma"` - Idioma del recurso enlazado. `type = "tipo_de_contenido"` - Permite "avisar" al navegador sobre el tipo de contenido que se enlaza (imágenes, archivos, etc.) para que pueda preparase en caso de que no entienda ese contenido. `rel = "tipo_de_relacion"` - Describe la relación del documento actual con el recurso enlazado. `rev = "tipo_de_relacion"` - Describe la relación del recurso enlazado con el documento actual. `charset = "tipo_de_charset"` - Describe la codificación del recurso enlazado
Tipo de elemento	En línea
Descripción	Se emplea para enlazar todo tipo de recursos

Idioma del Enlace

El enlace puede indicar al navegador el idioma del recurso que se enlaza. Para establecer el valor del idioma, se utiliza un código estandarizado de dos letras. Además del idioma genérico, también se puede indicar una variación idiomática. Ejemplo de códigos de idioma más utilizados:

Código	Idioma	Variación idiomática
`en`	Inglés	-
`en-AU`	Inglés	Australia
`en-US`	Inglés	Estados Unidos
`es`	Español	-
`es-AR`	Español	Argentina
`es-ES`	Español	España
`es-MX`	Español	México

Tipo de Contenido

Se utiliza para notificar al navegador sobre el tipo de contenido que se enlaza. Se indica mediante una cadena de texto cuyos posibles valores también están estandarizados. Los valores de los contenidos más utilizados son los siguientes: "text/html" (páginas HTML), "image/png" (imágenes con formato PNG), "image/gif" (imágenes con formato GIF), "text/css" (hojas de estilo CSS), "application/rss+xml" (archivos RSS).

Tipo de Relacion

Los enlaces pueden proporcionar información adicional muy útil para los navegadores y para los motores de búsqueda como Google. Los atributos rel y rev permiten indicar la relación que la página actual tiene con la página a la que se enlaza (atributo rel) y la relación que tiene la página enlazada con la página actual (atributo rev).

Los tipos de relación definidos son los siguientes:

alternate -- Indica que es una versión alternativa al documento actual (puede ser una versión en otro idioma o una versión preparada para otro medio, como una impresora o un dispositivo móvil)
stylesheet -- Indica que se ha enlazado una hoja de estilos
start -- Indica que se trata del primer documento de una colección de documentos (por ejemplo el primer capítulo de un libro)
next -- Indica que es el documento que sigue al actual dentro de una secuencia lógica de documentos (por ejemplo, los capítulos de un libro)
prev - Indica que es el documento que precede al actual dentro de una secuencia lógica de documentos (por ejemplo, los capítulos de un libro)
contents -- Indica que el recurso enlazado es el documento que contiene la tabla de contenidos de la colección de documentos (por ejemplo, el índice de un libro).
bookmark -- Establece el enlace actual como un "marcador" o "favorito". Un marcador es un enlace que constituye un punto de entrada muy importante dentro del documento.

Tipo de Relacion

Además del idioma, tipo de contenido y relación del recurso que se enlaza, los enlaces también pueden indicar la codificación de caracteres que utiliza la página web enlazada.

Los valores que se pueden utilizar también están estandarizados y las codificaciones más utilizadas son UTF-8 y ISO-8859-1, aunque existen decenas de códigos definidos (ISO-10646-UCS-2, IBM852, Big5-HKSCS, windows-1252, HZ-GB-2312).

Los ejemplos anteriores de enlaces básicos se pueden rehacer utilizando algunos de los atributos definidos por la etiqueta <a>:

<a href="http://www.google.com" hreflang="en" type="text/html" charset="UTF-8">Página principal de Google</a>

<a href="http://www.ejemplo.com/fondo_escritorio.jpg" type="image/jpg">Imagen interesante para un fondo de escritorio</a>

Otros tipos de Enlaces

HTML define las etiquetas <script> y <link> para enlazar recursos que se deben cargar automáticamente. Cuando el navegador encuentra alguna de estas dos etiquetas, descarga los recursos enlazados y los aplica a la página web.

La etiqueta <script> tiene dos modos de funcionamiento, ya que se emplea tanto para insertar un bloque de código JavaScript en la página como para enlazar un archivo JavaScript externo.

Etiqueta	\<script>
Atributos comunes	-
Atributos propios	`src = "url"` - Indica la dirección del archivo que contiene el código. `type = "tipo_de_contenido"` - Permite "avisar" al navegador sobre el tipo de código que se incluye (normalmente JavaScript). `defer = "defer"` - El código no va a modificar el contenido de la página web. `charset = "tipo_de_charset"` - Describe la codificación del código enlazado
Tipo de elemento	Bloque y en línea (también puede ser una etiqueta vacía)
Descripción	Se emplea para enlazar o definir un bloque de código (normalmente JavaScript)

Aunque la etiqueta <script> permite enlazar código de varios lenguajes de programación, el uso habitual de <script> consiste en enlazar un archivo JavaScript externo:

<head>
  <script type="text/javascript" src="http://www.ejemplo.com/js/inicializar.js"</script>
</head>

Además de enlazar un archivo JavaScript externo, la misma etiqueta <script> también permite incluir en la página web un bloque de código JavaScript:

<html>
<head>
  <script type="text/javascript">
  //<![CDATA[
    window.onload = function() { alert("La página se ha cargado completamente"); }
  //]]>
  </script>
</head>
<body>
...
</body>
</html>

La segunda etiqueta de XHTML para enlazar recursos es <link>, que permite enlazar y relacionar la página con otros recursos externos.

Etiqueta	\<link>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	Los siguientes con el mismo significado que para la etiqueta "a": charset, href, hreflang, type, rel y rev. `media = "tipo_de_medio"` - Indica el medio para el que debe aplicarse la relación
Tipo de elemento	Etiqueta vacía
Descripción	Se emplea para enlazar y establecer relaciones entre el documento y otros recursos

Al contrario que <script>, la etiqueta <link> solamente se puede incluir dentro de la cabecera del documento. Se pueden añadir tantas etiquetas <link> como sean necesarias, pero siempre dentro de <head>...</head>.

El atributo media hace referencia al medio para el que es válida la relación con el recurso enlazado. Los medios disponibles también están estandarizados, siendo los más comunes screen para los contenidos mostrados en pantalla, print para las impresoras y handheld para los dispositivos móviles.

El uso habitual de la etiqueta <link> es el de enlazar las hojas de estilos CSS utilizadas por las páginas web:

<head>

  <link rel="stylesheet" type="text/css" href="/css/comun.css" />
</head>

Ejemplo de Enlcaes Habituales

<a href="/">Inicio</a>

Al pulsar el enlace anterior desde cualquier página web, se vuelve directamente a la página de inicio, home o página principal del sitio web.

Enlace a un Email

<a href="mailto:nombre@direccion.com" title="Dirección de email para solicitar más información">
Solicita más información
</a>

Al pinchar sobre el enlace anterior, se abre automáticamente el programa de correo electrónico del ordenador del usuario y se establece la dirección de envío al valor indicado después de mailto: La sintaxis es la misma que la de un enlace normal, salvo que se cambia el prefijo http:// por mailto:

<!-- Envío del correo electrónico a varias direcciones a la vez -->
<a href="mailto:nombre@direccion.com,otro_nombre@direccion.com">Solicita más información</a>

<!-- Añadir un "asunto" inicial al correo electrónico -->
<a href="mailto:nombre@direccion.com?subject=Solicitud de más información">Solicita más información</a>

<!-- Añadir un texto inicial en el cuerpo del correo electrónico -->
<a href="mailto:nombre@direccion.com?body=Estaría interesado en solicitar más información sobre sus productos">Solicita más información</a>

Enlace a un archivo FTP

Para enlazar un archivo almacenado en un servidor FTP, la parte del protocolo de la URL debe cambiar de http:// a ftp://:

<a href="ftp://ftp.ejemplo.com/ruta/archivo.zip" title="Archivo comprimido de los contenidos">
Descarga un ZIP con todos los contenidos
</a>

Enlazar varias hojas de estilos CSS

<link rel="stylesheet" type="text/css" href="/css/comun.css" />
<link rel="stylesheet" type="text/css" href="/css/secciones.css" />

<link rel="stylesheet" type="text/css" href="/css/comun.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" />
<link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" />

Enlazar el favicon

El favicon o icono para favoritos es el pequeño icono que muestran las páginas en varias partes del navegador. Dependiendo del navegador que se utilice, este icono se muestra en la barra de direcciones, en la barra de título del navegador y/o en el menú de favoritos/marcadores.

<link rel="shortcut icon" href="/favicon.ico" type="image/ico" />

Aunque en principio la imagen debería ser de tipo .ICO (formato gráfico de los iconos), algunos navegadores soportan favicons en otros formatos gráficos más habituales (como por ejemplo .PNG).

Actividad

Realice una página web con una temática de su preferencia (Deportes, Cocina, Moda, Casas, Construcción, entre otros) y utilice todos los elementos estudiados en el módulo.

Nota: Recuerde integrar los elementos de los otros módulos.