Ejercicio: Hiperenlaces

I.E.S. Albal
Profesor: Vicente Destruels Moreno
Ejercicio: Hiperenlaces
Para aplicar los conocimientos adquiridos en la ficha de los hiperenlaces vamos a
realizar una pequeña practica. Realiza los siguiente pasos.
1. Descargate a tu carpeta personal el fichero llamado Ejercicio4.htm
2. Abre Kompozer y carga el anterior fichero.
3. Situate por debajo de esta linea de código
<p>Enlace a una página Web</p>
y escribe un enlace al aula de Informática de la asignatura, que se habrá en una nueva
ventana.
Solución:
<a href="http://www.aulainformatica.eu" target="ventana"> Acceder al aula de
Informatica de Albal</a>
4. Situate debajo de la seccion 1 <h2>Seccion 1</h2> y escribe una etiqueta para que
posteriormente podamos realizar un salto (ANCLA).
Solución:
<a name="s1"></a> <br>
5. Vamos a realizar un salto interno a dicha etiqueta, situate debajo de <p>Enlace a una zona
de una página Web</p> y escribe el siguiente código.
Solución:
<a href="#s1">Haz clic aqui para saltar a la sección 1</a>
6. Vamos a enlazar con un documento ya existente, con el fichero llamado Teoria4.pdf. Situate
debajo del siguiente código
<p> Enlace a un documento</p> y escribe:
Página 1 de 5
I.E.S. Albal
Profesor: Vicente Destruels Moreno
Solución: <a href="Teoria4.pdf">Haz clic para acceder a la ficha de teoria4</a>
Te habrás fijado que en el modo diseño ha aparecido un ancla amarilla
correspondiente a la etiqueta NAME y los hiperenlaces han cambiado al color azul. Vamos
ahora a crear un ancla (etiqueta NAME) y posteriormente realizaremos un salto pero usando
ahora el editor y los menús de kompozer. Así pues, desde el modo Diseño:
7.
Situate después de la sección 2 y haz clic en Insertar-->Enlace interno.
Llama al enlace S2.
Nombre del enlace
Atributo Name con valor S2
Posibles atributos de la etiqueta NAME
Página 2 de 5
I.E.S. Albal
Profesor: Vicente Destruels Moreno
Haz clic en la pestaña del código y observa como se ha creado esta linea de código.
<h3>Seccion 2</h3>
<a name="s2"></a><br>
8.
Haz clic debajo del enlace que creamos en el paso 5,para saltar al enlace de la
sección 1
Haz clic aqui para saltar a la sección 1
y escribe Haz clic para saltar a la sección 2. Selecciona toda la frase y haz clic en
Insertar-->Enlace, aparecerá esta ventana. Despliega la lista y elige S2.
Página 3 de 5
I.E.S. Albal
Profesor: Vicente Destruels Moreno
Ademas activa el enlace se abrirá en una nueva ventana.
Haz clic en la pestaña del código fuente y comprueba como se ha creado una nueva
linea de código.
<a href="#s2" target="_blank">Haz clic para saltar a la sección 2</a><br>
Fijate como aparece el parametro target, ya que activamos que se abriera en una nueva
ventana.
Por ultimo, una nueva forma de acceso rápido a las propiedades de las etiquetas
HTML ya creadas consiste en hacer un doble clic sobre cualquier etiqueta amarilla desde la
pestaña de Etiquetas HTML.
A modo de ejemplo haz clic en la pestaña Etiquetas HTML y haz un doble clic sobre
la etiqueta
Página 4 de 5
I.E.S. Albal
Profesor: Vicente Destruels Moreno
Observa como aparece la ventana de propiedades del enlace
Página 5 de 5