Return to Video

HTML Listas (Version video )

  • 0:01 - 0:03
    ¿Sabes qué me encanta? Las listas.
  • 0:03 - 0:05
    ¿Alguna vez has hecho una lista de
    pendientes o una lista de super?
  • 0:05 - 0:07
    ¿Alguna vez has leído una lista en una
    página web como,
  • 0:07 - 0:10
    "Las 10 caras de perro más ridículas" ?
  • 0:10 - 0:14
    Apuesto a que lo has hecho, porque el
    mundo está lleno de listas.
  • 0:14 - 0:16
    HTML nos proporciona etiquetas para
    hacer listas,
  • 0:16 - 0:19
    y vamos a practicar esto haciendo
  • 0:19 - 0:24
    una lista de razones por las que los
    conejos son magníficas mascotas.
  • 0:25 - 0:27
    Ahora, para empezar una lista con viñetas,
  • 0:27 - 0:30
    debemos comenzar con la etiqueta < ul >.
  • 0:31 - 0:32
    ¿Para qué es la etiqueta < ul >?
  • 0:32 - 0:36
    Apuesto a que puedes adivinar qué
    significa la "l", lista.
  • 0:36 - 0:40
    La "u", es más complicado saber,
    es para listas que no están ordenadas,
  • 0:40 - 0:43
    y significa que el navegador no va a
    numerar los elementos.
  • 0:43 - 0:45
    Sólo va a añadir pequeñas viñetas.
  • 0:45 - 0:48
    Para que veas lo que quiero decir,
    déjame añadir el primer elemento,
  • 0:48 - 0:50
    "Son peludos".
  • 0:50 - 0:52
    ¿Ves el pequeño círculo que está
    a un lado?
  • 0:52 - 0:53
    Esa es una viñeta.
  • 0:53 - 0:56
    ¿Para qué crees que es la etiqueta < li >?
  • 0:56 - 1:00
    La "l" significa lista, y la "i" es elemento,
    elemento de la lista.
  • 1:00 - 1:02
    Cada vez que queremos añadir un
    elemento nuevo,
  • 1:02 - 1:06
    necesitamos agregar una nueva etiqueta
    < li > debajo de < ul >.
  • 1:06 - 1:08
    Cada etiqueta < ul > debe tener cuando
    menos una etiqueta < li > debajo,
  • 1:08 - 1:12
    porque una lista sin elementos
    es aburrida.
  • 1:12 - 1:14
    Ok, vamos a añadir más elementos,
  • 1:14 - 1:17
    "Son grandes oyentes" y,
  • 1:17 - 1:22
    "Se comen todas las zanahorias
    sobrantes"
  • 1:22 - 1:25
    Está bien, esto debería ser una
    lista bastante convincente.
  • 1:25 - 1:28
    Yo no sé a quién no le gustaría tener un
    conejo después de leer esto.
  • 1:28 - 1:30
    Ahora, yo no numeré esta lista
  • 1:30 - 1:32
    porque no creo que alguna razón
  • 1:32 - 1:34
    es más importante que otra,
  • 1:34 - 1:37
    pero muchas veces queremos
    listas numeradas.
  • 1:37 - 1:38
    Como cuando queremos hacer
    una lista de
  • 1:38 - 1:43
    "Los tres conejos más famosos".
  • 1:45 - 1:47
    Así que para empezar nuestra
    lista numerada,
  • 1:47 - 1:51
    vamos a usar una etiqueta < ol > en
    lugar de < ul >.
  • 1:51 - 1:55
    ¿Ya descubriste para qué es la etiqueta
    < ol >?
  • 1:55 - 1:56
    Aquí hay una pista, sólo revisa
    las primeras
  • 1:56 - 1:59
    dos letras de < ul > para saber
    qué significa.
  • 1:59 - 2:03
    Correcto, se usa para "listas ordenadas".
  • 2:03 - 2:05
    Y esta etiqueta le dice al navegador que
  • 2:05 - 2:07
    numere cada elemento nuevo
    automáticamente.
  • 2:07 - 2:10
    Seguimos usando < li > para añadir
    elementos nuevos
  • 2:10 - 2:12
    dentro de la lista.
  • 2:12 - 2:13
    Así que pondremos "Bugs Bunny",
  • 2:13 - 2:16
    tenemos a "Thumper",
  • 2:16 - 2:19
    y por supuesto, no podemos olvidar el
    "Easter Bunny".
  • 2:21 - 2:23
    Lo bueno de las listas numeradas es
  • 2:23 - 2:25
    que el navegador se encarga de la
    numeración por nosotros.
  • 2:25 - 2:28
    Así que si reordenamos los elementos,
    los borramos o añadimos otros,
  • 2:28 - 2:30
    los números siempre se actualizan
    correctamente.
  • 2:30 - 2:32
    Como si todos ustedes me dijeran que
  • 2:32 - 2:34
    no saben quién es "Thumper".
  • 2:34 - 2:36
    Entonces, en primer lugar, les diría
  • 2:36 - 2:37
    que deben ver la película de "Bambi".
  • 2:37 - 2:39
  • 2:39 - 2:41
  • 2:41 - 2:44
  • 2:44 - 2:47
  • 2:47 - 2:50
Title:
HTML Listas (Version video )
Description:

more » « less
Video Language:
English
Duration:
02:51
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for HTML Lists (Video Version)
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for HTML Lists (Video Version)
Martha Isabel Soriano Ruiz edited Spanish, Mexican subtitles for HTML Lists (Video Version)

Spanish, Mexican subtitles

Revisions Compare revisions