Speaker A
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.
Full Transcript ā Download SRT & Markdown
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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Ć.
Speaker A
FaltarĆa entonces el footer, para el footer vamos a colocar un pĆ”rrafo y colocamos aquĆ todos los derechos reservados.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
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.
