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

Curso Superior de Tecnologia em Design Gráfico

DWEB - Design para
Web

4 HTML 5 – básico I

“Ninguém despreze a tua mocidade; mas sê o exemplo dos fiéis, na palavra, no trato, no amor, no espírito,
na fé, na pureza.” 1 Timóteo 4:12

1 Capítulo 4 - HTML 5 básico I Monday, 27 de February 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 Acentuação em HTML5
n Lista de tag’s e
atributos
n Exercícios



Introdução as linguagens de marcação

n  Introdução
î Acentuação
n  Não é recomendável que os documentos Web
contenham acentos.
n  Ainda que todos os navegadores existentes
entendam a presença de um caractere acentuado,
existem ocasiões em que o texto em HTML pode ﬁcar
truncado.
n  Para contornar este problema, existe uma tabela de
códigos que substituem os acentos.
n  Os navegadores transformam estes códigos em
caracteres acentuados e o documento poderá ser
transmitido por qualquer meio.




î Tabela de acentos e caracteres especiais
Á Á á á Â &Acirc

â â À À à à

Å Å å å Ã Ã

ã ã Ä Ä ä ä

Æ Æ æ æ É É

é &eacute Ê Ê ê ê

È È è è Ë Ë

ë ë Ð Ð ð ð

Í Í í &iacute Î Î

î î Ì Ì ì ì




Ï Ï ï ï Ó Ó

ó ó Ô Ô ô &ocirc

Ò Ò ò ò Ø Ø

ø ø Õ Õ õ õ

Ö Ö ö ö Ú Ú

ú ú Û Û û û

Ù Ù ù ù Ü Ü

ü ü Ç Ç ç ç

Ñ Ñ ñ ñ < <

> > & & " "




® ® © © Ý Ý

ý ý   þ þ

ß ß º º ª &170;

¹ ¹ ² ² ³ ³

ƒ  †  ‡ 

‰  ¢ ¢ £ £

« « ± ± » »

· · ¼ ¼ ½ ½

¾ ¾ ¿ ¿ × ×

÷ ÷ ¡ ¡ ¤ ¤




n  Estrutura da especificação para a HTML5
î A
especificação para a HTML5 está estruturada
em 10 seções, a saber:
n  Infraestrutura
comum: define terminologia, classes,
algoritmos, sintaxes e partes comuns das
especificações.
n  Semântica,
estrutura e APIs para documentos HTML:
definem as funcionalidades do DOM HTML e dos
elementos HTML em geral.




î  A
especificação para a HTML5 está estruturada em
10 seções, a saber:
n  Elementos HTML: explicam o significado de cada um dos
elementos HTML. São estabelecidas regras de uso dos
elementos na marcação, bem como diretrizes de
manipulação deles pelos agentes de usuário.
n  Microformatos: a especificação para a HTML5 prevê um
mecanismo para marcar informações sobre o documento,
no formato nome/valor, para serem lidas por máquinas.
î  Essa seção descreve esse mecanismo e os algoritmos capazes
de converter documentos HTML em outros formatos.
î  Adicionalmente, nessa seção definem-se alguns vocabulários
para Microformatos: informações de contato, calendário de
eventos e licenças.




î A
n  Carregamento de páginas web: documentos HTML
não aparecem do nada – essa seção deﬁne as muitas
funcionalidades relacionadas ao tratamento de
páginas web pelos diferentes dispositivos.
n  APIspara aplicações web: descrevem as
funcionalidades básicas para desenvolvimento de
scripts em aplicações HTML.




î A
n  Interação com o usuário: descreve os diferentes
mecanismos de interação do usuário com um
documento HTML.
n  APIs para comunicação: tratam dos mecanismos de
comunicação entre aplicações HTML rodando em
domínios diferentes e no mesmo cliente.
n  Sintaxe HTML: descreve a sintaxe HTML.

n  Sintaxe XHTML: descreve a sintaxe XHTML.




î 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 - <!DOCTYPE>

n  Lista de Tags e atributos
î  HTML <!DOCTYPE> tag
n  Deﬁnição e forma de uso: O declaração deve ser a primeira coisa em seu
documento HTML5, antes da tag <html>.
§  A declaração doctype não é uma tag da linguagem HTML, é uma instrução para
o navegador web sobre qual versão da linguagem de marcação a página está
escrita.
î  É importante que você especiﬁque o doctype em todos os documentos HTML, para
que o navegador saiba o tipo do documento .
î  O doctype em HTML 4.01 exigia uma referência a uma DTD, porque HTML 4.01 foi
baseada em SGML.
§  HTML5 não é baseada em SGML, e não requer uma referência a uma DTD mas
precisa do doctype para que os navegadores.
n  Diferença entre HTML 4.01, XHTML e HTML 5
î  Há 3 doctypes diferentes em HTML 4.01 e XHTML 1.0, em HTML5 há apenas um:
§  <!DOCTYPE HTML>



HTML - <html>

î HTML <html> tag
n  Deﬁnição e forma de uso:
î  A Tag informa ao navegador que um documento HTML.
î  O elemento HTML é o elemento mais externo em um
documento.
î  O elemento HTML também é conhecido como o elemento
raiz.

î  HTML5 tem um novo atributo: manifest



HTML - <html>

î HTML <html> tag
n  Atributos opcionais

Attribute Value Description
manifest url Especifica a URL de cache do documento manifest

xmlns http://www.w3.org/1999/xhtml Define o atributo de namespace XML.



HTML - <body>

î HTML <body> tag
n  Deﬁniçãoe forma de uso: O elemento <body>
contém todos os elementos do corpo do documento
HTML como textos, links, imagens, tabelas, listas, etc.

î  Todos os atributos de apresentação do elemento <body>
estão em desuso em HTML 4.01, e não são suportados em
XHTML 1.0 Strict DTD.



HTML - <body>

î HTML <body> tag
î  DTD
indica em que DTD o atributo é permitido. S=Strict,
T=Transitional, and F=Frameset.
Attribute Value Description DTD
alink rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF
Especifica a cor de um link ativo em um documento
background file_name Em desuso. Use CSS em vez disso. TF
Especifica uma imagem de fundo para um documento
bgcolor rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF
Define a cor de fundo de um documento.
link rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF
Especifica a cor padrão dos links não visitados em um
documento.
text rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF
Especifica a cor do texto em um documento.
vlink rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. TF
Especifica a cor dos links visitados em um documento..



HTML – exe01.html

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“/>
<title>Minha Primeira Página</title>
</head>
<body>
E aí Beleza!
</body>
</html>



HTML - <p> Parágrafo

î HTML <p> tag
n  Deﬁnição e forma de uso: A tag <p> deﬁne um
parágrafo.
n  Diferenças entre HTML 4.01, XHTML e HTML 5
î  Todos os atributos de apresentação do elemento <p> estão
em desuso em HTML 4.01, e não são suportados em XHTML
1.0 Strict DTD.
n  Example
î  <p>This is some text in a very short paragraph</p>



HTML - <p> Parágrafo

î HTML <p> tag
î  DTD indica em que DTD o atributo é permitido. S=Strict,

align left Em desuso. Use CSS em vez disso. TF
right Especifica o alinhamento do texto dentro de um
center parágrafo.
justify



HTML - <br> Quebra de linha

î HTML <br> tag
n  Definição e forma de uso: A tag <br> inseri uma única
quebra de linha. <br> é uma tag vazia, o que significa
que não tem nenhuma marca de fim: exemplo
<br></br>.
î  No HTML a tag <br> não tem nenhuma marca de fim.
î  Em XHTML a tag <br> deve estar devidamente fechada,
como este: <br />.
î  Example

§  This text contains<br />a line break



HTML - <hr> Linha horizontal

î  HTML <hr> tag
n  Deﬁnição e forma de uso: O <hr> marca e cria uma linha
horizontal em uma página HTML.
î  O elemento <hr> pode ser usado para separar o conteúdo em
uma página HTML.
î  No HTML a tag <hr> não tem nenhuma marca de ﬁm.
î  Em XHTML a tag <hr> deve estar devidamente fechado, como
este: <hr />.
î  Todos os atributos de "apresentação" do elemento <hr> estão
em desuso HTML 4.01, e não são suportados em XHTML 1.0
Strict DTD .
n  Example
î  This is some text <hr /> This is some text


HTML -  comentário

î HTML  tag
n  Deﬁnição e forma de uso: A tag de comentário é
utilizado para inserir um comentário no código-fonte.
î  Ocomentário será ignorado pelo navegador.
î  Você pode usar os comentários para explicar seu código,
que pode ajudar quando você editar o código fonte em uma
data posterior.
î  Nenhuma.

n  Example
î

HTML – exe02.html

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“/>
<title>Marcação de Texto </title>
</head>
<body>
<hr />
<h1>Marcação de Texto</h1>
<p><strong>Este texto está em negrito</strong>,
já esta palavra <em>esta</em> em itálico.</
p><p>Para aplicar uma quebra<br /> de linha dentro de um
texto em um parágrafo, é necessário
utilizar a tag <br /></p>
<hr />
</body>
</html>


HTML - <h1> Definição de cabeçalhos

î HTML <h1> até <h6> tags
n  Definiçãoe forma de uso: O <h1> a <h6> são usados
para definir posições em HTML.
î  <h1> define o título do maior para o menor <h6>.
î  Oatributo "alinhamento“ do <h1> a <h6> estão em desuso
em HTML 4.01, e não é suportado no XHTML 1.0 Strict DTD.
n  Example
î  <h1>This is header 1</h1>



HTML - <h1> Definição de cabeçalhos

î HTML <h1> até <h6> tags
î  DTD indica em que DTD o atributo é permitido. S=Strict,


align left Em desuso. Use CSS em vez disso. TF
right Especifica o alinhamento do título
center
justify



HTML – exe03.html

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”/>
<title>Título e Sub-títulos</title>
</head>
<body>
<hr />
<h1>Título e Sub-títulos</h1>
<h1>Título 1</h1><h2>Título 2</h2>
<hr />
<p>Em HTML/XHTML, utilizamos os <h1>...<h6> para utilizar
como título e sub-título nos textos.</p>
<p>Exemplo:<br /><h1>Geografia</h1><p>texto aqui.</p><h2>Clima:</
h2><p>texto aqui</p></p>
</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 i

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie Unb 2012.1 - dweb - 04 - html5 básico - parte i

Ähnlich wie Unb 2012.1 - dweb - 04 - html5 básico - parte i (20)

Mehr von Claudenio Alberto

Mehr von Claudenio Alberto (19)

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