Dicas de HTML5

Como Fazer Um Site >> Criar um Site >> Dicas de HTML5


O que é o HTML5?

O HTML5 é o novo padrão para o HTML.
É a nova versão do HTML. A versão anterior do HTML era de 1999. Entretanto muito mudou na internet desde aquela altura. Os principais navegadores de internet já suportam o HTML5, que é uma versão que facilita a inserção de vídeos, audio e o desenho de imagens.

(Mas a maior parte dos comandos HTML que eram válidos para as versões anteriores, mantêm-se válidos com a implementação do HTML5. Clique para aprender HTML.)

Como surgiu o HTML5?

Em 2006 a W3C e a WHATWG decidiram cooperar no desenvolvimento de uma nova versão de HTML. Foram definidas algumas linhas de orientação para o HTML5:

  • as novas funcionalidades deviam basear-se no HTML, CSS, DOM e Javascript
  • reduzir a necessidade de plugins externos (como por exemplo o Flash)
  • melhor tratamento dos erros
  • o HTML5 não devia estar dependente do tipo de equipamento
  • o processo de desenvolvimento devia estar aberto ao público

No HTML5 há apenas uma declaração para o tipo de documento, que é muito simples:
<!DOCTYPE html>

A estrutura básica de um documento de HTML5 é praticamente a mesma que era usada para a versão anterior de HTML, mudando apenas a declaração "DOCTYPE":

<!DOCTYPE html>
<html>
<head>
<title>Título do documento</title>
</head>
<body>
Conteúdo do documento......
</body>
</html>


HTML5 - Novas funcionalidades

Algumas das funcionalidades mais interessantes do HTML5 são:

  • as tags <video> e <audio> para reproduzir ficheiros multimedia
  • a tag <canvas> para desenho 2D
  • tags para conteúdo especifico, tais como <header>, <footer>, <article>, <nav>, <section>
  • capacidade para armazenamento local
  • novos comandos para elementos de formulários, tais como data, tempo, url, email

o HTML5 funciona em todos os browsers?

Nem todas as funcionalidades do HTML5 podem ser usadas nos diferentes navegadores de internet. Mas à medida que se torna o "HTML padrão", as funcionalidades do HTML5 estão a ser cada vez mais implementadas nos principais browsers (Chrome, Safari, Firefox, Opera e Internet Explorer). Clique aqui para ver uma tabela com as funcionalidades de HTML5 que são suportadas em cada navegador de internet.

Verifique se o seu navegador de internet suporta o HTML5:


HTML5 para vídeos e Audio

Até agora não havia uma forma padrão para apresentar vídeos ou reproduzir ficheiros de audio numa página da internet. Actualmente os vídeos, e ficheiros de audio, ainda continuam a ser apresentados através de um plugin (como por exemplo o flash), mas o problema é que os diferentes browsers usam plugins diferentes.

As versões mais recentes do Firefox, Internet Explorer, Opera, Chrome e Safari já suportam a inserção de videos e audio através de HTML5.


HTML5 Vídeo

Grande parte dos webmasters ainda aloja os seus vídeos num site de vídeos (como o Youtube) e depois usa uma porção de código na página que lhes permite que o vídeo desejado seja apresentado numa página da web.

Mas com o HTML5 isso pode mudar. Não precisa mais de ser assim. O HTML5 define uma nova tag que especifica uma forma padrão para inserir vídeos nas páginas web. Trata-se da tag <video>.

Os formatos de vídeo suportados são o "MP4" "Ogg" e "WebM".


Como funciona a tag <video>?

Para reproduzir um vídeo em HTML5 basta colar o seguinte código:

<video width="320" height="200" controls="controls">
<source src="exemplo-filme.mp4" type="video/mp4" />
<source src="exemplo-filme.ogg" type="video/ogg" />
O seu browser não suporta a tag vídeo.
</video>

Copie e cole o código no editor de HTML em tempo real.

Veja o resultado:

O vídeo é reproduzido numa caixa que exibe os botões de "play", "pause", assim como o botão de controlo do nível de audio.

Os atributos "width" e "height" são importantes porque reservam um espaço para o vídeo quando a página é carregada no browser, preservando assim a integridade do layout da página.

Principalmente na fase inicial, em que o HTML5 ainda não está generalizado, é fundamental incluir uma porção de texto entre as tags <video> e </video> para os browsers que não suportam ainda o HTML5.

O elemento <video> permite o uso de diferentes tags <source> para diferentes formatos de video. O primeiro formato a ser reconhecido pelo browser é aquele que será reproduzido.


HTML5 Audio

O HTML5 define uma nova tag que especifica uma forma padrão para inserir ficheiros audio nas páginas web. Trata-se da tag <audio>.

Os formatos de audio suportados são o "MP3" "Ogg" e "Wav".


Como funciona a tag <audio>?

Para reproduzir um ficheiro audio em HTML5 basta usar o seguinte código:

<audio controls="controls">
<source src="exemplo-som.ogg" type="audio/ogg" />
<source src="exemplo-som.mp3" type="audio/mp3" />
O seu browser não suporta a tag audio.
</audio>

Copie e cole o código no editor de HTML em tempo real.

Veja o resultado:

O ficheiro de audio é reproduzido numa barra que exibe os botões de "play", "pause", assim como o botão de controlo do nível de som.

É importante incluir uma porção de texto entre as tags <audio> e </audio> para os browsers que não suportem ainda o HTML5.

O elemento <audio> permite o uso de diferentes tags <source> para diferentes formatos de audio. O primeiro formato a ser reconhecido pelo browser é aquele que será reproduzido.


HTML5 Canvas

O HTML5 tem uma tag que pode ser usada para rapidamente criar imagens numa página da net. Trata-se da tag <canvas>.

A tag <canvas> funciona apenas como um recipiente, uma região da página onde as imagens são desenhadas através de um script (normalmente JavaScript).

Podem ser definidas a largura e altura da respectiva região. Para o elemento <canvas> existem vários métodos para desenhar linhas, circulos, caixas, caracteres e a introdução de imagens.

As versões mais recentes do Firefox, Internet Explorer, Opera, Chrome e Safari já suportam a tag <canvas>.

Como criar uma região "canvas"?

Usa-se a tag <canvas> e especificam-se os atributos "id", largura e altura:
<canvas id="suaCanvas" width="250" height="100"></canvas>


Desenhar um rectangulo com o Javascript

Para desenhar as imagens no interior da região "canvas" é usado o JavaScript:

<canvas id="suaCanvas" width="250" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("suaCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.fillRect(10,5,150,80);
</script>

Copie e cole o código no editor de HTML em tempo real.

Veja o resultado:


Explicação do código JavaScript:

  • segunda linha: é identificada a região "canvas" pelo nome que lhe havia sido atribuido (ver código HTML da tag <canvas> acima)
  • terceira linha o objecto getContext("2d") é um objecto do HTML5 que tem os métodos para desenhar caixas, circulos, linha, etc.
  • as linhas seguintes desenham um rectangulo azul: o atributo fillStyle define a cor azul, e o atributo fillRect define a forma, o tamanho, e a posição. Os parametros (10,5,150,80) desenham um rectangulo no interior do "canvas" com dimensões de 150x80, posicionado a partir do canto superior esquerdo, com 10px do bordo esquerdo e 5 px do bordo superior.

Desenhar uma linha com o Javascript

Para desenhar linhas no interior da região "canvas" é usado o JavaScript:

<canvas id="suaCanvas" width="250" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("suaCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(5,5);
ctx.lineTo(140,60);
ctx.stroke();
</script>

Copie e cole o código no editor de HTML em tempo real.

Veja o resultado:

Explicação do código JavaScript:

  • quarta linha: moveTo(5,5) define o ponto de partida (5px da esquerda e 5px para baixo.
  • quinta linha: lineTo(140,60) define a linha até ao ponto localizado 140px para a direita e 60px para baixo.
  • stroke(); desenha a linha.

Desenhar um gradiente com o JavaScript

O Javascript pode ser usado para definir um gradiente, por exemplo no interior do rectangulo que havia sido definido antes:

<canvas id="suaCanvas" width="250" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("suaCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(10,5,150,80);
grd.addColorStop(0,"#0000ff");
grd.addColorStop(1,"#000000");
ctx.fillStyle=grd;
ctx.fillRect(10,5,150,80);
</script>

Copie e cole o código no editor de HTML em tempo real.

Veja o resultado:


Desenhar um circulo com o JavaScript

O Javascript pode ser usado para definir um circulo:

<canvas id="suaCanvas" width="250" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("suaCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000FF";
ctx.beginPath();
ctx.arc(70,40,30,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
</script>

Copie e cole o código no editor de HTML em tempo real.

Veja o resultado:


Inserir uma imagem com o JavaScript

O Javascript pode ser usado para inserir uma imagem na região do "canvas":

<body>
<canvas id="suaCanvas" width="270" height="100" style="border:1px solid #c3c3c3; background: #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("suaCanvas");
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
ctx.drawImage(img,20,10);
};
img.src="../imagens/comofazerumsite240.jpg";
</script>
</body>

Copie e cole o código no editor de HTML em tempo real.

Veja o resultado:

 


Registro de Dominio:
Imagem de domínio

Domínios a preços acessíveis.
Inclui serviço e privacidade gratuito.

Hospedagem para seu site:
Imagem de hospedagem

Escolha uma empresa
de hospedagem fiável para
alojar o seu site.

Criar Site Grátis:
Loja Virtual Grátis:

BLOG | FÓRUM | Política de Privacidade
Copyright © 2019 - ComoFazerUmSite.com
Design com Dreamweaver

 X
Quer aprender como criar sites, receber novidades, promoções e ofertas especiais?
Subscreva a newsletter gratuita.
Endereço de Email:

Pop Email