Web standards e valida\u00e7\u00e3o<\/p>\n
Nesta parte voc\u00ea aprender\u00e1 mais alguns conceitos te\u00f3ricos do HTML.<\/p>\n
O que mais h\u00e1 para conhecer sobre HTML?<\/p>\n
HTML pode ser escrito de v\u00e1rias maneiras. O navegador est\u00e1 apto a ler HTML escrito de v\u00e1rias maneiras. Podemos dizer que HTML tem muitos dialetos. Esta \u00e9 a raz\u00e3o porqu\u00ea alguns websites s\u00e3o apresentados de formas diversas em diferentes navegadores.<\/p>\n
Desde o aparecimento da Internet tem sido feitas v\u00e1rias tentativas para se normatizar o HTML notadamente atrav\u00e9s do World Wide Web Consortium (W3C) fundado por Tim Berners-Lee (yep! o grande sujeito que inventou o HTML). Mas, este tem sido um \u00e1rduo e longo caminho.<\/p>\n
No passado – quando voc\u00ea tinha que comprar um navegador – Netscape dominava o mercado de navegadores. \u00c0quela \u00e9poca as normas para o HTML estavam nas suas vers\u00f5es 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape n\u00e3o teria – e n\u00e3o teve – que se preocupar muito com normas. Pelo contr\u00e1rio, a Netscape inventava seus pr\u00f3prios elementos de marca\u00e7\u00e3o que n\u00e3o funcionavam em outros navegadores.<\/p>\n
Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento, resolveu competir com a Netscape e lan\u00e7ou seu navegador pr\u00f3prio. A primeira vers\u00e3o do navegador da Microsoft’s, o Internet Explorer, n\u00e3o era melhor do que o Netscape no suporte \u00e0s normas do HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente (isto sempre agrada a todos) e o Internet Explorer em pouco tempo tornou-se o navegador mais usado e mais popular.<\/p>\n
A partir das vers\u00f5es 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior suporte \u00e0s normas HTML do W3C. A Netscape n\u00e3o se movimentou para atualizar seu navegador e continuou a colocar no mercado a velha e desatualizada vers\u00e3o 4.<\/p>\n
O que vem a seguir \u00e9 hist\u00f3ria. Nos dias atuais as normas HTML est\u00e3o na sua vers\u00e3o 4.01 e no XHTML. Hoje em dia \u00e9 o Internet Explorer que det\u00e9m quase 90% do mercado. O Internet Explorer ainda tem seus elementos pr\u00f3prios, mas oferece suporte para as normas HTML do W3C. Os navegadores Mozilla, Opera e Netscape tamb\u00e9m suportam as normas.<\/p>\n
Ent\u00e3o, quando voc\u00ea codifica HTML de acordo com as normas do W3C, voc\u00ea est\u00e1 construindo um website para ser visualizado em todos os navegadores – n\u00e3o s\u00f3 agora mas tamb\u00e9m no futuro. E felizmente, tudo o que voc\u00ea aprendeu neste tutorial est\u00e1 de acordo com a mais nova vers\u00e3o do HTML, que \u00e9 o XHTML.<\/p>\n
Legal! Posso anunciar?<\/p>\n
Devido a exist\u00eancia de diferentes tipos de HTML, voc\u00ea precisa informar ao navegador qual \u00e9 o “dialeto” do HTML e no seu caso voc\u00ea aprendeu XHTML. Para informar ao navegador, voc\u00ea usa o Document Type Definition. O Document Type Definition deve ser escrito sempre no topo do documento:<\/p>\n
Exemplo 1:<\/p>\n
\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\" \n\t\"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\">\n \n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" lang=\"pt-br\"><\/strong>\n \n<head>\n<title>T\u00edtulo<\/title>\n<\/head>\n \n<body>\n<p>texto texto<\/p>\n<\/body>\n \n<\/html>\n<\/code>\n <\/pre>\nAl\u00e9m do Document Type Definition (escrito na primeira linha no exemplo acima), que informa ao navegador que voc\u00ea est\u00e1 codificando XHTML, voc\u00ea precisa ainda adicionar informa\u00e7\u00e3o extra na tag html, usando os atributos xmlns e lang.<\/p>\n
xmlns \u00e9 abrevia\u00e7\u00e3o de “XML-Name-Space” e deve ter sempre o valor http:\/\/www.w3.org\/1999\/xhtml. Isto \u00e9 tudo o que voc\u00ea precisa saber. Se voc\u00ea tem o h\u00e1bito ou gosta de se aprofundar e conhecer coisas complicadas poder\u00e1 ler mais sobre namespaces no site do W3C.<\/p>\n
No atributo lang voc\u00ea espec\u00edfica em que l\u00edngua (aqui trata-se de linguagem humana) o documento \u00e9 escrito. As abreviaturas para as l\u00ednguas existentes no mundo todo, est\u00e3o nas ISO 639 standard . No exemplo acima a l\u00edngua definida no atributo \u00e9 o portugu\u00eas do Brasil (“pt-br”).<\/p>\n
Uma DTD informar\u00e1 ao navegador como deve ser lido e renderizado o HTML. Use o exemplo mostrado, como um template para todos os seus futuros documentos HTML.<\/p>\n
O DTD \u00e9 importaante ainda, para a valida\u00e7\u00e3o da p\u00e1gina.<\/p>\n
Valida\u00e7\u00e3o? Porqu\u00ea deveria eu fazer isto?<\/p>\n
Insira o DTD nas suas p\u00e1ginas e poder\u00e1 verificar erros no seu HTML, usando o validador gratuito do W3C.<\/p>\n
Para testar o validador fa\u00e7a o seguinte: crie uma p\u00e1gina e publique na Internet. A seguir entre em validator.w3.org e l\u00e1 digite o endere\u00e7o (a URL) da sua p\u00e1gina, depois clique no bot\u00e3o validar. Se seu HTML estiver correto, vai aparecer uma mensagem de congratula\u00e7\u00f5es. Se n\u00e3o, ser\u00e1 apresentada uma lista de erros, informando o qu\u00ea est\u00e1 errado e onde. Cometa alguns erros propositais no seu c\u00f3digo para verificar o que acontece.<\/p>\n
O validador n\u00e3o \u00e9 \u00fatil somente no encontro de erros. Alguns navegadores tentam interpretar os erros cometidos pelos desenvolvedores e consertar o c\u00f3digo mostrando a p\u00e1gina corretamente. Em navegadores assim voc\u00ea nunca encontrar\u00e1 erros no pr\u00f3prio navegador. J\u00e1 outros navegadores n\u00e3o aceitam o erro e apresentam a p\u00e1gina arruinada ou mesmo nem apresentam. O validador ent\u00e3o ajuda voc\u00ea a encontrar erros que voc\u00ea n\u00e3o tenha nem id\u00e9ia de que existiam<\/p>\n
Sempre valide suas p\u00e1ginas, para ter certeza que elas ser\u00e3o mostradas corretamente em todos os navegadores. <\/p>\n","protected":false},"excerpt":{"rendered":"
Web standards e valida\u00e7\u00e3o
\nNesta parte voc\u00ea aprender\u00e1 mais alguns conceitos te\u00f3ricos do HTML.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[119,140,331,583,622,660],"class_list":["post-1996","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-como-fazer-sites","tag-construcao-de-sites","tag-html","tag-site","tag-tutorial","tag-website"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1996"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1996\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}