Programação para

Web I
Tecnólogo em Análise e Desenvolvimento de Sistemas

3 HTML5 - Marcação de lista

E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que
experimenteis qual seja a boa, agradável e perfeita vontade de Deus?
Romanos 12:2
 HTML5 - Marcação de lista
3
Contatos
Carlos José
carlos.silva@jaboatao.ifpe.edu.br
@carlosjoser2n

Eric Sales
eric.sales@jaboatao.ifpe.edu.br
 HTML5 - Marcação de lista
3
Objetivo
Apresentar a linguagem de marcação
HTML5 com seus conceitos básicos,
bem como a construção de
documentos.
 HTML5 - Marcação de lista
3
Introdução
 HTML5 - Marcação de lista
3
Introdução
As tags apresentadas aqui formam uma compilação das
definições oficiais da linguagem disponível em:
§ http://www.w3schools.com
§ http://www.w3.org/TR/html5/
 HTML5 - Marcação de lista
3
Introdução
No HTML existem três tipos bem definidos de lista para
cada finalidade especifica.
§ Lista não ordenada – igual a essa lista que estou utilizando,
ou seja, marcadores.
§ Lista ordenada – é uma lista em ordem numérica crescente.
§ Lista de definição – é uma lista comum para relacionar itens
sem marcadores ou numeradores, por exemplo, uma lista de
compras de supermercado.
 HTML5 - Marcação de lista
3
Introdução
Atenção
Um pouco diferente do que você esta acostumado com o uso
de uma lista, o HTML precisa de um elemento que defina o tipo
da lista e outro elemento pra definir os itens da lista.

E isso acontece com as listas não ordenada e ordenada que

compartilham o mesmo elemento para definir o item da lista.
 HTML5 - Marcação de lista
3
<ol>
Definição e forma de uso
O elemento <ol> define uma lista ordenada.
A lista pode ser numérica ou alfabética.

Por padrão a lista é numérica, mas aplicando a formatação em

uma folha de estilo (CSS), podemos alterar para alfabética.
 HTML5 - Marcação de lista
3
<ul>
Definição e forma de uso
O elemento <ul> define uma lista não ordenada semelhante aos
marcadores.

Os tipos da lista não ordenada, podem ser alterados aplicando a

formatação em uma folha de estilo (CSS) para disc, square,
circle.
 HTML5 - Marcação de lista
3
<li>
Definição e forma de uso
O elemento <li> define um item da lista.

O elemento <li> é utilizada tanto nas listas ordenada (<ol>) e

não ordenada (<ul>).
 HTML5 - Marcação de lista
3
<dl> <dt> <dd>
Definição e forma de uso
O elemento <dl> define uma lista de definição.
Definição e forma de uso
O elemento <dt> define um termo de uma lista de definição.
Definição e forma de uso
O elemento <dd> define a descrição dos itens de uma lista de
definição.
 HTML5 - Marcação de lista
3
exe-03.html
 HTML5 - Marcação de lista
3
exe-03.html
 HTML5 - Marcação de lista
3
exe-03.html
 HTML5 - Marcação de lista
3
Dúvidas?
 HTML5 - Marcação de lista
3
Bibliografia
§ Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo,
Novatec Brasil, julho 2011;
§ SILVA, Maurício Samy. Web Design Responsivo. São Paulo. Novatec, 2014;
§ http://www.w3schools.com
§ http://www.w3.org/TR/html5/