Programación en html 5

Repaso
En 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 7
1. 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ágenes
Para 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 8
En 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ágina
Si 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 9
1. 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ú

Programación en html 5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (20)

Similar a Programación en html 5

Similar a Programación en html 5 (20)

Último

Último (20)

Programación en html 5