< Return to Video

HTML: Listas (Versão em Vídeo)

  • 0:01 - 0:03
    Você sabe o que eu amo? Listas.
  • 0:03 - 0:05
    Você já fez uma lista de tarefas
    ou de compras?
  • 0:05 - 0:07
    Já leu uma lista em uma página web como:
  • 0:07 - 0:10
    "As 10 caras de cachorros mais ridículas"?
  • 0:10 - 0:14
    Eu aposto que sim, porque o
    mundo está cheio de listas.
  • 0:14 - 0:16
    O HTML nos dá algumas 'tags'
    para fazermos listas,
  • 0:16 - 0:19
    e vamos praticar, fazendo
  • 0:19 - 0:24
    uma lista de razões pelas quais os coelhos
    são grandes animais de estimação.
  • 0:25 - 0:27
    Para começar uma lista com marcadores,
  • 0:27 - 0:30
    devemos começar com a tag "< ul >".
  • 0:31 - 0:32
    O que significa "< ul >" e o que ela faz?
  • 0:32 - 0:36
    Aposto que você pode adivinhar o que o "l"
    representa 'lista' (List).
  • 0:36 - 0:40
    O "u", é um pouco mais complicado,
    ele representa 'não ordenada' (Unordered),
  • 0:40 - 0:43
    isso significa que o navegador não
    numerará os itens da lista
  • 0:43 - 0:45
    Ele só vai adicionar pequenas marcações.
  • 0:45 - 0:48
    Para ver o que quero dizer,
    vamos adicionar o primeiro item,
  • 0:48 - 0:50
    "Eles são peludos".
    (They're Furry)
  • 0:50 - 0:52
    Viu o pequeno círculo no lado?
  • 0:52 - 0:53
    Isso é um marcador.
  • 0:53 - 0:56
    Agora, o que você acha
    que "< li >" significa?
  • 0:56 - 1:00
    O "l" é de lista, e o "i" é de item,
    ou seja, item da lista (List Item).
  • 1:00 - 1:02
    Sempre que quisermos adicionar
    um item
  • 1:02 - 1:06
    precisamos adicionar um
    novo "< li >" sob o "< ul >".
  • 1:06 - 1:08
    Cada "< ul >" deve ter pelo menos
    um "< li >" sob ela,
  • 1:08 - 1:12
    porque uma lista sem itens é muito chato.
  • 1:12 - 1:14
    Vamos adicionar um pouco mais,
  • 1:14 - 1:17
    "Grandes ouvintes"
    (Great listeners) e...,
  • 1:17 - 1:22
    "Come todas as suas sobras de cenouras"
    (Eat all your leftover carrots)
  • 1:22 - 1:25
    Esta deve ser uma lista
    bastante convincente.
  • 1:25 - 1:28
    Não sei quem não ia querer um coelho
    depois de ler isso.
  • 1:28 - 1:30
    Eu não numerei esta lista
  • 1:30 - 1:32
    porque eu não acho que uma das razões
  • 1:32 - 1:34
    seja mais importante do que a outra,
  • 1:34 - 1:37
    mas tem um monte de vezes que queremos
    fazer listas numeradas.
  • 1:37 - 1:38
    Como, se quiséssemos fazer uma
  • 1:38 - 1:43
    Uma lista com os
    "Os três coelhos mais famosos".
  • 1:45 - 1:47
    Para começar a nossa lista numerada,
  • 1:47 - 1:51
    vamos usar um "< ol >"
    em vez de um "< ul >".
  • 1:51 - 1:54
    Já descobriu o que significa "< ol >"?
  • 1:55 - 1:56
    Dica: é só cortar a primeira
  • 1:56 - 1:59
    letra do significado de "< ul >".
  • 1:59 - 2:03
    Isso mesmo, ele significa
    "lista ordenada" (Ordened List).
  • 2:03 - 2:05
    Ele diz que um navegador deve numerar
  • 2:05 - 2:07
    automaticamente cada novo item.
  • 2:07 - 2:10
    No entanto, ainda usamos "< li >" para
    adicionar novos itens
  • 2:10 - 2:11
    dentro da lista.
  • 2:11 - 2:14
    Vamos colocar
    Pernalonga(Bugs Bunny)
  • 2:14 - 2:16
    temos "Tambor" (Thumper),
  • 2:16 - 2:19
    e, claro, não podemos esquecer do
    "Coelhinho da Páscoa" (Easter Bunny).
  • 2:21 - 2:22
    O interessante das listas numeradas
  • 2:22 - 2:25
    é que o navegador toma conta
    da numeração por nós.
  • 2:25 - 2:28
    Então se reorganizarmos, excluir
    ou adicionar novos itens
  • 2:28 - 2:30
    ele sempre atualiza os
    números corretamente.
  • 2:30 - 2:32
    Aí você me diz
  • 2:32 - 2:34
    que não conhece "Tambor" (Thumper).
  • 2:34 - 2:36
    Em primeiro lugar, só vou dizer que você
  • 2:36 - 2:37
    deve assistir o filme "Bambi".
  • 2:37 - 2:39
    Mas, vou mover contra minha vontade
  • 2:39 - 2:41
    "Tambor"(Thumper) para a parte inferior.
  • 2:41 - 2:44
    Agora, o pobre "Tambor" (Thumper)
    é o número três.
  • 2:44 - 2:47
    Agora você tem tudo o que precisa
    para fazer listas.
  • 2:47 - 2:50
    Vá em frente e faça uma lista de tudo.
  • 2:50 - 2:55
    Traduzido por [ Fernando dos Reis] Revisado por [Valter Bigeli]
Title:
HTML: Listas (Versão em Vídeo)
Description:

more » « less
Video Language:
English
Duration:
02:51

Portuguese, Brazilian subtitles

Revisions