GUIA 3 Tema: Hipervínculos. Objetivo General Crear una página de inicio para que los alumnos puedan aplicar los diferentes tipos de enlaces de hipertexto que existen en la web. Objetivos Específicos Crear imagenes con hipervínculos. Crear textos con hipervínculos. Contenidos Etiquetas de hipervínculos Materiales y Equipo Guía 3, previamente leída......................................... 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 o una imagen y para esto ocuparemos la etiqueta <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 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 Al visualizarlo en el navegador aparecerá lo siguiente: Referencia relativa al sitio: 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 Comunicate. html se encuentra directamente dentro de la carpeta raíz del sitio, para insertar el enlace: <a href= /Comunicate.html > Enlace a Comunícate UDB Si nos fijamos ahora no aparece el protocolo http:// sino que solamente aparece una /, esta barra inclinada indica la carpeta raíz del sitio. Destino 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. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador. De estos valores los que comunmente ocuparemos será: Blank y Self. Por ejemplo: <a href= http://www.udb.edu.sv target = _ blank > Visita el sitio de la UDB en una ventana nueva Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual. Formato de los 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 > <a href= http://www.udb.edu.sv target = _ blank >www.udb.edu.sv Mientras no se visite la página www.udb.edu.sv, el enlace será de color rojo (#FF0000): mailto:direcciondecorreo. Por ejemplo: <a href= mailto:info@udb.edu.sv > Escríbenos a info@udb.edu.sv Vínculo para ficheros de descarga El valor del atributo href también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensión pdf, a esto le denominamos archivos descarga. <a href= pensumcomunicaciones.pdf tarjet=_ blank > haz clic aquí para descargar el pesum de la Licenciatura en Comunicaciones UDB........................................ Procedimiento de laboratorio. 1. Cree una carpeta con el nombre de la guia 3. 2. Dentro de la carpeta de guia 3 haga una carpeta que se llame imagenes, va pegar las imagenes que el docente le proporcionará para hacer la práctica. Recuerde, los archivos no deben de llevar jamás o ñ 3. 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. 4. Coloque las etiquetas de apertura y cierre de HTML, HEAD, TITLE Y BODY, como se presenta a continuación: Mientras la página www.udb.edu.sv sea la última visitada, el enlace será de color fucsia (#FF0099): <HTML> <HEAD> <TITLE> Hipervínculos </TITLE> </HEAD> Cuando se haya visitado la página www.udb.edu.sv, el enlace será de color naranja (#FF9900): <BODY> </HTML> Guarde el archivo y visualícelo con el menú Archivo / Vista previa en el navegador o si lo prefiere más inmediatemente con la herramienta de Dreamweaver Vista Previa: Enlaces a correo electrónico Abre la aplicación Outlook Express o Mail; para escribir un correo electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del vínculo debe ser 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: Hipervínculos que usted puso dentro de la etiqueta TITLE de su HTML.
5. En medio de la etiqueta de apertura de BODY, escribiremos los siguientes parámetros marcados con negrita: (Estos puntos seguidos quiere decir que hay etiquetas HTML previas o posteriores) <BODY BACKGROUND= background.jpg > 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 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> 6. Formateemos los enlaces, para eso colocaremos las siguientes propiedades siempre dentro de la etiqueta BODY: <BODY BACKGROUND= background. jpg STYLE= background-repeat:repeat-x LINK= #FFFFFF ALINK= #FFFFFF VLINK= #FFFF00 > <BODY BACKGROUND= background. jpg STYLE= background-repeat:repeat-x LINK= #FFFFFF ALINK= #FFFFFF VLINK= #FFFF00 > 8. Damos un par de enters después de la etiqueta de apertura de FONT centramos la composición con la etiqueta CENTER y luego de ella ocuparemos la etiqueta TABLE, table funciona por medio de filas (etiqueta TR) y celdas (etiqueta TD) Similar como lo ocupamos en la guía anterior. <TD> </TD> Para poder visualizar la tabla vamos a agregar el siguiente valor: este valor representa un espacio en blanco. En el apartado de Diseño de Dreamweaver visualizaremos: 7. Además daremos formato al tipo de fuente de una sola vez para que todo lo que contenga la etiqueta FONT se adapte a los parámetros de tipo de fuente y color en el HTML.
9. En la celda cuya etiqueta es TD, insertaremos una imagen para eso utilizaremos la etiqueta IMG SRC, sustituiremos el valor  . <TD><IMG SRC= logocomunicate.png></td> En el apartado de Diseño de Dreamweaver visualizaremos: 10. Luego del cierre de TD, daremos un par de saltos de página para estos ocuparemos la etiqueta BR, cada BR es el equivalente a hacer el efecto de la tecla ENTER de nuestro teclado, visualmente vamos dejando espacios en la composición, luego crearemos otra tabla la cual contenga tres celdas. <TD><IMG SRC= logocomunicate.png></td> 12. En cada celda de la derecha (Etiqueta TD), incrustaremos una imagen para esto vamos a ocupar una etiqueta especial A HREF, la cual la acción que realiza es vincular, colocaremos la etiqueta IMG para que aparezca el ísotipo del comunícate y después de la etiqueta IMG y la de cierre de A HREF colocaremos el texto; el primer enlace nos refiere a FACEBOOK. Borraremos la etiqueta &NBSP: <TD><a href= https://www.facebook. com/udbcomunicate ><img src= isotipo. png >FACEBOOK</TD> 11. Para poder visualizar la tabla vamos a agregar el siguiente valor: este valor representa un espacio en blanco. Repetiremos el proceso para colocar el enlace a Twitter: https://twitter.com/udbcomunicate y para un documento de descarga. En el caso del documento de descarga recuerde que dentro de su carpeta imagenes hay un PDF, en el A HREF correspondiente entre las comillas coloque el nombre de éste documento: comunicaciones.pdf
<TD><A HREF= mailto:info@udb.comunicate. edu.sv >Escríbenos</A></TD> El resultado final será el siguiente: Al hacer clic en PENSUM debe de aparecer lo siguiente: 13. Damos un enter después de la etiqueta de cierre de CENTER y volvemos a aperturar CENTER y luego de ella ocuparemos la etiqueta TABLE y crearemos una fila y una celda, la celda debe de contener un espacio en blanco En medio del espacio en Blanco colocaremos un A HREF, pero ocuparemos el parámetro MAILTO, para escribir seguidamente la dirección de correo electrónico: