HTML (Hypertext Markup Language)

Tamanho: px

Começar a partir da página:

Download "HTML (Hypertext Markup Language)"

Juan Oswaldo Molinari Melgaço
6 Há anos
Visualizações:

HTML (Hypertext Markup Language) Hipertexto: modo de organizar o conteúdo de forma não linear. Marcação: distinguir títulos, subtítulos, conteúdo etc. Desenvolvido originalmente por Tim Berners-Lee.

2 HTML (Hypertext Markup Language) Hipertexto: modo de organizar o conteúdo de forma não linear. Marcação: distinguir títulos, subtítulos, conteúdo etc. Desenvolvido originalmente por Tim Berners-Lee. W3C: grupo responsável por manter o padrão do código. Em 1990, ganhou popularidade por meio do navegador Mosaic (Marc Andreessen). Casamento de HyTime e SGML. Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0. Em 1997, o W3C trabalhou na versão 3.2, fazendo com que ela fosse tratada como prática comum. Foi criado para ser uma linguagem independente de plataformas, browsers e outros meios de acesso.

3 Surgimento do HTML5 O W3C trabalhava na criação do XHTML2 (um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG), em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web. WHATWG foi fundado em 2004, pelos desenvolvedores de empresas como Mozilla, Apple e Opera. Até 2006, o WHATWG e o W3C atuavam separadamente, quando o W3C reconheceu todo o trabalho do grupo WHATWG. Em outubro de 2006, Tim Berners-Lee anunciou que trabalharia com o WHATWG na produção do HTML5.

4 O HTML5 é a nova versão do HTML4 O WHATWG define as regras de marcação e APIs que formarão a base da arquitetura web do HTML5. Facilita a manipulação do elemento, possibilitando ao desenvolvedor modificar as características dos objetos de forma não intrusiva e de modo que seja transparente para o usuário final. Fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possível. Cria novas tags e modifica a função de outras. Modifica a forma como escrevemos o código e organizamos a informação na página mais semântica com menos código.

5 O WHATWG tem preservado o foco para manter a retrocompatibilidade. Não é preciso esperar que todo o padrão seja escrito e publicado para se utilizar as novidades das linguagens. A desvantagem dessa constância é que problemas de compatibilidade podem ocorrer com mais frequência. A guerra dos browsers não é uma guerra predatória, é competitiva, saudável para o mercado.

6 A estrutura básica do HTML5 é semelhante à das versões anteriores, porém, com menos código. <!DOCTYPE html> <html lang= pt-br > <head> <meta charset= UTF-8 > <title>exemplo de Titulo</title> </head> <body> Exemplo de Corpo do site. </body> </html> Deve ser sempre a primeira linha de código do documento antes da tag HTML.

7 <!DOCTYPE html> <html lang= pt-br > <head> <meta charset= UTF-8 > <title>exemplo de Titulo</title> </head> <body> Exemplo de Corpo do site. </body> </html> O HTML é uma série de elementos em árvore, dos quais o principal é sempre a tag HTML. O atributo LANG é necessário para que os useragents saibam qual é a linguagem principal do documento.

8 <!DOCTYPE html> <html lang= pt-br > A tag HEAD é onde fica toda a parte inteligente <head> da página. No HEAD, ficam os metadados. <meta charset= UTF-8 > <title>exemplo de Titulo</title> </head> <body> Exemplo de Corpo do site. </body> </html> Metadados são informações sobre a página e o conteúdo.

9 Metatag Charset Responsável por chavear a tabela de caracteres que a página está utilizando. Nas versões anteriores ao HTML5: <meta http-equiv= Content-Type content= text/html; charset=utf-8 > O novo código para o HTML5: <meta charset= UTF-8 > A Tabela Unicode garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo.

10 Tag link No HTML, há dois tipos de link: A tag A, que é a abreviação de ANCHOR, o famoso hiperlink. A tag link, que é para importar objetos externos que serão usados no documento. Exemplo: arquivos de CSS, RSS etc. Exemplo de tag link: <link rel= stylesheet type= text/css href= arquivo.css > Indica que aquele link é relativo à importação de um arquivo referente a folhas de estilo.

11 Tag link Valores para o atributo REL: ALTERNATE: indica ao user-agents que o conteúdo do site pode ser encontrado em um caminho alternativo, via Atom FEED. Exemplo: <link rel= alternate type= application/atom+xml title= Exemplo de feed href= /feed/ > ARCHIVES: indica referência a uma coleção de material histórico.

12 Motores de renderização Motor Browser Webkit Safari, Google Chrome Gecko Mozilla Firefox, Camino Trident Internet Explorer 4 a 9 Presto Opera 7 a 10

13 Compatibilidade dos browsers Safari Chrome Opera Firefox IE8 IE9 Local Storage Sim Sim Sim Sim Sim Sim Histórico de Sessão Sim Sim Sim Sim Sim Sim Aplicações Offline Sim Sim Não Sim Não Não Novos tipos de campos Sim Sim Sim Não Não Não Form: Autofocus Sim Sim Sim Não Não Não Form: Autocomplete Não Não Sim Não Não Não Form: Required Sim Sim Sim Não Não Não Vídeo, Áudio e CanvasText Sim Sim Sim Sim Não Sim

14 Devo decorar o que cada browser suporta Técnicas de detecção Não! Caso o navegador do usuário não suporte HTML5, você poderá redirecioná-lo para uma versão do site mais simples, ou alertar o usuário sobre a importância da atualização do browser.

15 Técnicas de detecção Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou NAVIGATOR. function suporta_geolocalizacao() { return!!navigator.geolocation; } Crie um elemento e verifique se uma determinada propriedade existe nesse elemento. function suporta_canvas() { return!!document.createelement('canvas').getcontext; }

16 Técnicas de detecção Crie um elemento e verifique se um determinado método existe nele. Então, chame o método e verifique se o valor retorna. function suporta_reproduzir_video() { if (!suporta_video()) { return false; } var v = document.createelement("video"); return v.canplaytype('video/mp4; codecs="avc1.42e01e, mp4a.40.2"'); } Crie um elemento e defina um atributo com um determinado valor. Então, verifique se o atributo suporta esse valor. function suporta_inputs() { var i = document.createelement("input"); i.setattribute("type", "color"); return i.type!== "text"; }

17 A Biblioteca Modernizr Modernizr é uma pequena biblioteca Javascript, que detecta a disponibilidade das novas características do HTML5 e do CSS3 nos browsers. Baixe a versão mais atual da biblioteca no endereço <!DOCTYPE html> <html lang= pt-br > <head> <meta charset= utf-8 > <title>teste de Modernizr</title> <script src= modernizr.js ></script> </head> <body> </body> </html>

18 A Biblioteca Modernizr Executa automaticamente, criando um objeto global chamado Modernizr, que contém um conjunto de propriedades booleanas para cada funcionalidade que ela puder detectar. if (Modernizr.geolocation) { alert( Aceita Geolocalização ) } else { alert( Não Aceita Geolocalização ) } if (Modernizr.canvas) { alert( Aceita Canvas ) } else { alert( Não Aceita Canvas ) }

19 A Biblioteca Modernizr Outra forma: <html class= no-js lang= pt-br >

20 A Biblioteca Modernizr Resultado: <html lang= pt-br class= js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths style= > O que o browser não aceita, o Modernizr insere o prefixo no- antes da classe. Exemplo: no-touch.

21 A Biblioteca Modernizr Utilidade:.caixa { box-shadow: 0px 0px 50px 5px rgba(0, 0, 0, 0.5); text-align: center; }.no-boxshadow.caixa { border: 1px solid rgb(204, 204, 204); border-bottom: 3px solid rgb(204, 204, 204); border-right: 3px solid rgb(204, 204, 204); text-align: center; }

22 Até a próxima aula...

Documentos relacionados

Linguagem de Programação Visual. Estrutura Basica do HTML5 Prof. Gleison Batista de Sousa

Linguagem de Programação Visual Estrutura Basica do HTML5 Prof. Gleison Batista de Sousa O que vai ser estudado Codificação; Linguagem de Programação; Infra Estrutura Basica; Ferramentas; Implantação;