XHTML_2_enlaces

8/9/2019 XHTML_2_enlaces

http://slidepdf.com/reader/full/xhtml2enlaces 1/33

1

XHTML

Enlaces



2

Concepto• 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 comoimágenes, documentos y archivos.

• Una característica que no se suele tener en cuenta enlos enlaces es que están formados por dos extremos yun sentido.

• El enlace comienza en un recurso y apunta hacia otrorecurso.• Cada uno de los dos extremos se llaman "anchors" en

inglés, que se puede traducir literalmente como "anclas".



3

Rutas - URL

• URL absoluta:

http://www.ejemplo.com/ruta1/ruta2/pagina2.html• URL relativa:

/ruta1/ruta2/pagina2.html



4

Enlaces basicos

• El atributo más importante de la etiqueta <a> es href,

que se utiliza para indicar la URL a la que apunta elenlace.• Las URL de los enlaces pueden ser absolutas, relativas,

internas y externas.



5

href

• enlace apunta a una imagen, documentos deword o pdf

• <ahref="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante </a>

• <ahref="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>

• <ahref="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a>



6

• Un truco muy útil con los enlaces es el uso de URLrelativas para poder volver al inicio del sitio web desde

cualquier página web interior:• <a href="/">Volver al inicio</a>• 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 lapá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,independientemente de la página en la que se incluya elenlace.



7

name• <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>



8

Atributos avanzados



9

Idioma del enlace (hreflang)

• Indica al navegador el idioma del recurso

que se enlaza.• Para establecer el valordel idioma, se

utiliza un código estandarizado de dosletras.• La lista completa de códigos de idioma

está definida en el estándar ISO 639• (http://xml.coverpages.org/iso639a.html) .



11

Tipo de contenido (type)• 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: – "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).• La lista completa de tipos de contenido se

define en los estándares RFC 2045 y RFC 2046• (http://www.iana.org/assignments/media-types/).



12

Tipo de relación (rel y rev)Los enlaces pueden proporcionar

información adicional muy útil para losnavegadores y para los motores debúsqueda como Google.

Los atributos rel y rev permiten indicar larelación que la página actual tiene con lapágina a la que se enlaza (atributo rel) y la

relación que tiene la página enlazada conla página actual (atributo rev).



13

Los tipos de relación definidos▪ alternate – Indica que es una versión alternativa al documento actual (puede ser unaversión en otro idioma o una versión preparada para otro medio, como una impresora oun 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

dedocumentos (por ejemplo, los capítulos de un libro)▪

prev - Indica que es el documento que precede al actual dentro de una secuencialógica dedocumentos (por ejemplo, los capítulos de un libro)▪ contents – Indica que el recurso enlazado es el documento que contiene la tabla decontenidos 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 dentrodel documento.

Lalista completa de tipos de relaciones se puede consultar:(http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-links)



14

Codificación de caracteres (charset)

• Los enlaces también pueden indicar lacodificación de caracteres que utiliza la páginaweb enlazada.

• Los valores que se pueden utilizar tambiénestán estandarizados y las codificaciones másutilizadas 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 decodificaciones de caracteres disponibles

• (http://www.iana.org/assignments/character-sets) .



16

Otros enlaces

• Los enlaces creados con la etiqueta <a>

– Debemos activar el enlace haciendo clic en elenlace.

• Otros enlaces que cargan los recursos

automáticamente. – Css – JavaScript

• Se define las etiquetas <script> y <link> paraenlazar recursos que se deben cargar

automáticamente.



18

Enlace a js externo

<head>

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

script></head>



19

Script incluido en la pagina<html><head>

<script type="text/javascript">//<![CDATA[window.onload = function() { alert("La página se ha cargado

completamente"); }

//]]></script></head><body>

...</body></html>



20

Novedad en XHTML

• Cuando se incluye código JavaScript en lapropia página XHTML, se debe insertar dentrode una sección especial llamada CDATA. – el código JavaScript se debe encerrar entre

<![CDATA[ y ]]>.

• Cuando el navegador encuentra una sección deeste tipo, no procesa su contenido como si fueraXHTML y por tanto no tiene en cuenta losposibles errores de validación de XHTML.

• De esta forma, se pueden construir páginasXHTML válidas y código JavaScript correcto.



21

link



22

• Al contrario que <script>, la etiqueta <link> solamente se puedeincluir dentro de la cabecera del documento.

• Se pueden añadir tantas etiquetas <link> como seannecesarias, pero siempre dentro de <head>...</head>.

• El atributo media hace referencia al medio para el que es válidala relación con el recurso enlazado.

• Los medios disponibles también están estandarizados, siendolos más comunes screen para los contenidos mostrados enpantalla, print para las impresoras y handheld para losdispositivos móviles.

• El uso habitual de la etiqueta <link> es el de enlazar las hojasde estilos CSS utilizadas por las páginas web:• <head>• ...• <link rel="stylesheet" type="text/css" href="/css/comun.css" />• </head>• En este caso, es habitual establecer los atributos rel y type

para indicar el tipo de recurso enlazado y su relación con lapágina web.



23

Enlace al inicio del sitio web

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

• Al pulsar el enlace anterior desdecualquier página web, se vuelve

directamente a la página de inicio, home opágina principal del sitio web.



24

Enlace a un email

• <a href="mailto:[email protected]"title="Dirección de email para solicitar másinformación">

• Solicita más información• </a>• Al pinchar sobre el enlace anterior, se abre

automáticamente el programa de correoelectrónico del ordenador del usuario y seestablece la dirección de envío al valor indicadodespués de mailto:

25

•  • <a

href="mailto:[email protected],[email protected]">Solicita más• información</a>

26

•  • <a

href="mailto:[email protected]?subject=Solicitud de más información">Solicitamás información</a>

27

•  • <a

href="mailto:[email protected]?body=Estaría interesado en solicitar más• información sobre sus productos">Solicita

más información</a>



29

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" />

E l h j d til CSS



30

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" />



31

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 iconose muestra en la barra de direcciones, en la barra detí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 navegadoressoportan favicons en otros formatos gráficos máshabituales (como por ejemplo .PNG).

Indicar q e e iste na ersión de



32

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>

Indicar que existe una versión de la



33

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>

XHTML_2_enlaces

Documents

Transcript of XHTML_2_enlaces