Unb 2012.1 - dweb - 04 - html5 básico - parte iii

Curso Superior de Tecnologia em Design Gráfico

DWEB - Design para
Web

4 HTML 5 – básico III

Em verdade vos digo que qualquer que não receber o reino de Deus como menino, de maneira nenhuma
entrará nele.. Marcos 10:15

1 Capítulo 4 - HTML 5 básico III Monday, 5 de March de 12

DWEB - Design para Web / Carlos José

Contato

Carlos José

carlosjose.unibratec@gmail.com
www.carlosjose.net
twitter.com/carlosjoser2n



Objetivo da Aula

Apresentar a linguagem
de marcação HTML 5 com
seus conceitos básicos,
bem como a construção
de documentos.



Agenda

n Listade tag’s e
atributos
n Exercícios



Introdução as linguagens de marcação

n  Introdução
î Lista de Tags e atributos
n  Astags apresentadas aqui formam uma compilação
das deﬁnições oﬁciais da linguagem.
î  http://www.w3schools.com
î  http://www.htmldog.com



HTML – Lista de definição

n  Lista de Tags e atributos
î  HTML <dl> tag
n  Definição e forma de uso: A tag <dl> define uma lista de
definição.
n  Diferenças entre HTML 4.01, XHTML e HTML 5
î  Nenhuma.
î  HTML <dt> tag
n  Definição e forma de uso: A tag <dt> define um termo de uma
lista de definição.
î  Nenhuma.
î  HTML <dd> tag
n  Definição e forma de uso: A tag <dd> define a descrição dos
itens de uma lista de definição.
î  Nenhuma.



HTML – exe08.html

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title>Listas de definição aninhadas</title>
</head>
<body>
<h1>Lista de Definição</h1>
<dl>
<dt><h3>Pão Pizza</h3></dt>
<dl>
<dt><h4>Ingredientes</h4></dt>
<dd>1 kg de farinha de trigo</dd>
<dd>100 ml de óleo</dd>
<dd>1 copo de leite</dd>
<dd>1 de água</dd>
<dd>1 ovo</dd>
<dd>1 colher (sopa) de sal</dd>
<dd>2 colheres (sopa) de açúcar</dd>
<dd>2 pacotinhos de fermento de 15g cada</dd>
</dl>
</dl>



HTML – exe08.html

Continuação...

<hr />
<dl>
<dt><h3>Pudim de microondas</h3></dt>
<dl>
<dt><h4>Ingredientes</h4></dt>
<dd>1 lata de leite condensado</dd>
<dd>1 ½ lata de leite comum</dd>
<dd>4 ovos</dd>
<dt><h4>Calda</h4></dt>
<dd>10 colheres de sopa de açúcar</dd>
<dd>8 colheres de sopa de água</dd>
</dl>
</dl>
</body>
</html>



HTML - <table> Criando tabela

î HTML <table> tag
n  Definição e forma de uso: A tag <table> define uma
tabela.
î  A tabela HTML simples é composta pelos elementos <tr>,
<th> e <td>.
§  O elemento <tr> define uma linha da tabela, o
elemento <th> define um cabeçalho da tabela, e o
elemento <td> define uma célula da tabela.
î  O "alinhamento" e "bgcolor" atributos do elemento da
tabela estão em desuso em HTML 4.01, e não são
suportados em XHTML 1.0 Strict DTD.



HTML - <table> Criando tabela

î  HTML <table> tag
n  Atributos opcionais
î  DTD indica em que DTD o atributo é permitido. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
align Left, center, right Em desuso. Use CSS em vez disso. TF
Especifica o alinhamento de uma tabela de acordo
com o texto adjacente
bgcolor rgb(x,x,x), #xxxxxx, colorname Em desuso. Use CSS em vez disso. TF
Especifica a cor de fundo de uma tabela
border pixels Especifica a largura das bordas. STF
cellpadding pixels or % Especifica o espaço entre a parede de uma celular STF
e o conteúdo da célula.
cellspacing pixels or % Especifica o espaço entre as células. STF
width pixels or % Especifica a largura de uma tabela STF



HTML – <th> Elementos de uma Tabela

î HTML <th> tag
n  Deﬁniçãoe forma de uso: A tag <th> deﬁne
uma célula de cabeçalho em uma tabela
HTML.
î  Otexto contido na tag <th> é um visualizado em negrito e
centralizado.
n  Diferenças entre HTML 4.01, XHTML e HTML
5
î  Osatributos "bgcolor", "altura", "largura", e
"nowrap" estão em desuso em HTML 4.01, e não
são suportados em XHTML 1.0 Strict DTD.



HTML – <th> Elementos de uma Tabela

î  HTML <th> tag

align Left, center, right, justify Alinha o conteúdo de uma célula. STF
Especifica a cor de fundo de uma célula.
colspan number Define o número de colunas de uma célula que STF
serão mescladas.
rowspan number Define o número de linhas de uma célula que STF
serão mescladas.
valign top, middle, bottom, baseline Alinha de forma vertical o conteúdo de uma célula. STF
width pixels or % Em desuso. Use CSS em vez disso. TF
Especifica a largura de uma célula.
height pixels or % Em desuso. Use CSS em vez disso. TF
Especifica a altura de uma célula.



HTML – <tr> Elementos de uma Tabela

n Lista de Tags e atributos
î HTML <tr> tag
n Deﬁnição e forma de uso: A tag <tr>
deﬁne uma linha em uma tabela.
n Diferenças entre HTML 4.01, XHTML e
HTML 5
î O atributo “bgcolor” da tag <tr> está em
desuso no HTML 4.01, e não são
suportados em DTD XHTML 1.0 Strict.



HTML – <tr> Elementos de uma Tabela

î  HTML <tr> tag

align Left, center, right, justify Alinha o conteúdo de uma linha da tabela. STF
Especifica a cor de fundo de uma linha de uma
tabela.
valign top, middle, bottom, baseline Alinha de forma vertical o conteúdo de uma linha STF
da tabela.



HTML – <td> Elementos de uma Tabela

î HTML <td> tag
n  Deﬁnição e forma de uso: A tag <td> deﬁne uma
célula normal em uma tabela HTML.
î  Dois tipos de células
§  Células Header - contém informações de cabeçalho (criado
com o elemento <th>)
§  Células Standard - contém dados (criada com o elemento
<td>)
î  Os atributos "bgcolor", "altura", "largura", e
"nowrap" da tag <td> estão em desuso em HTML
4.01, e não são suportados em DTD XHTML 1.0 Strict.



HTML – <td> Elementos de uma Tabela

î  HTML <td> tag

align Left, center, right, justify Alinha o conteúdo de uma célula. STF
Especifica a cor de fundo de uma célula.
colspan number Define o número de colunas de uma célula que STF
serão mescladas.
rowspan number Define o número de linhas de uma célula que STF
serão mescladas.
valign top, middle, bottom, baseline Alinha de forma vertical o conteúdo de uma célula. STF
width pixels or % Em desuso. Use CSS em vez disso. TF
Especifica a largura de uma célula.
height pixels or % Em desuso. Use CSS em vez disso. TF
Especifica a altura de uma célula.



HTML – <caption> Elementos de uma Tabela

î HTML <caption> tag
n  Definiçãoe forma de uso: A tag <caption> define
uma legenda da tabela.
î  O <caption> tag deve ser inserida imediatamente após a
tag <table>.
î  Você pode especificar apenas uma legenda por tabela.
î  Normalmente, a legenda aparecerá acima da tabela e
centralizada.
î  O atributo "alinhamento“ da legenda está em desuso no
HTML 4.01, e não é suportado no XHTML 1.0 Strict DTD.



HTML – <caption> Elementos de uma Tabela

î  HTML <caption> tag

align Left, center, right, justify Em desuso. Use CSS em vez disso. TF
Define o alinhamento de uma legenda.



HTML – exe09.html
<!DOCTYPE html>
<html>
<head>
<title>CRIAÇÃO DE TABELAS</title>
</head>
<body>
<h1>CRIAÇÃO DE TABELAS</h1>
<hr />
<table width="350" border="1">
<tr>
<td>Nome</td>
<td>Email</td>
</tr>
<tr>
<td>José Pedro</td>
<td><a href="mailto:jp@eai.com.br">jp@eai.com.br</a></td>
</tr>
<tr>
<td>Luiz Pedro</td>
<td><a href="mailto:lp@tolegal.com.br">lp@tolegal.com.br</a></td>
</tr>



HTML – exe09.html
Continuação...

<tr>
<td>Matilde Santos</td>
<td><a href="mailto:ms@gmail.com">ms@gmail.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>



HTML - <thead> Elementos de uma Tabela

î  HTML <thead> tag
n  Deﬁnição e forma de uso: A tag <thead> é usado para
agrupar o conteúdo do cabeçalho em uma tabela HTML.
î  O elemento thead deve ser usado em conjunto com o tbody e
tfoot.
î  Nenhum dos atributos HTML 4.01 são suportados em HTML5.
n  Observações
î  A tag <thead> deve ter a tag <tr> dentro dela.
î  Se você usar um dos elementos thead, tbody e tfoot, você deve
usar todos eles.
î  O elemento <td> não é permitido no elemento <thead>, use o
<th>.



HTML - <tbody> Elementos de uma Tabela

î HTML <tbody> tag
n  Deﬁniçãoe forma de uso: A tag <tbody> é usado
para agrupar o conteúdo do corpo em uma tabela
HTML.
î  O elemento tbody deve ser usado em conjunto com o thead
e tfoot.
î  Nenhum dos atributos HTML 4.01 são suportados em
HTML5.
î  A tag <tbody> deve ter a tag <tr> dentro dela.
î  Se você usar um dos elementos thead, tbody e tfoot, você
deve usar todos eles.



HTML - <tfoot> Elementos de uma Tabela

î HTML <tfoot> tag
n  Deﬁniçãoe forma de uso: A tag <tfoot> é usado para
agrupar o conteúdo do rodapé em uma tabela HTML.
î  O elemento tfoot deve ser usado em conjunto com o thead
e tbody.
î  Nenhum dos atributos HTML 4.01 são suportados em
HTML5.
î  A tag <tfoot> deve ter a tag <tr> dentro dela.
î  Se você usar um dos elementos thead, tbody e tfoot, você
deve usar todos eles.



HTML – exe10.html
<!DOCTYPE html>
<html>
<head>
<title>CRIAÇÃO DE TABELA SEMÂNTICA</title>
</head>
<body>
<h1>CRIAÇÃO DE TABELA SEMÂNTICA</h1>
<hr />
<table width=“400“ border=”1”>
<caption>Seu Zé da Venda Empreendimentos</caption>
<thead>
<tr>
<th>Código</th><th>Produto</th><th>Preço</th>
</tr>
</thead>



HTML – exe10.html
Continuação...

<tfoot>
<tr>
<th>Código</th><th>Produto</th><th>Preço</th>
</tr>
</tfoot>
<tbody>
<tr><td>123</td><td>Baton Garoto</td><td>R$ 0,50</td></tr>
<tr><td>456</td><td>Diamante Negro</td><td>R$ 2,50</td></tr>
<tr><td>789</td><td>Chiclete Adams</td><td>R$ 1,50</td></tr>
<tr><td>159</td><td>Pipoca Veneza</td><td>R$ 1,00</td></tr>
<tr><td>357</td><td>Chocolate Zorro</td><td>R$ 0,50</td></tr>
</tr>
</tbody>
</table>
</body>
</html>



Perguntas

?


Considerações Finais

n  Atenção
î Revisar os conceitos e fundamentos do HTML
î Tentar refazer os documentos HTML pelo o que
você vê no navegador, ou seja, o resultado ﬁnal.

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


Unb 2012.1 - dweb - 04 - html5 básico - parte iii

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (9)

Semelhante a Unb 2012.1 - dweb - 04 - html5 básico - parte iii

Semelhante a Unb 2012.1 - dweb - 04 - html5 básico - parte iii (20)

Mais de Claudenio Alberto

Mais de Claudenio Alberto (18)

Unb 2012.1 - dweb - 04 - html5 básico - parte iii