El lenguaje HTML. II. Añadir enlaces (Duckett, cap. 2) Sylvain Hallé Ÿ 8GIF128 Diseño y programación web

Tamaño: px

Comenzar la demostración a partir de la página:

Download "El lenguaje HTML. II. Añadir enlaces (Duckett, cap. 2) Sylvain Hallé Ÿ 8GIF128 Diseño y programación web"

Lidia Silva San Segundo
hace 8 años
Vistas:

1 El lenguaje HTML II. Añadir enlaces (Duckett, cap. 2)

2 Enlaces entre las páginas Para añadir un enlace de una página a una otra, se utiliza la etiquete <a>. Ejemplo simple: <body> <p>return to the <a href="index.html"> home page </a>. </p> </body> þ ch_02_eg01.html Se da un URL completo ( al atributo href para hacer un enlace hasta una página en un otro servidor (enlace externo) þ ch_02_eg02.html

html"> home page </a>. </p> </body> þ ch_02_eg01.html Se da un URL completo (http://.

3 Enlaces entre las páginas Reglas básicas para los enlaces: - El contenido del elemento <a> debe dar una descripción clara y corta aquel al que apunta el enlace - Los motores de búsqueda utilizan el contenido de este elemento para poner las páginas en sus índices - Unos programas (ej.: screen readers) dependen del texto para funcionar correctamente (cf. en Firefox) - los aquí, haga clic aquí, etc. Evitar a toda costa Mala práctica denunciada desde al menos 10 años!

poner las páginas en sus índices - Unos programas (ej.

4 Enlaces entre las páginas Se puede añadir una descripción a un enlace con el atributo title <a href=" title="search the Web with Google"> Google</a> Un enlace se muestra por defecto subrayado por el browser... Error de principante: dejar espacio antes o después del texto del enlace ( el espacio será subrayado!) þ ch_02_eg04.html

com/" title="search the Web with Google"> Google</a> Un enlace se muestra por defecto

5 Enlace Recuerdo: formato de una URL Han otros protocoles que http gopher:// Enlace hacia un sitio Gopher ftp:// mailto: Enlace hacia un sitio FTP Para enviar un <a href=" me un </a>

html Han otros protocoles que http gopher:// Enlace hacia un sitio

6 Enlace Se puede pre-rellenar algunos parametros del por adelantando en el enlace (p. 76): Cuidado! 1. Si hay espacios, se debe escribirlos en %20 2. Si se quiere saltar una línea, se debe escribir %0D%0A 3. El & debe ser sustituido por &

org Cuidado! 1. Si hay espacios, se debe escribirlos en %20 2.

7 Carpetas P: Qué paso cuando escribemos No hay un nombre de archivo! R: El servidor web realiza las siguientes acciones: 1. Busca index.html (o index.php o index.asp) en la carpeta 2. Si encuentra nada, muestra una lista de archivos de la carpeta 3. Sinon, respuesta con un mensaje indicando que la página preguntada no ha sido encontrada (404 Not Found)

asp) en la carpeta 2. Si encuentra nada, muestra una lista de archivos de la carpeta 3.

8 P: Por qué los enlaces de los ejemplos anteriores, como index.html funcionan? Hay no protocolo y no servidor! R: El browser fabrica un URL completo a partir del URL de la página corriente (p ) Se puede subir y bajar en las carpetas del servidor utilizando.. y / Carpetas Se puede especificar al browser la raíz común a los enlaces de un documento: <base href=" />

R: El browser fabrica un URL completo a partir del URL de la página corriente (p.

9 Enlaces de origen y de destinación Todos los enlaces vistos hasta ahora son enlaces de origen. Un enlace puede apuntar a una parte especifica de una página, por ejemplo: <a href="mapage.html #section1">...</a> Apunta hacia section1 de mapage.html Se declara section1 utilizando un enlace de mapage.html: destinación en <a id=" #section1"></a> þ ch_02_eg06.html

Un enlace puede apuntar a una parte especifica de una página, por ejemplo: <a

10 Enlaces de origen y de destinación El elemento <a> puede tener otros atributos (menos utilizados): accesskey charset coords hreflang rel rev shape tabindex target title type Atajo de teclado (keyboard shortcut) Codificación de caracteres del archivo Posición en un image map Lingua del archivo Relación con la origen Relación con la destinación (no utilizado) Forma del enlace (cuando es una imagen) Orden de visita de los enlaces con la tecla tab Abrir un enlace en una nueva ventana Muestra un texto explicativo Declara el tipo de archivo del enlace (no utilizado)

del archivo Relación con la origen Relación con la destinación (no utilizado) Forma del enlace (cuando es una imagen) Orden de visita de los

11 Como estructurar sus páginas La etiqueta de un enlace debe describir claramente la destinación del enlace... pero la URL sí mismo debe ser claro. La estructura de las páginas de un sitio (y el nombre de los documentos) no se debe ser elegido ligeramente! Ejemplo: sitio web de música en línea con una página para cada artista. / index.html page_01.html page_02.html page_03.html... URL para Pascale Picard: Cual es la URL para Pierre Lapointe? Cual es la URL de la lista de los artistas?

La estructura de las páginas de un sitio (y el nombre de los documentos) no se debe ser elegido ligeramente!

12 Como estructurar sus páginas / index.html artistes/ index.html pascale_picard.html eric_lapointe.html... URL para Pascale Picard: Cual es la URL para Pierre Lapointe? Cual es la URL de la lista de los artistas? Cual es la URL de la lista de los espectáculos de Pascale Picard? De Pierre Lapointe?

com/artistes/pascale_picard.html Cual es la URL para Pierre Lapointe?

13 Como estructurar sus páginas / index.html artistes/ pascale_picard/ index.html spectacles.html... URL para Pascale Picard: Cual es la URL de la lista de espectáculos de 2009 de Pascale Picard?

com/artistes/pascale_picard/ Cual es la URL de la lista de

14 Como estructurar sus páginas / index.html artistes/ pascale_picard/ index.html spectacles/ index.html 2009.html URL para Pascale Picard: Cual es la URL de la lista de espectáculos de 2009 de Pascale Picard? Maña: si se separa varios elementos de información en el nombre de un archivo, como: artiste_pascale_picard_spectacles_2009_montreal.html artiste_pierre_lapointe_spectacles_2010_france.html...en general, esta información debe ser escribida en forma de una jerarquía de «carpetas»: /artistes/pascale_picard/spectacles/2009/montreal.html

Maña: si se separa varios elementos de información en el nombre de un archivo, como: artiste_pascale_picard_spectacles_2009_montreal.

15 Las carpetas y nombres de páginas del URL deben tener una significación. Lista de las sucursales de Desjardins Lista de las sucursales del Banco Nacional: ,00.html# Otro ejemplo: Como estructurar sus páginas Lista de los profesores del departamento de ciencias de la computación en la Universidad Laval: en UQAC:

ca/bnc/cda/index/0,4229,divid-2_langid-2_navcode 1000,00.

16 Como estructurar sus páginas Último ejemplo: el sitio web de vuestro profesor

17 Una vez que se crea una dirección URL, puede que nunca desaparece: siempre hay alguien que apunta arriba. Moraleja: buenos URL no cambian þ Cool URIs don't change Ejemplo personal: Como estructurar sus páginas De 81 universidades canadienses, 10 de ellas habían cambiado el URL de sus departamento de recursos humanos entre Mayo y Noviembre el enlace anterior apuntaba a una página 404 Not Found

Moraleja: buenos URL no cambian þ Cool URIs don't change Ejemplo personal: Como estructurar sus

18 Como estructurar sus páginas Campeona de todas las categorías: Universidad Ste-Anne (Nuevo-Brunswick): Mayo Noviembre Octubre view=article&id=62&itemid=115 Enero

php Noviembre 2008 http://www.usainteanne.ca/emplois/emplois.php Octubre 2009 http://www.

19 Para la próxima clase Visitad sitios desactivando los estilos, o utilizando el plugin Web Developer Toolbar para mostrar los elementos HTML de las páginas Intentad de encontrar el sitio que mejor funciona y el sitio más ilegible.

para mostrar los elementos HTML de las páginas Intentad

Documentos relacionados

Configuración de un sitio local

Configuración de un sitio local Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes