7
7. Enlaces o vínculos
Los enlaces o links nos permiten conectarnos con otros sitios de internet.
Para ello debemos usar la etiqueta <a> </a>. que proviene de la primera letra de la palabra
anchor (ancla). E introducimos el atributo href con el valor al que queremos enlazar
Ej:<a href="URL">Texto</a>
Para enlazar una imagen: debemos colocar la etiqueta <img> en lugar del texto
<a href="http://www.google.com/"><img src="imagenes/google.gif"></a>
Ejercicio 5:Crea una página que contenga un hipervínculo al Heraldo de Aragón, y al
buscador de google, mediante una imagen.
8. Imágenes dentro de una página <img>
Establecer una imagen como fondo de página: debemos introducir dentro de la
etiqueta body, el atributo style="background-image: url (‘imagenes/fondo1.png’)"
En este atributo hay que indicar la url o lugar donde se aloja la imagen (en este caso en la
carpeta “imágenes” y se llama “fondo1.png”. OJO: no olvides poner la extensión del archivo.
Si no indicamos nada la imagen de fondo se repetirá en horizontal y vertical, tantas veces
como necesitemos.
Para controlar el tipo de repetición debemos introducir los siguientes atributos:
8
Insertar una imagen: debemos colocar la etiqueta <img>correspondiente entre
los párrafos donde queramos colocar la imagen.
Esta etiqueta no tiene cierre.
Esta etiqueta debe ir acompañada del atributo src que es el que contiene el URL de la
ubicación del archivo de la imagen.
La imagen aparecerá con sus medidas correspondientes.
<img src="carpeta/nombre">
La alineación de la imagen será arriba o abajo. Si queremos posicionar algo a su derecha o
izquierda utilizaremos el atributo style = "float: valor"
Ejemplo insertar una imagen:
9
Ejemplo insertar una imagen de fondo:
Ejercicio 6: Diseña una página que muestre dos imágenes, una debajo de otra.
10
El siguiente código, coloca una imagen de fondo de página, sólo una vez, en el lado izquierdo.
Da este resultado
Ejercicio 7
Diseña una página que muestre una imagen de fondo a la derecha.