4. ENLACES HTML DENTRO de la MISMA PAGINA 🔴 como CREAR … — Transcript

Presta mucha atención que para este tutorial vamos a implementar la navegación entre páginas en nuestro sitio, vamos a crear un sitio web sobre Tecnología y Gadgets.

Lo que vamos a hacer para nuestro tutorial es instalarnos, no es obligatorio, pero por comodidad y por rapidez, en este caso estoy utilizando Visual Studio Code y no te preocupes que la instalación de este editor de código es muy rápida y en la descripción del video vas a encontrar el enlace directo para que lo puedas instalar.

Vamos a dirigirnos aquí donde dice File y escogemos donde dice Open Folder, aquí tengo la carpeta de mi página, se llama Página Web y le doy seleccionar carpeta.

Como podemos observar entonces, Visual Studio Code carga aquí en la parte izquierda la carpeta donde tenemos nuestro index.html, recordemos que este index lo desarrollamos en el video anterior donde aprendimos a incrustar la imagen o una imagen de ejemplo en nuestra página.

Para este caso lo vamos a borrar y también tenemos la carpeta IMG, aquí en la carpeta IMG, pues tengo un logo que vamos a estar utilizando para el desarrollo de nuestro sitio.

Lo primero que vamos a tener en cuenta para nuestra página es el encabezado de la misma, esto lo vamos a hacer mediante un header y dentro del header vamos a ubicar el menú que vamos a estar utilizando, vamos a tener también el contenido principal o un main y vamos a tener también un footer, recordemos que el footer es la parte inferior de nuestra página donde se acostumbra a colocar información relacionada con el negocio.

En nuestro encabezado vamos a colocar entonces el menú que vamos a estar utilizando y también el título de nuestra página, para este caso vamos a colocarle Tecnología y Gadgets, ese será el título de nuestra página y aquí vamos a colocar nuestra barra de navegación mediante un nav.

Recordemos que inicialmente nuestra página no tendrá estilos, ya tendremos una sección de este curso en el cual haremos un videotutorial para aplicar los estilos a nuestra página y que nuestra página sea mucho más bonita, vamos a colocar entonces dentro de nuestro nav una una serie de enlaces o una lista no ordenada mediante la etiqueta UL y mediante LI vamos a colocar entonces los enlaces que vamos a estar utilizando, entonces tenemos el primer enlace sería el index.html y sería la página de inicio, recordemos que el index siempre es la página que vamos a estar utilizando para el inicio de nuestro sitio.

Lo que podemos hacer aquí entonces, básicamente es copiarnos este elemento que tenemos aquí, como podemos observar entonces ya tenemos armado nuestro menú, en el cual simplemente hemos reescrito o hemos cambiado los nombres de cada uno de los enlaces y aquí tenemos entonces los archivos HTML a los cuales queremos redirigir al momento de hacer clic en esos enlaces.

Si verificamos o comprobamos nuestra página, vamos a observar entonces que ya tenemos el título y tenemos aquí nuestros enlaces, a continuación vamos a hacer el cuerpo de nuestra página que lo tenemos aquí en nuestro main, vamos a utilizar entonces un título mucho más pequeño, un H2 y vamos a colocar aquí Bienvenidos a Tecnología y Gadgets.

Tendríamos nuestro título, vamos a colocar un párrafo también aquí, el cual colocaremos Explora las últimas reseñas de productos tecnológicos, comparativas detalladas y tutoriales paso a paso para sacar el máximo provecho a tus dispositivos favoritos, ahí tenemos un párrafo con la etiqueta P, colocaremos un segundo párrafo para este ejemplo, en el cual también colocamos otro mensaje relacionado, en nuestra web encontrarás información actualizada sobre los gadgets más novedosos y las mejores guías para resolver tus dudas tecnológicas, ahí tendríamos entonces el mensaje de bienvenida aquí.

Faltaría entonces el footer, para el footer vamos a colocar un párrafo y colocamos aquí todos los derechos reservados.

Ahí tendríamos entonces nuestra página principal con todos los elementos, como la idea de este video es aprender a hacer la redirección o la navegación de nuestro menú, claramente necesitamos crear cada uno de esos esos elementos aquí en nuestra en nuestra carpeta principal de nuestro sitio, lo podemos hacer por aquí o lo podemos hacer por acá por Visual Studio Code, vamos a crear uno por aquí, clic derecho, nuevo, documento de texto y aquí colocamos el primero, sería reviews, recordemos que la extensión debe ser .html.

Ahí tendríamos entonces la primera página, como podemos observar como tenemos acá abierto en Visual Studio Code la página, la carpeta, enseguida nos aparece aquí reviews y podemos trabajar de inmediato en ese archivo, si así lo deseamos, es importante tener en cuenta que los nombres que tenemos aquí deben ser tal cual como los tenemos acá en nuestra carpeta, de lo contrario no va a encontrar el archivo, aquí si lo queremos crear por acá por Visual Studio Code, simplemente hacemos clic aquí, new file y aquí podemos colocar comparativas.html, ahí tendríamos el archivo de comparativas, faltaría el de tutoriales.html y faltaría el de contacto.html, ahí tendríamos entonces todos los archivos de nuestro sitio y si revisamos la carpeta, claramente aquí también se han ido creando porque los hemos ido creando desde acá desde Visual Studio Code.

Ahora cómo hacemos para navegar entre nuestros archivos de nuestro sitio, pues lo que vamos a hacer es copiarnos todo este contenido de nuestra página index.html y lo vamos a pegar acá en los demás archivos, claramente quitándole el contenido que tenemos aquí para nuestro main y vamos a dejar solamente un mensaje que represente la presencia en esa página, vamos a colocar aquí contacto, página de contacto, ahí tendríamos esa parte aquí, esto lo copiamos y lo vamos a pegar en el de tutoriales, tutoriales, página de tutoriales, aquí comparativas, página de comparativas y por último tendremos la página de reviews.

Muy bien, como podemos observar entonces, cada una de las páginas tiene una estructura similar, lo que va cambiando es el contenido, por lo pronto tenemos solamente un título y un párrafo, este contenido que tenemos aquí lo iremos cambiando al pasar de los videotutoriales porque iremos integrando diferentes elementos de HTML y cada una de estas páginas nos servirá para ir estudiando esos elementos, por lo pronto entonces, si nos dirigimos acá a nuestra página index.html, vamos a observar entonces que tenemos aquí la página que ya habíamos visto anteriormente y si hacemos clic en reviews, nos manda entonces para la página correspondiente, como podemos observar aquí dice reviews, página de reviews, si nos pasamos a comparativas, tenemos la página de comparativas, tutoriales y contacto.

De forma fácil ya nuestra página o nuestro sitio tiene una navegación entre todas las páginas que hemos creado actualmente, algo que podemos tener en cuenta aquí para este videotutorial es que podemos tener variaciones aquí para la etiqueta A, por ejemplo si queremos que este enlace de reviews abra en una pestaña nueva, pues utilizamos aquí la propiedad target y le decimos aquí blank, con target blank al momento de dirigirnos aquí en nuestra página de inicio, y actualizamos y nos vamos aquí a reviews, vamos a notar que la navegación se hace sobre otra pestaña, a diferencia de los otros enlaces que abren en la misma pestaña, la página de reviews abre en una pestaña nueva gracias a esa propiedad llamada target blank.

Si queremos también colocar de pronto un mensaje, un tipo tooltip, podemos hacerlo de la siguiente forma, mediante title, podemos colocar aquí página principal, esto nos servirá que al momento de estar en la página de inicio, si acercamos el mouse aquí, nos va a aparecer página principal, es otra propiedad que es muy útil para que las personas también al momento de ubicar el mouse encima de un enlace tenga una descripción más detallada sobre lo que va a obtener.

Por último en nuestra página principal, simplemente le vamos a añadir también aquí con la etiqueta IMG, de la carpeta IMG, nuestro logo, vamos a colocar aquí en el texto alternativo, logo principal, ya tendríamos entonces aquí nuestra página principal con nuestro logo y una descripción y así mismo una navegación entre cada una de las páginas para poder acceder a los contenidos que tenemos en nuestro sitio web y de esta forma podemos entonces utilizar enlaces en HTML para navegar en nuestro sitio web.

Si necesitas ver más variaciones del uso de la etiqueta A de HTML, la podrás encontrar aquí en la descripción de este video, si este video fue de ayuda para ti, no olvides suscribirte y dejar tu comentario, hasta la próxima, línea de código.