Enlaces a páginas y URLs
Lo que hace interesante de las páginas web es poder navegar por diferentes páginas enlazándolas unas con otras.
Podemos indicar enlaces a una sección de la misma página (enlace interno) o tener enlaces que apunten a otras páginas (enlaces externos)
Un enlace se define con el tag <a> y la dirección del enlace se pone en el atributo href
<!– pagina principal –>
<html>
<head>
<title>Pagina principal.</title>
</head>
<body>
<p>Estamos en la página princial</p>
<p>Pulse sobre el link para ir a la <a href=»secundaria.html»>Siguiente</a> página.</p>
</body>
<!– fin de la página –>
</html>
<!– pagina secundaria –><html>
<head>
<title>Pagina secundaria</title>
</head>
<body>
<p>Estamos en la página secundaria</p>
<p>Pulse sobre el link para ir a la <a href=»principal.html»>Anterior</a> página.</p>
</body>
<!– fin de la página –>
</html>
Podeis ver el resultado en
URLs
Para poder navegar por las páginas de nuestro sitio web debemos indicar la posición de nuestras páginas en los enlaces.
Si solo se pone el nombre de la página el navegador entenderá que la página está en el mismo directorio que la página que tiene el enlace.
pej
En el ejemplo anterior las páginas principal.html y secundaria.html están en el mismo directorio
<a href=»secundaria.html»>
Si la página secundaria está en otro debemos poner el path relativo
<a href=»pruebas/secundaria.html»>
indicando que la página secundaria está en el subdirectorio pruebas.
y si queremos ir al directorio anterior pondremos ../
Ejemplos
.. crear directorio pruebas y mover secundaria.html
<!– pagina principal –>
<html>
<head>
<title>Pagina principal.</title>
</head>
<body>
<p>Estamos en la página princial</p>
<p>Pulse sobre el link para ir a la <a href=»pruebas/secundaria.html»>Siguiente</a> página.</p>
</body>
<!– fin de la página –>
</html>
<!– pagina secundaria –>
<html>
<head>
<title>Pagina secundaria</title>
</head>
<body>
<p>Estamos en la página secundaria</p>
<p>Pulse sobre el link para ir a la <a href=»../principal.html»>Anterior</a> página.</p>
</body>
<!– fin de la página –>
</html>