[Música] para esta última clase sobre html básico les explicaré el tema de las listas desordenadas para eso ya tengo un pequeño programa donde hice una lista de tres palabras fruta carne y verdura si se dan cuenta estas palabras No necesitan un orden secuencial eso me permite colocar primero verdura luego carne luego fruta o bien primero carne luego verdura luego fruta o como está en este momento la etiqueta principal que se utiliza para una lista no ordenada es la etiqueta u ul significa on order list lista no ordenada para este caso se abre la lista no
ordenada desde acá y se cierra después del último elemento de la lista esta página ya está guardada con el nombre lista desordenada veamos el resultado vamos al explorador doble clic sobre el nombre de la página y acá tenemos la lista de tres elementos observen que esta lista tiene como símbolo una viñeta porque es una lista simple que no necesita ir numerada ni tampoco ordenada alfabéticamente alguna duda por el momento profe podría agregar ejemplos de cada tema Bueno cuando ya queremos tener elementos específicos en cada una de estas palabras Es cuando hacemos una lista a idad
y para eso vamos al bloc de notas y si Quiero agregar elementos dentro del tema fruta entonces voy a acomodar la etiqueta del final de la lista de fruta para poder colocar otros elementos como las frutas también pueden estar en desorden entonces abro otra lista desordenada y luego abro la lista de los elementos el primer elemento podría ser la manzana voy a copiar este elemento y lo voy a Modificar el segundo elemento podría ser naranja pego uno más y un tercer elemento podría ser mango como acá termina mi lista Entonces cierro esta lista no ordenada
de frutas veamos cómo llevamos el programa archivo guardar vamos al navegador y actualizamos ya tenemos el elemento fruta y la lista de elementos que representan distintas frutas ahora Vamos a continuar con elementos para carne vamos al bloc de notas y vamos a repetir el procedimiento voy a ubicar el final de la primera lista por acá y voy a pegar una lista de carnes para ahorrar tiempo lo mismo voy a hacer para las verduras y con esto ya completamos una página con listas no ordenadas que están anidadas veamos el resultado archivo guardar vamos al navegador y
actualizamos este es el resultado tres temas individuales que conforman la primera lista y los elementos que corresponden a cada tema que sería la lista anidada profe en esta página también podemos utilizar el argumento type sí tenemos disponibles tres tipos de viñeta cuando no se establecen específicamente html coloca el círculo relleno y si hay necesidad de una segunda lista se utiliza el disco en blanco si quisiera utilizar solamente un tipo de viñeta entonces tengo que en una de las dos listas en este caso voy a colocar solamente el círculo en blanco vamos al bloc de notas
Si queremos cambiar la viñeta de la lista principal agregamos El argumento type con la palabra Circle que se utiliza para el círculo en blanco vamos a guardar y observemos el resultado archivo guardar vamos al navegador actualizamos y ahora tenemos solo discos en blanco regularmente se utilizan dos tipos de viñeta cuando son dos listas Si ya hay tres listas Entonces se agrega otra para este ejemplo voy a utilizar varias viñetas en una misma lista acá tenemos discos en blanco voy a dejar una diferente en cada cada tema solamente para que vean Cómo se usa regresamos al
bloc de notas por acá voy a utilizar type con el cuadrado relleno que corresponde a la palabra Square esta la vamos a dejar así como está con el círculo en blanco y en la última vamos a utilizar disc Esta es para el círculo relleno guardemos vamos al navegador Y actualizamos estos son los tipos de viñeta disponibles el cuadrado relleno el círculo en blanco y el círculo relleno hasta acá llega el curso de html básico Y a partir de la siguiente clase ya veremos una combinación entre html y css para seguir avanzando en la elaboración de
las páginas web hasta luego [Música]
