Diseño WEB I

INSTITUTO JOSÉ TRINIDAD REYES

Asignatura: Diseño Web I – I Parcial I Semestre 2024,
Grado: 12º de Informática Jornada: Matutina Docente: Suyapa del Cid

HTML - Material Recopilado por Lic. Suyapa del Cid 1

 Diseño WEB I

TRABAJOS A REALIZAR:

HTML - Material Recopilado por Lic. Suyapa del Cid 2

 Diseño WEB I

LISTAS EN HTML
1. Lista ordenada <ol>
Este elemento HTML es útil cuando debemos numerar una serie de objetos. Veamos un ejemplo, una lista ordenada para
conocer su sintaxis.

A. EJERCICIO PRÁCTICO 1
Mostrar el orden de llegada de tres corredores utilizando el elemento HTML ol

La etiqueta <ol> para iniciar y la etiqueta de cierre es </ol>.

En su interior cada uno de los ítems se enlistan con el

elemento li, que también tiene etiqueta de inicio <li> y
etiqueta de cierre del ítem </li>

Luego se encarga el navegador de numerar cada uno de los

ítems contenidos en la lista, tengamos en cuenta que se
numeran porque se trata de una lista ordenada.

B. EJERCICIO PRÁCTICO 2
Hacer un ejercicio que contenga una lista ordenada de los cinco países con mayor población del planeta. Debe
tener un título de segundo nivel y debajo de la lista la suma de habitantes de esos tres países enfatizado.

2. Lista no ordenada ( <ul> )

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.

C. EJERCICIO PRÁCTICO 3

D. EJERCICIO PRÁCTICO 4
Hacer un ejercicio que contenga una lista no ordenada con 5 cosas que más te gustan hacer. Agregar un título de
segundo nivel indicando el concepto de esta lista. Al final agregar su nombre con el formato de tamaño de texto
para indicar biografía alinear a la derecha.

HTML - Material Recopilado por Lic. Suyapa del Cid 3

 Diseño WEB I
3. Lista de definiciones (<dl>)
Como su nombre lo indica se utiliza para asociar un término y la definición del mismo. El navegador se encarga de
destacar y separa el término y su definición.

Crearemos una lista con la definición de varios lenguajes de programación:

E. EJERCICIO PRÁCTICO 5

Como podemos observar intervienen más etiquetas que en los otros dos tipos de listas. Las etiquetas que encierran a la
lista son <dl> (Definition List) y </dl>. Ahora debemos poner a pares estos dos elementos <dt> (Definition Term) y
<dd> (Definition Description). El navegador se encarga de aplicar sangría del contenido del elemento dt.

F. EJERCICIO PRÁCTICO 6

Hacer un ejercicio que contenga una lista de definiciones. Define tu Persona, tu mejor amigo(a), la clase que más te
gusta, la razón por la que estudia informática. Agregar un título de segundo nivel indicando el concepto de esta lista.
Al final agregar su nombre con el formato de tamaño de texto para indicar biografía, alinear a la izquierda.

HTML - Material Recopilado por Lic. Suyapa del Cid 4

 Diseño WEB I
4. Listas anidadas.
El lenguaje HTML nos permite insertar una lista dentro de otra. Se pueden anidar listas de distinto tipo, por ejemplo
podemos tener una lista no ordenada y uno de los item puede ser una lista ordenada. Para el anidamiento de listas solo
debemos tener cuidado en la correcta apertura y cerrado de las etiquetas.

Hacer una página que enumere una serie de países en una lista ordenada y luego en cada país dispondremos una lista de
hipervínculos de periódicos de dicho país:

G. EJERCICIO PRÁCTICO 7

H. EJERCICIO PRÁCTICO 8

Hacer una página que contenga una lista no ordenada de lenguajes de programación. Luego disponer una lista ordenada
con hipervínculos a sitios que tratan dichos lenguajes.

HTML - Material Recopilado por Lic. Suyapa del Cid 5

 Diseño WEB I
Salida en el Navegador

GUÍA DE TRABAJO
Indicaciones: Responder de forma clara, ordenada y correcta cada una de las siguientes preguntas en el cuaderno
asignado para la clase de Diseño WEB I.
1. ¿Para qué se utiliza la etiqueta <ol> en HTML?
2. ¿Cuál es la etiqueta que se utiliza para enlistar en el interior cada uno de los ítems con la etiqueta <ol>?
3. ¿Cuál es la diferencia de listas ordenadas y listas no ordenadas?
4. ¿Qué símbolo grafico utiliza las listas no ordenadas?
5. ¿Para qué se utiliza la lista de definiciones en HTML? y ¿Cuál es la etiqueta que se utiliza?
6. ¿Cuáles son las etiquetas que se utilizan para encerrar los términos y la definición en la lista de definiciones? ¿Escriba
la etiqueta y para qué sirve?
7. ¿Qué nos permiten las listas anidadas?

EJERCICIOS PRÁCTICOS
Indicaciones: Utilizando el editor sublime Text, Notepad, hacer cada uno de los ejercicios numerados en este manual.
Están identificados como Ejercicio Practico 1, Ejercicio Practico 2 y así sucesivamente.

HTML - Material Recopilado por Lic. Suyapa del Cid 6