Adicionando Listas em Documentos HTML

Listas Nesta aula veremos como adicionar listas a documentos HTML Listas ordenadas não ordenadas e de definição Listas NãoOrdenadas Listas nãoordenadas são representadas pela tag ul de unordered list que deve ser aberta no início da lista e fechada ao final São listas exatamente como esta aqui com os bullets ao lado as bolinhas pretas Dentro da lista entre as tags ul de abertura e fechamento devemos inserir a tag li para cada item Exemplo Primeiro item Segundo item Terceiro item ul liPrimeiro itemli liSegundo itemli liTerceiro itemli ul 1 de 9 O tipo de bullet padrão é um círculo preenchido mas ele pode ser mudado Para isso usamos o atributo type na tag ul Além do tipo padrão que é o disc temos mais 2 tipos Círculo vazio circle Primeiro item Segundo item Terceiro item ul typecircle liPrimeiro itemli liSegundo itemli liTerceiro itemli ul Quadrado square Primeiro item Segundo item Terceiro item ul typesquare liPrimeiro itemli liSegundo itemli liTerceiro itemli ul E por fim também é possível misturar tipos diferentes de bullets entre os itens de uma única lista colocando o atributo type diretamente nas tags li em vez da tag ul Primeiro item Segundo item Terceiro item ul li typediscPrimeiro itemli li typecircleSegundo itemli 2 de 9 li typesquareTerceiro itemli ul Listas Ordenadas Listas ordenadas são representadas pela tag ol de ordered list que deve ser aberta no início da lista e fechada ao final 1 São listas exatamente como esta aqui com numeração ao lado 2 Dentro da lista entre as tags ol de abertura e fechamento devemos inserir a tag li para cada item da mesma forma que foi feito com as listas nãoordenadas Independentemente do tipo de lista usada os itens sempre são representados pela tag li 3 Primeiro item 1 Segundo item 2 Terceiro item 3 ol liPrimeiro itemli liSegundo itemli liTerceiro itemli ol Por padrão listas ordenadas utilizam números começando em 1 em ordem crescente 3 de 9 Para mostrar em ordem decrescente usamos o atributo reversed sem valor apenas o nome do atributo Primeiro item 3 Segundo item 2 Terceiro item 1 ol reversed liPrimeiro itemli liSegundo itemli liTerceiro itemli ol Além disso também podemos definir o número incial da lista usando o atributo start na tag ol Primeiro item 3 Segundo item 4 Terceiro item 5 ol start3 liPrimeiro itemli liSegundo itemli liTerceiro itemli ol e misturar start com reversed Primeiro item 7 Segundo item 6 Terceiro item 5 ol start7 reversed liPrimeiro itemli liSegundo itemli liTerceiro itemli ol 4 de 9 Outra possibilidade é a de alterar a numeração a partir de um item específico utilizando o atributo value na tag li Primeiro item 1 Segundo item 42 Terceiro item 43 ol liPrimeiro itemli li value42Segundo itemli liTerceiro itemli ol E encerrando as customizações possíveis em listas ordenadas podemos mudar o tipo de numeração Até agora todos os exemplos utilizaram algarismos induarábicos mas existem mais 4 possibilidades que podem ser obtidas com o uso do atributo type na tag ol Primeiro item a Segundo item b Terceiro item c ol typea liPrimeiro itemli liSegundo itemli liTerceiro itemli ol Primeiro item A Segundo item B Terceiro item C ol typeA liPrimeiro itemli liSegundo itemli liTerceiro itemli 5 de 9 ol Primeiro item i Segundo item ii Terceiro item iii ol typei liPrimeiro itemli liSegundo itemli liTerceiro itemli ol Primeiro item I Segundo item II Terceiro item III ol typeI liPrimeiro itemli liSegundo itemli liTerceiro itemli ol e também dá pra misturar tudo se o atributo type for colocado na tag li Primeiro item 1 Segundo item b Terceiro item C Quarto item iv Quinto item V ol li type1Primeiro itemli li typeaSegundo itemli li typeATerceiro itemli 6 de 9 li typeiQuarto itemli li typeIQuinto itemli ol Listas de Definição O último tipo de lista que veremos é também o menos utilizado são as listas de definição São usadas quando queremos definir termos como em um dicionário Para isso utilizamos as tags dl definition list como contêiner da lista como um todo dt definition term para cada termo a ser definido seriam as palavras em um dicionário e dd para cada definição adicionada a cada termo pode haver várias Treta Briga rolo desentendimento Ato sujo ou desonesto Ato obscuro Derivação de mutreta Zueira Barulheira festa com som muito alto muita alegria muito agito Zueira não é só uma bagunça Zueira é um estilo de vida um jeito de se sentir melhor com você mesmo e com seus amigos Uma pessoa zueira é aquela que vive a vida que aproveita de tudo dl dtTretadt ddBriga rolo desentendimentodd ddAto sujo ou desonesto Ato obscuro Derivação de mutretadd dtZueiradt ddBarulheira festa com som muito alto muita alegria muito agito dd ddZueira não é só uma bagunça Zueira é um estilo de vida um jeito de se sentir melhor com você mesmo e com seus amigos Uma pessoa zueira é aquela que vive a vida que aproveita de tudodd dl Listas Aninhadas Por fim podemos usar listas aninhadas listas dentro de listas para criar subitens Basta criar uma nova lista dentro de um item de outra lista Primeiro item 1 Segundo item 2 7 de 9 Primeiro subitem do segundo item 1 Segundo subitem do segundo item 2 Terceiro item 3 ol liPrimeiro itemli liSegundo item ol liPrimeiro subitem do segundo itemli liSegundo subitem do segundo itemli ol li liTerceiro itemli ol Também é possível misturar os tipos de listas Primeiro item 1 Segundo item Primeiro subitem do segundo item Segundo subitem do segundo item 2 Terceiro item 3 ol liPrimeiro itemli liSegundo item ul liPrimeiro subitem do segundo itemli liSegundo subitem do segundo itemli ul li liTerceiro itemli ol IMPORTANTE a única tag permitida dentro de um ul ou ol é um li Colocar texto ou 8 de 9 qualquer outra coisa dentro de um ul ou li é errado Já no li pode praticamente tudo Primeiro item 1 ERRADO Segundo item Primeiro subitem do segundo item Segundo subitem do segundo item 2 Terceiro item 3 Primeiro item da lista no lugar errado 1 Segundo item da lista no lugar errado 2 ol liPrimeiro itemli ERRADO liSegundo item ul liPrimeiro subitem do segundo itemli liSegundo subitem do segundo itemli ul li liTerceiro itemli ol liPrimeiro item da lista no lugar erradoli liSegundo item da lista no lugar erradoli ol ol 9 de 9