Capítulo 3. Texto
La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a ser más del 90% del código de la página. Por este motivo, es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto.El lenguaje HTML incorpora al tratamiento del texto muchas de las ideas y normas establecidas en otros entornos de publicación de contenidos. De esta forma, HTML define etiquetas para estructurar el contenido en secciones y párrafos y define otras etiquetas para marcar elementos importantes dentro del texto.
La tarea inicial del editor de contenidos HTML consiste en estructurar el texto original definiendo sus párrafos, titulares y títulos de sección, como se muestra en la siguiente imagen:
Una vez definida la estructura básica de los contenidos de la página, el siguiente paso consiste en marcar los diferentes elementos dentro del propio texto: definiciones, abreviaturas, textos importantes, textos modificados, citas a otras referencias, etc.
En las secciones siguientes se muestran todas las etiquetas que define HTML para estructurar y marcar el texto. Además, se hace una mención especial al tratamiento que hace HTML de los espacios en blanco y las nuevas líneas.
3.1. Estructurar
La forma más sencilla de estructurar un texto consiste en separarlo por párrafos. Además, HTML permite incluir títulos que delimitan cada una de las secciones.3.1.1. Párrafos
Una de las etiquetas más utilizadas de HTML es la etiqueta<p>,
que permite definir los párrafos que forman el texto de una página.
Para delimitar el texto de un párrafo, se encierra ese texto con la
etiqueta <p>, como muestra el siguiente ejemplo:<html> <head> <title>Ejemplo de texto estructurado con párrafos</title> </head> <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> </html>
El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:
<p>:| Etiqueta | <p> |
|---|---|
| Atributos comunes | básicos, internacionalización y eventos |
| Atributos propios | - |
| Tipo de elemento | Bloque |
| Descripción | Delimita el contenido de un párrafo de texto |
3.1.2. 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.
Las etiquetas que definen los títulos de sección son
<h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1>
es la de mayor importancia y por tanto se utiliza para definir los
titulares de la página. La importancia del resto de etiquetas es
descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.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. |
<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.El siguiente ejemplo muestra el uso de las etiquetas de título de sección:
<html> <head> <title>Ejemplo de texto estructurado con secciones</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> <h2>Otra subsección</h2> <p>Más párrafos de contenido...</p> </body> </html>
<h1> se muestran con el tamaño de letra más grande, ya que son el nivel jerárquico superior, mientras que los títulos de sección <h6> se visualizan con un tamaño de letra muy pequeño, adecuado para el nivel jerárquico de menor importancia.
3.2. Marcado básico de 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: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>
Al igual que
La etiqueta
En ambos casos, el atributo
La mayoría de navegadores muestran por defecto un borde inferior punteado para todos los elementos
El siguiente ejemplo muestra cómo se utiliza la etiqueta
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
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
La etiqueta
La etiqueta
El siguiente ejemplo ilustra este comportamiento:
El anterior código HTML se visualiza en cualquier navegador de la siguiente manera:
De hecho, las letras "HT" de la sigla HTML significan "hipertexto" (hypertext en inglés), por lo que el significado completo de HTML podría traducirse como "lenguaje de marcado para hipertexto".
La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o simplemente "enlace".
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.
Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en inglés, que se puede traducir literalmente como "anclas".
La URL de un recurso tiene dos objetivos principales:
Si se accede a la página principal de Google, la dirección que muestra el navegador es:
La cadena de texto
El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempre está formada por las mismas tres partes. Si por ejemplo se considera la siguiente URL:
Las partes que componen la URL anterior son:
La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URL complejas formadas por más partes.
Las cinco partes que forman la URL anterior son:
Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por combinaciones de caracteres seguros. Esta sustitución se denomina codificación de caracteres y el servidor realiza el proceso inverso (decodificación) cuando le llega una URL con los caracteres codificados.
eniendo en cuenta las dos tablas anteriores de codificación de caracteres, es fácil crear las URL correctas sin caracteres problemáticos:
Además de internos/externos, la otra característica que diferencia a los enlaces (y por tanto, también a las URL) es si el enlace es absoluto o relativo. Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.
Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.
Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL relativas pueden ser difíciles de entender para los que comienzan con HTML, son tan útiles que todos los sitios web las utilizan.
Imagina que dispones de una página publicada en http://www.ejemplo.com/ruta1/ruta2/pagina1.html y quieres incluir en ella un enlace a otra página que se encuentra en http://www.ejemplo.com/ruta1/ruta2/pagina2.html. Como las URL identifican de forma única a los recursos de Internet y proporcionan la información necesaria para llegar hasta ellos, el enlace debería utilizar la URL completa de la segunda página.
Las URL completas también se llaman URL absolutas, ya que el navegador no necesita disponer de información adicional para localizar el recurso enlazado. Si se utilizan siempre las URL absolutas, los enlaces están completamente definidos.
Sin embargo, escribir siempre las URL completas es bastante aburrido, cuesta mucho tiempo y hace imposible cambiar la ubicación de los contenidos de un sitio web. Por ese motivo, casi todos los sitios web de Internet utilizan URL relativas siempre que es posible.
Una URL relativa es una versión abreviada de una URL absoluta. Su objetivo es eliminar todas las partes de la URL absoluta que se pueden adivinar a partir de la información de contexto de la página web. En otras palabras, las URL relativas aprovechan la inteligencia de los navegadores para crear URL incompletas que los navegadores pueden completar deduciendo la información que falta.
Considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo protocolo y se encuentra en el mismo servidor que la página origen, por lo que la URL relativa puede prescindir de esas partes:
En el ejemplo anterior, las dos URL son equivalentes porque cuando no
se indica el protocolo y el servidor de una URL, los navegadores
suponen que son los mismos que los de la página origen. Por lo tanto,
cuando el navegador encuentra la URL
1) El origen y el destino del enlace se encuentran en el mismo directorio
Si desde una página web se quiere enlazar un recurso que se encuentra en el mismo directorio del servidor, la URL relativa puede prescindir de todas las partes de la URL absoluta salvo el nombre del recurso enlazado.
El atributo más importante de la etiqueta
Con la definición anterior, para crear un enlace que apunte a la página principal de Google solamente habría que incluir lo siguiente en un documento HTML:
Como el atributo
De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.
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:
El enlace anterior utiliza una URL relativa con una ruta que apunta
directamente a la raíz del servidor. Para obtener la URL absoluta, el
navegador añade el mismo protocolo y el mismo nombre de servidor de la
página en la que se encuentra el enlace. El resultado es que cuando se
pincha ese enlace, siempre se vuelve al inicio del sitio web,
independientemende de la página en la que se incluya el enlace.
El otro atributo básico de la etiqueta
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.
El atributo
La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales, salvo que se añade el 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 "
Los enlaces directos a secciones también funcionan con el atributo
El nombre de la sección que se indica después del símbolo
Los valores que se pueden utilizar también están estandarizados y las codificaciones más utilizadas son
El organismo IANA publica la lista completa de codificaciones de caracteres disponibles.
Los ejemplos anteriores de enlaces básicos se pueden rehacer utilizando algunos de los atributos definidos por la etiqueta
Además de estos enlaces, las páginas HTML pueden incluir otro tipo de enlaces que cargan los recursos automáticamente. Si una página HTML utiliza archivos CSS para aplicar estilos a sus contenidos, no es lógico que los enlace con la etiqueta
HTML define las etiquetas
La etiqueta
Aunque la etiqueta
El atributo
Además de enlazar un archivo JavaScript externo, la misma etiqueta
Cuando se incluye código JavaScript en la propia página XHTML, se debe insertar dentro de una sección especial llamada
De esta forma, se pueden construir páginas XHTML válidas y código JavaScript correcto. En los capítulos posteriores se profundiza en el concepto de validación de páginas XHTML. Los caracteres
La etiqueta
La segunda etiqueta de XHTML para enlazar recursos es
Al contrario que
El atributo
El uso habitual de la etiqueta
En este caso, es habitual establecer los atributos
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.
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
La sintaxis de
Todas las opciones anteriores se pueden combinar entre sí para realizar ejemplos más avanzados. Aunque el uso de
La forma de mostrar las direcciones de correo electrónico en las páginas web consiste en incluir la dirección en una imagen o indicarla de forma que solamente los usuarios puedan entenderlo:
Aunque en principio la imagen debería ser de tipo
<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>
3.3. Marcado avanzado de 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: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>
<abbr> y <acronym>. Al posicionar el puntero del ratón sobre la palabra subrayada, el navegador muestra un pequeño recuadro (llamado tooltip en inglés) con el valor del atributo title:
<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>
3.4. 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
<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
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>
<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>
<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.3.5. Espacios en blanco y nuevas líneas
El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro).El siguiente ejemplo ilustra este comportamiento:
<html> <head><title>Ejemplo de etiqueta p</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 de línea y otro tipo de espaciado.</p> </body> </html>
3.6. Codificación de caracteres
Una consideración importante directamente relacionada con el texto de las páginas HTML es la codificación de los caracteres y la inserción de caracteres especiales. Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden incluir directamente en las páginas web:- Los caracteres que utiliza HTML para definir sus etiquetas (
<,>y") no se pueden utilizar libremente. - Los caracteres propios de los idiomas que no son el inglés (
ñ,á,ç,¿,¡, etc.) pueden ser problemáticos dependiendo de la codificación de caracteres utilizada.
Capítulo 4. Enlaces
El lenguaje de marcado HTML se definió teniendo en cuenta algunas de las características que existían en ese momento para la publicación digital de contenidos. Entre los conceptos utilizados en su creación, se encuentra el mecanismo de "hipertexto".De hecho, las letras "HT" de la sigla HTML significan "hipertexto" (hypertext en inglés), por lo que el significado completo de HTML podría traducirse como "lenguaje de marcado para hipertexto".
La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o simplemente "enlace".
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.
Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en inglés, que se puede traducir literalmente como "anclas".
4.1. URL
Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.La URL de un recurso tiene dos objetivos principales:
- Identificar de forma única a ese recurso
- Permitir localizar de forma eficiente ese recurso
Si se accede a la página principal de Google, la dirección que muestra el navegador es:
http://www.google.com
http://www.google.com es la URL
completa de la página principal de Google. La URL de las páginas es
imprescindible para crear los enlaces, ya que permite distinguir una
página de otra.El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempre está formada por las mismas tres partes. Si por ejemplo se considera la siguiente URL:
http://www.librosweb.es/xhtml/capitulo4.html
- Protocolo (
http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las páginas web utilizanhttp://. Las páginas web seguras (por ejemplo las de los bancos y las de los servicios de email) utilizanhttps://(se añade una letras). - Servidor (
www.librosweb.es): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. Los navegadores son capaces de obtener la dirección de cada servidor a partir de su nombre. - Ruta (
/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.
La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URL complejas formadas por más partes.
http://www.alistapart.com/comments/webstandards2008?page=5#42
- Protocolo (
http://) - Servidor (
www.alistapart.com) - Ruta (
/comments/webstandards2008) - Consulta (
?page=5): información adicional necesaria para que el servidor localice correctamente el recurso que se quiere acceder. Siempre comienza con el carácter?y contiene una sucesión de palabras separadas por=y& - Sección (
#42): permite que el navegador se posicione automáticamente en una sección de la página web. Siempre comienza con el caracter#
:, =, & y /
para separar sus partes, estos caracteres están reservados y no se
pueden utilizar libremente. Además, algunos caracteres no están
reservados pero pueden ser problemáticos si se utilizan en la propia
URL.Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por combinaciones de caracteres seguros. Esta sustitución se denomina codificación de caracteres y el servidor realiza el proceso inverso (decodificación) cuando le llega una URL con los caracteres codificados.
eniendo en cuenta las dos tablas anteriores de codificación de caracteres, es fácil crear las URL correctas sin caracteres problemáticos:
<!-- URL problemática --> http://www.ejemplo.com/estaciones/otoño.html <!-- URL correcta --> http://www.ejemplo.com/estaciones/oto%F1o.html <!-- URL problemática --> http://www.ejemplo.com/ruta/nombre página.html <!-- URL correcta --> http://www.ejemplo.com/ruta/nombre%20p%E1gina.html
Enlaces relativos y absolutos
Las páginas web habituales suelen contener decenas de enlaces de diferentes tipos. La siguiente imagen muestra algunos de los tipos de enlaces de la página principal del sitio web www.thinkvitamin.com:
Figura 4.1 Ejemplo de diferentes tipos de enlaces en la página 456BereaStreet.com
En esa página, cuando se pincha sobre algunos enlaces, el navegador
abandona el sitio web para acceder a páginas que se encuentran en otros
sitios. Estos enlaces se conocen como "enlaces externos". Sin embargo,
la mayoría de enlaces de un sitio web apuntan a páginas del propio sitio
web, por lo que se denominan "enlaces internos".Además de internos/externos, la otra característica que diferencia a los enlaces (y por tanto, también a las URL) es si el enlace es absoluto o relativo. Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.
Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.
Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL relativas pueden ser difíciles de entender para los que comienzan con HTML, son tan útiles que todos los sitios web las utilizan.
Imagina que dispones de una página publicada en http://www.ejemplo.com/ruta1/ruta2/pagina1.html y quieres incluir en ella un enlace a otra página que se encuentra en http://www.ejemplo.com/ruta1/ruta2/pagina2.html. Como las URL identifican de forma única a los recursos de Internet y proporcionan la información necesaria para llegar hasta ellos, el enlace debería utilizar la URL completa de la segunda página.
Las URL completas también se llaman URL absolutas, ya que el navegador no necesita disponer de información adicional para localizar el recurso enlazado. Si se utilizan siempre las URL absolutas, los enlaces están completamente definidos.
Sin embargo, escribir siempre las URL completas es bastante aburrido, cuesta mucho tiempo y hace imposible cambiar la ubicación de los contenidos de un sitio web. Por ese motivo, casi todos los sitios web de Internet utilizan URL relativas siempre que es posible.
Una URL relativa es una versión abreviada de una URL absoluta. Su objetivo es eliminar todas las partes de la URL absoluta que se pueden adivinar a partir de la información de contexto de la página web. En otras palabras, las URL relativas aprovechan la inteligencia de los navegadores para crear URL incompletas que los navegadores pueden completar deduciendo la información que falta.
Considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo protocolo y se encuentra en el mismo servidor que la página origen, por lo que la URL relativa puede prescindir de esas partes:
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html URL relativa: /ruta1/ruta2/pagina2.html
/ruta1/ruta2/pagina2.html, realiza el siguiente proceso:- La URL no es absoluta, por lo que se debe determinar la URL absoluta a partir de la URL relativa para poder cargar el recurso enlazado.
- A la URL relativa le falta el protocolo y el servidor, por lo que se supone que son los mismos que los de la página origen (
http://ywww.ejemplo.com). - Se añaden las partes que faltan a la URL relativa para obtener la URL absoluta:
http://+www.ejemplo.com+/ruta1/ruta2/pagina2.html= http://www.ejemplo.com/ruta1/ruta2/pagina2.html.
1) El origen y el destino del enlace se encuentran en el mismo directorio
Si desde una página web se quiere enlazar un recurso que se encuentra en el mismo directorio del servidor, la URL relativa puede prescindir de todas las partes de la URL absoluta salvo el nombre del recurso enlazado.
4.3. Enlaces básicos
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: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.Con la definición anterior, para crear un enlace que apunte a la página principal de Google solamente habría que incluir lo siguiente en un documento HTML:
<a href="http://www.google.com">Página principal de Google</a>
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>
<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>
<a href="/">Volver al inicio</a>
El otro atributo básico de la etiqueta
<a> es name,
que permite definir enlaces dentro de una misma página web. Si una
página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc.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> ...
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>
#
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> ...
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> ...
# puede utilizar el valor de los atributos id de cualquier elemento. De hecho, se recomienda utilizar los atributos id de los elementos ya existentes en la página en vez de crear "enlaces vacíos" de tipo <a name="nombre_seccion"></a>.
Ejercicio 6
A partir de la estructura de directorios y archivos indicada en la siguiente imagen:
4.4. 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>:4.4.1. Idioma del enlace (hreflang)
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 |
- 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 estilosstart– 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.
4.4.4. Codificación de caracteres (charset)
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).El organismo IANA publica la lista completa de codificaciones de caracteres disponibles.
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>
4.5. Otros tipos de enlaces
Los enlaces mostrados en las secciones anteriores son los más utilizados por las páginas web. Los enlaces creados con la etiqueta<a>
permiten enlazar cualquier tipo de recurso desde cualquier página. La
característica más importante de estos enlaces es que el usuario debe
activar la carga de los recursos. En otras palabras, el navegador no
carga ningún recurso enlazado con la etiqueta <a> a menos que el usuario pinche sobre el enlace.Además de estos enlaces, las páginas HTML pueden incluir otro tipo de enlaces que cargan los recursos automáticamente. Si una página HTML utiliza archivos CSS para aplicar estilos a sus contenidos, no es lógico que los enlace con la etiqueta
<a> y espere a que el
usuario pinche sobre el enlace para así cargar los archivos CSS. De la
misma forma, muchas páginas web dinámicas necesitan que el navegador
cargue varios archivos JavaScript para funcionar correctamente.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.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>
type utilizado habitualmente para los archivos JavaScript es "text/javascript". El atributo src es equivalente al atributo href de los enlaces creados con la etiqueta <a>. La URL indicada en el atributo src puede ser absoluta o relativa y externa o interna.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>
CDATA. Para ello, el código JavaScript se debe encerrar entre <![CDATA[ y ]]>.
Cuando el navegador encuentra una sección de este tipo, no procesa su
contenido como si fuera XHTML y por tanto no tiene en cuenta los
posibles errores de validación de XHTML.De esta forma, se pueden construir páginas XHTML válidas y código JavaScript correcto. En los capítulos posteriores se profundiza en el concepto de validación de páginas XHTML. Los caracteres
// al comienzo y al final de la sección CDATA son necesarios para los navegadores que no son capaces de procesar correctamente estas secciones.La etiqueta
<script> (tanto cuando enlaza, como
cuando incluye directamente el código) puede aparecer en cualquier parte
del documento HTML, aunque normalmente se incluye dentro de la cabecera
de la página (<head>...</head>).La segunda etiqueta de XHTML para enlazar recursos es
<link>, que permite enlazar y relacionar la página con otros recursos externos.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>
rel y type para indicar el tipo de recurso enlazado y su relación con la página web. La URL del recurso enlazado se indica en el atributo href, que admite tanto URL absolutas como relativas.4.6. Ejemplos de enlaces habituales
4.6.1. Enlace al inicio del sitio web
<a href="/">Inicio</a>
4.6.2. 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>
mailto: La sintaxis es la misma que la de un enlace normal, salvo que se cambia el prefijo http:// por mailto:La sintaxis de
mailto: permite utilizarlo para otros ejemplos más complejos:<!-- 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>
mailto:
puede parecer una ventaja, su uso está desaconsejado. Si se incluye una
dirección de correo electrónico directamente en una página web, es muy
probable que en poco tiempo esa dirección de email se encuentre llena de
correo electrónico basura o "spam", ya que existen programas
automáticos encargados de rastrear sistemáticamente todas las páginas
web de Internet para encontrar direcciones de correo electrónico
válidas.La forma de mostrar las direcciones de correo electrónico en las páginas web consiste en incluir la dirección en una imagen o indicarla de forma que solamente los usuarios puedan entenderlo:
<p>La dirección de correo es <strong>nombre (arroba) direccion.com</strong></p> <p>La dirección de correo es <strong>nombre_arroba_direccion.com</strong></p> <p>La dirección de correo es <strong>nombreQUITAESTO@direccion.com</strong></p> <p>La dirección de correo es <strong>nombre(ARROBA)direccion.com</strong></p> <p>La dirección de correo es <strong>nombre @ direccion . com</strong></p>
4.6.3. Enlace a un archivo FTP
Para enlazar un archivo almacenado en un servidor FTP, la parte del protocolo de la URL debe cambiar dehttp:// 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>
4.6.4. 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" />
4.6.5. Enlazar hojas de estilos CSS para diferentes medios
<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" />
4.6.6. 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" />
.ICO
(formato gráfico de los iconos), algunos navegadores soportan favicons
en otros formatos gráficos más habituales (como por ejemplo .PNG).4.6.7. Enlazar un archivo RSS
<link rel="alternate" type="application/rss+xml" title="Resumen de todos los artículos del blog" href="/feed.xml" />
4.6.8. Enlazar hojas de estilos, favicon y RSS
En una misma página se pueden incluir varias etiquetas<link>, por lo que es habitual que las páginas enlacen hojas de estilos, favicon y archivos RSS de forma conjunta:<head> ... <link rel="stylesheet" type="text/css" href="/css/impresora.css" media="print" /> <link rel="stylesheet" type="text/css" href="/css/movil.css" media="handheld" /> <style type="text/css" media="screen,projection"> @import '/css/main.css'; </style> <link rel="shortcut icon" href="/favicon.ico" type="image/ico" /> <link rel="alternate" type="application/rss+xml" title="Resumen de todos los artículos del blog" href="/feed.xml" /> ... </head>
4.6.9. Indicar que existe una versión de la página en otro idioma
<head> <title>English tutorial</title> <link lang="es" xml:lang="es" title="El tutorial en español" type="text/html" rel="alternate" hreflang="es" href="http://www.ejemplo.com/tutorial/espanol.html" /> </head>
4.6.10. Indicar que existe una versión de la página preparada para imprimir
<head> <link media="print" title="El tutorial en PDF" type="application/pdf" rel="alternate" href="http://www.ejemplo.com/tutorial/documento.pdf" /> </head>
4.6.11. Indicar que existe una página que es índice de la página actual
<head> <title>Tutorial – Capítulo 5</title> <link rel="start" title="El índice del tutorial" type="text/html" href="http://www.ejemplo.com/tutorial/indice.html" /> </head>
Ejercicio 7
Enlazar el favicon en todas las páginas del ejercicio 6 y añadir todos los atributos posibles a los enlaces.
