bien hablaremos sobre la etiqueta nav
la etiqueta nav es la etiqueta que se encuentra dentro de
de header algunas veces, también está debajo
pero esta no es la única estructura
también la etiqueta nav podría estar al costado
por ejemplo aquí tenemos el header donde podría estar el banner, el logotipo de la empresa, de la página web
y a los laterales podría estar la etiqueta nav
en conocimientos libres la página que tengo de muestra para este curso
la etiqueta nav esta dentro del header
pero no es
obligatorio que la etiqueta nav este dentro de header
como ya mostré en la imagen anterior
etiqueta nav podría estar a los costados
inclussive podria estar debajo
entonces vamos a ver esto ahora en código
cómo sería para poder
escribirlo
primero
deberíamos de escribir una etiqueta header
Ahora la etiqueta nav podría estar
dentro de header o también podría estar fuera de header
para escribir una etiqueta
nav sería de esta forma
ahí lo tenemos
etiqueta nav que habré etiqueta nav que cierra
y dentro de la etiquet nav
podríamos poner una lista
una lista de items
vamos a revisar la ṕágina de conocimientos libres
y cada una de esteas opciones
del menú, porque esto, todo esto sería una etiqueta nav
y cada una de estas opciones
sería un
list items o una lista de items
¿y cómo se escribe eso?
bueno se escribe. Hay varias formas
podríamos hacer una lista ordenada
con un ol
ol: order list
una lista ordenada
o también podríamos hacer un
unordered list
es decir una lista desordenada
mayormente
las etiquetas contienen
etiquetas
li: list items
es decir
estas dos etiquetas
contienen etiquetas list items
podríamos utilizar este o este otro
vamos a dejarlo así para ver qué diferencia hay entre los dos
por ejemplo vamos a poner aquí
items
no, items nada más
aquí también otro
item
de esta forma vamos guardar
y ahora vamos a visualizar en el navegador
actualizamos
como véis
la etiquet order list
lo que hace es
enumerar los items
y le ha puesto el número 1
y la etiqueta unordered list
lo que hace es colocarle solamente una viñeta
en vez de colocarle una numeración
le ponerle el número 1, 2, solamente les coloca una viñeta
para hacer el menú
vamos a utilizar solamente la etiqueta ul que es lo más recomendable
es decir
no vamos a colocarle
los números
simplemente colocarle un item, porque con CSS le podríamos quitar
esta viñeta
y de esta forma pues dejarlo como lo tenemos en conocimientos libres
esta forma
ahora
la etiqueta nav
podría estar
fuera así como lo he puesto ahorita
pero si queremos seguir las buenas prácticas podríamos dejarlo dentro de la etiqueta header
para las etiquetas li pues podrían haber varias
de esta forma
así
cosa que cuendo nosotros
vamos a
la parte de la página
podemos ver que tenemos
una serie de listas
vamos a ojear el código de la página de conocimientos libres aquí tendríamos, vamos inspeccionar elemento
se puede observar
en esta parte tenemos una ul
y dentro tenemos li
estás li qué es lo que hacen pues
colocan enlaces
por ejemplo enlace a economic support
los enlaces
son bastante impotantes porque
por ejemplo si queremos hacer el menú
que sea clickeable
como
como el de conocimientos libres, que tu picas y te envía
al enlace que se encuentra dentro de la etiqueta a de ese item
pues fácilmente
podríamos hacerlo con la etiqueta a
de ancla, entonces
podríamos hacer esto
de esta forma
yaquí podríamos poner un href
un href, por ejemplo vamos a enviarlo al
solamente para nociones del
vídeo voy a poner aquí que
al presionar
este elemento
me envíe a
un buscador searx.me
deberíamos poner el protocolo
vamos actualizar la página
y automáticamente se convirtió en un enlace
una lista con un enlace
si nosotros damos click
automáticamente nos llevaría al buscador
o cualquier enlace que se encuentre dentro de la página
por ejemplo podríamos colocarle que en vez de que nos envíe a esto nos envíe
al index
punto html que es el mismo archivo que tenemos ahorita
lo que haría solamente ahora es una recarga de la página
para eso podríamos colocar pues simplemente que se trata del home
y así podríamos hacer con cada tipo de item
podríamos hacer que este otro nos envíe a otro lado
nos envíe a otro lado de la página, por ejemplo que este nos envíe
por ejemplo a la página about
vamos hacerlo rapidito
tenemos aquí otra ancla, por aquí otra ancla
y por aquí otra ancla
y podríamos decirle que
nos envíe
a cada uno nos envíe a una página diferente
de hecho aquí va a fallar porque no existen esos archivos
pero podría hacerse de esa forma
podríamos decirle que
a este otro nos envíe a about
si es que existiese el archivo
a contact
o que nos envíe
a blog
de esta forma todos los items
se volverían enlaces
es lo que se ha hecho con
la parte del área de navegación con
conocimientos libres
lo que se quito con CSS
este subrayado se quita con CSS
bueno queda como si fuese una lista normal
también se puede quitar el color con CSS
eso luego lo vamos a ver
y bien! esto ha sido todo por este vídeo