programación en html 5
TRANSCRIPT
PROGRAMACIÓN EN HTML
Capítulo 5:Hipervínculos
Material desarrollado por el profesor Luis Carlos Flórez ToroImagen tomada de : www.mastermagazine.info
RepasoEn la clase anterior vimos cómo poner imágenes con la etiqueta <img>.¿Recuerdas cómo se usa?:
Imagen tomada de http://formaciondevendedoresempresarios.blogspot.com
<body>
<img src=“- - - - -url - - -”></body>
Ahora aprenderemos la manera de poner Hipervínculos en HTML, ¡bienvenidos!
Hipervínculo“Dentro de una página web, los hipervínculos son las palabras, párrafos o imágenes que al darles click, te llevarán a otro lugar, ya sea a otra página, o a una sección en específico dentro de la misma página”.
http://www.basekit.com.mx
En html se utiliza la etiqueta <a> para poner hipervínculos, así como se muestra a continuación:
EL texto del vínculo aparecerá en el browser subrayado y en azul y al señalarlo el puntero del mouse mostrará una “manito”
<a href=“dirección del sitio”> texto del vínculo </a>
Ejemplo:
<a href=“www.futbolred.com”> futbol colombiano </a>
ACTIVIDAD 71. Abre el documento htm de la clase anterior en bloc de notas.2. Escribe tres hipervínculos que lleven a páginas que te gusten. (Recuerda las
restricciones que tienes en el colegio para abrir algunos sitios).3. Los hipervínculos deben quedar en párrafos diferentes
La página debe quedarte similar a como aparece en la siguiente imagen:
Hipervínculos con imágenesPara que una imagen quede con un hipervínculo, solo debes reemplazar el texto del vínculo por la etiqueta de imagen correspondiente, así como se muestra en el siguiente ejemplo:
<a href=“www.google.com”> <img src=http://blog.dgomez.com.ar/system/files/image/google.png> </a>
En este ejemplo, a una imagen de google se le asigna un hipervínculo para que al hacer clic sobre ella se abra www.google.com
ACTIVIDAD 8En el documento html de la clase inserta la imagen de un mapamundi pequeño; asígnale un hipervínculo para que al hacer clic sobre ella nos lleve a google maps.
Hipervínculos dentro de una misma páginaSi queremos que el hipervínculo nos lleve a algunas partes de la misma página, debemos marcar esas partes, usando el atributo “id”, como se muestra en el siguiente ejemplo:
<h1 id=“refranes”> MIS REFRANES </h1>
Después, podremos dirigir el hipervínculo a ese sitio, anteponiendo a la palabra clave un signo #, así:
<a href=“#refranes”> Ir a los refranes </a>
Debes definir una palabra clave para identificar este punto de la página.
ACTIVIDAD 91. Debes marcar las diferentes secciones de la página con id adecuados.2. Luego debes crear un menú en la parte superior de la página, para ir a las
diferentes secciones de la página.
La página debe quedarte similar a la que se muestra en la siguiente imagen:
Así debe quedar el menú