• Comunicação Visual

terça-feira, 31 de janeiro de 2012

HTML 5 - Introdução e começando pelo começo

HTML5

Quando começar a usar o HTML5? Ontem!!!
Por cautela, muitas vezes demoramos a começar a usar o HTML5. Esperamos que a maioria dos navegadores se adequassem para evitar gastar muito tempo com “recursos” para fazer o site funcionar na maioria dos navegadores. Bom, essa fase já passou. Se você ainda está receoso, perca o medo e se lance, pois o HTML5 veio para ficar e para facilitar.

O que eu preciso saber para começar a usar o HTML5?
Para quem já conhece o HTML, tableless e XHTML vai ser muito fácil. Vou mostrar as duas formas. Comparando o novo com o que se usa comumente.

1- HTML5 - Começando pelo começo.
2- Conhecendo os novos elementos do HTML5
3- Conhecendo os elementos retirados do HTML5
4- Conhecendo os atributos retirados do HTML5
5- Conhecendo os atributos inseridos do HTML5

1- HTML5 - Começando pelo começo.

Vamos criar o nosso primeiro arquivo HTML5.
Exemplo:

<!DOCTYPE html >
<head>
<meta charset="utf-8">
<title>Meu primeiro HTML5</title>
</head>
<body>
<p>Alô mundo!</p>
</body>
</html>


As diferenças começam no head.
Vamos por partes:
1.1)

<!DOCTYPE html >

Eu não disse q o html5 veio para facilitar?! Sim, é só isso mesmo.

Para quem estava acostumado com:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

ou

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


Facilitou, não?!

1.2)

<meta charset="utf-8">


Ainda pode ser usado como antes:
<meta equiv="Content-Type" content="text/html; charset=utf-8">
Mas é melhor usar a forma nova.

Observe que também pode ser usado em maiúsculas e com aspas. As sintaxes abaixo são igualmente válidas:
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta charset="utf-8">
<meta charset="Utf-8">

“o HTMl não é XML”
- O HTML não é “case sensitive”, logo não faz diferença se as letras aparecerem maiúsculas ou minúsculas . O XML é “case sensitive”. No XML <meta charset="UTF-8"> é diferente de <meta charset="utf-8">.

1.3) Outro detalhe, sobre “o HTMl não é XML” é que no HTML não é necessário a barra ao final de elementos vazios.
Ex.:
Use: <br> ao invés de <br />
Use: <hr> ao invés de <hr />
Use: <img src="ex.jpg" alt="exemplo" /> ao invés de <img src="ex.jpg" alt="exemplo" />

Logo, também são sintaxes igualmente válidas:
<meta charset="utf-8">
<meta charset="utf-8">

Se você está acostumado a colocar barra no fim, como nos exemplos acima, não se preocupe. Vai funcionar mesmo com a barra, mas procure ir se acostumando a não coloca-la.

1.4) Use o atributo LANG

<!DOCTYPE html >
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Meu primeiro HTML5</title>
</head>


Lembre-se que você não só pode como deve usar atributo LANG em outras tags para indicar a mudança no idioma do texto. Por exemplo:

<!DOCTYPE html >
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>O amor é lindo!</title>
</head>
<body>
<h1>Eu estou apaixonada!!!! rs</h1>

<span lang="es">Yo te amo</span>


<p lang="fr">Je t'aime</p>


<em lang="it">Io ti amo</em>


<p lang="de">Ich liebe dich</p>
<strong lang="en">I love you.</strong>
<p>Resumindo... O amor é lindo!</p>


</body>
</html>


Amanhã continuamos... É uma série.rs

Nenhum comentário:

Postar um comentário