LISTAS EN HTML

EJERCICIO 1

EJERCICIO 2

EJERCICIO 3

EJERCICIO 4

TIPOS DE LISTAS

LISTAS CON VIÑETAS <UL>

Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre.

Si no le indicamos nada a la etiqueta <li>, ésta se generará de forma automática. Pero si queremos definir nosotros mismo el símbolo de la lista, podemos usar el atributo “type”.

Así podemos hacer que la lista esté definida por puntos negros (li type="disc"), por puntos con el fondo blanco (li type="circle") o por cuadrados (li type="square"). Aunque esta apariencia dependerá del navegador. Hay algunos navegadores que dan otras apariencias a estos mismos atributos.

EJEMPLO 1

escribimos en html

<ul>

<li>Primer término

<li>Segundo término

<li>Tercer término

</ul>

EJEMPLO 2

<ul type="square">

<li>word

<li>excel

<li>internet

<li>photoshop

<li>adobe premiere

</ul>

LISTAS ORDENADAS <OL>

Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La etiqueta usada es <OL> junto con su correspondiente de cierre </OL>.

Cada punto de la lista se escribe con la misma etiqueta que en las no numeradas: <li>. Pero al ser listas ordenadas los símbolos se irán generando automáticamente por orden, conforme escribamos nuevos puntos.

El atributo TYPE puede tomar los valores 1, a, A, i, I.

En las listas ordenadas podemos hacer que el primer punto comience con el número que nosotros queramos. Lo conseguiremos gracias al atributo “value”.Los siguientes puntos que escribamos se generarán automáticamente por orden, partiendo de ese número.

EJEMPLO 1

escribimos en html

<ol >

<li >Primer término de la lista

<li >Segundo término

<li>Tercer término

<li>Cuarto

<li>Quinto

</ol>

se verá como

Primer término de la lista
Segundo término
Tercer término
Cuarto
Quinto

EJEMPLO 2 : Tipo de lista enumerada

<h3>REDES SOCIALES </h3>

<li>Facebook

<li>Youtube

<li>instagram

<li>Tik Tok

<li>Whatsapp

</ol>

EJEMPLO 3 :Utilizaremos el atributo "value"

El código html es:

<ol>

<li value="20">Este será el número 20. </li>

<li> Este será el 22. Y así sucesivamente. </li>

</ol>

LISTAS ANIDADAS

Cuando estemos manejando listas podemos anidar unas en otras independientemente del tipo de lista que estemos anidando.

Para crear listas anidadas en HTML simplemente tenemos que hacer que el elemento de una de las listas sea a su vez una lista. Es decir, podemos crear listas multiniveles.

EJEMPLO 1

escribimos en html

<ul>

<li >Primer término de la lista

<ul>

<li>Sublista

<li>Otro elemento

</ul>

<li type="circle">Segundo término

<li type="square">Tercer término

</ul>

EJEMPLO 2

<ul>

<li>Carnívoro

<ul>

<li>Buitre</li>

<li>Hiena</li>

</ul>

</li>

<li>Herbívoro

<ul>

<li>Cabra</li>

</ul>

</li>

<li>Omnívoro

<ul>

<li>Urraca</li>

</ul>

</li>

</ul>

LISTAS DE DEFINICIÓN

Listas de definiciones: <dl>, <dt> y <dd>.

Si lo que vamos a hacer es un listado de definiciones, podemos usar las etiquetas <dl>, <dt> y <dd>. Vamos a explicarlas por partes:

La etiqueta <dl> viene de los términos ingleses “Definiton list” y nos indica que dentro de ella, entre ella y su cierre, va a ir una definición.

La etiqueta <dt> viene de los términos “Definition term” y dentro de ella irá el término que vamos a definir. Para entendernos mejor, dentro de <dt> iría el título de la definición.

La etiqueta <dd> viene de los términos “Definition description” y nos dice que dentro de ésta irá la definición. Si escribimos varios listados de definición, éstas se separarán automáticamente entre ellas para facilitar su diferenciación.

EJEMPLO 1

escribimos en html

<dl>

<dt>Título primero

<dd>Definición del elemento 1º

<dt>Título segundo

<dd>Definición del elemento 2º

<dt>Título tercero

<dd>Definición del elemento 3º

</dl>

EJEMPLO 2

<dl>

<dt>software</dt>

<dd>Conjunto de programas, instrucciones y reglas informáticas para ejecutar ciertas tareas en una computadora.</dd>

<dt>Hardware</dt>

<dd>Que se puede tocar</dd>

<dd>Parte física de la PC</dd>

<dd>Los componentes son parte de él</dd>

<dd>Los periféricos ,como el micrófono, el mouse, los audífonos, el teclado,etc.</dd>

</dl>

Google Sites

Report abuse