El lenguaje HTML II. Añadir enlaces (Duckett, cap. 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 (http://...) al atributo href para hacer un enlace hasta una página en un otro servidor (enlace externo) þ ch_02_eg02.html
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!
Enlaces entre las páginas Se puede añadir una descripción a un enlace con el atributo title <a href="http://www.google.com/" 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
Enlace e-mail Recuerdo: formato de una URL http://www.example.com/artistes/beatles.html Han otros protocoles que http gopher:// Enlace hacia un sitio Gopher ftp:// mailto: Enlace hacia un sitio FTP Para enviar un e-mail <a href=" mailto:shalle@acm.org">envia me un e-mail</a>
Enlace e-mail Se puede pre-rellenar algunos parametros del e-mail por adelantando en el enlace (p. 76): mailto:info@example.org?subject=inquiry mailto:info@example.org?subject=xhtml& cc=sales@example.org 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 &
Carpetas P: Qué paso cuando escribemos http://www.google.ca? 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)
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. 63-65) 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="http://www.examplesite2.com/" />
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
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)
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: http://monsite.com/page_02.html Cual es la URL para Pierre Lapointe? Cual es la URL de la lista de los artistas?
Como estructurar sus páginas / index.html artistes/ index.html pascale_picard.html eric_lapointe.html... URL para Pascale Picard: http://monsite.com/artistes/pascale_picard.html 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?
Como estructurar sus páginas / index.html artistes/ pascale_picard/ index.html spectacles.html... URL para Pascale Picard: http://monsite.com/artistes/pascale_picard/ Cual es la URL de la lista de espectáculos de 2009 de Pascale Picard?
Como estructurar sus páginas / index.html artistes/ pascale_picard/ index.html spectacles/ index.html 2009.html URL para Pascale Picard: http://monsite.com/artistes/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
Las carpetas y nombres de páginas del URL deben tener una significación. Lista de las sucursales de Desjardins http://www.desjardins.com/fr/votre_caisse/caisses-par-region.jsp Lista de las sucursales del Banco Nacional: http://www.bnc.ca/bnc/cda/index/0,4229,divid-2_langid-2_navcode 1000,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: http://www.ift.ulaval.ca/departement/professeurs/...y en UQAC: http://wprodl.uqac.ca/programmes/personnel_dept.html?type=prof&
Como estructurar sus páginas Último ejemplo: el sitio web de vuestro profesor
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 2008......el enlace anterior apuntaba a una página 404 Not Found
Como estructurar sus páginas Campeona de todas las categorías: Universidad Ste-Anne (Nuevo-Brunswick): Mayo 2008 http://www.usainteanne.ca/emplois/combler.php Noviembre 2008 http://www.usainteanne.ca/emplois/emplois.php Octubre 2009 http://www.usainteanne.ca/index.php?option=com_content& view=article&id=62&itemid=115 Enero 2011 http://www.usainteanne.ca/offres-demploi/offres-demploi?!?
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.