PáginasWeb com: HTML, CSS e JavaScript
Profª. Marlene da Silva Maximiano de Oliveira
& Profª. Alessandra Aparecida da Silva
Listas
• Listas não ordenadas
• Listas ordenadas
• Listas de Definições
• Listas Aninhadas
Lista não ordenada
• Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets
(tipicamente...
Exemplos de Listas Não Ordenadas
<ul type="disc">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ul>
...
Lista Ordenada
• Uma lista ordenada é também uma lista de itens. As listas de itens são
marcadas com números.
• Uma lista ...
Exemplos de Listas Ordenadas
<ol type="I">
<li>Maçãs</li>
<li>Bananas</li>
<li>Limões</li>
<li>Laranjas</li>
</ol>
<ol typ...
Lista de Definições
• Uma lista de definições não é uma lista de itens. Esta é uma lista de termos e
explicações dos termo...
Listas Aninhadas
<ul>
<li>Café</li>
<li>Chá
<ul>
<li>Chá preto</li>
<li>Chá verde</li>
</ul>
</li>
<li>Leite</li>
</ul>
ex...
Listas Aninhadas
<ul>
<li>Café</li>
<li>chá
<ul>
<li>Chá preto</li>
<li>Chá verde
<ul>
<li>China</li>
<li>África</li>
</ul...
Próximos SlideShares
Carregando em…5
×

04 html listas

283 visualizações

Publicada em

HTML - Trabalhando com Listas

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

04 html listas

  1. 1. PáginasWeb com: HTML, CSS e JavaScript Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
  2. 2. Listas • Listas não ordenadas • Listas ordenadas • Listas de Definições • Listas Aninhadas
  3. 3. Lista não ordenada • Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets (tipicamente pequenos círculos pretos). • Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>. <ul> <li> Introdução <li> Dedicatória <li> Capitulo 1 </ul> exemplo testado
  4. 4. Exemplos de Listas Não Ordenadas <ul type="disc"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> <ul type="circle"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> <ul type="square"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ul> exemplos testados
  5. 5. Lista Ordenada • Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com números. • Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>. Exemplo: Lista Ordenada <ol> <li> Introdução <li> Dedicatória <li> Capitulo 1 </ol> exemplo testado
  6. 6. Exemplos de Listas Ordenadas <ol type="I"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> <ol type="A"> <li>Maçãs</li> <li>Bananas</li> <li>Limões</li> <li>Laranjas</li> </ol> exemplos testados
  7. 7. Lista de Definições • Uma lista de definições não é uma lista de itens. Esta é uma lista de termos e explicações dos termos. • Uma lista de definições começa com a tag <dl>. Cada termo da lista de definições começa com a tag <dt>. Cada definição da lista de definições começa com a tag <dd>. <dl> <dt>Café</dt> <dd>Bebida quente preta</dd> <dt>Leite</dt> <dd>Bebida fria branca</dd> </dl> exemplo testado
  8. 8. Listas Aninhadas <ul> <li>Café</li> <li>Chá <ul> <li>Chá preto</li> <li>Chá verde</li> </ul> </li> <li>Leite</li> </ul> exemplo testado
  9. 9. Listas Aninhadas <ul> <li>Café</li> <li>chá <ul> <li>Chá preto</li> <li>Chá verde <ul> <li>China</li> <li>África</li> </ul> </li> </ul> </li> <li>Leite</li> </ul> exemplo testado

×