[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.28,0:00:02.64,Default,,0000,0000,0000,,He hecho esta página web sobre mis mascotas,
Dialogue: 0,0:00:02.64,0:00:04.36,Default,,0000,0000,0000,,con una lista de sus nombres.
Dialogue: 0,0:00:04.36,0:00:06.79,Default,,0000,0000,0000,,Cuando miras la lista, ¿qué piensas?
Dialogue: 0,0:00:06.79,0:00:10.98,Default,,0000,0000,0000,,Que he tenido mascotas llamadas "Black & White", "Daemon" y "Angel".
Dialogue: 0,0:00:10.100,0:00:12.99,Default,,0000,0000,0000,,Pero, ¿qué clase de mascotas?
Dialogue: 0,0:00:12.99,0:00:14.48,Default,,0000,0000,0000,,¿Cuál era su color?
Dialogue: 0,0:00:14.48,0:00:16.13,Default,,0000,0000,0000,,¿Qué edad tienen?
Dialogue: 0,0:00:16.13,0:00:18.32,Default,,0000,0000,0000,,Y podría darte más información
Dialogue: 0,0:00:18.32,0:00:21.03,Default,,0000,0000,0000,,sobre las mascotas de esta lista para responder tus preguntas.
Dialogue: 0,0:00:21.04,0:00:23.46,Default,,0000,0000,0000,,Podría hacerlo mediante una lista anidada,
Dialogue: 0,0:00:23.46,0:00:27.15,Default,,0000,0000,0000,,o probablemente poniendo información entre paréntesis.
Dialogue: 0,0:00:27.17,0:00:32.00,Default,,0000,0000,0000,,"Black & white" era un conejo,\N"Daemon" un gato,
Dialogue: 0,0:00:32.00,0:00:34.42,Default,,0000,0000,0000,,"Angel" también es un gato.
Dialogue: 0,0:00:34.42,0:00:37.60,Default,,0000,0000,0000,,Pero esto no me gusta, porque no se ve bien organizado,
Dialogue: 0,0:00:37.60,0:00:40.91,Default,,0000,0000,0000,,y no se puede mirar fácilmente hacia abajo y ver todas las especies
Dialogue: 0,0:00:40.91,0:00:43.14,Default,,0000,0000,0000,,en una lista muy bien alineada.
Dialogue: 0,0:00:43.14,0:00:47.47,Default,,0000,0000,0000,,De hecho, ésta es la oportunidad perfecta para usar una tabla.
Dialogue: 0,0:00:47.47,0:00:49.13,Default,,0000,0000,0000,,Una tabla con una fila para cada mascota,
Dialogue: 0,0:00:49.13,0:00:51.86,Default,,0000,0000,0000,,y columnas para cada atributo de esa mascota,
Dialogue: 0,0:00:51.86,0:00:54.08,Default,,0000,0000,0000,,que quiero compartir con ustedes.
Dialogue: 0,0:00:54.08,0:00:58.39,Default,,0000,0000,0000,,Para hacer tablas en HTML, necesitamos muchas etiquetas.
Dialogue: 0,0:00:58.39,0:00:59.100,Default,,0000,0000,0000,,Así que prepárate.
Dialogue: 0,0:00:59.100,0:01:02.55,Default,,0000,0000,0000,,Y no te preocupes por memorizar todas las etiquetas.
Dialogue: 0,0:01:02.55,0:01:04.38,Default,,0000,0000,0000,,Puedes buscarlas después.
Dialogue: 0,0:01:04.38,0:01:07.19,Default,,0000,0000,0000,,A mí me tomó 10 años memorizar todas las etiquetas para las tablas,
Dialogue: 0,0:01:07.19,0:01:08.30,Default,,0000,0000,0000,,y soy profesional.
Dialogue: 0,0:01:08.30,0:01:10.49,Default,,0000,0000,0000,,Muy bien. ¡Prepárate!
Dialogue: 0,0:01:10.49,0:01:14.87,Default,,0000,0000,0000,,La primera etiqueta es "", un nombre muy acertado.
Dialogue: 0,0:01:14.87,0:01:20.04,Default,,0000,0000,0000,,Después, necesitamos un área de encabezado en la tabla, que contenga los nombres de cada columna.
Dialogue: 0,0:01:20.04,0:01:23.27,Default,,0000,0000,0000,,Así que escribimos "".
Dialogue: 0,0:01:23.27,0:01:27.97,Default,,0000,0000,0000,,Dentro de esta etiqueta, generalmente sólo queremos una fila para los encabezados de las celdas.
Dialogue: 0,0:01:27.99,0:01:32.71,Default,,0000,0000,0000,,Cada vez que escribimos una fila en la tabla usamos la etiqueta "".
Dialogue: 0,0:01:32.71,0:01:35.58,Default,,0000,0000,0000,,Dentro de la fila, queremos encabezados de las celdas.
Dialogue: 0,0:01:35.58,0:01:42.66,Default,,0000,0000,0000,,Para cada encabezado de celda, escribimos "".
Dialogue: 0,0:01:42.66,0:01:45.10,Default,,0000,0000,0000,,¿Cuál debería ser el encabezado de la primera columna?
Dialogue: 0,0:01:45.10,0:01:49.25,Default,,0000,0000,0000,,Debería ser "Pet names" ("Nombres de mascotas"), porque es lo más importante de la fila,
Dialogue: 0,0:01:49.25,0:01:51.10,Default,,0000,0000,0000,,y es el identificador.
Dialogue: 0,0:01:51.29,0:01:54.55,Default,,0000,0000,0000,,Ahora vamos a añadir otra columna para "Species" ("Especies").
Dialogue: 0,0:01:55.27,0:01:59.05,Default,,0000,0000,0000,,Y finalmente, vamos a añadir una columna para el color.
Dialogue: 0,0:01:59.05,0:02:01.53,Default,,0000,0000,0000,,Creo que son suficientes columnas por el momento,
Dialogue: 0,0:02:01.53,0:02:03.52,Default,,0000,0000,0000,,y vamos a incluir algunos datos.
Dialogue: 0,0:02:03.90,0:02:05.95,Default,,0000,0000,0000,,Empezamos con los renglones de datos
Dialogue: 0,0:02:05.95,0:02:09.47,Default,,0000,0000,0000,,con la etiqueta "" debajo de "",
Dialogue: 0,0:02:09.47,0:02:11.85,Default,,0000,0000,0000,,y una vez más, queremos una fila,
Dialogue: 0,0:02:11.85,0:02:14.00,Default,,0000,0000,0000,,así que vamos a usar la etiqueta "".
Dialogue: 0,0:02:14.34,0:02:16.72,Default,,0000,0000,0000,,Pero dentro de ésta, en lugar de usar "",
Dialogue: 0,0:02:16.72,0:02:20.08,Default,,0000,0000,0000,,vamos a usar "", porque estamos en el "cuerpo" de la tabla.
Dialogue: 0,0:02:20.08,0:02:23.14,Default,,0000,0000,0000,,Escribimos "", que significa datos de la tabla,
Dialogue: 0,0:02:23.14,0:02:26.47,Default,,0000,0000,0000,,y ¿cuál es el valor que debemos poner en la primera celda
Dialogue: 0,0:02:26.47,0:02:27.94,Default,,0000,0000,0000,,del primer renglón de datos?
Dialogue: 0,0:02:28.27,0:02:30.26,Default,,0000,0000,0000,,Sólo voy a buscar mi lista,
Dialogue: 0,0:02:30.26,0:02:33.80,Default,,0000,0000,0000,,y veo que la primera cosa que tengo en mi lista es "Black & white",
Dialogue: 0,0:02:33.80,0:02:36.02,Default,,0000,0000,0000,,y ese es el nombre de mi mascota,
Dialogue: 0,0:02:36.02,0:02:39.32,Default,,0000,0000,0000,,así que escribo: "Black & white".
Dialogue: 0,0:02:40.42,0:02:42.72,Default,,0000,0000,0000,,Ahora la segunda "".
Dialogue: 0,0:02:42.72,0:02:46.73,Default,,0000,0000,0000,,Buscamos y vemos que la segunda "" es "Species",
Dialogue: 0,0:02:46.73,0:02:49.94,Default,,0000,0000,0000,,y "Black & white" era un conejo,
Dialogue: 0,0:02:49.94,0:02:52.11,Default,,0000,0000,0000,,así que escribimos "rabbit" ("conejo").
Dialogue: 0,0:02:52.70,0:02:55.33,Default,,0000,0000,0000,,Finalmente, la tercera "".
Dialogue: 0,0:02:55.33,0:02:58.13,Default,,0000,0000,0000,,Buscamos y vemos que la tercera "" es color.
Dialogue: 0,0:02:58.23,0:03:00.18,Default,,0000,0000,0000,,Así que la "" correspondiente...
Dialogue: 0,0:03:00.18,0:03:04.43,Default,,0000,0000,0000,,bueno, no era una niña muy creativa cuando le puse nombre a este conejo,
Dialogue: 0,0:03:04.43,0:03:08.50,Default,,0000,0000,0000,,así que probablemente puedas adivinar el color.
Dialogue: 0,0:03:08.50,0:03:10.94,Default,,0000,0000,0000,,Ok, vamos a hacer otra fila.
Dialogue: 0,0:03:10.94,0:03:13.11,Default,,0000,0000,0000,,Y les voy a enseñar un pequeño truco.
Dialogue: 0,0:03:13.11,0:03:15.51,Default,,0000,0000,0000,,Una vez que hice la primera fila, en realidad quisiera,
Dialogue: 0,0:03:15.51,0:03:17.13,Default,,0000,0000,0000,,seleccionar esta primera fila,
Dialogue: 0,0:03:17.13,0:03:19.39,Default,,0000,0000,0000,,y copiarla, usando un atajo del teclado,
Dialogue: 0,0:03:19.39,0:03:22.59,Default,,0000,0000,0000,,que generalmente es control-C o comando-C,
Dialogue: 0,0:03:22.59,0:03:24.44,Default,,0000,0000,0000,,dependiendo del sistema operativo que usen.
Dialogue: 0,0:03:24.63,0:03:28.64,Default,,0000,0000,0000,,Y luego, la pego, usando otro atajo del teclado,
Dialogue: 0,0:03:28.64,0:03:31.08,Default,,0000,0000,0000,,generalmente control-V o comando-V,
Dialogue: 0,0:03:31.08,0:03:33.04,Default,,0000,0000,0000,,dependiendo de su sistema operativo.
Dialogue: 0,0:03:33.18,0:03:36.98,Default,,0000,0000,0000,,Y después de pegarlo, cambio los valores.
Dialogue: 0,0:03:37.04,0:03:41.78,Default,,0000,0000,0000,,Así que éste debe ser "Daemon", "cat" ("gato") y "black" ("negro").
Dialogue: 0,0:03:41.78,0:03:44.40,Default,,0000,0000,0000,,Y luego haremos esto una vez más,
Dialogue: 0,0:03:44.40,0:03:52.98,Default,,0000,0000,0000,,y éste debe ser "Angel", "cat" ("gato") y "orange" ("naranja").
Dialogue: 0,0:03:52.98,0:03:55.61,Default,,0000,0000,0000,,Ok, esto se pone muy aburrido
Dialogue: 0,0:03:55.61,0:03:59.07,Default,,0000,0000,0000,,cuando tenemos que escribir ""s y ""s una y otra vez,
Dialogue: 0,0:03:59.07,0:04:03.53,Default,,0000,0000,0000,,así que el truco de copiar y pegar hará que esto no sea tan aburrido.
Dialogue: 0,0:04:03.53,0:04:05.95,Default,,0000,0000,0000,,Y aquí la tenemos: una tabla.
Dialogue: 0,0:04:05.95,0:04:08.04,Default,,0000,0000,0000,,Puedo añadir columnas fácilmente,
Dialogue: 0,0:04:08.04,0:04:10.55,Default,,0000,0000,0000,,sólo con escribir otra "" en el encabezado,
Dialogue: 0,0:04:10.55,0:04:12.83,Default,,0000,0000,0000,,y luego "" en cada una de las filas,
Dialogue: 0,0:04:12.83,0:04:15.96,Default,,0000,0000,0000,,si quiero compartir más detalles de mis mascotas.
Dialogue: 0,0:04:16.24,0:04:19.66,Default,,0000,0000,0000,,Tal vez te preguntes ¿cómo puedes cambiar la forma en la que se ve esta tabla?
Dialogue: 0,0:04:19.66,0:04:22.19,Default,,0000,0000,0000,,Cómo cambiar los bordes, o los colores o los espacios.
Dialogue: 0,0:04:22.36,0:04:24.67,Default,,0000,0000,0000,,Puedes hacer todo eso con propiedades de CSS,
Dialogue: 0,0:04:24.67,0:04:27.91,Default,,0000,0000,0000,,que tal vez ya hayas aprendido, o que vas a aprender muy pronto.
Dialogue: 0,0:04:27.92,0:04:31.52,Default,,0000,0000,0000,,Ahora, trata de rehacer esta página web con la lista de tus propias mascotas,
Dialogue: 0,0:04:31.52,0:04:33.49,Default,,0000,0000,0000,,o con las mascotas que te gustaría tener.
Dialogue: 0,0:04:33.49,0:04:35.34,Default,,0000,0000,0000,,¡Tabula esos datos!