Se você já vem acompanhando o blog faz algum tempo já deve ter aprendido muitas coisas bem interessante cobre esta linguagem usada abrangentemente por designers, blogueiros e outros profissionais que lidam com a internet.
Confira agora como se cria listas em artigos de seu blog passo a passo.
Listas
As listas são utilizadas para organizar os conteúdos das páginas, servindo como resumos ou índices dos sites. As listas podem conter links para outras páginas, para arquivos ou outros sites.
Existem 4 tipos de listas, sendo estas:
- LISTA NÃO NUMERADA;
- LISTA NUMERADA
- LISTA DE DEFINIÇÕES
- LISTA INTERCALADAS.
6.1 LISTAS NÃO NUMERADAS
As listas não numeradas inserem marcadores na frente de cada item.
Comando:
<UL TYPE=”formato”>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</UL>
Onde:
<UL>: indica o ínicio da lista pontuada;
TYPE=”formato”: indica o formato do marcador da lista, pode ser:
- disc : formato de ponto (padrão utilizado pelos navegadores);
- square: formato de quadrado;
- circle: formato de círculo;
<LI>: indica os tópicos da lista.
</UL>: indica o fim da lista.
<html>
<head>
<title> Listas não numeradas </title>
</head>
<body>
<h1> Listas não numeradas</h1>
<ul type="disc">
<li> Type = "disc"
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
<ul type="square">
<li> type="square"
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
<ul type="circle">
<li> type = "circle"
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
</body>
</html>
6.2 LISTAS NUMERADAS
A lista numerada é semelhante a lista não numerada, porém no lugar de marcadores é inserido na página uma lista numérica ou alfabética, com valor pré-definido ou não.
Comando:
<OL TYPE=”formato” START=”n”>
<LI> Item 1
<LI> Item 2
<LI> Item 3
</OL>
Onde:
OL: indica o ínicio da lista numerada.
Type=”formato” : indica o formato da numeração da lista, que pode ser:
1: Lista numérica
A: Lista alfabética com letras maiúsculas;
a: Lista alfabética com letras minúsculas;
I : Lista numérica com números romanos maiúsculos;
i : Lista numérica com números romanos minúsculos.
START=”n” : indica o valor inicial da lista numerada;
<LI>: indica o tópico da lista.
</OL> indica o fim da lista numerada.
<html>
<head>
<title> Listas numerada </title>
</head>
<body>
<h1> Listas numeradas</h1>
<h3>Lista numerada padrão</h3>
<ol>
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
<h3>Lista numerada padrão com START="10"</h3>
<ol start="10">
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
<h3>Lista alfabética com letras maiúsculas</h3>
<ol type="A">
<li> Item 1
<li> Item 2
<li> Item 3
</ol>
</body>
</html>
6.3 LISTAS DE DEFINIÇÕES
A lista de definições são diferentes da demais listas, pois cada item da lista possui dois elementos: um item e uma descrição do item.
Comando:
<DL>
<DT> Item 1
<DD> Descrição do Item 1
<DT> Item 2
<DD> Descrição do Item 2
</DL>
Onde:
<DL>: indica o ínicio da lista descritiva;
<DT>: indica o item da lista;
<DD>: indica a descrição do item da lista ;
</DL>: indica o fim da lista.
NOTA:
- Para cada tag <DT> existe uma tag <DD>
- Não é necessário encerrar as tags <DT> e <DD>
<html>
<head>
<title> Listas de Definições </title>
</head>
<body>
<h1> Listas de Definições</h1>
<DL>
<DT><b>Listas não numeradas</b>
<DD> As listas não numeradas ou pontuadas inserem marcadores na frente de
cada item.
</DL>
<DL>
<DT><b>Lista numeradas</b>
<DD>As listas numeradas inserem números ou letras na frente de cada item.
</DL>
<DL>
<DT><b>Lista de Definições</b>
<DD>As listas de definições são diferentes das demais listas pois possuem
dois elementos: o item e a descrição do item.
</DL>
</body>
</html>
6.4 LISTAS INTERCALADAS
As listas intercaladas são utilizadas para melhor organizar as estruturas dos itens, podendo criar hierarquias, unindo listas numeradas com listas não numeradas.
<html>
<head>
<title> Listas Intercaladas </title>
</head>
<body>
<h1> Lista Intercaladas</h1>
<UL>
<LI>Estados da Região Sul
<UL>
<LI>Paraná
<LI>Santa Catarina
</UL>
<LI>Estados da região Sudeste
<OL>
<LI>São Paulo
<LI>Rio de Janeiro
<LI>Minas Gerais
</OL>
</UL>
</body>
</html>
Caso queira entrar em contato por algum motivo, acesse a página de contato através deste link:Contato.
Envie dúvidas, reclamações, sugestões, elogios e assuntos mais complexos relacionados ao artigo e em 24 horas estarei lhe respondendo prontamente.
0 comentários:
Postar um comentário
Se você quer fazer algum comentário sobre este artigo, fique a vontade em expressar sua opinião; desde que:
1. Tenha a ver com o assunto;
2. Não haja ofensas pessoais;
3. Não contenha links e spams;
4. Só comente de boa vontade.