Hola a todos,
Anoche me enviaron un mail pidiéndome ayuda para enlazar páginas secundarias a una página de inicio en nuestro sitio web.
ES MUY FÁCIL, OS LO VOY A EXPLICAR:
Bien, si os acordáis del módulo del curso de desarrollo web donde tratan el tema de los enlaces web nos explicaba dos tipos de enlace en HTML.
- Enlaces a un punto de la misma página.
- Enlaces a otras páginas web.
El que nos interesa es el segundo tipo, los enlaces a otras páginas web.
Para explicaros como lo he echo yo voy a poner como ejemplo el proyecto que hice en la actividad 2.17 del curso de desarrollo web.
En este mismo blog, podéis ver la entrada que puse hace poco sobre esta actividad:
Como podéis ver se trata de mi currículum vitae y consta de 7 páginas. Aunque no esta aun subido a Internet, nos sirve perfectamente para explicar los enlaces.
Este es el código HTML de mi página de Inicio:
<html>
<head>
<title>CV JUAN FRANCISCO ORVAY MUÑIZ</title>
</head>
<body>
<h1>CURRICULUM VITAE</h1>
<h2>JUAN FRANCISCO ORVAY MUÑIZ</h2>
<br />
<br />
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg1%20datos.html"><strong>Datos personales</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg2%20formacion.html"><strong>Formación académica</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg3%20experiencia.html"><strong>Experiencia profesional</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg4%20habilidades.html"><strong>Habilidades</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20otros%20datos.html"><strong>Otros datos de interes</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20contacto.html"><strong>Contacto</strong></a></p>
</body>
</html>
Y vamos a coger el código HTML de una de las 6 páginas restantes del cv para ver como he puesto los enlaces (por ejemplo la página 2 "Formación Académica"):
<html>
<head>
<title>CV ORVAY FORMACIÓN ACADÉMICA</title>
</head>
<body>
<h1>FORMACIÓN ACADÉMICA</h1>
<br />
<br />
<h2>Formación profesional 2º Grado</h2>
<h3>Rama administrativa y comercial</h3>
<br />
<br />
<br />
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg0%20inicio.html"><strong>INICIO</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg1%20datos.html"><strong>PÁGINA ANTERIOR</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg3%20experiencia.html"><strong>PÁGINA SIGUIENTE</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20contacto.html"><strong>CONTACTO</strong></a></p>
</body>
</html>
Si os fijáis en la página inferior de cada código hay una serie de enlaces. Empiezan por <p><a href=....
Si observáis el primer código (el de la página de Inicio) hay un enlace a cada una de las 6 páginas que conforman mi currículum. El que nos interesa ahora es el segundo enlace:
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg1%20datos.html"><strong>Datos personales</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg2%20formacion.html"><strong>Formación académica</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg3%20experiencia.html"><strong>Experiencia profesional</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg4%20habilidades.html"><strong>Habilidades</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20otros%20datos.html"><strong>Otros datos de interes</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20contacto.html"><strong>Contacto</strong></a></p>
</body>
</html>
Pero, ¿de dónde he sacado la URL para escribir el enlace?
Muy sencillo, simplemente basta con abrir la página en el navegador y copiar lo que pone en la barra de navegación.
Después, simplemente, basta con escribir el enlace en HTML de este modo:
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg2%20formacion.html"><strong>Formación académica</strong></a></p>
Muy importante que os fijes en la colocación de las ", pues por lo menos por mi parte es donde suelo, a veces, cometer algún error.
Para terminar debemos ir al código de la página que estamos enlazando (en este caso el de la Formación Académica). Miramos los enlaces que tengo escritos y veréis que el primero es el de INICIO:
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg0%20inicio.html"><strong>INICIO</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg1%20datos.html"><strong>PÁGINA ANTERIOR</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg3%20experiencia.html"><strong>PÁGINA SIGUIENTE</strong></a></p>
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg5%20contacto.html"><strong>CONTACTO</strong></a></p>
El procedimiento para escribir este enlace es el mismo. Abres la página de Inicio en el navegador y buscas la URL.
Para acabar escribes el código del enlace en el sitio correspondiente de la página 2:
<p><a href="file:///D:/ESCRITORIO/ORVAY/CURSOS/CREACION%20WEB/PROYECTOS/CURRICULUM/PAGINAS/pg0%20inicio.html"><strong>INICIO</strong></a></p>
Y ya están enlazadas las 2 páginas:
- De INICIO a FORMACIÓN ACADÉMICA
- De FORMACIÓN ACADÉMICA a INICIO
Estos pasos debéis seguirlos para ir enlazando todas las páginas que compongan vuestro sitio web. Tened en cuenta que en mi ejemplo, y supongo que os pasará lo mismo, las páginas están guardadas en mi ordenador. Cuando lo suba al hosting para hacerlo público deberé cambiar las URLs actuales, que si os fijáis son las carpetas donde se guardan los archivos en el ordenador, por las URLs de la Web donde ser carguen las páginas.
La mejor forma de aprender y perfeccionar todo esto es practicándolo mucho.
Así que,
Espero haberos ayudado, aunque sólo sea un poco
No hay comentarios:
Publicar un comentario