Tech School

User Tools

Site Tools

Trace: • css • headings • attributes • ejercicio • arrays • simple_lists • summary
es:web_development:lists:multilevel_lists

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
es:web_development:lists:multilevel_lists [2022/02/23 11:52]
mag [Agregar CSS] 		es:web_development:lists:multilevel_lists [2023/08/16 09:33] (current)
Line 2: Line 2:
 ===== Listas de Varios Niveles ===== ===== Listas de Varios Niveles =====
 ==== Objetivos ==== ==== Objetivos ====
-En este actividad usted:+En este actividad usted va a:
   * crear listas de varios niveles   * crear listas de varios niveles
-  * comience a usar Visual Studio Code, una plataforma de codificación profesional +  * comenzar a usar Visual Studio Code, una plataforma de codificación profesional 
-  * aprenda una forma de apuntar a elementos específicos con CSS+  * aprender una forma de seleccionar elementos específicos con CSS
  
 ==== Configuración ==== ==== Configuración ====
-  * Comenzaremos desde una pizarra en blanco, así que elimine todo el HTML y CSS que ha ingresado hasta ahora.+  * 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 ==== ==== Listas de Anidamiento ====
Line 15: Line 15:
   * Ingrese el encabezado '¿Quién soy?'   * Ingrese el encabezado '¿Quién soy?'
 <code><h2>¿Quién soy?</h2></code> <code><h2>¿Quién soy?</h2></code>
-  * Ahora crea una lista de temas para cubrir. Aunque el orden no importa, lo estoy usando <html><ol></html> porque lo usaré para ilustrar un punto más adelante.+  * Ahora crea una lista de temas para cubrir usando <html><ol></html>.
 <code><ol> <code><ol>
   <li>Miembros de la familia</li>   <li>Miembros de la familia</li>
Line 59: Line 59:
   * El selector combinado <html>ol ol</html> significa que las reglas se aplican a todas las listas ordenadas dentro de otra lista ordenada.   * El selector combinado <html>ol ol</html> significa que las reglas se aplican a todas las listas ordenadas dentro de otra lista ordenada.
  
-==== Herramientas: código de Visual Studio ====+==== Herramientas: Visual Studio Code ====
   * jsfiddle es excelente para probar rápidamente un fragmento de código, pero tiene limitaciones.   * 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.   * Principalmente, no puede ver fácilmente un resultado de pantalla completa.
Line 65: Line 65:
   * 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.   * 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.   * Primero, cree una carpeta en su escritorio con su nombre.
-  * Abra el código de Visual Studio.+  * Abra el Visual Studio Code.
   * Vaya a Archivo → Abrir carpeta y seleccione la carpeta que creó.   * 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'.   * Presiona Ctrl-N para crear un nuevo archivo. Presione Ctrl-S para guardar el archivo y asígnele el nombre 'lists.html'.
Line 73: Line 73:
   * Visual Studio ingresa automáticamente la estructura de un documento HTML completo .   * Visual Studio ingresa automáticamente la estructura de un documento HTML completo .
 <code><!DOCTYPE html> <code><!DOCTYPE html>
-<html lang="en">+<html lang="es">
 <head> <head>
     <meta charset="UTF-8">     <meta charset="UTF-8">
Line 94: Line 94:
  
 ==== Agregar CSS ==== ==== Agregar CSS ====
-  * Cree una nueva línea dentro de la etiqueta <html><head></html>, escriba 'enlace' y seleccione 'enlace: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).   * 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'.   * 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'.   * 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.   * 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]] [[es:web_development:lists:checklists|Siguiente: Listas de Verificación]]
es/web_development/lists/multilevel_lists.1645645928.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki