SlideShare uma empresa Scribd logo
1 de 12
HTML5
Luan Diniz
Um pouco de história
• Com o surgimento da web, era necessário criar uma linguagem que
fosse entendida por meios de acesso diferentes. Para tanto, Tim
Berners-Lee desenvolveu o HTML, com a proposta de suprir essa
necessidade. Somente na década de 1990, quando o Mosaic – browser
desenvolvido por Marc Andreessen – se popularizou, o HTML ganhou
força e foi adotado por outros desenvolvedores e fabricante de
browsers, compartilhando as mesmas convenções.
Um pouco de história
• HTML é uma abreviação de Hypertext Markup Language, ou seja,
Linguagem de Marcação de Hipertexto. Resumindo, o HTML é uma
linguagem usada para a publicação de conteúdo (texto, imagens,
vídeos, áudio etc.) na web.
• Para que você possa entender bem, o HTML é baseado no conceito de
hipertexto, que são conjuntos de elementos ligados por conexões, que
podem ser palavras, imagens, vídeos, áudio, documentos etc. que
quando conectados, formam uma grande rede de informação.
Um pouco de história
• Entre 1993 e 1995, surgiram novas versões (HTML+, HTML 2.0,
HTML 3.0) onde foram propostas diversas mudanças para enriquecer
as possibilidades da linguagem, mas, ela ainda não era tratada como
padrão. Apenas em 1997, o grupo de trabalho do W3C, trabalhou na
versão 3.2, fazendo com que ela fosse tratada como prática comum.
• Resumindo, e creio que você já tenha percebido, o HTML foi criado, e
melhorado, para se tornar uma linguagem independente de
plataformas ou meios de acesso, diminuindo custos e fazendo com
que a web não ficasse limitada a uma base proprietárias com
formatos incompatíveis.
Um pouco de história
• Em 2004, foi fundado o WHATWG (Web Hypertext Application
Technology Working Group) por desenvolvedores de empresas como
Mozilla, Apple e Opera, onde se iniciou o trabalho de escrever a nova
versão do HTML, que seria chamado hoje de HTML5.
Afinal, o que é HTML5 e quais suas principais
mudanças?
• O HTML5 é a nova versão do HTML4 e um dos seus principais
objetivos é facilitar a manipulação dos elementos, possibilitando o
desenvolvedor modificar as características dos objetos de forma não
intrusiva, fazendo com que isso fique transparente para o usuário
final.
• Para se ter uma ideia disso, diferente das versões anteriores,
o HTML5 fornece ferramentas para o CSS e o Javascript fazerem seu
trabalho da melhor possível de forma que um web site ou aplicação
continue leve e funcional.
Estrutura básica
O DOCTYPE
• <!DOCTYPE HTML>
• Embora o DOCTYPE não seja uma tag HTML, ela deve ser a
primeira linha antes do código, pois se tratar de uma instrução que
indica ao navegador ou outro meio qual a versão de marcação o
código foi escrito.
• Em versões anteriores, era necessário referenciar o DTD (Document
Type Definition) diretamente no código DOCTYPE. Com o HTML5,
essa referência fica por responsabilidade do próprio navegador.
Elemento HTML
• Agora começamos a marcação propriamente dita. Para exemplificar,
pense no código HTML como uma árvore, onde existem elementos
pais ou filhos, e sempre, o elemento vai estar no topo dessa árvore,
sendo assim, o elemento mais importante.
• Creio que foi notada a presença de um atributo no elemento . O
“lang” é necessário para que os user-agents saibam qual é a
linguagem principal do documento.É necessário lembrar que, o
atributo “lang”, não está restrito somente ao elemento , podendo ser
utilizado em qualquer outro elemento indicando a linguagem do texto
representado.
Elemento HEAD
• Este é o local onde fica a “parte inteligente” do web site. No HEAD,
ficam os metadados, ou seja, informações sobre a página e sobre o
conteúdo publicado.
Metatag Charset
• <meta charset=”UTF-8”>
• Unicode - Essa tabela comporta algo em torno de um milhão de
caracteres e a maioria dos browsers a suporta plenamente. Ao invés
de cada região ter a sua tabela de caracteres, é muito mais sensato
ter uma tabela com o maior número de caracteres possível, e fazendo
uso dela no seu sistema, você garantirá que ele será bem visualizado
no Brasil, China ou em qualquer outro lugar do mundo.
• O que o Unicode faz é fornecer um único número para cada caractere,
não importa a plataforma, nem o programa, nem a língua.
Resumo
• Aqui está só o início, um pouco para nós possamos entender o
HTML5, e claro, começar a fazer uso dessa linguagem de marcação.
Em outras oportunidades, daremos continuidade, falando mais das
novidades e já desenvolvendo na prática.

Mais conteúdo relacionado

Semelhante a HTML5.pptx

Semelhante a HTML5.pptx (20)

Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviações
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
O que é HTML5
O que é HTML5O que é HTML5
O que é HTML5
 
Seminario html5
Seminario html5Seminario html5
Seminario html5
 
HTML5
HTML5HTML5
HTML5
 
Html E Websemantica Trabalho
Html E Websemantica TrabalhoHtml E Websemantica Trabalho
Html E Websemantica Trabalho
 
Conecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - ApresentaçãoConecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - Apresentação
 
I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12
 
Lista de abreviações
Lista de abreviaçõesLista de abreviações
Lista de abreviações
 
O Poder do HTML5
O Poder do HTML5O Poder do HTML5
O Poder do HTML5
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
 
Curso HTML Módulo 1
Curso HTML Módulo 1Curso HTML Módulo 1
Curso HTML Módulo 1
 
Html
HtmlHtml
Html
 
HTML & CSS ninja - Material do curso
HTML & CSS ninja - Material do cursoHTML & CSS ninja - Material do curso
HTML & CSS ninja - Material do curso
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
A Linguagem Php
A Linguagem PhpA Linguagem Php
A Linguagem Php
 
Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1Técnicas e processos - HTML / CSS - aula 1
Técnicas e processos - HTML / CSS - aula 1
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
 
Curso html basico_aula-001
Curso html basico_aula-001Curso html basico_aula-001
Curso html basico_aula-001
 

HTML5.pptx

  • 2. Um pouco de história • Com o surgimento da web, era necessário criar uma linguagem que fosse entendida por meios de acesso diferentes. Para tanto, Tim Berners-Lee desenvolveu o HTML, com a proposta de suprir essa necessidade. Somente na década de 1990, quando o Mosaic – browser desenvolvido por Marc Andreessen – se popularizou, o HTML ganhou força e foi adotado por outros desenvolvedores e fabricante de browsers, compartilhando as mesmas convenções.
  • 3. Um pouco de história • HTML é uma abreviação de Hypertext Markup Language, ou seja, Linguagem de Marcação de Hipertexto. Resumindo, o HTML é uma linguagem usada para a publicação de conteúdo (texto, imagens, vídeos, áudio etc.) na web. • Para que você possa entender bem, o HTML é baseado no conceito de hipertexto, que são conjuntos de elementos ligados por conexões, que podem ser palavras, imagens, vídeos, áudio, documentos etc. que quando conectados, formam uma grande rede de informação.
  • 4. Um pouco de história • Entre 1993 e 1995, surgiram novas versões (HTML+, HTML 2.0, HTML 3.0) onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem, mas, ela ainda não era tratada como padrão. Apenas em 1997, o grupo de trabalho do W3C, trabalhou na versão 3.2, fazendo com que ela fosse tratada como prática comum. • Resumindo, e creio que você já tenha percebido, o HTML foi criado, e melhorado, para se tornar uma linguagem independente de plataformas ou meios de acesso, diminuindo custos e fazendo com que a web não ficasse limitada a uma base proprietárias com formatos incompatíveis.
  • 5. Um pouco de história • Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de empresas como Mozilla, Apple e Opera, onde se iniciou o trabalho de escrever a nova versão do HTML, que seria chamado hoje de HTML5.
  • 6. Afinal, o que é HTML5 e quais suas principais mudanças? • O HTML5 é a nova versão do HTML4 e um dos seus principais objetivos é facilitar a manipulação dos elementos, possibilitando o desenvolvedor modificar as características dos objetos de forma não intrusiva, fazendo com que isso fique transparente para o usuário final. • Para se ter uma ideia disso, diferente das versões anteriores, o HTML5 fornece ferramentas para o CSS e o Javascript fazerem seu trabalho da melhor possível de forma que um web site ou aplicação continue leve e funcional.
  • 8. O DOCTYPE • <!DOCTYPE HTML> • Embora o DOCTYPE não seja uma tag HTML, ela deve ser a primeira linha antes do código, pois se tratar de uma instrução que indica ao navegador ou outro meio qual a versão de marcação o código foi escrito. • Em versões anteriores, era necessário referenciar o DTD (Document Type Definition) diretamente no código DOCTYPE. Com o HTML5, essa referência fica por responsabilidade do próprio navegador.
  • 9. Elemento HTML • Agora começamos a marcação propriamente dita. Para exemplificar, pense no código HTML como uma árvore, onde existem elementos pais ou filhos, e sempre, o elemento vai estar no topo dessa árvore, sendo assim, o elemento mais importante. • Creio que foi notada a presença de um atributo no elemento . O “lang” é necessário para que os user-agents saibam qual é a linguagem principal do documento.É necessário lembrar que, o atributo “lang”, não está restrito somente ao elemento , podendo ser utilizado em qualquer outro elemento indicando a linguagem do texto representado.
  • 10. Elemento HEAD • Este é o local onde fica a “parte inteligente” do web site. No HEAD, ficam os metadados, ou seja, informações sobre a página e sobre o conteúdo publicado.
  • 11. Metatag Charset • <meta charset=”UTF-8”> • Unicode - Essa tabela comporta algo em torno de um milhão de caracteres e a maioria dos browsers a suporta plenamente. Ao invés de cada região ter a sua tabela de caracteres, é muito mais sensato ter uma tabela com o maior número de caracteres possível, e fazendo uso dela no seu sistema, você garantirá que ele será bem visualizado no Brasil, China ou em qualquer outro lugar do mundo. • O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua.
  • 12. Resumo • Aqui está só o início, um pouco para nós possamos entender o HTML5, e claro, começar a fazer uso dessa linguagem de marcação. Em outras oportunidades, daremos continuidade, falando mais das novidades e já desenvolvendo na prática.