07
mar
13

HTML 5

Hoje trataremos da mais nova versão do HTML, o HTML5 o que é muito legal e moderno, mas você sabe o que é HTML?

HTML (HyperText Markup Language) é uma linguagem de marcação, não de programação, criada por Tim Berners-Lee, para facilitar o acesso à pesquisas e a troca de informações entre cientistas de diferentes instituições usando a internet. Sua função é indicar como a página deve ser exibida, um ser humano pode facilmente diferenciar um parágrafo de um título, por exemplo, mas uma máquina não, por isso usamos o HTML para fazer essas marcações de modo que o user agent consiga entender.

Estrutura Básica:

A estrutura básica do HTML é composta por três tags: documento, cabeçalho e corpo:

estrutura básica do HTML

fonte: educação pública do Rio de Janeiro

Documento: Representado pela tag <html>, essa tag indica ao navegador que o documento possue marcação do tipo HTML, não somente texto, essa tag deve ser a primeira a abrir e a ultima a fechar o documento, contendo tudo que está escrito seja texto ou marcação.

Cabeçalho: Representado pela tag <head>, o cabeçalho contém todas as informaçõe sobre como o conteúdo à seguir deve ser interpretado pelo navegador, à grosso modo podemos dizer que ela diz como o navegador deve “pensar” para compreender o documento.

Corpo: Representado pela tag <body>, o corpo do documento contém tudo que vai ser exibido pelo navegador, desde o texto em si até imagens, vídeos e a cor de fundo da página, tudo o que chega ao seus olhos é o corpo do documento. O corpo do documento possui uma série de atributos que podem ser usados para formatar a página, como alterar as margens, adicionar cores ao texto ou aos link e imagens de fundo.

Doctype: Representado por <!DOCTYPE html>, o doctype é uma linha de código utilizada para avisar o navegador em qual versão do HTML o documento está. O doctype do HTML5 foi simplificado para não precisar da versão do HTML, pois o nagevador na realidade não se importa com a versão, já que para o navegador interpretar conteúdo mais novo ele tem que ter suporte aos mais antigos, mas ainda é necessária para o navegador interpretar  sem erros as tags do HTML5. O doctype sempre deve ser a primeira linha de código, antes mesmo da tag de documento.

Meta Charset: Charset é um mapa de caracteres desenvolvido em padão unicode para que as páginas sejam exibidas corretamente em qualquer lugar do mundo, dando um número para cada caractere, independente da língua ou dos softwares utilizados. No HTML5 foi inserida uma metatag que define a tabela de caracteres da página, diferente das versões anteriores emque era definida de forma complicada e problemática. A definição de charset é <meta charset=”utf-8″>.

Modelos de Conteúdo

São as regras básicas do HTML, definem onde os elementos estão, como se comportam e o que podem fazer, dentre todas as categorias eles pode sem divididos em de linha e de bloco.  Elementos de linha são os que marcam texto, como strong que deixa o texto em negrito e em que deixa em itálico. Os de bloco são como caixas que dividem a disposição dos elementos.  Eles seguem algumas regras, apresentadas a seguir:

  • “Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label.”
  • “Os elementos de linha nunca podem conter elementos de bloco.”
  • “Elementos de bloco sempre podem conter elementos de linha.”
  • “Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível.”

Os elementos também são divididos em várias categorias, elas que dizem como os elementos se comportam e com o que trabalha:

  • Metadata content:

Este conteúdo vem antes da apresentação, formando uma relação com o documento e seu conteúdo com documentos que usam outras formas de distribuição de informação. Seus elementos são: base, command, link, meta, noscript, script, style e title.

  • Flow Content:

São os elementos que estão no body e suas aplicações. Eles obedecem uma regra: “Elementos que seu modelo de conteúdo permitem inserir qualquer elemento que se encaixa no Flow Content, devem ter pelo menos um descendente de texto ou um elemento descendente que faça parte da categoria embedded.” Exemplos de elementos da categoria flow content são:  a, abbr, address, area (se for um decendente de um elemento de mapa), article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6. header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, link (Se o atributo itemprop for utilizado), map, mark, math, menu, meta (Se o atributo itemprop for utilizado), meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style (Se o atributo scoped for utilizado), sub, sup, svg, table, textarea, time, ul, var, video, wbr, Text.

  • Sectioning Content:

São quem define os cabeçalhos e rodapés, eles que juntem grupos de texto num documento. Seus elementos são: article, aside, nav, section.

  • Heading Content:

Definem os cabeçalhos que podem estar contidos na categoria Sectioning. Seus elementos são: h1, h2, h3, h4, h5, h6, hgroup.

  • Phrasing Content:

São os elementos que marcam o texto do documento e os elementos que marcam este texto dentro do elemento de parágrafo. Seus elementos são: a, abbr, area (se ele for descendente de um elemento de mapa), audio, b, bdo, br, button, canvas, cite, code, command, datalist, del (se ele contiver um elemento da categoria de Phrasing), dfn, em, embed, i, iframe, img, input, ins (se ele contiver um elemento da categoria de Phrasing), kbd, keygen, label, link (se o atributo itemprop for utilizado), map (se apenas ele contiver um elemento da categoria de Phrasing), mark, math, meta (se o atributo itemprop for utilizado), meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, Text.

  • Embedded Content:

São os elementos que importam outras fontes de informação para o documento. Seus elementos são: audio, canvas, embed, iframe, img, math, object, svg, video.

  • Interactive Content:

São os elementos que cuidam da interação com o usuário, alguns elementos HTML podem ser ativados por determinado comportamento, geralmente culminam em um evento de click e o evento DOMActivate. Seus elementos são: a, audio (se o atributo control for utilizado), button, details, embed, iframe, img (se o atributo usemap for utilizado), input (se o atributo type não tiver o valor hidden), keygen, label, menu (se o atributo type tiver o valor toolbar), object (se o atributo usemap for utilizado), select, textarea, video (se o atributo control for utilizado).

Novos elementos e atributos

Nas versões mais antigas do HTML era possível fazer várias marcações diferentes no layout para estruturar a página deixando as informações em áreas específicas da página, podia-se diferenciar um parágrafo de um título mas não o rodapé do cabeçalho. Essa diferença só ficava evidente no layout final ou pela posição dos elementos na estrutura do código HTML.

exemplo de código html

fonte: wikipedia.org

O HTML5 trouxe uma série de novos elementos que facilitam a diferenciação de áreas importantes, como os já citados cabeçalho e rodapé tornando o trabalho de buscadores mais fácil, rápido e eficiente, pois seus mecanismos já o direcionam para a parte do documento onde está a informação buscada. Esses são os novos elementos e atributos incorporados no HTML 5:

  • Section: Essa tag define uma seção genérica no documento, dividindo a página em várias seções, conforme o desejado.
  • Nav: Esse elemento representa as principais seções do site que contém links para outras partes do site, como o menu principal ou os blocos de link que ficam no rodapé da página.
  • Article: Esse elemento representa a parte da página que pode ser distribuídas em feeds, como posts, artigos, comentários ou apenas blocos de texto comum.
  • Aside: É usado para separar uma parte da página que referencia o conteúdo à sua volta, como sidebars, menus criados com o elemento nav e até mesmo publicidade.
  • Header: Usado para formular o cabeçalho da página (não confundir com a tag <head>), contendo logos, indíces e campos de busca.
  • Footer: Se o header é o cabeçalho, footer é o rodapé, é o último elemento antes de se fechar a tag <html>, mas não se apresenta necessariamente no fim de uma seção.
  • Time: Elemento usado para marcar partes do texto que contém uma data precisa  no calendário gregoriano ou um horário.

Alguns atributos foram descontinuados por serem melhor controlados por linguagem de estilo, como o css, e não de marcação. Os atributos a seguir foram descontinuados por essa razão.

  • 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.
  • 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, tbody, td, tfoot, th, thead e tr.
  • width como atributo da tag hr, table, td, th, col, colgroup e pre.

Outros atributos que pertenciam ao HTML4 foram removidos do 5, eles são:

  • rev e charset como atributos da tag linka.
  • shape coords como atributos da tag a
  • longdesc como atributo da tag img e iframe.
  • target como atributo da tag link.
  • nohref como atributo da tag area.
  • profile como atributo da tag head.
  • version como atributo da tag html.
  • name como atributo da tag img (use id no lugar).
  • scheme como atributo da tag meta.
  • archive, classid, codebase, codetype, declare standby como atributos da tag object.
  • valuetype e type como atributos da tag param.
  • axis e abbr como atributos da tag td e th.
  • scope como atributo da tag td.

Alguns elementos ganharam novos atributos:

  • O atributo autofocus pode ser especificado nos elementos input (exceto quando há atributo hidden atribuído), textarea, select e button.
  • A tag a passa a suportar o atributo media como a tag link.
  • A tag form ganha um atributo chamado novalidate. Quando aplicado o formulário pode ser enviado sem validação de dados.
  • O elemento ol ganhou um atributo chamado reversed. Quando ele é aplicado os indicadores da lista são colocados na ordem inversa, isto é, da forma descendente.
  • O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de fieldset são desativados.
  • O novo atributo placeholder pode ser colocado em inputs e textareas.
  • O elemento area agora suporta os atributos hreflang e rel como os elementos a e link
  • O elemento base agora suporta o atributo target assim como o elemento a. O atributo target também não está mais descontinuado nos elementos a e area porque são úteis para aplicações web.

Os atributos abaixo foram removidos:

  • O atributo border utilizado na tag img.
  • O atributo language na tag script.
  • O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de name.
  • O atributo summary na tag table.

O W3C mantém um documento regularizado constantemente nesta página.

E assim concluo a apresentação do HTML5 e algumas diferenças dele para as versões anteriores. Para finalizar uma breve explicação sobre o que são tags user agent:

Tags: São as “etiquetas” que marcam a formatação utilizada pelo desenvolvedor para formatar a linguagem, elas se apresentam entre parenteses ângulares <>. Um elemento é formado por uma tag, atributos, valores e filhos (que podem ser outros elementos ou texto). Um exemplo é

<tag atributo=”valor”>Filho.</tag>

Onde <tag> é a etiqueta de abertura, </tag> é a de fechamento, “valor” é um valor qualquer e Filho representa o filho do elemento (se houver).

User Agent: É o software  que age em prol do usuário, o Microsoft Outlook é um exemplo de user agent de e-mails.

 

agora você oficialmente entende essa piada.

fonte: samdre.de

Referência:

http://pt.wikipedia.org/wiki/HTML
http://pt-br.html.net/tutorials/html/lesson2.php
http://www.educacaopublica.rj.gov.br/oficinas/informatica/html/estrutura.htm
http://www.emblema.art.br/html4blog/laranja_estrutura.html
http://vinteum.com/html5-doctype/
http://tableless.com.br/html5/?chapter=1
http://odesenvolvedor.andafter.org/publicacoes/html5-meta-charset_1892.html

Anúncios

0 Responses to “HTML 5”



  1. Deixe um comentário

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

w

Conectando a %s


Comentários

Anúncios

%d blogueiros gostam disto: