Tema: Hipervínculos CONTENIDOS Qué es un hipervínculo? Referencia absoluta y referencia relativa Destino _blank y _self Formato y tipos de los enlaces Div y CSS OBJETIVOS ESPECÍFICOS Que el estudiante aprenda a crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. MATERIALES Leer previamente la Guía número 3 Elementos proporcionados por docente para realización de asignación. Qué es un hipervínculo? Es un enlace, un elemento de un documento electrónico que hace referencia a otro recurso. Un enlace puede ser un texto, una imagen, video o audio y para esto ocuparemos la etiqueta <a> </ a> y el atributo href se especifica la página a la que está asociado el enlace. Existen diferentes formas de expresar una referencia a una página a través del atributo href: Referencia absoluta Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por medio de http://, el nombre del dominio y algunas veces el nombre de la página. Por ejemplo: <a href= http://www.udb.edu.sv > Visita el Sitio de la UDB </a> <a href= http://vimeo.com/111838017 > Ver un video </a> <a href= http://www.facebook.com/ > Facebook </a>
Al visualizarlo en el navegador aparecerá lo siguiente: Al dar click a cada enlace nos redirige al sitio web de la Universidad Don Bosco, un video y a la red social de Facebook. Referencia relativa Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio. Por ejemplo: Teniendo en cuenta que el documento ejemplo.html se encuentra directamente dentro de la carpeta raíz del sitio, para insertar el enlace: <a href= ejemplo.html > Ir a la página ejemplo </a> <a href= perro.jpg > Ver una imagen </a> <a href= guia3.pdf >Ver un pdf </a> Al visualizarlo en el navegador aparecerá lo siguiente: Al dar click a cada enlace nos redirige a un html dentro del mismo proyecto web, visualizar una imagen y pdf.
Destino o target del enlace El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores: _blank: Abre el documento vinculado en una ventana nueva del navegador. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. Veamos aplicado el destino en referencia absoluta: <a href= http://www.udb.edu.sv target= _blank > Visita el sitio de la UDB en una ventana nueva </a> a href= http://www.udb.edu.sv target= _self > Visita el sitio de la UDB en la misma ventana </a> Veamos aplicado el destino en referencia relativa: <a href= ejemplo.html target= _blank > Abre el enlace en una ventana nueva </a> a href= ejemplo.html target= _self > Abre el enlace en la misma ventana </a> Estilo de enlaces Normalmente los vínculos de texto cambian de color cuando el enlace ha sido ya pulsado o cuando el puntero del ratón se posiciona sobre él, estos cambios están predefinidos en cada navegador, pero nosotros podemos cambiar esos colores. Los colores de los vínculos pueden especificarse a través de las propiedades de la página, en la etiqueta <body>. Estos colores se asignan a través de los atributos link (vínculo), alink (vínculo activo), y vlink (vínculo visitado). Explicado de una forma más detallada: link: permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez). alink: permite determinar el color del enlace activo (enlace que acaba de ser pulsado). vlink: permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados). Por ejemplo: <body link= #FF0000 vlink= #FF0099 alink= #FF9900 >
Mientras no se visite la página www.udb.edu.sv, el enlace será de color rojo (#FF0000): Mientras la página www.udb.edu.sv sea la última visitada, el enlace será de color fucsia (#FF0099): Cuando se haya visitado la página www.udb.edu.sv, el enlace será de color naranja (#FF9900): Enlaces a correo electrónico Abre la aplicación Outlook Express o Mail; para escribir un correo electrónico, cuyo destinario será el especificado en el enlace. Para ello la referencia del vínculo debe ser mailto:escribircorreodedestino. Por ejemplo: <a href= mailto:info@udb.edu.sv > Escríbenos a un mensaje</a>
PROCEDIMIENTO: 1. Cree una carpeta con el nombre de la guia 3. 2. Dentro de la carpeta de guia 3, coloque los archivos proporcionados por su docente. 3. Administre el sitio o proyecto con el nombre de guía 3 más su nombre y apellido. 4. Abra Dreamweaver cree el HTML y guardelo en la carpeta de la guia 3 con el nombre de: guia3.html no deje espacios al momento de guardarlo. 5. Coloque las etiquetas de apertura y cierre de HTML, HEAD, TITLE Y BODY, como se presenta a continuación: <!doctype html> <html> <head> <meta charset= UTF-8 > <title>the Pocketbook</title> </head> Guarde el archivo y visualícelo con el menú Archivo / Vista previa en el navegador o si lo prefiere más inmediatamente con la herramienta de Dreamweaver Vista Previa Lo que observará será una página HTML en blanco, pero note que la barra del título tiene el nombre del la práctica de ahora: The Pocketbook que usted puso dentro de la etiqueta TITLE de su HTML.
6. Agregaremos un fondo a la composición y nos vamos ayudar del atributo background dentro de etiqueta BODY. <body background= background.jpg > </body> Con la etiqueta BODY BACKGROUND usted puede otorgarle una imagen de fondo a la página creada, esta imagen debe de estar guardada en la carpeta Imagenes/img/images de la carpeta raíz del proyecto. A la etiqueta BODY BACKGROUND le colocaremos un parámetro, el parámetro será STYLE, para que la imagen quede fija y solo se repita a los lados: <body background= background.jpg style= background-repeat:repeat-x > </body> En el navegador visualizaremos algo como lo siguiente: 7. Aplicar estilos a los enlaces para eso colocaremos las siguientes propiedades siempre dentro de la etiqueta BODY: <body background= background.jpg style= background-repeat:repeat-x link= #000099 alink= #FFFF00 vlink= #FF00FF > </body>
8. Ahora agregaremos las hojas de estilo CSS, necesitamos dirigirnos en Archivo / Nuevo... y seleccionamos el tipo de página CSS. 9. Guardamos la hoja de estilo dentro de nuestra carpeta guia3 o guia_3, esta hoja le otorgaremos el nombre de: estilos_guia3.css 10. Ahora damos paso a enlazar nuestra guia3.html, con la hoja de estilos CSS, en este caso dentro de la etiqueta <head> aplicaremos el siguiente código: <head> <link href= estilos_guia3.css rel= stylesheet type= text/css > </head> Nota: El atributo rel= stylesheet especifica que el documento en cuestión es una hoja de estilo externa y el atributo type= text/css se usa para especificar un tipo de medio 11. Puede notar que en la parte superior la hoja de estilo ya esta vinculada a nuestro HTML: 12. En este momento ya podemos aplicar la etiqueta DIV, a nuestra guía 3. Qué es la etiqueta DIV? se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.
Dentro de la etiqueta BODY se aplica el código de la siguiente manera: <body> <div> </div> </body> En la guía 2 aprendimos como agregar imágenes dentro del código html, así que vamos agregar la imagen del logotipo de The pocketbook, que esta dentro de la carpeta img denomiado: logopocketbook.png dentro de la etiqueta div, que acabamos de crear, el código se presenta de la siguiente manera: <body> <div> <img src= img/logopocketbook.png width= 287 height= 197 /> </div> </body> En el navegador visualizaremos algo como lo siguiente: Si pueden notar el logotipo esta justificado es a la derecha y nosotros necesitamos que su posición sea al centro de la composición, es por ello que nos vamos ayudar de agregar un atributo a la etiqueta DIV, y ese atributo es align= center, el código queda de la siguiente manera: <body> <div align= center > <img src= img/logopocketbook.png width= 287 height= 197 /> </div> </body>
13. Ahora agregaremos textos a nuestra composición a continuación los textos que utilizaremos:... The Pocketbook is a creative commons book that collects 120 tips from featured creatives of the design world adressed to newcomer graphic designers.... Con la ayuda de los CSS le daremos formato al texto, en la parte superior abrimos los estilos_guia3.html header { } p{ font-family:baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif; font-size:24px; font-style:normal; color:#330099; text-align:justify; } Ahora vamos agregar otra etiqueta DIV con el id denominado: enlaces, en el cual vamos agregar una tabla con las siguientes especificaciones: 1 fila, 6 columnas y espacio entre celdas 5. En la tabla vamos organizar los elementos de la siguiente manera: -Columna 1: isotipo1.png -Columna 2: texto: FACEBOOK -Columna 3: isotipo2.png -Columna 4: texto: Descarga The Pocketbook -Columna 5: isotipo3.png -Columna 6: texto: Wallpaper #enlaces{ font-family:baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif; font-size:8px; color:#ffffff; text-align:center; }
15.Recordar que guardar los cambios que hacemos en CSS, así como también en la hoja de HTML. Para que se aplique lo que hemos programado. 16.Ahora vamos a vincular los textos Facebook, Descarga The Pocketbook y Wallpaper, para ellos nos vamos ayudar del panel de propiedades, que en muchas ocaciones lo encontramos en la parte inferior del programa, si no tienes activo el panel, busca en Ventana/Propiedades y listo. 17.Selecciona el texto con el cursor, nos dirigimos al panel de propiedades y vinculamos así: Facebook <a href= https://www.facebook.com/>facebook</a> Destino: _blank Descarga The Pocketbook <a href= pdf/thepocketbook.pdf >Descarga The Pocketbook</a> Destino: _blank Wallpaper <a href= img/wallpaper.jpg >Wallpaper</a> Destino: _blank 18. Agregamos otra tabla más para invitar a las personas que nos escriban un correo Así que escribimos el texto Escríbenos y vinculamos así: <p> <a href= mailto:info@thepocketbook.com > Escríbenos un mensaje </a> </p> 19. Ya para finalizar utilizaremos la etiqueta FOOTER, la cual nos sirve para: representa el pie de un documento o sección. <footer> 2015 The Pocketbook. Todos los derechos reservados. </footer>
REFERENCIAS BIBLIOGRÁFICAS //Guía HTML, Antonio Berciano Alonso ABA Noviembre 1999. http:// platea.pntic.mec.es/~abercian/guiahtml/index. html //Manual de HTML: www.webtaller.com // Wikipedia. //Guía 1, Guía 2 Diseño Digital 5, Universidad Don Bosco