PROPIEDAD SORPRESA


Después de crear un encabezado para nuestra web que es muy muy importante, pasaremos a la segunda parte de la estructura básica que debe tener una web, tal vez esta etiqueta no nos haga falta siempre siempre, pero hay que saberlo :) Estamos hablando de...

<nav>

¡Sí! La etiqueta menú, navegador, o como quieran llamarla, sirve para (obviamente) crear un menu con opciones enlazadas a otras páginas dentro de tu misma web u otras.

Dentro de la etiqueta <nav> deberemos de poner obligatoriamente una etiqueta para enlazar texto a otra página que es <a>, y opcionalmente podemos crear listas de elementos con tres etiquetas: <ul>, <li>, <ol>.
Vamos a ello ;)

<ul> y <ol>


La etiqueta <ul> le indica al navegador que vamos a realizar una lista del tipo desornada (• Algo • Algo • Algo), y la etiqueta <ol> indica una lista ordenada (1. Algo 2. Algo 3. Algo).

Para definir un elemento dentro de <ul> u <ol> lo haremos con <li>

<li>


<li> define un elemento dentro de una lista desornada, por lo que aparecerá (según el navegador puede aparecer diferente) al lado de la palabra que va dentro del <li> un simbolo como este: •

<ul>

  <li>Cosas bonitas</li>

  <li>Cosas bonitas</li>

  <li>Cosas bonitas</li>

  <li>Cosas bonitas</li>

</ul>

Esto quedaría así:



Como en este caso no sale ningun redondel que nos indique que es una lista (desordenada en este caso) por lo que podemos utilizar una propiedad css para mostrar ese redondel... list-style-type: circle;



Para crear una lista ordenada solo debes cambiar el <ul> por <ol> y listo :)

Por último y logicamente habrá que aprender a crear enlaces a otras páginas y eso lo haremos con la etiqueta <a>

<a>


Es una de esas etiquetas que nacieron con HTML y que van ligadas a él, ademas de que es una de las más básicas. Esta etiqueta lo que hace es enlazar un texto, imagen, parte de una lista, etc, y que al pulsar esa cosa se te diriga a la página escogida. Para ello vamos a utilizar el atributo href="".

Quedaría algo así:

<a href="contacto.html">Contacto</a>

Lo que quieras enlazar tiene que meterlo dentro de la etiqueta, menos si quieres enlazar un <li> ya que debes de poner el enlace dentro del <li> y no al reves, para que quede algo así:

<li>
<a href="contacto.html">
Contacto</a>
</li>

Pasamos ahora a ver las partes más grandes que ocupan la mayor parte de una web, que son <section>, <article>, <aside>. Aunque ahora mismo te suena a chino, lo verás con detalle en la siguiente página :)