Vamos a realizar a continuación el ejercicio de listas en HTML.
Están listos.
Vamos.
El objetivo del ejercicio es poner en práctica el manejo de listas en HTML y al finalizar deberemos
observar lo siguiente según se muestra
como primer paso vamos a crear nuestro proyecto listas HTML y lo depositamos en la ruta mostrada y damos
clic en Finalizar
como siguiente paso vamos a crear un archivo HTML para poder crear este documento.
Vamos a dar clic derecho sobre Root.
Posteriormente seleccionamos NIU y posteriormente HTML File
el nombre del archivo es listas ordenadas tal cual como se muestra y damos clic en Finalizar.
Observamos que no es necesario agregar la extensión html en automático el IDE agregará esta extensión
y damos clic en Finalizar
también vamos a crear otro documento HTML de la misma manera el cual se va a llamar listas no ordenadas
y damos clic en Finalizar
y vamos a agregar un último archivo.
Este archivo se llama listas definición y damos clic en Finalizar vamos a modificar ahora nuestro archivo
índex punto HTML.
Definimos el Doctrine HTML.
Abrimos nuestra etiqueta HTML y agregamos la etiqueta de Eger y agregamos el título listas HTML y agregamos
el meta charged VF 8 y con eso cerramos el cabecero.
Posteriormente abrimos el cuerpo de nuestro documento HTML y agregamos el título de listas HTML agregamos
un párrafo y agregamos listas ordenadas y lo que vamos a hacer es agregar un link a nuestro documento
de listas ordenadas punto HTML.
Para ello vamos a utilizar el elemento a y posteriormente en el atributo HR-V vamos a indicar el documento.
Listas ordenadas punto HTML y lo que va a visualizar el usuario es el texto de listas ordenadas y cerramos
nuestra etiqueta de
posteriormente cerramos nuestro párrafo abrimos otro párrafo y vamos a agregar ahora un link para el
documento de listas no ordenadas así que ahora agregamos el elemento a pero indicando en el HR-V listas
no ordenadas punto HTML y el texto que va a visualizar el usuario es listas no ordenadas posteriormente
cerramos el elemento de párrafo y vamos a abrir un último párrafo en este caso vamos a agregar listas
de definición de datos y agregamos el link por medio de un elemento Ahm y dentro del HR-V indicamos
listas definición punto HTML y el texto que visualiza el usuario es listas definición cerramos nuestro
párrafo cerramos el cuerpo de nuestro documento HTML y cerramos también el documento HTML recuerden
que pueden dar clic en el nombre del archivo para cualquier problema que tengan.
Sin embargo se le solicita codificar línea a línea.
Este ejercicio para que quede claro el concepto de manejo de listas HTML vamos a modificar ahora nuestro
archivo.
Listas ordenadas punto HTML agregamos el Doc type HTML tal como se muestra y también abrimos nuestra
etiqueta HTML.
Abrimos el cabecero y agregamos el meta de un F8 y el título de listas ordenadas.
Posteriormente abrimos el cuerpo de este documento HTML y agregamos el título de listas ordenadas y
para manejar una lista ordenada.
Vamos a utilizar la etiqueta o L de Order List y en este caso estamos indicando el tipo ya que tenemos
varios tipos de listas ordenadas que podemos manejar.
En este caso va a ser una lista numérica y va a comenzar con el valor de tres posteriormente agregamos
el primer elemento.
En este caso se va a visualizar el elemento 1 y para ir agregando cada uno de los elementos a una lista
vamos a utilizar la etiqueta Elegy.
Qué significa List Haytham y así vamos a ir agregando cada uno de los elementos de una lista.
En este caso de una lista ordenada pero también este elemento de lista hay ítem se va a utilizar para
otro tipo de listas así que agregamos los elementos 1 2 y 3 y cerramos nuestra lista ordenada.
Una lista puede tener cualquier cantidad de elementos en este caso únicamente estamos agregando tres
elementos y también estamos agregando una lista ordenada pero con cadenas.
Así que agregamos los valores de Juan y Susana y cerramos nuestra lista ordenada y cerramos también
el cuerpo de nuestro documento HTML y cerramos la etiqueta HTML veamos ahora las listas no ordenadas
vamos a abrir nuestro documento HTML.
El título es listas no ordenadas y dentro del cuerpo de nuestro código HTML.
Vamos a agregar el título de listas ordenadas y para manejar una lista no ordenada.
Vamos a utilizar la etiqueta.
L Qué significa un Order list.
Y también tenemos varios tipos.
Por ejemplo en este caso vamos a indicar que la lista maneje un cuadro pero también podría manejar por
ejemplo un círculo u otro tipo de elementos y empezamos a agregar también los elementos de la lista
no ordenada.
Podría ser cualquier tipo de elementos.
En este caso agregamos los ítem de 1 2 y 3 y cerramos nuestra lista no ordenada y básicamente se le
dice no ordenada ya que los elementos no los va a numerar.
A diferencia de la lista ordenada en la cual se enumeran los elementos en este caso únicamente les va
a poner un cuadro como vamos a ver cuando ejecutemos este proyecto.
Otro ejemplo de una lista no ordenada es por ejemplo si agregamos algunos datos pero no estamos indicando
el tipo de lista no ordenada y por default va a manejar un círculo para ir numerado cada uno de los
elementos de la lista no ordenada.
Cerramos nuestro cuerpo del documento HTML y cerramos la etiqueta HTML por último vamos a agregar una
lista de definición abrimos nuestro documento HTML y agregamos el título de listas de definición y dentro
del cuerpo del documento agregamos el título de listas de definición y para manejar una lista de definición
vamos a utilizar la etiqueta de L que significa definición List y para agregar un elemento dentro de
ese tipo de listas.
Vamos a utilizar el elemento T por un lado definimos un elemento utilizando el elemento de DT y posteriormente
la definición de este elemento y para ello vamos a utilizar el elemento de.
Así que en este ejemplo la primera definición es decir el primer DT va a ser 1 y la definición de este
elemento vamos a poner es el primer elemento sin contar el cero y así podemos ir agregando más elementos
para definir.
Así que agregamos otro elemento por medio de la etiqueta DT vamos a negar el valor de 2 y posteriormente
lo definimos e indicamos que su definición es el número después del 1
posteriormente agregamos un tercer elemento y definimos es el número después del 2 y así sucesivamente.
únicamente es un ejemplo de una lista de definición en la cual podemos observar que tenemos primeramente
un elemento y posteriormente definimos este elemento.
Definimos el elemento por medio de la etiqueta DT y lo definimos por medio de la etiqueta de de finalmente
cerramos el cuerpo de nuestro documento y cerramos la etiqueta HTML
como siguiente paso vamos a ejecutar nuestro proyecto y podemos observar que tenemos tres links si damos
clic en el primer link de listas ordenadas nos va a mostrar el siguiente resultado.
Podemos observar que las listas ordenadas nos empieza a numerar cada uno de los elementos.
En este caso indicamos que esta lista ordenada iniciará desde el elemento 3 pero si no indicamos el
valor inicial podemos observar que una lista ordenada va a comenzar desde el valor de 1 así que estos
son dos ejemplos de listas ordenadas
por otro lado si damos clic en el link de listas no ordenadas podemos observar lo siguiente.
Recordemos que para este elemento manejamos la etiqueta de l Un Order list pero especificamos que manejará
cuadros Escuer así que en este caso podemos observar que esta lista no ordenada no numera los elementos
sino que únicamente agregó cuadros a cada uno de los elementos y por otro lado cuando indicamos el tipo
que se va a manejar en esta lista no ordenada entonces por default.
Agrega círculos así que esta es la manera en que podemos dar formato a listas no ordenadas
y finalmente manejamos la lista de definición y si damos clic sobre esta lista podemos observar lo siguiente
para cada uno de los elementos de tipo DT podemos observar qué nos despliega primero el elemento y posteriormente
para definirlo por medio de la etiqueta DD nos agregó lo siguiente Nos agregó un salto de línea y un
tabulador así que de esta manera HTML le da formato a las listas de definición.
Primero agrega el elemento a definir y posteriormente la definición de este elemento así que dependiendo
del tipo de formato que necesitemos dar a nuestras listas es el tipo de lista que vamos a manejar.
Sin embargo con esto ya tenemos tres tipos de listas que podemos manejar en HTML
como conclusión.
Con este ejercicio hemos puesto en práctica el concepto de listas en HTML las cuales nos permiten mostrar
nuestros datos de manera de lista ordenada ordenada y en forma de definición de palabras.
Con esto concluimos el ejercicio de listas en HTML.