on la definicin anterior, para crear un enlace que apunte a la pgina principal

de Google solamente habra que incluir lo siguiente en un documento HTML:

<a href="http://www.google.com">Pgina principal de Google</a>
Como el atributo href indica una URL, un enlace puede apuntar a cualquier
tipo de recurso al que pueda acceder el navegador. El siguiente enlace
apunta a una imagen, que se mostrar en el navegador cuando el usuario
pinche sobre el enlace:
<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesan
te para un fondo de escritorio</a>
De la misma forma, los enlaces pueden apuntar directamente a documentos
PDF, Word, etc.
<a href="http://www.ejemplo.com/informe.pdf">Descargar informe complet
o [PDF]</a>

<a href="http://www.ejemplo.com/informe.doc">Descargar informe complet

o [DOC]</a>
Un truco muy til con los enlaces es el uso de URL relativas para poder
volver al inicio del sitio web desde cualquier pgina web interior:
<a href="/">Volver al inicio</a>
El enlace anterior utiliza una URL relativa con una ruta que apunta
directamente a la raz del servidor. Para obtener la URL absoluta, el
navegador aade el mismo protocolo y el mismo nombre de servidor de la
pgina en la que se encuentra el enlace. El resultado es que cuando se
pincha ese enlace, siempre se vuelve al inicio del sitio web,
independientemende de la pgina en la que se incluya el enlace.

El otro atributo bsico de la etiqueta <a> es name, que permite definir enlaces
dentro de una misma pgina web. Si una pgina es muy larga, puede ser til
mostrar enlaces de tipo "Saltar hasta la segunda seccin", "Volver al principio de
la pgina", etc.

Este tipo de enlaces son especiales, ya que la URL de la pgina siempre es

la misma para todas las secciones y por tanto, debe aadirse otra parte a las
URL para identificar cada seccin.
<a name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id
ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praes
ent condimentum mattis ligula.</p>

...

<a name="segunda_seccion"></a>

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a

, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, place
rat varius, facilisis eget, dolor.</p>

...
El atributo name permite crear "enlaces vacos" que hacen referencia a
secciones dentro de una misma pgina. Una vez definidos los "enlaces
vacos", es posible crear un enlace que apunte directamente a una seccin
concreta de una pgina:
<!-- Enlace normal a la pgina -->

<a href="http://www.ejemplo.com/pagina1.html">Enlace a la pgina 1</a>

<!-- Enlace directo a la segunda seccin de la pgina -->

<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a
la seccin 2 de la pgina 1</a>
La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces
normales, salvo que se aade el smbolo # seguido del nombre de la seccin
a la que se apunta. Cuando el usuario pincha sobre uno de estos enlaces, el
navegador accede a la pgina apuntada por la URL y baja directamente a la
seccin cuyo nombre se indica despus del smbolo #.

Tambin es posible utilizar este tipo de enlaces con URL relativas en una
misma pgina. El siguiente ejemplo aade enlaces de tipo "Volver al inicio de
la pgina" en varias secciones:

<a name="inicio"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id
ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praes
ent condimentum mattis ligula.</p>

<a href="#inicio">Volver al inicio de la pgina</a>

...

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a

, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, place
rat varius, facilisis eget, dolor.</p>

<a href="#inicio">Volver al inicio de la pgina</a>

...
Los enlaces directos a secciones tambin funcionan con el atributo id de
cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:
<h1 id="inicio">Ttulo de la pgina</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id

ligula eu felis adipiscing ultrices. Duis gravida leo ut lectus. Praes
ent condimentum mattis ligula.</p>

<a href="#inicio">Volver al inicio de la pgina</a>

...

<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a

, convallis eu, nonummy et, odio. Aenean urna elit, ultrices id, place
rat varius, facilisis eget, dolor.</p>

<a href="#inicio">Volver al inicio de la pgina</a>

...
El nombre de la seccin que se indica despus del smbolo # puede utilizar el
valor de los atributos idde cualquier elemento. De hecho, se recomienda
utilizar los atributos id de los elementos ya existentes en la pgina en vez de
crear "enlaces vacos" de tipo <a name="nombre_seccion"></a>.

Ejercicio 6
A partir de la estructura de directorios y archivos indicada en la siguiente
imagen:

Figura 4.2 Estructura de archivos y directorios de un sitio web de ejemplo

1) Crear la siguiente pgina llamada indice.html que sirva como pgina
principal del sitio:
Figura 4.3 Pgina principal del sitio web de ejemplo
2) Crear la pgina de ndice del portfolio:
Figura 4.4 Pgina con la informacin sobre los proyectos realizados
Descargar ZIP con las imgenes

Ver solucin