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

Curso Superior de Tecnologia em Design Gráfico

1 Monday, 27 de February de 12 Capítulo 4 - HTML 5 básico I

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

DWEB - Design para Web / Carlos José


Contato

Carlos José

[email protected] 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 ficar 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.




n  Introdução î 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.




n  Estrutura da especificação para a HTML5 î 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.





em 10 seções, a saber: n  Carregamento de páginas web: documentos HTML

não aparecem do nada – essa seção define as muitas funcionalidades relacionadas ao tratamento de páginas web pelos diferentes dispositivos.

n  APIs para aplicações web: descrevem as funcionalidades básicas para desenvolvimento de scripts em aplicações HTML.





em 10 seções, a saber: 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.




n  Introdução î Lista de Tags e atributos

n  As tags apresentadas aqui formam uma compilação das definições oficiais da linguagem.

î  http://www.w3schools.com î  http://www.htmldog.com



HTML - <!DOCTYPE>

n  Lista de Tags e atributos î  HTML <!DOCTYPE> tag

n  Definiçã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ê especifique 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>

n  Lista de Tags e atributos î HTML <html> tag

n  Definiçã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.

n  Diferença entre HTML 4.01, XHTML e HTML 5 î  HTML5 tem um novo atributo: manifest



HTML - <html>

n  Lista de Tags e atributos î 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>

n  Lista de Tags e atributos î HTML <body> tag

n  Definição e forma de uso: O elemento <body> contém todos os elementos do corpo do documento HTML como textos, links, imagens, tabelas, listas, etc.

n  Diferença entre HTML 4.01, XHTML e HTML 5 î  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>

n  Lista de Tags e atributos î HTML <body> tag

n  Atributos opcionais î  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. Especifica a cor de um link ativo em um documento

TF

background file_name Em desuso. Use CSS em vez disso. Especifica uma imagem de fundo para um documento

TF

bgcolor rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. Define a cor de fundo de um documento.

TF

link rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. Especifica a cor padrão dos links não visitados em um documento.

TF

text rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. Especifica a cor do texto em um documento.

TF

vlink rgb(x,x,x) or #xxxxxx or colorname Em desuso. Use CSS em vez disso. Especifica a cor dos links visitados em um documento..

TF



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

n  Lista de Tags e atributos î HTML <p> tag

n  Definição e forma de uso: A tag <p> define 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

n  Lista de Tags e atributos î HTML <p> tag


T=Transitional, and F=Frameset.

Attribute Value Description DTD

align left right center justify

Em desuso. Use CSS em vez disso. Especifica o alinhamento do texto dentro de um parágrafo.

TF



HTML - <br> Quebra de linha

n  Lista de Tags e atributos î 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>.

n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  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

n  Lista de Tags e atributos î HTML <hr> tag

n  Definiçã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.

n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  No HTML a tag <hr> não tem nenhuma marca de fim. î  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

n  Lista de Tags e atributos î HTML  tag

n  Definição e forma de uso: A tag de comentário é utilizado para inserir um comentário no código-fonte.

î  O comentá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.

n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  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

n  Lista de Tags e atributos î HTML <h1> até <h6> tags

n  Definição e 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>.

n  Diferenças entre HTML 4.01, XHTML e HTML 5 î  O atributo "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>



n  Lista de Tags e atributos î HTML <h1> até <h6> tags


T=Transitional, and F=Frameset.

Attribute Value Description DTD

align left right center justify

Em desuso. Use CSS em vez disso. Especifica o alinhamento do título

TF

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



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> <h3>Título 3</h3><h4>Título 4</h4> <h5>Título 5</h5><h6>Título 6</h6> <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 final.

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

Documents

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