Links entre páginas 1

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

Hemos aprendido como crear páginas web, pero que hay de los sitios web?
En este video aprenderemos como crear más de un archivo HTML y vincular estos archivos, que es la base de un sitio web
Qué pasa si deseamos que un link nos lleve hacia otra página web?
Para poder hacer esto, necesitamos en primer lugar tener esa otra página, así que vamos a crear una página nueva
Vamos a copiar este contenido, creamos el nuevo documento, pegamos el contenido de la otra página
Lo vamos simplemente a copiar y pegar ya que ambas páginas se parecerán mucho, y al menos la estructura de ambas páginas no será muy diferente
Así que ahora guardaremos esta página y le llamaremos otra página punto HTML
Algo muy importante al crear esta otra página, es asegurarnos de que la nueva página se encuentra en el mismo folder o directorio que nuestra primera página
Por ejemplo
Si vamos al folder donde estamos guardando esta página, podremos ver que tenemos ambas página aquí, la página index y la nueva página
En caso de que no se encuentren en el mismo folder, simplemente trasládalas al mismo folder, ya que si no lo haces los links que vamos a crear no funcionarán
Lo que haremos ahora es que en la página index.html crearemos un párrafo que dirá, página de inicio
Y en la otra página crearemos un párrafo que dirá te encuentras en la otra página
De esta forma podremos diferenciar en cuál de las dos páginas nos encontramos, dentro del navegador
Así que guardamos, regresamos al navegador y al refrescar podremos ver que en la página index.html tenemos el texto que hemos colocado, y si vamos hacia otrapagina.html podremos ver el otro texto de esta segunda página
Ahora regresemos a nuestro editor y creemos el primer link entre estas dos páginas HTML
El primer link lo vamos a crear en index.html, vamos a colocar nuestra etiqueta anchor debajo de nuestro párrafo
El texto para el link será ver siguiente página, y dentro del atribut href, vamos a colocar el nombre de la otra página
Que en este caso sería otrapagina.html
Ahora guardamos, regresamos al navegador y refrescamos
Podemos ver ahora nuestro nuevo link, y si damos clic en él, no llevará hacia la otra página que hemos creado
Vamos a usar el botón de regresar de nuestro navegador para regresar a index.html
Y quiero que prestes atención a la barra de direcciones, puedes ver que actualmente nos encontramos en index.html, no importa lo que está antes de index ya que es solo la dirección donde se encuentra alojado ese documento en nuestra computadora
Lo realmente importante es que puedas ver que nos encontramos en index.html
Entonces cuando hacemos clic en el link, nos lleva hacia otro documento, nos envía hacia otrapagina.html
Ahora regresaremos a nuestro editor de texto, lo que haremos será colocar un nuevo link, pero en otrapagina.html hacia index.html
De modo que no tengamos que usar el botón de regresar del navegador, y podamos usar los links para navegar y movernos entre estas páginas
Entramos en el documento de otrapagina.html y añadimos al igual que en index.html, una etiqueta anchor abajo del párrafo, en esta ocasión colocaremos como texto de nuestro en lace la frase, regresar a la página anterior
Y dentro del atributo href, colocaremos el nombre del archivo al que deseamos vincular, que sería index.html
Muy bien, ahora guardamos, regresamos al navegador y refrescamos index.html
Ahora si damos clic en el link, nos llevará hacia otrapagina.html donde podemos ver que tenemos nuestro nuevo link,
Y al darle clic nos envía hacia index.html que es donde nos encontrábamos anteriormente
Ahora, si recordamos, he mencionado al inicio, que nuestros documentos HTML debían encontrarse en el mismo directorio
Ya que el actual tipo de link que nos encontramos usando es llamado relative link, lo que significa que los archivos que vinculamos se encuentran en el mismo folder que nuestro documento HTML actual
Como puedes ver en el folder donde tenemos estos archivos, ambos se encuentran en el mismo folder, y es por eso que los links, tal y como los hemos creado han funcionado correctamente
Ya que no hemos necesitado indicar donde se encuentra cada archivo en la estructura del sitio web, debido a que ambos archivos se encuentran en el mismo folder
Para visualizar mejor esto, vamos a intentar algo
Vamos a crear un nuevo folder, podemos darle el nombre que deseemos, pero en este caso le llamaremos demo
Y ahora vamos a pasar el archivo otrapagina.html hacia el folder demo
Así que si ahora vamos al navegador y damos clic en el enlace que nos debería llevar hacia otrapagina.html
Vamos a recibir un error por parte del navegador
Ya que el archivo no puede ser encontrado
Este error es un error 404, lo que significa que lo que hemos buscado o el lugar a donde nos dirigimos no existe
Como podemos ver, estamos intentando entrar en el archivo otrapagina.html pero el archivo ya no existe en esta dirección
Eso es debido a que lo hemos movido hacia otro folder
Para solucionar esto debemos especificar el folder en el que se encuentra ese archivo dentro del valor del atributo href
Pero eso es algo que veremos en el siguiente vídeo.

2 Comments on “Links entre páginas 1”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres aprender a crear sitios web?

Regístrate gratis como estudiante y aprende a crear sitios web sorprendentes. Gana certificados y medallas al completar los cursos gratuitos.
¡REGÍSTRATE GRATIS!
close-link
Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image