HTML
TRABALHANDO COM LISTAS
CSS (Cascading Style Sheets ou Folha de Estilos em Cascata)
Elementos de uma lista
Representatividade das tags
Nem sempre o significado de uma tag representa sua sintaxe literal
Há três tipos de listas:
1. Não ordenada
2. Ordenada ou numerada
3. De definição - usada para fazer comentários sobre os itens
expostos
Lista é um importante recurso de HTML, pois permite criarmos tópicos de textos para uma melhor exemplificação de um
determinado assunto. São recursos extremamente usados, inclusive quando nem imaginamos que ele esta sendo usado,
como no caso de menus. Hoje, boa parte dos menus em HTML é feito com listas.
[Link]
Listas HTML aninhadas
[Link]
<ul>
Lista não ordenada
A tag <ul> é um elemento HTML que representa uma
lista não ordenada.
Este elemento tem como característica criar listas não
ordenadas no HTML, ou seja, ao invés de apresentar
// Lista não ordenada com três itens: uma lista com numeração a lista será apresentada com
marcadores.
<ul>
<li>Banana</li> A tag <li> é definida como os itens a serem criados na
lista, ou seja, deve ser utilizado uma <li> para cada
<li>Maça</li> item criado na lista.
<li>Abacate</li>
</ul>
O elemento <ul> possui dois atributos globais:
compact -> anteriormente utilizado para aumentar ou diminuir o espaçamento entre os itens da lista;
type -> anteriormente utilizado para definir o tipo de marcador da lista.
Entretanto, por recomendação da documentação oficial, esses atributos não devem mais ser utilizados.
Exemplo de Lista não ordenada
<ul>
<li>Motos</li>
<li>Carros
<ul>
<li>Motor 3 Cilindros</li>
<li>Motor 4 Cilindros</li>
<li>Motor 8 Cilindros</li>
<ul>
<li>Ferrari</li>
<li>Porshe</li>
<li>Lamborguine</li>
</ul>
</ul>
</li>
<li>Aviões</li>
</ul>
Lista HTML ordenada - o atributo Type
[Link]
Lista ordenada
// Lista ordenada com quatro itens: A tag <li> é definida como os itens a serem criados na
lista, ou seja, deve ser utilizado uma <li> para cada
<ol> item criado na lista.
<li>Araçatuba</li>
<li>Birigui</li>
<li>Bilac</li>
<li>Guararapes</li>
</ol>
As listas ordenadas ou numeradas são usadas para indicar
alguma sequência ou numeração
As tags usadas para criar uma lista ordenada são <ol>
Atributos da lista ordenada.
Atributo Atributo
type start
Indica o tipo de numeração: Indica o começo da contagem:
'a' indica letras minúsculas, <ol start="5">
'A' indica letras maiúsculas, <li>primeiro item</li>
'i' indica algarismos romanos minúsculos, <li>segundo item</li>
<li>terceiro item</li>
'I' indica algarismos romanos maiúsculos,
</ol>
e '1' indica números (padrão).
Reversão
A utilização de um atributo da tag é utilizado nesse
momento, devemos saber que nem todos os atributos
de uma tag funcionam em todos os navegadores.
Você de ter em seu computador vários navegadores
instalados, fazer os testes e assim evitar alguns
problemas.
Lista ordenada - reversed
// Lista ordenada reversed, com quatro
itens:
<ol reversed>
<li>Araçatuba</li>
<li>Birigui</li>
<li>Bilac</li>
<li>Guararapes</li>
</ol>
Esse tipo de lista não utiliza marcadores ou números.
Listas de definição
Deve ser usado quando somente se deseja descrever
um termo.
As tags usadas são <dl>, <dt> e <dd>.
<dl> definition list - cria a lista de definição
<dl> <dt> definition term - onde o termo é proposto
<dd> definition definition - onde o termo é definido
<dt>Html</dt>
<dd> Html Basico</dd>
<dd> Html Avançado</dd>
<dt> CSS</dt>
<dd> CSS Básico</dd>
<dd> CSS Intermediário</dd>
<dd> CSS Avançado</dd>
</dl>
<h2>Principais browsers</h2>
<ul>
<li>Internet Explorer</li>
<li>Opera</li>
<li>Firefox</li>
<li>Safari</li>
</ul>
<h2>Cidades perto de Araçatuba</h2>
<ol>
<li>Birigui</li>
<li>Bilac</li>
<li>Guararapes</li>
<li>Sto. Antônio do Aracanguá</li>
</ol>
<h2>Linguagens de internet</h2>
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação de texto</dd>
<dt>CSS</dt>
<dd>É uma linguagem de estilo </dd>
</dl>
Contagem em uma lista