Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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?'
<code><h2>¿Quién soy?</h2></code>
  * Ahora crea una lista de temas para cubrir usando <html><ol></html>.
<code><ol>
  <li>Miembros de la familia</li>
  <li>Pasatiempos</li>
  <li>Bandas favoritas</li>
</ol></code>
  * Ahora los completaremos con otras listas debajo (dentro) de cada tema.
  * Ingrese los nombres de los miembros de su familia. No sé los nombres de su familia, así que solo etiquetaré algunas opciones.
<code>  <li>Miembros de la familia
    <ul>
      <li>Padre</li>
      <li>Madre</li>
      <li>hermana</li>
      <li>hermano</li>
    </ul>
  </li></code>
  * Tenga en cuenta que la nueva lista necesita su propia etiqueta <html><ul></html> o <html><ol></html>.
  * Observe también que toda la lista va antes de la etiqueta <html></li></html> 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 .
<code>ol {
  color: blue;
}</code>
  * Vea cómo incluso las sublistas <html><ul></html> ahora son azules, no solo el nivel superior <html><ol></html> que seleccionamos. Esto es en cascada.

==== Combinación de Selectores de CSS ====
  * Para hacer un punto, cambie la segunda lista para ser ordenada.
<code>  <li>Pasatiempos
    <ol>
      <li>Música</li>
      <li>Fútbol</li>
      <li>Ciclismo</li>
    </ol>
  </li></code>
  * Ahora, agregue el siguiente código CSS para apuntar a esa lista específica.
<code>ol ol {
  font-weight: 700;
}</code>
  * ¿Ves cómo solo la lista de pasatiempos está en negrita? La lista de nivel superior es un <html>ol</html> pero no se ve afectada.
  * El selector combinado <html>ol ol</html> 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 .
<code><!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html></code>
  * <html><!DOCTYPE html></html>le dice al navegador que el código es HTML .
  * <html><head></html> contiene información sobre la página, mientras <html><body></html> contiene el contenido.
  * Copie el código HTML de jsfiddle y péguelo dentro de la etiqueta <html><body></html>.
  * 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><title></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]]
Tech School

User Tools

Site Tools

Page Tools
