HTML - basic - Lección nº 4
Listas
¿De qué trata esta lección?
En esta lección aprenderemos a crear listas en una página web. Conoceremos dos tipos de listas: las numeradas, llamadas listas ordenadas y las que tienen símbolos, llamadas listas desordenadas.
Nuevas etiquetas de esta lección:
<ul> </ul> - marca una lista desordenada / no numerada. Es una abreviatura de las palabras unordered list (lista desordenada).
<ol> </ol> - marca las listas ordenadas / numeradas. Es una abreviatura de las palabras ordered list (lista ordenada).
<li> </li> - marca un elemento de lista para ambos tipos de listas. Es una abreviatura de list item (elemento de la lista)
Selección de los símbolos utilizados en una lista
Una etiqueta HTML puede tener atributos (propiedades). En el caso de las listas, podemos usar el atributo type para cambiar el símbolo usado para marcar un elemento de la lista. Esto funciona para ambos tipos de listas.
A medida que el lenguaje HTML se desarrolla y cambia, muchos de los atributos se transfieren al ámbito de acción de los lenguajes CSS.
Los posibles valores del atributo type:
En el caso de listas desordenadas:
Para listas ordenadas:
En esta lección aprenderemos a crear listas en una página web. Conoceremos dos tipos de listas: las numeradas, llamadas listas ordenadas y las que tienen símbolos, llamadas listas desordenadas.
Nuevas etiquetas de esta lección:
<ul> </ul> - marca una lista desordenada / no numerada. Es una abreviatura de las palabras unordered list (lista desordenada).
<ol> </ol> - marca las listas ordenadas / numeradas. Es una abreviatura de las palabras ordered list (lista ordenada).
<li> </li> - marca un elemento de lista para ambos tipos de listas. Es una abreviatura de list item (elemento de la lista)
Selección de los símbolos utilizados en una lista
Una etiqueta HTML puede tener atributos (propiedades). En el caso de las listas, podemos usar el atributo type para cambiar el símbolo usado para marcar un elemento de la lista. Esto funciona para ambos tipos de listas.
A medida que el lenguaje HTML se desarrolla y cambia, muchos de los atributos se transfieren al ámbito de acción de los lenguajes CSS.
Los posibles valores del atributo type:
En el caso de listas desordenadas:
- <ul type = " square "> - cuadrado
- <ul type = " disc "> - disco
- <ul type = " circle "> - círculo
Para listas ordenadas:
- <ol type = "1"> - números
- <ol type = "I"> - números romanos usando letras mayúsculas
- <ol type = "i"> - números romanos usando letras minúsculas
- <ol type = "A"> - letras mayúsculas
- <ol type = "a"> - letras minúsculas
Ejercicios
1. Copia el siguiente texto al final del archivo index.html y formatéalo como una combinación de listas ordenadas y desordenadas. El texto en la primera fila debe ser un encabezado de segundo nivel.
We set the following steps for making a website:
1. Firstly, a simple visual presentation is needed, including:
3. You have to take care of a server, which is the place that hosts and serves pages to users.
Ver el resultado
We set the following steps for making a website:
1. Firstly, a simple visual presentation is needed, including:
- an outline of page structure (that is called “wireframe”);
- shapes and colors;
- illustrative pictures.
- buttons from navigation;
- posts to upload;
- cute pictures;
- invisible data flowing behind (so called back-end, which rules the buttons, the posts and the cute pictures).
3. You have to take care of a server, which is the place that hosts and serves pages to users.
2. Edita el archivo toplangs.html y pon el título The most popular programming languages in 2018 en un encabezado h3 y la enumeración de los lenguajes de programación en una lista desordenada con símbolos cuadrados.
Ver el resultado
3. Edita el archivo tips.html y formatea el texto de acuerdo con los comentarios que contiene.
Ver el resultado
Cuestionario
1. Si queremos crear una lista numerada con cuatro elementos, ¿qué par de etiquetas HTML necesitamos?
2. La siguiente secuencia HTML contiene un error. ¿En qué fila está?
<ul>
<li>Java</li>
<li>C++</li>
<li>JavaScript<li>
<li>C#</li>
</ul>
<ul>
<li>Java</li>
<li>C++</li>
<li>JavaScript<li>
<li>C#</li>
</ul>
3. En el siguiente código, ¿qué necesitamos insertar después de la lista de palabras para que la siguiente palabra (Header) aparezca en una nueva fila numerada?
<ol>
<li>Paragraph</li>
<li>List Header</li>
</ol>
<ol>
<li>Paragraph</li>
<li>List Header</li>
</ol>
4. Si creamos una lista desordenada, ¿qué símbolo podría marcar los elementos de nuestra lista?
Información suplementaria
Puedes intentar crear listas aquí: https://www.w3schools.com/html/html_lists.asp
