Differences

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

--- es:web_development:lists:checklists [2022/02/23 11:59]
mag created
+++ es:web_development:lists:checklists [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-====== Web Development Lesson 2 - Lists ======
+====== Desarrollo Web Lección 2 - Listas ======
-===== Checklists =====
+===== Listas de verificación =====
-==== Setup ====
+==== Configuración ====
-  * Continue using the 'lists.html' and 'style.css' files you have been working on in Visual Studio Code.
+  * Continúe usando los archivos 'lists.html' y 'style.css' en los que ha estado trabajando en Visual Studio Code.
-**lists.html**
+  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/es.php|lists.html]]
-<code><!DOCTYPE html>
+  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/style.php|style.css]]
-<html lang="en">
+==== Casilla de Verificación ====
-<head>
+  * Cree una lista desordenada básica al final de su código html existente (justo antes de la etiqueta <html></body></html>).
-    <meta charset="UTF-8">
+  * Llénelo con elementos de una lista de compras o una lista de tareas pendientes.
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <link rel="stylesheet" href="style.css">
-    <script src="lists.js"></script>
-</head>
-<body>
-    <h2>
-      Who Am I?
-      </h2>
-      <ol>
-        <li>Family Members
-          <ul>
-            <li>Father</li>
-            <li>Mother</li>
-            <li>Sister</li>
-            <li>Brother</li>
-          </ul>
-        </li>
-        <li>Hobbies
-          <ol>
-            <li>Music</li>
-            <li>Football</li>
-            <li>Cycling</li>
-          </ol>
-        </li>
-        <li>Favourite Bands
-          <ul>
-            <li>Shakira</li>
-            <li>Juanes</li>
-          </ul>
-        </li>
-      </ol>
-</body>
-</html></code>
-**style.css**
+<code>      <h2>Lista de verificación</h2>
-<code>ol {
-    color: blue;
-  }
-  ol ol {
-    font-weight: 700;
-  }</code>
-==== Input Checkbox ====
-  * Create a basic unordered list at the end of your existing html code (just before the <html></body></html> tag)
-  * Fill it with items from a shopping list or a to-do list.
-<code>      <h2>Checklist</h2>
       <ul>
-        <li>100g flour</li>
+        <li>100 g de harina</li>
-        <li>2 eggs</li>
+        <li>2 huevos</li>
-        <li>300ml milk</li>
+        <li>300 ml de leche</li>
       </ul></code>
-  * So far this is like any other list we've created.
+  * Hasta ahora, esta es como cualquier otra lista que hayamos creado.
-  * Now we'll add some checkboxes inside the <html><li></html> tag, but in front of the text.
+  * Ahora agregaremos algunas casillas de verificación dentro de la etiqueta <html><li></html>, pero delante del texto.
-<code>        <li><input type="checkbox" name="flour">100g flour</li>
+<code>        <li><input type="checkbox" name="harina">100 g de harina</li>
-        <li><input type="checkbox" name="eggs">2 eggs</li>
+        <li><input type="checkbox" name="huevos">2 huevos</li>
-        <li><input type="checkbox" name="milk">300ml milk</li></code>
+        <li><input type="checkbox" name="leche">300 ml de leche</li></code>
-  * There are many types of inputs (text, radio selectors, buttons etc) so we need to define which type we want with <html>type="checkbox"</html>.
+  * Hay muchos tipos de entradas (texto, selectores de radio, botones, etc.), por lo que debemos definir qué tipo queremos con <html>type="checkbox"</html>.
-  * We also want to differentiate the items, so we name each using <html>name="flour"</html>.
+  * También queremos diferenciar los elementos, por lo que nombramos cada uno usando <html>name="harina"</html>.
-  * Open your code in Live Server to see the square in front of your text. Try clicking it to see that it's actually an interactive checkbox.
+  * Abra su código en Live Server para ver el cuadrado delante de su texto. Intente hacer clic en él para ver que en realidad es una casilla de verificación interactiva.
-  * The bullets are now unnecessary, so let's remove them with CSS.
+  * Las viñetas ahora son innecesarias, así que eliminémoslas con CSS .
 <code>ul {
   list-style-type: none;
 }</code>
-  * <html>list-style-type</html> defines the type of bullet or number in front of your list items. 'none' removes bullets and numbers entirely.
+  * <html>list-style-type</html> define el tipo de viñeta o número delante de los elementos de su lista. 'none' elimina las viñetas y los números por completo.
+==== 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/3/es.php|lists.html]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/3/style.php|style.css]]
+  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/3/lists.html|final result]]
-[[en:web_development:lists:menus|Next: Menus]]
+[[es:web_development:lists:menus|Siguiente: Menús]]

Tech School

User Tools

Site Tools

Differences

Page Tools