Finally, a doctype anyone can remember
A primeira linha de todo o documento de HTML deve ter uma declaração de DOCTYPE.
O DOCTYPE é uma referência a um DTD (Document Type Definition), que não é mais do que um documento onde estão definidas as regras para a criação de um documento de HTML. Nele estão descritos os elementos que podem ser utilizados, quais os elementos que podem estar dentro de outros elementos, que tags descrevem esses elementos, se um elemento tem conteúdo ou não, se é necessário ter tag de abertura e/ou de fim...
Enfim, tudo o que pode ou não ser utilizado dentro do nosso documento.
Com o HTML 4, o que ainda utilizamos, a declaração do DOCTYPE é dividida em duas partes, um identificador publico (public identifier) e uma URI.
O identificador publico diz que tipo de documento está a ser utilizado:
-//W3C//DTD HTML 4.01//EN
A URI aponta para o endereço do DTD na web:
http://www.w3.org/TR/html4/strict.dtd
Quando começarmos a construir documentos em HTML 5 devemo-nos lembrar que estes podem ser escritos com o mime type text html, mas também podem ser escritos em xml.
Assim, o DOCTYPE para documentos HTML 5 não necessitam mais do DTD, assim o doctype é escrito da seguinte forma:
<!DOCTYPE html>
Simples e óbvio, não é, :). E melhor ainda é case insensitive. Agora já não será dificil decorarmos como se escreve.
Tags de conteúdo novas
<audio> – especifica um streaming de áudio num documento HTML. Esta tag recebe, entre outros, o parâmetro src, com o ficheiro de áudio. Pode ser utilizado em conjunto com tags <source>, caso se tenha mais do que um ficheiro de áudio.
<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
Para experimentarem: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_audio
/*****************************************************************/
<video> - especifica um streaming de vídeo num documento de html. Esta tag recebe, entre outros, o parâmetro src, com o ficheiro de vídeo. Pode ser utilizado em conjunto com tags <source>, caso se tenha mais do que um ficheiro de vídeo.
<video src="movie.ogg" controls="controls">
your browser does not support the video tag
</video>
Para experimentarem: http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video
/*****************************************************************/
<canvas> – especifica a criação de gráficos numa página web. Esta é uma tag que vai revolucionar o mundo do HTML, pode ser utilizada em conjunto com javascript para gerar conteúdos dinâmicos, tais como gráficos ou até mesmo jogos. Através de uma API gráfica, o browser irá renderizar imagens 2D dinâmicas que poderão ser utilizadas em jogos, gráficos, etc;
Este exemplo mostra como desenhar um rectangulo vermelho:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas
Outros exemplos do canvas:
-> Interactive canvas gradients - http://html5demos.com/canvas-grad (ao movimentarm-se no site o browser vai mudando de cor). É suportado por: Firefox, Chrome, Safari e Opera
-> Drag files directly into your browser - http://html5demos.com/file-api (arrastem um imagem para cima do rectangulo, e ela aperecerá como background sem necessidade de fazer upload) – Funciona em Firefox mas não funciona em Chrome
/*****************************************************************/
<command> – especifica um comando que o utilizador pode executar.
<menu>
<command type="command">Click Me!</command>
</menu>
Para experimentarem:http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_command
<datalist> – especifica um “autocomplete” em formulários. Em conjunto com um novo tipo de input “list”, é utilizada para fazer caixas de selecção (comboboxes). E assim já não será necessário utilizar a tag select, e já será possivel formatá-la como os designers tanto gostam, sem ter que recorrer ao jquery.
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
Para experimentarem:http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_datalist
<details> – especifica informações adicionais que o utilizador pode visualizar ou esconder sob demanda.
/*****************************************************************/
<details> - This document was written in 2009.</details>
Para experimentarem:http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_details
<embed> – especifica uma aplicação externa com conteúdo interactivo.
<embed src="helloworld.swf" />
Para experimentarem:http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_embed
/*****************************************************************/
<eventsource> – especifica um destino para eventos enviados por um servidor. Tem o src como atributo e o valor é um url.
<event-source src='/some/path' onevent='process(event)'/>
/*****************************************************************/
<figure> – especifica ilustrações, imagens, fotos, associado juntamente com legendas, ou seja, é utilizada para englobar informação a algum conteúdo multimidia, como uma foto, por exemplo. Dentro do figure é colocado uma tag multimidea como o <img> e uma tag <legend> contendo a informação a ser acrescentada, ou outras tags.
<figure>
<h1>WWF</h1>
<p>The World Wildlife Foundation was born in 1961...</p>
</figure>
Para experimentarem:http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_figure
Outro exemplo:
<figure id="figura01">
<legend>Figura 1. Esquema de uma página em HTML 5</legend>
<img src="html5.png" border="0" width="200" height="300" alt="Como fica a estrutura de uma página escrita com os novos elementos do HTML 5" />
</figure>
/*****************************************************************/
<mark> - especifica um texto destacado para fins de referência.
Destaque de partes do texto:
<p>Do not forget to buy <mark>milk</mark> today.</p>
Para experimentarem:http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_mark
/*****************************************************************/
<source> - especifica múltiplos recursos multimidia numa página, tais como video e audio.
/*****************************************************************/
<datagrid> - utilizada para representar árvores, listas ou dados tabulares.
<datagrid>
<ol>
<li> (datagrid row 0) </li>
<li> (datagrid row 1)
<ol style="list-style-type:lower-alpha;">
<li> (datagrid row 1,0) </li>
p; <li> (datagrid row 1,1) </li>
</ol>
</li>
<li> (datagrid row 2) </li>
</ol>
</datagrid>
/*****************************************************************/
<dialog> - junto com as tags
<dialog>
<dt> Michael, you never told me your family knew Johnny Fontane!
<dd> Oh sure, you want to meet him?
<dt> Yeah!
<dd> You know, my father helped Johnny in his career.
<dt> Really? How?
<dd> ...Let's listen to this song.
</dialog>
Sem comentários:
Enviar um comentário