banco de dúvidaslistacontatooutros materiais


Material desenvolvido para os usuários do Instituto de Ciências Matemáticas e de Computação, da Universidade de São Paulo em São Carlos, SP

Autora: Maria Alice Soares de Castro

ATENÇÃO:
Este material não pode ser comercializado.

Este trabalho não tem fins lucrativos, nem está relacionado a provedores de acesso ou sites comerciais.

:: Capa » HTML Básico

  

Listas em HTML

Há vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:

 

Listas de Definição

Estas listas são chamadas também “Listas de Glossário”, uma vez que têm o formato: 

<DL>
<DT>termo a ser definido
<DD>definição
<DT>termo a ser definido
<DD>definição
</DL>

Que produz:

termo a ser definido
definição
termo a ser definido
definição

Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir a tabulação do texto. Um exemplo são os índices de navega_1ção presentes nas pági nas deste tutorial; outro exemplo é a lista composta abaixo:

<DL>
<DT>Imperadores do Brasil:
<DD>D. Pedro I
<DL>
<DD>Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon
</DL>
<DD>D. Pedro II
<DL>
<DD>Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga
</DL>
</DL>
Imperadores do Brasil:
D. Pedro I
Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon
D. Pedro II
Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga

 

Listas não-numeradas

São equivalentes às listas com marcadores do MS Word:

<UL>
<LI>item de uma lista
<LI>item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
<LI>item
</UL>
  • item de uma lista
  • item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
  • item


A diferença entre o resultado da marcação HTML e do Word está na mudança dos marcadores, assinalando os diversos níveis de listas compostas:

<UL>
<LI>Documentos básicos
<LI>Documentos avançados
<UL>
<LI>formulários
<UL>
<LI>CGI
</UL>
<LI>contadores
<LI>relógios
</UL>
<LI>Detalhes sobre imagens
</UL>
  • Documentos básicos
  • Documentos avançados
    • formulários
      • CGI
    • contadores
    • relógios
  • Detalhes sobre imagens

Essa lista pode ter marcadores diferentes, indicados através do atributo TYPE, que assume os valores CIRCLE, SQUARE e DISC (default):

<UL TYPE=CIRCLE>
<LI>um item
<LI>mais um item
</UL>
  • um item
  • mais um item

Cada item também pode ter seu atributo específico:

<UL>
<LI TYPE=DISC>um item
<LI TYPE=CIRCLE>mais um item
<LI TYPE=SQUARE>último item
</UL>
  • um item
  • mais um item
  • último item

topicoIntrodução à Linguagem HTML
topicoO documento básico e seus compontentes
    item<HEAD>
    item<BODY>
    itemCabeçalhos
    itemSeparadores
    itemListas
topicoFormatação de textos
topicoLigações (uso de links)
topicoInserção de imagens

 

 

«Observação 1»

Boa parte dos editores HTML (WYSIWYG ou não), insere marcações que não existem em HTML. Exemplos típicos são </DD>, </DT> ; e </LI>. Porém, como essas etiquetas não são reconhecidas pelos browsers, não causam efeito colateral algum nos documentos.

 

 

 

 

 

 

«Observação 2»

Nestes exemplos, o texto fonte aparece tabulado apenas para efeito de melhor visualização, uma vez que já foi visto que os espaços em branco e tabulações originais não têm efeito no documento final.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

«Observação 3»

Se você não está vendo diferença alguma entre as listas comuns e as que têm atributos TYPE, isso se deve ao fato de seu browser não estar reconhecendo esses atributos como válidos. Trata-se de um browser de versão antiga. Isso deve ser pensado quando usamos atributos mais recentes: nem todo usuário poderá ver o resultado das novas marcações.

 

 


Listas Numeradas

<OL>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
<LI>item de lista numerada
</OL>
  1. item de uma lista numerada
  2. item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto
  3. item de lista numerada

Estas listas não apresentam numeração em formato 1.1, 1.2 etc., quando compostas:

  1. Documentos básicos
  2. Documentos avançados
    1. formulários
      1. CGI
      2. contadores
      3. relógios
    2. Detalhes sobre imagens

Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens:

<OL TYPE=I>
<LI>Documentos básicos
<LI>Documentos avançados
<OL TYPE=a>
<LI >formulários
<OL TYPE=i>
<LI>CGI
</OL>
<LI>contadores
<LI>relógios
</OL>
<LI>Detalhes sobre imagens
</OL>
 
  1. Documentos básicos
  2. Documentos avançados
    1. formulários
      1. CGI
    2. contadores
    3. relógios
  3. Detalhes sobre imagens

Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista:

<OL START=4 TYPE=A>
<LI>um item
<LI>outro item
<LI>mais um item
</OL>
 
  1. um item
  2. outro item
  3. mais um item

 

Listas e “sub-listas”

As listas podem ser aninhadas. Por exemplo: 

<DL>
<DT>termo a ser definido
<DD>definição
   <OL>
   <LI>item de uma lista numerada
   <LI>item de uma lista numerada
      <UL>
      <LI>item de uma lista
      </UL>
   <LI>item de uma lista numerada
   </OL>
<DT>termo a ser definido
<DD>definição
</DL>
termo a ser definido
definição
  1. item de uma lista numerada
  2. item de uma lista numerada
    • item de uma lista
  3. item de uma lista numerada
termo a ser definido
definição

©1995-2003 - URL: http://www.icmc.usp.br/ensino/material/html/listas.html