viernes, 25 de mayo de 2012

Ejercicio 13: Los hiperenlaces.

El hipertexto o hiperenlace nos permite enlazar nuestra página web con otras de dos formas:

1. Dentro de la misma página: poniendo un enlace que nos lleve a otro lugar dentro de la misma página.
2. A otra página: simplemente tendremos que dar la URL donde se encuentra, bien en nuestro disco duro, bien en internet.

A estos enlaces se les llama también link.


Vamos a construir tres páginas y partir de aquí las enlazaremos primero unas con otras.

Empezaremos con la primera página. A esta primera página o página principal la llamaremos index.html.

Escribamos su código:


<html>
         <head>
                   <title>Página web de Lola Mena</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <center><img src="imagenes/banner.jpg"></center>
                   <h1>Teoría del color</h1>
                   <ol type="A">
                            <li>El color luz
                            <li>El color pigmento
                            <li>Colores cálidos
                            <li>Colores fríos
                   </ol>
                   <table align="center" border="1" width="75%" height="150">
                             <tr>
                                        <td>Síntesis aditiva</td>
                                        <td>Síntesis sustractiva</td>
                                        <td>Colores complementarios</td>
                                        <td>...</td>
                                        </tr>
                    </table>
         </body>
</html>

Esto, que es más o menos lo que llevamos hecho hasta ahora, habrá que guardarlo en un directorio nuevo. Construiremos una página con los títulos para el bloque uno. Este archivo se llamará bloque1.html y éste es su código:



<html>
         <head>
                   <title>Página web de Lola Mena-Bloque1</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <center><img src="imagenes/banner.jpg"></center>
                   <h1>Teoría del color: El color luz</h1>
                   <ol type="A">
                            <li>Newton y la teoría de las descomposición de la luz.
                            <li>La síntesis aditiva del color luz.
                            <li>Uso terapéutico del color.
                            <li>Colores luz y escenografía.
                   </ol>
                   <table align="center" border="1" width="75%" height="150">
                             <tr>
                                        <td>Síntesis aditiva</td>
                                        <td>Síntesis sustractiva</td>
                                        <td>Colores complementarios</td>
                                        <td>...</td>
                                        </tr>
                    </table>
         </body>
</html>

Bien, ahora enlazaremos la página principal (index.html) con la página bloque1.html. Para ello utilizaremos el tag <a href="URL">Texto de enlace</a>.


Ahora tendremos que añadir el código necesario en el archivo index.html.


<html>
         <head>
                   <title>Página web de Lola Mena</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <center><img src="imagenes/banner.jpg"></center>
                   <h1>Teoría del color</h1>
                   <ol type="A">
                            <li><a href="bloque1.html"> El color luz</a>
                            <li>El color pigmento
                            <li>Colores cálidos
                            <li>Colores fríos
                   </ol>
...

Una vez que guardes este código en el archivo index.html, tus archivos deben quedar como siguen:

1. Tendrás una carpeta en la que debe haber asimismo una carpeta "imagenes" en las que estarán tus imágenes (las que utilices en la página web).
2. Dentro de esa carpeta mayor habrá también un documento llamado bloque1.html y otro llamado index.html.

Bien sólo nos queda enlazar ahora la página bloque1.html con index.html. Para ello pondremos un enlace , por ejemplo, en la imagen que tenemos. Modificamos el código del archivo bloque1.html y lo guardamos, actualizamos el navegador y comprobamos los enlaces.


<html>
         <head>
                   <title>Página web de Lola Mena-Bloque1</title>
         </head>
         <body bgcolor=#5d0000 text=#f9e783>
                   <center><a href="index.html"><img src="imagenes/banner.jpg">
border="0" alt="Página Principal" title="Página Principal"></a></center>
                   <h1>Teoría del color: El color luz</h1>

No hay comentarios:

Publicar un comentario