Vamos a crear a continuación el ejercicio de hipervínculos en HTML.
Están listos.
Vamos.
El objetivo del ejercicio es poner en práctica los hipervínculos en HTML y al finalizar deberemos observar
lo siguiente según se muestra
como primer paso vamos a crear nuestro proyecto.
El proyecto se llama hipervínculos HTML y lo depositamos en la ruta mostrada y damos clic en Finalizar
posteriormente vamos a crear un nuevo documento HTML.
Este documento se llama índex 2 podemos observar que este documento lo vamos a depositar a nivel raíz
por lo tanto la carpeta de folder nos vamos a indicar ninguna información ya que va a ir directamente
sobre el proyecto dentro de la carpeta de públic HTML y dentro de esa raíz se deposita el documento
de Index 2 puntos HTML.
Esto lo comentamos porque a continuación vamos a crear algunos documentos que se van a encontrar en
distintas carpetas.
Sin embargo este documento Index 2 se encuentra a nivel raíz de nuestro proyecto HTML.
Por lo tanto dejamos en blanco el campo de folder y damos clic en Finalizar
posteriormente vamos a crear otro documento.
En este caso el nombre del archivo se llama Link 1 pero podemos observar que el nombre de la carpeta
el nombre del folder es links y podemos observar que dentro del proyecto dentro de la carpeta de Public
Bion bajo HTML estamos agregando la carpeta de links y dentro de esta carpeta es que estamos agregando
el documento links 1 punto HTML debido a que es común que creemos carpetas para empezar a organizar
nuestro código HTML.
Por eso es que vamos a empezar a manejar ese tipo de carpetas y la información de esta manera va a estar
más organizada y también debemos de saber cómo mandar a llamar estos elementos dentro de carpetas.
Por ello es que este ejercicio se va a encargar no solamente de hacer llamadas a hipervínculos sino
también cómo podemos mandar a llamar esos archivos dentro de subcarpetas y una vez que hemos proporcionado
estos valores damos clic en Finalizar y por último vamos a crear otro archivo llamado Curso HTML y podemos
observar que tenemos tres folders y para definir los folders podemos utilizar la siguiente notación.
Indicamos el folder de links el cual ya habíamos creado posteriormente por medio de una diagonal inversa.
Indicamos otro folder llamado cursos y finalmente por medio de otra diagonal inversa agregamos el folder
de HTML y podemos observar los tres folders que se han creado dentro de la carpeta a nivel raíz públic
HTML.
Ahora tenemos tres folders tres niveles links cursos y HTML y dentro de estos folder tenemos entonces
el documento curso HTML punto HTML.
Esto va a ser importante debido a que vamos a empezar a hacer llamadas entre distintos documentos utilizando
subcarpetas y damos clic en Finalizar como siguiente paso vamos a modificar nuestro archivo índex punto
HTML agregamos lo siguiente.
Esto ya lo hemos trabajado simplemente vamos a definir nuestro documento HTML.
El título es ejemplo de hipervínculos.
Posteriormente agregamos el cuerpo y el título de ejemplo hipervínculos posteriormente agregamos un
párrafo y agregamos un primer hipervínculo.
En este caso es un hipervínculo que hace referencia a un sitio externo.
En este caso estamos indicando por medio de la etiqueta a que vamos a abrir un hipervínculo posteriormente
por medio del atributo HR-V indicamos el valor del sitio web al que queremos hacer referencia.
En este caso estamos haciendo referencia al sitio de globalmente el punto com punto Mx.
Sin embargo debido a que es un sitio externo entonces estamos agregando HTTP así que en este caso al
iniciar el R.L desde el protocolo HTTP estamos indicando que es una ruta absoluta es decir que no tiene
ninguna dependencia con nuestro sitio ya que si el documento al que queremos hacer referencia se encuentra
dentro de nuestro sitio podemos omitir el uso del protocolo HTTP y entonces en este caso se considera
que es una ruta relativa y sería relativa a alguna ubicación dentro de nuestro proyecto pero en este
caso debido a que es una ruta externa entonces hacemos uso de una ruta absoluta y por ello es que este
R.L inicia con el protocolo HTTP y posteriormente indicamos el R.L al cual queremos hacer referencia.
Posteriormente agregamos el atributo de título en este caso sitio de Global mentoring y también podemos
agregar el atributo de target en este caso este atributo nos va a servir para indicar al navegador si
queremos abrir este nuevo u R.L en una ventana nueva o lo mantenemos dentro de la misma ventana.
En este caso como estamos manejando un bajo Blanck estamos indicando al navegador que habrá una nueva
ventana por lo tanto va a mantener dos ventanas la ventana de esta aplicación que va a tener la página
de índex punto HTML y va a abrir un nuevo navegador y va a cargar el sitio de Global mentoring.
Así que por medio de este atributo target podemos controlar si se va a manejar la misma ventana o vamos
a abrir un nuevo navegador y finalmente lo que va a visualizar el usuario es la cadena Link a Global
mentoring y con eso cerramos nuestra etiqueta de hipervínculo.
Así que este es un ejemplo de uso de hipervínculo a un sitio externo posteriormente abrimos otro párrafo
pero ahora vamos a manejar un link utilizando una ruta relativa.
Si recordamos este documento indexados HTML se encuentra a nivel raíz del proyecto por lo tanto cuando
estamos haciendo referencia por medio de nuestro hipervínculo y dentro del atributo HR-V podemos agregar
directamente el nombre del archivo índex 2 punto HTML debido a que este archivo se encuentra en la misma
ubicación donde se de donde se encuentra el archivo índex HTML y todos los documentos que se encuentren
dentro de la misma ruta se pueden mandar a llamar directamente entre ellos no hay necesidad de establecer
el protocolo HTTP etc. para hacer referencia a este documento sino que simplemente con el nombre del
documento y si los archivos se encuentran en la misma carpeta podemos hacer referencia entre ellos directamente
o utilizando un hipervínculo y en este caso el usuario va a visualizar índex 2 Veamos ahora el concepto
de hipervínculo pero apuntando a una subcarpeta si recordamos el archivo D-Link lo agregamos dentro
de la carpeta de links así que para poder hacer referencia a este hipervínculo tenemos que especificar
la subcarpeta dónde se encuentra y posteriormente el recurso HTML al cual queremos hacer referencia
debido a que este documento índex HTML se encuentra a nivel raíz.
Entonces debemos especificar la siguiente carpeta en la cual queremos profundizar.
Por ello indicamos la carpeta de links y finalmente el recurso HTML al cual estamos haciendo referencia
y el usuario va a visualizar el texto del link.
1.
Pero cuando demos clic a este hipervínculo se va a mostrar el archivo de 1 punto HTML
y finalmente podemos mostrar también un link a una subcarpeta con más niveles.
Por ejemplo en este caso si recordamos el documento curso HTML puntua HTML lo depositamos dentro de
varias carpetas.
La subcarpeta de links posteriormente cursos y posteriormente HTML y de esta manera es que podemos hacer
uso de el concepto de subcarpeta dentro de otras subcarpeta y así es como vamos a ir ordenando nuestros
elementos HTML.
Podemos tener todos los elementos directamente donde se encuentra al nivel de raíz el documento índex
HTML o también podemos tener sus carpetas con las cuales podemos ir organizando de mejor manera nuestro
código HTML
como siguiente paso vamos a definir nuestros documentos indexados punto HTML agregamos el Doctrine también
agregamos un título Index 2 y dentro del cuerpo agregamos simplemente el título de indexados y agregamos
un link para regresar al archivo de índex punto HTML.
Debido a que este archivo índex 2.ª HTML se encuentra en la misma carpeta es decir a nivel raíz que
el archivo Index punto HTML podemos hacer uso directamente de la llamada a este documento no hay necesidad
de establecer ninguna subcarpeta ni tampoco especificar el protocolo HTTP debido a que estamos haciendo
uso de una ruta relativa y debido a que se encuentran en la misma carpeta entonces podemos simplemente
especificar el nombre del archivo que deseamos mandar a llamar y cerramos el cuerpo de nuestro código
HTML y también el documento HTML
ahora vamos a modificar nuestro código Link 1 punto HTML agregamos un título Link 1 y dentro del cuerpo
vamos a agregar también el título de 1 y ahora vamos a agregar lo siguiente Vamos a agregar ahora un
link para el índex punto HTML para poder regresar a este Index.
Sin embargo debido a que estamos en una carpeta distinta necesitamos especificar hacia dónde vamos a
hacer referencia y si recordamos este archivo de Link 1 se encuentra dentro de la carpeta de links
pero si queremos hacer referencia a la carpeta raíz entonces necesitamos subir un nivel para que podamos
regresar a la carpeta raíz y encontrar entonces el archivo de Index punto HTML.
Para ello es que vamos a utilizar la notación de dos puntos y con esto lo que estamos especificando
es que vamos a subir precisamente un nivel respecto de la carpeta actual y entonces para encontrar el
archivo de Index lo que vamos a hacer es especificar lo siguiente Vamos a agregar nuestra ancla y posteriormente
el atributo de HR-V y vamos a indicar que por medio de los dos puntos lo que vamos a hacer es precisamente
regresar un nivel de la carpeta de links en la cual se encuentra este archivo.
D-Link punto HTML y de esta manera una vez que ya hemos regresado un nivel una subcarpeta entonces ya
podemos hacer referencia a nuestro documento índex punto HTML y entonces es que vamos a poder encontrar
este documento si no colocamos los dos puntos entonces este archivo índex HTML si lo colocamos directamente
no se encuentra dentro de la misma ubicación que el archivo link 1.La HTML ya que recordemos que este
archivo link 1 lo hemos depositado en otra carpeta así que este es un tema muy importante analizar cuando
estemos manejando carpetas y subcarpetas para organizar nuestro código HTML así que necesitamos saber
en qué carpeta nos encontramos y hacia qué carpeta queremos movernos de manera relativa dentro de nuestro
proyecto HTML así que esa es la forma en que vamos a subir de nivel.
Respecto de la carpeta actual con eso cerramos el cuerpo de nuestro documento HTML y cerramos la etiqueta
HTML y finalmente también vamos a especificar el contenido de nuestro documento curso HTML punto HTML.
Agregamos lo siguiente en el cabecero agregamos también un título y vamos a agregar también un link
de regreso al índex HTML sin embargo en este caso estamos dentro de tres carpetas así que para poder
hacer referencia a nuestro archivo de índex punto HTML necesitamos subir tres niveles el primer nivel
sube a la carpeta de HTML
si recordamos ese archivo de curso HTML se encuentra dentro de tres carpetas la primera carpeta es la
carpeta de links
posteriormente definimos una carpeta llamada cursos y posteriormente la carpeta de HTML los nombres
pueden ser cualquiera.
únicamente estamos poniendo de ejemplo un nombre de carpeta links cursos y HTML pero nosotros podemos
utilizar cualquier tipo de nombres y cualquier cantidad de su folders.
Pero ahora dentro de esta carpeta de HTML es que depositamos el archivo de curso HTML punto HTML pero
si recordamos el archivo de Index se encuentra a nivel raíz de nuestro proyecto es decir antes de la
carpeta de links aquí estaría nuestro carpeta de Public públic HTML así que necesitamos subir hasta
esta carpeta.
Para ello vamos a indicar lo siguiente primeramente indicamos dos puntos.
El primer uso de estos dos puntos sube de la carpeta HTML a la carpeta de cursos es decir que estamos
cambiando de la carpeta HTML hacia la carpeta de cursos.
El segundo uso de los dos puntos lo que va a hacer es cambiar de la carpeta de cursos hacia la carpeta
de links y el tercer uso de los dos puntos lo que va a hacer es cambiar de la carpeta de links hacia
la carpeta de públic y finalmente aquí es donde podemos encontrar el archivo de Index.
Por ello es que tenemos que utilizar tres veces el uso de los dos puntos para poder subir desde la carpeta
de HTML.
Posteriormente cursos links y llegar a la carpeta raíz de Public HTML es decir a la carpeta raíz de
este proyecto web y allí precisamente es donde se encuentra el archivo de Index punto HTML así que esta
es la manera en que vamos a empezar a trabajar las carpetas y subcarpetas para subir necesitamos especificar
los dos puntos si es que estamos utilizando el concepto de ruta relativas.
Si utilizáramos el concepto de rutas absolutas entonces podríamos comenzar con el protocolo HTTP y especificar
directamente dónde se encuentra este archivo dentro de nuestro proyecto web.
Sin embargo debido a que estamos utilizando archivos HTML dentro del mismo proyecto es conveniente utilizar
rutas relativas ya que toda información que esté dentro del mismo proyecto es conveniente que utilice
rutas relativas y finalmente cerramos el cuerpo de nuestro documento HTML y el documento HTML.
Recuerden que para cualquier duda pueden dar clic en cualquiera de los nombres de los archivos.
Sin embargo se le solicita codificar línea a línea.
Este ejercicio para que quede claro este concepto de hipervínculos
finalmente ejecutamos nuestro proyecto y el resultado es como sigue.
Si damos clic sobre el link de globalmente Haring entonces podemos observar que se nos abre un nuevo
tabulador ya que especificamos en el atributo de Target la opción de guion bajo Blanck y esto nos abre
una nueva ventana en este caso un nuevo tabulador
si damos clic sobre el siguiente hipervínculo entonces se nos abre el contenido de índex 2 punto HTML
pero podemos observar que se encuentran dentro de la misma carpeta hipervínculos a nivel raíz encontramos
el documento índex punto HTML y también podemos observar que tenemos hipervínculos y a nivel raíz tenemos
el archivo de Index 2 punto HTML.
Por ello es que entre ellos mismos se pueden mandar a llamar simplemente especificando el nombre del
archivo no hay necesidad de especificar ninguna carpeta ni tampoco especificar qué necesitamos subir
de niveles para hacer la llamada de nueva cuenta al índex HTML
pero si damos clic al link de subcarpeta Link 1 entonces podemos observar en primer lugar el wereables
de hipervínculos HTML se encuentra a nivel raíz el índex HTML pero el archivo de Link 1 punto HTML no
se encuentra a nivel raíz sino a nivel de una subcarpeta dentro de la carpeta de links.
Por ello para que este archivo de Link 1 HTML pueda volver a llamar este archivo de Index es necesario
subir una carpeta de links hacia la carpeta de públic HTML la carpeta de públic HTML no se visualiza
dentro del navegador ya que esto únicamente es a nivel interno del proyecto HTML ya que cuando se publica
nuestro proyecto únicamente se publica el nombre del proyecto pero ya no se publica la carpeta de Public
HTML sino que directamente dentro del nombre del proyecto se va a empezar a publicar la información
HTML así que en este caso necesitamos especificar que para mandar a llamar el link de índex HTML necesitamos
subir un nivel.
Por ello es que este índex utilizamos la notación de dos puntos diagonal y posteriormente índex HTML
ya que estamos dentro de una subcarpeta y necesitamos subir un nivel para que podamos estar otra vez
a nivel raíz del proyecto HTML.
Es decir de la carpeta públic HTML y por último tenemos también la llamada a la subcarpeta de curso
HTML pero podemos observar que ahora este documento se encuentra dentro de tres carpetas por ello para
mandar a llamar de Nueva cuenta el índex.
Desde esta ruta de curso HTML necesitamos subir tres niveles de la carpeta HTML a cursos de cursos a
links y de links hacia la carpeta de públic HTML y de esta manera es que vamos a volver a encontrar
el archivo de índex HTML.
Por ello este hipervínculo tiene tres veces uso de dos puntos y finalmente es que se encuentra el archivo
de índex punto HTML así que esta es la manera en que vamos a utilizar la ruta relativas cuando estamos
manejando hipervínculos en HTML
como conclusión.
Con este ejercicio hemos puesto en práctica el concepto de hipervínculos en HTML el cual nos permite
enlazar archivos HTML y de esta manera establecer un flujo de navegación entre los distintos archivos
o páginas web de nuestros proyectos.
Con esto concluimos el ejercicio de hipervínculos HTML.