Hipervinculos en html
- 1. TEMA: HIPERVINCULOS EN HTML INDICACIÓN: Lee la siguiente información y posteriormente escribe en tu cuaderno las ideas principales o etiquetas que no conozcas, luego realiza los ejercicios que se te presentan y los guardas en tu carpeta de trabajo. Recuerden que cada ejercicio realizado en clase cuenta como parte de una de las actividades del periodo. Los hipervínculos locales o marcadores son enlaces dentro de la misma página. Es decir, al hacer clic en uno de ellos nos llevará a una posición distinta dentro de la misma página que estamos visualizando.
- 2. Esta técnica hace que los usuarios accedan de una manera más rápida a la información. Para crear este tipo de enlaces hay que hacer dos operaciones: Establecer marcadores (anclas) a lo largo de la página (son los lugares a los que queremos saltar con los enlaces). Poner enlaces que salten a los marcadores. El código de los marcadores se crea con los atributos name (no recomendado) ó id (recomendado): <a name="nombre_del_marcador">Texto asociado al marcador</a> (No recomendado: no es aceptado por las nuevas versiones de HTML, aunque se usó bastante en el pasado). <a id="nombre_del_marcador">Texto asociado al marcador</a>
- 3. El name ó id de una etiqueta debe ser único, es decir, no puede haber dos etiquetas cuyo name ó id sea el mismo dentro de un documento HTML. Por ejemplo, <a id="marcadorDeportes">Deportes El Gráfico</a> Por otro lado, el código de un enlace para que salte a un marcador. Pulsa para volver al <a href="#nombre_del_marcador ">Inicio</a> Hay que tener en cuenta que los marcadores distinguen entre mayúsculas y minúsculas. También hay que tener en cuenta que dentro de las etiquetas <a> </a> hay un texto que aparece visible para el usuario, que es el que hemos marcado subrayado en amarillo. No obstante, es válido no incluir texto alguno como veremos en el siguiente código.
- 4. REALIZA EL SIGUIENTE EJERCICIO <html> <head> <title>Ejemplo del uso de marcadores</title> </head> <body> <a name="arriba"></a> En esta página puedes ir al <a href="#primero">primer</a> apartado, al <a href="#segundo">segundo</a> o al <ahref="#tercero">tercero</a>. <a name="primero"><h1>Primer apartado</h1></a> Aquí tienes el primer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no
- 5. logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. <a name="segundo"><h1>Segundo apartado</h1></a> Aquí tienes el segundo apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. <a name="tercero"><h1>Tercer apartado</h1></a> Aquí tienes el tercer apartado. Al pulsar sobre el enlace, el navegador habrá saltado a esta parte de la página. Quizás si todo entra en la pantalla no logres ver el efecto pero prueba a poner más texto aquí o hacer zoom y conseguirás verlo. Volver <a href="#arriba">arriba</a>.
- 6. </body> </html> GUARDA EL EJERCICIO EN CARPETA DE TRABAJO EL ATRIBUTO TITLE PARA HIPERVÍNCULOS Como última cuestión, debemos tener en cuenta que es muy aconsejable poner un atributo extra cada vez que pongamos un hipervínculo en nuestras páginas. Este atributo es ‘title’ y con el pondremos título a nuestro hipervínculo. Con esto conseguiremos en la mayoría de los navegadores un efecto de ‘tool-tip’ que consiste en que cuando ponemos el cursor encima del hipervínculo nos aparezca una información adicional que es la que hayamos puesto en el atributo ‘title’.
- 7. EJERCICIO 2 <html> <head> <title>Ejemplo del uso de marcadores - aprenderaprogramar.com</title> </head> <body> <a href=”http://www.colegioinmaculada.edu.sv” title=”Esto es un tool.tip”>Ir a Colegio Inmaculada</a>. </body> </html> EN TU CUADERNO ESCRIBE LOS TIPOS DE HIPERVINCULOS QUE EXISTEN EN HTML Y ESCRIBE LA DESCRIPCIÓN DE CADA UNO.