ff-multiconverter, multimedia, audio, video, linux, ubuntu ubuntu kylin, china, releases, linux terminal, ubuntu, linux, comandos, shell conky, gadgets, ubuntu, linux SpeedTest-Cli, velocidad, red, consola, terminal tag foto 6 pinta, grafica, linux, ubuntu djl, juegos, yum, synaptic, paquetes ubuntu, releases, canonical psensor, ubuntu, linux, sistema, monitor

Guia HTML: listas ordenadas y no ordenadas.

html-questionsEn una reciente limpieza a mi disco duro he encontrado esta guia que tenia guardada por ahi y creo que esta muy buena para empezar y conocer las nociones basicas del HTML.

Lista ordenada.   
Este elemento HTML es útil cuando debemos numerar una serie de objetos.

Veamos con un ejemplo una lista ordenada para conocer su sintaxis. Mostraremos el orden de llegada de tres corredores:

<html>
<head>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>


La marca <ol> y su correspondiente marca de cerrado es </ol>
En su interior cada uno de los items se los dispone con el elemento li, que también tiene la marca de comienzo <li> y la marca de fin de item </li>

Luego se encarga el navegador de numerar cada uno de los items contenidos en la lista, tengamos en cuenta que se numeran porque se trata de una lista ordenada.

Para recordar el nombre de estos elementos HTML:
<ol> viene de ordened list
<li> viene de list item
    
Lista no ordenada.
Una lista no ordenada como su nombre lo indica no utiliza un número delante de cada items sino un pequeño símbolo gráfico.

La forma de implementar este tipo de listas es idéntico a las listas ordenadas.

Veamos un ejemplo donde implementamos una lista no ordenada:

<html>
<head>
</head>
<body>
<h2>Lenguajes de programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>

Para recordar los nombres de estas marcas HTML:
<ul> viene de unordered list
<li> viene de list item

Si te ha gustado el artículo inscribete al feed clicando en la imagen más abajo para tenerte siempre actualizado sobre los nuevos contenidos del blog:

Espero que esta publicación te haya gustado. Si tienes alguna duda, consulta o quieras complementar este post, no dudes en escribir en la zona de comentarios. También puedes visitar Facebook, Twitter, Google +, Linkedin, Instagram, Pinterest y Feedly donde encontrarás información complementaria a este blog. COMPARTE EN!

0 comentarios: