Guilherme Müller | Freelance Front-end Developer http://guilhermemuller.com.br/blog Artigos e tutoriais sobre Front-end Design, HTML, CSS e Javascript Tue, 07 Feb 2012 20:03:53 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Uma Página HTML5 Básica http://guilhermemuller.com.br/blog/2012/01/12/uma-pagina-html5-basica/ http://guilhermemuller.com.br/blog/2012/01/12/uma-pagina-html5-basica/#comments Thu, 12 Jan 2012 11:31:03 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=660 Com o HTML5, muito ficou simplificado na hora de iniciar um documento HTML. Neste post iremos analisar o mínimo de código que precisamos para um documento HTML5.

Todo o código aqui mostrado pode ser utilizado hoje, pois devido à natureza “tolerante” dos navegadores, não irá causar nenhum problema de compatibilidade (e é código HTML5 válido). Neste documento também estarei utilizando a sintaxe do HTML, e não do XHTML, portanto as tags que auto-fecham não terão a barra “/” no final (mas nada impede de utilizar a sintaxe XHTML).

O que iremos incluir no documento:

  1. DOCTYPE (para que o navegador reconheça que deve funcionar no “standards mode”)
  2. Tag html com o atributo lang, para identificar a língua na qual o conteúdo do documento será escrito
  3. Tag head, com as informações de cabeçalho não visíveis da página
  4. Tag meta especificando a codificação da página (charset)
  5. Tag title com o título da página
  6. Tag body com o conteúdo da página

Vamos começar com o doctype:

[html]<!doctype html>[/html]

Bem simples, não? Este doctype até dá para decorar, ao contrário dos que utilizávamos antes. Perceba que não há uma versão do HTML especificada no doctype, o que o torna um doctype geral para qualquer versão do HTML. A sua única função é “ligar” o modo de padrões web (standards mode) dos navegadores.

Segundo, abrimos a tag html:

[html]<html lang=”pt-BR”>[/html]

Perceba o atributo lang, diferente do que era feito no XHTML para identificar a língua.

Em seguida, a tag head:

[html]<head>[/html]

Dentro, a tag meta especificando a codificação (também consideravelmente mais simples que antes):

[html]<meta charset=”UTF-8″>[/html]

Em seguida, a tag title que já conhecemos bem:

[html]<title>Uma Página HTML5 Básica</title>[/html]

Por fim, a tag body, com o conteúdo da página:

[html]
<body>
<!– conteúdo da página –>
</body>
[/html]

Abaixo, o código completo:

[html]
<!doctype html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8″>
<title>Uma Página HTML5 Básica</title>
</head>
<body>
<!– conteúdo da página –>
</body>
</html>
[/html]

Inserindo CSS e Javascript

Para finalizar, o código para inserir CSS e Javascript também fica um pouco mais simples, não precisando ser especificado o atributo type:

[html]
<script src=”arquivo.js”></script>
<link href=”arquivo.css” rel=”stylesheet”>
[/html]

]]> http://guilhermemuller.com.br/blog/2012/01/12/uma-pagina-html5-basica/feed/ 0 Karas Móveis http://guilhermemuller.com.br/blog/2011/12/16/karas-moveis/ http://guilhermemuller.com.br/blog/2011/12/16/karas-moveis/#comments Fri, 16 Dec 2011 17:15:49 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=712 Criação: Elisangela Martins / Guilherme Müller | Front-end e sistema: Guilherme Müller

]]> http://guilhermemuller.com.br/blog/2011/12/16/karas-moveis/feed/ 0 CEABS http://guilhermemuller.com.br/blog/2011/12/16/ceabs/ http://guilhermemuller.com.br/blog/2011/12/16/ceabs/#comments Fri, 16 Dec 2011 17:14:34 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=710 Criação: Nexo Design | Front-end: Guilherme Müller

 

]]> http://guilhermemuller.com.br/blog/2011/12/16/ceabs/feed/ 0 Anolis Books http://guilhermemuller.com.br/blog/2011/12/16/anolis-books/ http://guilhermemuller.com.br/blog/2011/12/16/anolis-books/#comments Fri, 16 Dec 2011 17:10:29 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=708 Criação: Nexo Design | Front-end e sistema: Guilherme Müller

]]> http://guilhermemuller.com.br/blog/2011/12/16/anolis-books/feed/ 0 Safesoft http://guilhermemuller.com.br/blog/2011/12/16/safesoft/ http://guilhermemuller.com.br/blog/2011/12/16/safesoft/#comments Fri, 16 Dec 2011 17:05:54 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=705 Criação: Área41 Design / Guilherme Müller | Front-end e sistema: Guilherme Müller

]]> http://guilhermemuller.com.br/blog/2011/12/16/safesoft/feed/ 0 Satis Fudge http://guilhermemuller.com.br/blog/2011/12/16/satis-fudge/ http://guilhermemuller.com.br/blog/2011/12/16/satis-fudge/#comments Fri, 16 Dec 2011 17:04:35 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=703 Criação, front-end e programação: Guilherme Müller

]]> http://guilhermemuller.com.br/blog/2011/12/16/satis-fudge/feed/ 0 Berlim Ambientes http://guilhermemuller.com.br/blog/2011/12/16/berlim-ambientes/ http://guilhermemuller.com.br/blog/2011/12/16/berlim-ambientes/#comments Fri, 16 Dec 2011 17:01:28 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=698 Criação: Área41 Design | Front-end e sistema: Guilherme Müller

]]> http://guilhermemuller.com.br/blog/2011/12/16/berlim-ambientes/feed/ 0 2 Party http://guilhermemuller.com.br/blog/2011/12/16/2-party/ http://guilhermemuller.com.br/blog/2011/12/16/2-party/#comments Fri, 16 Dec 2011 17:00:36 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=696 Criação: Giovana Müller | Front-end e sistema: Guilherme Müller

]]> http://guilhermemuller.com.br/blog/2011/12/16/2-party/feed/ 0 Lumicenter http://guilhermemuller.com.br/blog/2011/12/16/lumicenter/ http://guilhermemuller.com.br/blog/2011/12/16/lumicenter/#comments Fri, 16 Dec 2011 16:59:36 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=694 Criação: Nexo Design | Front-end e sistema: Guilherme Müller

]]> http://guilhermemuller.com.br/blog/2011/12/16/lumicenter/feed/ 0 Abalux http://guilhermemuller.com.br/blog/2011/12/16/abalux/ http://guilhermemuller.com.br/blog/2011/12/16/abalux/#comments Fri, 16 Dec 2011 16:58:52 +0000 Guilherme Müller http://guilhermemuller.com.br/blog/?p=692 Criação: Nexo Design | Front-end e sistema: Guilherme Müller

]]> http://guilhermemuller.com.br/blog/2011/12/16/abalux/feed/ 0