====== Desarrollo Web Lección 3 - Listas ======
===== Listas de Varios Niveles =====
==== Objetivos ====
En este actividad usted va a:
* crear listas de varios niveles
* comenzar a usar Visual Studio Code, una plataforma de codificación profesional
* aprender una forma de seleccionar elementos específicos con CSS
==== Configuración ====
* Comenzaremos desde una pizarra en blanco, así que elimine todo el HTML y CSS que ha ingresado hasta ahora en [[https://jsfiddle.net|jsfiddle]].
==== Listas de Anidamiento ====
* A veces querrá tener listas dentro de listas. Piense en el índice de un libro de texto donde cada capítulo tiene varios subtítulos e incluso estos pueden tener subtítulos.
* Para mantenerlo interesante, veremos aquí un perfil simple de usted.
* Ingrese el encabezado '¿Quién soy?'
¿Quién soy?
.
- Miembros de la familia
- Pasatiempos
- Bandas favoritas
- Miembros de la familia
- Padre
- Madre
- hermana
- hermano
* Tenga en cuenta que la nueva lista necesita su propia etiqueta o .
* Observe también que toda la lista va antes de la etiqueta del elemento de la lista de títulos.
* Finalmente, debería haber notado que el navegador usa automáticamente diferentes viñetas para los diferentes niveles de elementos de la lista.
* Pruébelo usted mismo con las secciones Pasatiempos y Bandas favoritas.
==== Estilos en Cascada ====
* Solo para revisar rápidamente la forma en que CSS se conecta en cascada a los elementos de nivel inferior, pruebe el siguiente código CSS .
ol {
color: blue;
}
* Vea cómo incluso las sublistas ahora son azules, no solo el nivel superior que seleccionamos. Esto es en cascada.
==== Combinación de Selectores de CSS ====
* Para hacer un punto, cambie la segunda lista para ser ordenada.
- Pasatiempos
- Música
- Fútbol
- Ciclismo
* Ahora, agregue el siguiente código CSS para apuntar a esa lista específica.
ol ol {
font-weight: 700;
}
* ¿Ves cómo solo la lista de pasatiempos está en negrita? La lista de nivel superior es un ol pero no se ve afectada.
* El selector combinado ol ol significa que las reglas se aplican a todas las listas ordenadas dentro de otra lista ordenada.
==== Herramientas: Visual Studio Code ====
* jsfiddle es excelente para probar rápidamente un fragmento de código, pero tiene limitaciones.
* Principalmente, no puede ver fácilmente un resultado de pantalla completa.
* Del mismo modo, es difícil ver grandes bloques de código.
* En cambio, hay muchos editores de código fuente de desarrollo web completos disponibles con diferentes beneficios y niveles de complejidad. Usaremos Visual Studio Code, que es uno de los más potentes.
* Primero, cree una carpeta en su escritorio con su nombre.
* Abra el Visual Studio Code.
* Vaya a Archivo → Abrir carpeta y seleccione la carpeta que creó.
* Presiona Ctrl-N para crear un nuevo archivo. Presione Ctrl-S para guardar el archivo y asígnele el nombre 'lists.html'.
==== Estructura HTML ====
* Escriba ' HTML ' y seleccione ' HTML :5'.
* Visual Studio ingresa automáticamente la estructura de un documento HTML completo .
Document
* le dice al navegador que el código es HTML .
* contiene información sobre la página, mientras contiene el contenido.
* Copie el código HTML de jsfiddle y péguelo dentro de la etiqueta .
* Haga clic derecho y seleccione 'Abrir con Live Server'. Esto abrirá la página en una nueva pestaña del navegador.
* Tenga en cuenta que el resultado es lo que vimos en jsfiddle antes de agregar CSS y Javascript.
* Observe también que la etiqueta en la pestaña del navegador dice 'Document'. Eso viene de la etiqueta </html> en la sección <html><head></html>.
* Edite <html><title></html> para decir 'Listas' y actualice la página (haga clic con el botón derecho y seleccione 'Abrir con Live Server'.
* Observe que la etiqueta ahora ha cambiado.
==== Agregar CSS ====
* Cree una nueva línea dentro de la etiqueta <html><head></html>, escriba 'link' y seleccione 'link:css'.
* Esto agrega una línea que dice <html><link rel="stylesheet" href="style.css"></html>, que le dice al navegador dónde encontrar el código CSS ('style.css' en el atributo href).
* Presiona Cltr-N para crear un nuevo archivo y Ctrl-S para guardarlo como 'style.css'.
* Ahora podemos copiar el código CSS de jsfiddle a su archivo 'style.css'.
* Guarde eso y vuelva a abrir el código en Live Server. Ahora debería tener el formato que agregamos.
==== Codigo Final ====
Si llegas a este punto y algo no está del todo bien, o te gustaría verificar tu código, aquí está el código en el que hemos estado trabajando.
* [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/es.php|lists.html]]
* [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/style.php|style.css]]
* [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/lists.html|Final result]]
[[es:web_development:lists:checklists|Siguiente: Listas de Verificación]]