DWEB
Design para Web
Curso Superior de Tecnologia em Design Gráfico
4
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
Contatos
Carlos José
[email protected]
www.carlosjose.net
@carlosjoser2n
4
HTML5 - Marcação de lista
Objetivo
Apresentar a linguagem de
marcação HTML5 com seus
conceitos básicos, bem
como a construção de
documentos.
4
HTML5 - Marcação de lista
Agenda
Lista de tag’s e atributos
para marcação de lista.
Exercícios.
4
HTML5 - Marcação de lista
Introdução
4
HTML5 - Marcação de lista
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/
Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil,
julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design – guia para iniciantes, 3ª Edição;
http://www.htmldog.com/; http://www.w3schools.com
4
HTML5 - Marcação de lista
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.
4
HTML5 - Marcação de lista
Introdução
Um pouco diferente do que você esta acostumado com o uso de uma lista, o HTML precisa de um elemento que defina o ;po da lista e outro elemento pra definir os itens da lista. E isso acontece com as listas não ordenada e ordenada que compar;lham o mesmo elemento para definir o item da lista. 4
<ol>
HTML5 - Marcação de lista
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.
4
<ul>
HTML5 - Marcação de lista
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.
4
<li>
HTML5 - Marcação de lista
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>).
4
HTML5 - Marcação de lista
exe04.html
4
HTML5 - Marcação de lista
exe04.html
4
HTML5 - Marcação de lista
exe05.html
4
HTML5 - Marcação de lista
exe05.html
4
HTML5 - Marcação de lista
<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 <d> 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.
4
HTML5 - Marcação de lista
exe06.html
4
HTML5 - Marcação de lista
exe06.html
4
HTML5 - Marcação de lista
Dúvidas?
4