Tutorial Iniciante de HTML: Listas

23 02 2008

Lista em HTML

Existem três tipos de listas: listas não ordenadas, listas ordenadas e listas de definição. Nós vamos ver as duas primeiras aqui, e listas de definição no Tutorial Intermediário de HTML.

Listas ordenadas e não ordenadas funcionam da mesma maneira, exceto porque a primeira é usada para listas seqüenciais, geralmente precedidas por números incrementais, e a segunda para listas não-seqüenciais com os itens geralmente precedidos por marcadores.

A tag ul é usada para definir listas não ordenadas e a tag ol é usada para definir listas ordenadas. Dentro das listas, a tag li é usada para definir cada item.

Mude seu código para o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Minha primeira página web</title>
  </head>

  <body>
    <h1>Minha primeira página web</h1>
    <h2>O que é isso?</h2>
      <p>Uma página simples feita usando HTML</p>
    <h2>Por que isso?</h2>
      <ul>
        <li>Pra aprender HTML</li>
        <li>Para exibir</li>
        <li>Porque eu me apaixonei pelo meu computador e quero dar um pouco de amor HTML</li>
      </ul>
    </body>

</html>

Se você olhar para seu navegador, vai ver uma lista com marcadores. É só mudar as tags ul para ol e você vai ver que a lista se torna numerada.

Listas também podem ser incluídas em listas formando uma hierarquia estruturada de itens.

Troque o código da lista acima pelo seguinte:

<ul>
  <li>Para aprender HTML</li>
  <li>Para exibir
    <ol>
      <li>Pro meu chefe</li>
      <li>Para os meus amigos</li>
      <li>Pro meu gato</li>
      <li>Pro pequeno pato falante na minha cabeça</li>
    </ol>
  </li>
  <li>Porque eu me apaixonei pelo meu computador e quero dar um pouco de amor HTML</li>
</ul>

Et voilà. Uma lista dentro de uma lista. E você podia colocar uma outra lista dentro dela. E outra dentro dela. E quantas mais você quisesse.

Páginas Relacionadas

Exemplos

BlogBlogs Tags: , ,

Esse material é uma adaptação do HTML Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

6 responses

24 02 2008
joh

vc posta rapido d+!

xDDD~

assim eu nau consigo acompanhar e nem comentar tds os posts..

^^”

tenta ir devagar e relaxe…

o/

qr 1 dik?

vah namorar + 1 pokin..

vc tah precisando…

xDDDD~

\o/

;***

22 04 2008
Advinha quem!

kkkkkkkkk
“qr 1 dik?

vah namorar + 1 pokin..

vc tah precisando…”

Negando fogo Maki-chan?!?!

Comecei a me empolgar aki… Falta agora saber onde eu hospedo minha página!

24 11 2008
JoãoBatista

Saudações amigos (as),

Depois de tanto me decepcionar com um webdesigner que, tem criatividade, mas não entende muito de pontualidade, resolvi criar o meu próprio site. E esse curso básico de HTML tem me ajudado muito. Essa iniciativa de disponibilizar gratuitamente, é louvável e digno de aplausos!
Um abraço.

28 04 2010
Quem é o Pêra?

Estou gostando do tutorial, como bom webdesigner que quero ser, acho legal ter a visão de um programador sobre como estruturar e desenvolver websites.
Parabéns!

19 09 2012
jovanildo

o meu deu errado :/

15 10 2014
Filipe Rodrigues

Olha, até agora vem dando muito certo aqui o passo a passo.
Muito obrigado pelas dicas!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: