Septiembre 24

Ejercicio en html sobre poner una lista ordenada y desordenada y ponerle la tilde y la ñ a las palabras

ñ: &ntilde
a:&aacute
u:&uacute

Las listas desordenadas se caracterizan precisamente por lo que su propio nombre indica, no tienes una numeración y no tienen un orden establecido. Os pongo un ejemplo de una lista desordenada:

<ul>
 <li>Elemento 1 de la lista</li>
 <li>Elemento 2 de la lista</li>
 <li>Elemento 3 de la lista</li>
</ul>

Para hacer una lista desordenada se usa la etiqueta “ul” para iniciarla, luego ponemos cada elemento de la lista con la etiqueta “li”. Como podéis ver hay que iniciar dichas etiquetas y posteriormente cerrarlas. Al ejecutar el ejemplo anterior veremos lo siguiente en nuestro navegador:

Si os fijáis añade un circulo antes de cada elemento. Después de cada elemento de la lista hace también un salto de linea automático para mostrar el siguiente elemento. Cuando lo ejecutéis veréis también que añade antes de cada elemento una tabulacion o espacio en blanco. El circulo se puede cambiar poniéndole un atributo que se llama “type” con tres valores posibles que son:

• circle – nos mostrara un circulo vacío antes de cada elemento
• disc – mostrara un circulo relleno antes de cada elemento
• square – mostrara un cuadrado antes de cada elemento

Las listas también se pueden anidar, es decir, poner listas con varios niveles. Esto se hace abriendo una nueva lista dentro de un “li”, hay que tener cuidado con donde cerramos las etiquetas para hacer una lista anidada. Os pongo un ejemplo de una lista anidad y cambio también el “type” a “square” y vemos las dos cosas juntas:

<ul type="square">
 <li>Elemento 1 de la lista
  <ul>
   <li>Elemento 1.1 de la lista</li>
   <li>Elemento 1.2 de la lista</li>
  </ul>
 </li>
 <li>Elemento 2 de la lista</li>
 <li>Elemento 3 de la lista</li>
</ul>

Fijaros bien que en el primer “li”, sin cerrarlo, iniciamos otra lista con “ul” y cerramos el “li” anterior después de cerrar el “ul” del subnivel, puede parecer difícil pero no lo es, solo tenéis que mirar detenidamente el código HTML y lo veréis. Podemos poner tantos niveles y subniveles como queramos siempre y cuando vigilemos bien las aperturas y los cierres de las etiquetas. Esto lo explicare mejor en el video que teneis al final del articulo y lo vereis mas fácil.

Las siguiente listas que vamos a ver son las listas ordenadas. En las ordenadas los elemento van precedidos de una numeracion, es la unica diferencia. Para hacer una lista ordenada se hace de la siguiente forma:

<ol>
 <li>Elemento 1 de la lista
  <ol>
   <li>Elemento 1.1 de la lista</li>
   <li>Elemento 1.2 de la lista</li>
  </ol>
 </li>
 <li>Elemento 2 de la lista</li>
 <li>Elemento 3 de la lista</li>
</ol>

Esta lista que os he puesto es igual que la anterior pero ordenada, solo habría que cambiar la etiqueta “ul” por “ol” y ya esta. Este ejemplo también tiene una lista anidada como el anterior. Podemos definir el atributo “type” a la lista para que nos muestre diferentes opciones antes de cada elemento. Los posibles valores del atributo “type” para las listas ordenadas son:

• 1 – nos mostrara numero antes de cada elemento
• a – nos mostrara letras antes de cada elemento
• A – nos mostrara letras mayúsculas antes de cada elemento
• i – nos mostrara numero romanos antes de cada elemento
• I – nos mostrara numero romanos en mayúsculas antes de cada elemento

Esto lo veréis mejor en el vídeo ya que allí probare todos los atributos para que veáis los resultados.

El ultimo tipo de listas que vamos a usar son las listas de definiciones, que aunque no se usan demasiado no esta mal conocerlas, sirven para enumerar elementos y añadir una descripción de cada uno de ellos. La sintaxis de las listas de definiciones es así:

<dl>
 <dt>Ferrari</dt>
  <dd>Es una marca de coches italiana</dd>
 <dt>Audi</dt>
  <dd>Es una marca de coches alemana</dd>
</dl>

Iniciamos la lista de definiciones con la etiqueta “dl”, luego enumeramos cada elemento con “dt” y la descripción correspondiente al elemento con “dd”. Como en las anteriores listas hay que tener cuidado con el cierre de las etiquetas.