Añadir elementos a un navegador

Hola en este post vamos a explicar como añadir elementos a un navegador para aquellos que no estén familiarizados con HTML.

Sea cual sea la disposición de un navegador, horizontal desplegable o vertical, un navegador es un conjunto de listas. Pondremos como ejemplo el navegador del blog de "Roci en la cocina".

Este navegador es desplegable, pero vamos a verlo primero como si solo fuera una barra, a pesar del formato, ya nos esta mostrando su lista principal.

• Entrantes
• Principales
• Repostería
• Bebidas
• Internacional
• Salsas

En HTML esta lista se escribe de la siguiente forma:

<ul> <li>Entrantes</li> <li>Principales</li> <li>Repostería</li> <li>Bebidas</li> <li>Internacional</li> <li>Salsas </li> </ul>

HTML es un lenguaje de marcas que nuestro navegador (Internet Explorer, Firefox, Chrome, ....) interpreta y nos muestra. Lo que vemos en el código HTML entre los símbolos < y > son las marcas.

Cuando nuestro navegador lee y se encuentra con la marca o etiqueta <ul> se dice "aquí empieza una lista" y cuando se encuentra </ul> se dice "aquí se acaba". Lo mismo ocurre cuando encuentra la marca <li> que dice "aquí empieza un elemento de la lista" y con </li> aquí se acaba.

Para añadir en este ejemplo un elemento solo tendremos que escribir el texto correspondiente entre las marcas <li>Ejemplo</li> y colocarlo donde queramos dentro de la lista (entre las marcas <ul></ul>).

<ul> <li>Ejemplo</li> <li>Entrantes</li> <li>Principales</li> <li>Repostería</li> <li>Ejemplo</li> <li>Bebidas</li> <li>Internacional</li> <li>Salsas </li> <li>Ejemplo</li> </ul>

Por regla general todas estos elementos de un navegador son enlaces a otras páginas o a elementos de la misma. Para que cada palabra sea un enlace es necesarios introducir las marcas <a></a> que van al principio y al final de cada una:

<li><a>Ejemplo</a></li>

Para indicar a donde debe enlazar es necesario darle a <a> la propiedad 'href' con la dirección entre comillas.

<li><a href='http://www.google.es'>Ejemplo</a></li>

Si quisiésemos que enlazara a los artículos del blog que hagan referencia a los entrantes sería:

<li><a href='http://rocienlacocina.blogspot.com.es/search/label/Entrantes'> Ejemplo</a></li>

Recordar que podemos sustituir la palabra 'Ejemplo' por la que queramos, lo más adecuado sería:

<li><a href='http://rocienlacocina.blogspot.com.es/search/label/Entrantes'> Entrantes</a></li>

NOTA: Si dentro de un blog queremos enlazar a todos los artículos con una etiqueta la dirección sería:

http://rocienlacocina.blogspot.com.es/search/label/ + Etiqueta

Si la etiqueta fuese 'Pan':

http://rocienlacocina.blogspot.com.es/search/label/Pan

Todos estos principios se extrapolan también al caso de menús desplegables, que no dejan de ser listas con otras listas dentro.

El navegador de "Roci en la cocina" es un poco más amplio pero a simplificarlo para que sea más sencillo de ver, dejando solo el submenú de los platos principales. El código HTML en este caso sería:

<ul> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Entrantes'>Entrantes</a></li> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Platos Principales'>Principales</a> <ul> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Carne'>Carnes</a></li> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Pescado'>Pescados</a></li> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Pasta'>Pasta</a></li> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Verduras'>Verduras</a></li> </ul> </li> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Repostería'>Repostería</a></li> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Bebidas'>Bebidas</a></li> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Cocina internacional'>Internacional</a></li> <li><a href='http://rocienlacocina.blogspot.com.es/search/label/Salsas'>Salsas</a></li> </ul>

Simplificaremos los enlaces sustituyendo las direcciones por #.

<ul> <li><a href='#'>Entrantes</a></li> <li><a href='#'>Principales</a> <ul> <li><a href='#'>Carnes</a></li> <li><a href='#'>Pescados</a></li> <li><a href='#'>Pasta</a></li> <li><a href='#'>Verduras</a></li> </ul> </li> <li><a href='#'>Repostería</a></li> <li><a href='#'>Bebidas</a></li> <li><a href='#'>Internacional</a></li> <li><a href='#'>Salsas</a></li> </ul>

Como se puede observan se ha insertado una nueva lista <ul></ul> dentro del elemento <li><a href='#'>Principales</a></li>. Esta es la forma de hacer un submenú.

Si quisiéramos insertar un elemento nuevo en el submenú seguimos mismo principios que antes.

<ul> <li><a href='#'>Entrantes</a></li> <li><a href='#'>Principales</a> <ul> <li><a href='#'>Ejemplo</a></li> <li><a href='#'>Carnes</a></li> <li><a href='#'>Pescados</a></li> <li><a href='#'>Ejemplo</a></li>  <li><a href='#'>Pasta</a></li> <li><a href='#'>Verduras</a></li> <li><a href='#'>Ejemplo</a></li> </ul> </li> <li><a href='#'>Repostería</a></li> <li><a href='#'>Bebidas</a></li> <li><a href='#'>Internacional</a></li> <li><a href='#'>Salsas</a></li> </ul>

Solo queda por decir, que en algunos casos como el de "Roci en la cocina" el último elemento de un submenú tiene un formato propio, por lo que debemos tener un poco más de cuidado y sustituyamos solo la Etiqueta y la dirección href.

Por ejemplo, si queremos intercambiar un elemento de un submenú por el último que tiene un parámetro "style" haríamos:

<li><a href='http://rocienlacocina.blogspot.com.es/search/label/Pasta'>Pasta</a></li>
<li><a style="#" href='http://rocienlacocina.blogspot.com.es/search/label/Verduras'>Verduras</a></li>

Olvidanmos lo que ponga en style.

<li><a href='http://rocienlacocina.blogspot.com.es/search/label/Verduras'>Verduras</a></li>
<li><a style="#" href='http://rocienlacocina.blogspot.com.es/search/label/Pasta'>Pasta</a></li>

Bueno, espero que halla quedado lo más claro posible jeje.

Un cordial saludo.