html - listas
DESCRIPTION
Demonstra o uso das tags de representação de listasTRANSCRIPT
Sobre mim
Luís Otávio Cobucci Oblonczyk• Desenvolvedor PHP• Orientador SENAC-TI
http://twitter.com/lcobucci
Sobre este trabalho
• Esta apresentação foi criada sob as licenças Creative Commons
• Seu objetivo é auxiliar os alunos do Senac TI que assistem minhas aulas.
Tags de listas
• As principais tags de listas são:– <ol> = Listas ordenadas– <ul> = Listas não ordenadas
• Também temos uma outra lista lista:– <dl> = Lista de definição de termos
Listas ordenadas
• Utilizamos listas ordenadas quando precisamos definir tópicos que seguem uma ordem (exemplo: índice de um livro).
• O browser incrementa o contador sozinho.• Os contadores podem ser numéros, letras
(maiúsculas ou minúsculas), i’s (também maiúsculos ou minúsculos)
Listas ordenadas
<html><head><title>Teste</title></head>
<body>
<ol><li>teste 1</li><li>teste 2</li></ol>
</body>
</html>
• O resultado deste código será:1. teste1
2. teste 2
Listas não ordenadas
• Utilizamos listas não ordenadas quando precisamos definir tópicos que não seguem uma ordem (exemplo: tópicos de um slide).
• Os demarcadores podem ser círculos preenchidos, círculos vazios e quadrados.
• Através de CSS pode-se alterar a apresentação dos demarcadores.
Listas não ordenadas
<html><head><title>Teste</title></head>
<body>
<ul><li>teste 1</li><li>teste 2</li></ul>
</body>
</html>
• O resultado deste código será:• teste1• teste 2
Listas de definições
• Utilizamos listas de definições quando desejamos definir termos (exemplo: dicionário).
Listas de definição
<html><head><title>Teste</title></head>
<body>
<dl><dt>HTML</dt><dd>Hypertext Markup Language</dd><dt>PHP</dt><dd>Hypertext Preprocessor</dd></dl>
</body>
</html>
• O resultado deste código será:HTML
Hypertext Markup Language
PHP
Hypertext Markup Preprocessor