Introdução Ao HTML 5

Prof.
João Augusto da Silva Bueno

([email protected])
Conceitos de HTML 5
Aula 1
World Wide Web
 É um serviço da Internet que reúne vários documentos de

todas as partes do mundo e esses documentos são escritos
sob a forma de hipertexto em uma linguagem especial
chamada HTML
 Baseada em hipertexto e multimídia
 Interativa; global e independente de plataforma
 Para a maioria a WWW é sinônimo de Internet

World Wide Web
 Os arquivos são identificados na Web através de sua URL

(Uniform Resource Locator)
 A URL é a forma padronizada se identificar qualquer recurso
no domínio da Internet
 Sintaxe:
Protocolo://servidor/caminho_do_arquivo
 Exemplo:
http://www.ifsc.edu.br/index.html
HTML - Introdução
 HTML- Hypertext Markup Language
 Fruto da junção dos padrões HyTime e
SGML
 HyTime - Hypermedia/Time-based
Document Structuring Language
 SGML - Standard Generalized Markup
Language
HTML - Introdução
 Linguagem Interpretada
 A Linguagem da WWW
 Orientada por marcadores (Tags)
 Tags únicos ou em bloco
 Case Insensitive: <HTML> = <hTmL>
W3C
O Consórcio World Wide Web (W3C) é um

consórcio internacional no qual organizações
filiadas, uma equipe em tempo integral e o público
trabalham juntos para desenvolver padrões para
a Web.
Contato no Brasil:
http://www.w3c.br
Estrutura Básica de um
documento
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Introdução ao Desenvolvimento Web</title>

</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
 O Doctype deve ser a primeira linha de código do documento

antes da tag HTML.
<!DOCTYPE html!>
 O Doctype indica para o navegador e para outros meios qual a

especificação de código utilizar. Em versões anteriores, era
necessário referenciar o DTD diretamente no código do Doctype.
 Com o HTML5, a referência por qual DTD utilizar é

responsabilidade do Browser.
 O Doctype não é uma tag do HTML, mas uma instrução para que
o browser tenha informações sobre qual versão de código a
marcação foi escrita.
O elemento HTML
 O código HTML é uma série de elementos em árvore onde

alguns elementos são filhos de outros e assim por diante. O
elemento principal dessa grande árvore é sempre a tag HTML.
<html lang="pt-br">
 O atributo LANG é necessário para que os user-agents saibam

qual a linguagem principal do documento.
 Lembre-se que o atributo LANG não é restrito ao elemento

HTML, ele pode ser utilizado em qualquer outro elemento para
indicar o idioma do texto representado.
HEAD
 A Tag HEAD é onde fica toda a parte inteligente da

página. No HEAD ficam os metadados. Metadados são
informações sobre a página e o conteúdo ali publicado.
Metatag Charset
No nosso exemplo há uma metatag responsável por chavear qual tabela de

caractéres a página está utilizando.
<meta charset="utf-8">
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Essa forma antiga será também suportada no HTML5. Contudo, é melhor que
você utilize a nova forma.
<!DOCTYPE HTML>
 <html lang="pt-br">
 <head>
 <meta charset="UTF-8">
 <meta name = “description” content = “Curso de
Sistemas de Informação”>
 <title>Introdução ao Desenvolvimento Web</title>

 </head>
 <body>

</body>
 </html>
Metatags
No nosso exemplo há uma metatag responsável por chavear qual tabela de

caractéres a página está utilizando.
<meta charset="utf-8">
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Essa forma antiga será também suportada no HTML5. Contudo, é melhor que
você utilize a nova forma.
<meta name = “description” content = “AQUI SÃO COLOCADAS PALAVRAS

CHAVE PARA O SEU SITE SER VISTO NO GOOGLE”>
• Transição do XHTML
• A semelhança entre o HTML 5 e seus antecessores,
HTML 4.01 e XHTML 1.0, é muito grande.
• A sintaxe dos elementos é como no HTML 4.01, que não

exigia que elementos como <img> e <input> fossem
“fechados":
<input type="text" id="nome">

Porém, para aqueles que estão migrando do XHTML, a barra que fecha um
elemento continuará sendo aceita:
<input type="text" id="nome" />
• O HTML5 foi criado pelo WHATWG (Web
Hypertext Application Tecnhology Working
Group), grupo formado por
desenvolvedores de diversas empresas,
como Opera, Mozilla e Apple, que
estavam descontentes com o rumo que a
W3C estava dando ao XHTML.
• A proposta do HTML5 é ser uma
linguagem melhor preparada para
construção de aplicações WEB, bem
como ser independente de plugins;
• Ter novos elementos que dão mais
semântica ao conteúdo. Atualmente o
WHATWG e o W3C trabalham em
conjunto no desenvolvimento do HTML5.
• Versão final do HTML 5 prevista para
?????
• Muitos browsers já estão suportando as
principais novidades do HTML5
• versão experimental do portal em HTML5

• De acordo com a avaliação do HTML5Test, que
classifica de 1 a 160 pontos o suporte dos
browsers ao HTML5, temos:
• 1- Google Chrome – 118 pontos

2- Opera – 102 pontos
3- Firefox – 101 pontos
HTML 5
• O HTML 5 tem um objetivo muito funcional e
com muitas interações que antes não eram
possíveis.
• Foram retirados alguns atributos, seja porque

caíram em desuso ou porque podem ser
substituídos semanticamente por declarações
no CSS para definir o visual dos elementos.
• Diferenças entre v5 e v4 do html

• http://dev.w3.org/html5/html4-differences/
HTML 5
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>html 5</title>
</head>
<body>
<p>Parágrafo</p>
</body>
</html>
HTML 5 – na prática
• O HTML5 agora torna obrigatório o uso de
DOCTYPE para certificar ao browser que
tipo de conteúdo ele irá renderizar.
Conclusão
• A maioria dos navegadores usados hoje em dia
ainda têm suporte a HTML 5
• As novas tags estão completamente definidas.
• Duas frentes:
- Não é hora de gastar energia e tempo desenvolvendo
um site para os navegadores mais recentes para
depois ter que "corrigir" o código pensando nos
navegadores antigos. A W3C admite que as
especificações atuais ainda não são definitivas e
podem sofrer revisões ;
- Colocar em uso a tecnologia para ela evoluir;

Introdução Ao HTML 5

Enviado por

Direitos autorais:

Formatos disponíveis

Introdução Ao HTML 5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Introdução Ao HTML 5

Enviado por

Direitos autorais:

Formatos disponíveis

Prof.

João Augusto da Silva Bueno

 É um serviço da Internet que reúne vários documentos de

 Baseada em hipertexto e multimídia

 Interativa; global e independente de plataforma

 Para a maioria a WWW é sinônimo de Internet

 Os arquivos são identificados na Web através de sua URL

O Consórcio World Wide Web (W3C) é um

<title>Introdução ao Desenvolvimento Web</title>

 O Doctype deve ser a primeira linha de código do documento

 O Doctype indica para o navegador e para outros meios qual a

 Com o HTML5, a referência por qual DTD utilizar é

 O código HTML é uma série de elementos em árvore onde

 O atributo LANG é necessário para que os user-agents saibam

 Lembre-se que o atributo LANG não é restrito ao elemento

 A Tag HEAD é onde fica toda a parte inteligente da

No nosso exemplo há uma metatag responsável por chavear qual tabela de

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>Introdução ao Desenvolvimento Web</title>

No nosso exemplo há uma metatag responsável por chavear qual tabela de

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name = “description” content = “AQUI SÃO COLOCADAS PALAVRAS

• A sintaxe dos elementos é como no HTML 4.01, que não

<input type="text" id="nome">

• versão experimental do portal em HTML5

• 1- Google Chrome – 118 pontos

• Foram retirados alguns atributos, seja porque

• Diferenças entre v5 e v4 do html

Você também pode gostar