Introdução HTML 5

1. Introdução HTML 5 Médio Integrado Ana Paula Alves de Lima

2. HTML • HTML = Hypertext Markup Language (Linguagem de Marcação de Hipertexto); • Linguagem Interpretada por um Browser; • Define o formato do documento e as ligações com outros documentos;

3. História do HTML • Desenvolvido originalmente por Tim Berners-Lee; • Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0; • Ainda não era um padrão;

4. História do HTML • Em 1997 o W3C criou a versão 3.2; • A partir daí HTML se tornou um padrão; • Em 1999 saiu a especificação do HTML4.

5. HTML • Tags básicas: • <a></a>; • <p></p>; • <img/>; • <div></div> • <table></table> • <br/>

6. HTML • Trocando em miúdos: • “O HTML é uma linguagem para publicação de conteúdo na Web (texto, imagem, vídeo, áudio, etc.)”.

8. World Wide Web Consortium; • Fundado por Tim Berners-Lee; • Visa desenvolver padrões para a criação e a interpretação de conteúdos para Web; • Agrega hoje 300 integrantes ligados a empresas, órgão governamentais e organizações independentes; • Sua idéia é acabar com essa bagunça e criar normas para criação de páginas HTML. • Todo navegador deve seguir os padrões estabelecidos pelo W3C. Site da W3C: http://www.w3.org/

9. Padrões: • CSS • DOM(JavaScript) • XML • XHTML 1.0 Somente em 2008 que o W3C lançou as especificações iniciais do HTML5!

10. Diferenças • O HTML4 ainda não trazia diferencial real para a semântica do código. • Também não facilitava a manipulação dos elementos via JavaScript ou CSS. • O HTML5 fornece ferramentas para a CSS e o JavaScript fazerem seu trabalho da melhor maneira possível. • O HTML5 também cria novas • tags e modifica a função de outras. • Seu desenvolvimento é modular.

11. Mas como reconhecer um HTML 4 de um HTML 5? X

12. Novos elementos de marcação Em versões anteriores o HTML não tinha uma classificação semântica (significado da informação) do conteúdo. Nos casos mais comuns tudo era DIV que semanticamente é um divisor de conteúdo. No HTML5 foram introduzidas novos elementos de marcação de conteúdo.

14. Veja... Digamos que você use uma tag do HTML 4 que não é mais utilizada na versão 5 dentro de uma página cujo doctype está dizendo ao navegador que se trata de um HTML 5? O que vai acontecer? Vai dar erro?

15. QuirksMode

16. Quirks Mode... • É um conjunto de regras de interpretação que são ativadas quando o navegador não entende qual a versão do HTML. • Ele interpretará aquela página da maneira dele, seguindo padrões do próprio navegador.

17. O Quirks é importante, pois ele garante a visualização do conteúdo da página mesmo com erros; • Mas é bom seguir sempre os padrões do W3C para a construção de página web para não ter erro.

18. Mas como saber se o código html está seguindo os padrões internacionais do W3C?

19. Apresentando o Validador do W3C: http://validator.w3.org/ Checa se o código html está dentro dos padrões!

20. Vamos testar um código... • Escolha um site e clique com o botão direito em qualquer lugar da página e clique em Exibir código fonte da página, copie o código e cole no site do validator: • http://validator.w3.org/

21. Principais Elementos do HTML 5

29. Tags descontinuadas do HTML4 Algumas tags foram descontinuadas simplesmente porquê o CSS já cumpre com essa função!

30. Atributos descontinuados Este atributos foram descontinuados porque modificam a formatação do elemento e suas funções são melhores controladas pelo CSS: • align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr. • alink, link, text e vlink como atributos da tag body. • background como atributo da tag body. • bgcolor como atributo da tag table, tr, td, th e body. • border como atributo da tag table e object. • cellpadding e cellspacing como atributos da tag table. • char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr. • clear como atributo da tag br. • compact como atributo da tag dl, menu, ol e ul.

31. Atributos descontinuados • frame como atributo da tag table. • frameborder como atributo da tag iframe. • height como atributo da tag td e th. • hspace e vspace como atributos da tag img e object. • marginheight e marginwidth como atributos da tag iframe. • noshade como atributo da tag hr. • nowrap como atributo da tag td e th. • rules como atributo da tag table. • scrolling como atributo da tag iframe. • size como atributo da tag hr. • type como atributo da tag li, ol e ul. • valign como atributo da tag col, colgroup, tbodny, td, tfoot, th, thead e tr. • width como atributo da tag hr, table, td, th, col, colgroup e pre.

32. Para dar um gostinho do CSS... Abra o notepad++ e escreva o seguinte código e grave-o como "centralizar.html": <!DOCTYPE html> <html> <head> <style type="text/css"> h1 { text-align: center; }  </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Centralizando com CSS</title> </head> <body> <h1>Olha que legal, eu estou no meio. ;)</h1> </body> </html>