Introdução ao HTML5: Aprendendo a programá-lo
Neste artigo, vamos ver as noções básicas do HTML5, como funciona, para que serve, e o que podemos fazer com ele.
Para começar primeiro vejamos o que é HTML, segundo a Wikipédia:
Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.
Tutorial
Agora, para dizer ao navegador que vamos usar HTML5, iniciamos nosso documento desta forma:
<header>
Esta etiqueta, bem como o nome diz, é usada para incluir/delimitar os cabeçalhos. Exemplo:
<nav>
Esta etiqueta a usamos para delimitar os links que nos permitem navegar pelo site. Exemplo:
<section>
Esta etiqueta é usada para definir as seções de nossa página. Exemplo:
<article>
Nesta etiqueta, conterá o que é importante para a página, como no caso de um blog, os posts. Exemplo:
<aside>
Esta etiqueta é usada para conter elementos segundários, tais como botões de redes sociais, widgets, publicidade... Exemplo:
<footer>
Esta etiqueta é um pouco semelhante a header, só que esta representa o rodapé, por isso vai no final da página. Exemplo:
Para finalizar, crie um arquivo de texto cuja extensão termina em .html (exemplo: page.html) e cole o seguinte código, salve e execute executado em um navegador moderno como o Chrome ou o Firefox.
Para começar primeiro vejamos o que é HTML, segundo a Wikipédia:
Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.
HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.Utilizando seus elementos de linguagem, as Tags, é possível mudar a cor e o tamanho do texto, criar tabelas, adicionar imagens e manipular vários detalhes na formatação. Documentos HTML podem ser interpretados por navegadores.Bem, basicamente o HTML é a linguagem mais popular para criação de páginas web, já que é uma das mais fáceis de aprender e podemos dizer que o HTML5 é apenas a quinta versão dessa linguagem.
A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.
 |
| W3C HTML5 |
Agora, para dizer ao navegador que vamos usar HTML5, iniciamos nosso documento desta forma:
<!DOCTYPE html>Como podem ver que é apenas uma linha de código muito simples, portanto, a estrutura de uma página web em HTML5 seria:
<!DOCTYPE html>Com isso teríamos um site em HTML5, mas sem qualquer conteúdo, além disso, o HTML5 não é apenas essa etiqueta que diz !DOCTYPE, tem muitos mais, vejamos quais são as mais importantes:
<html lang="pt">
<!-- Atributo lang = "" é usada para a linguagem (pt-português) -->
<head>
<!-- Meta tags, scripts e ... -->
</head>
<body>
<!-- Conteúdo da página -->
</body>
</html>
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <footer>
Esta etiqueta, bem como o nome diz, é usada para incluir/delimitar os cabeçalhos. Exemplo:
<!DOCTYPE html>
<html lang="pt">
<head>
<!-- Esse título será exibido na janela do navegador -->
<title>Header em HTML5</title>
</head>
<body>
<header>
<!-- A etiqueta/tag h1 é usada para o título principal da página -->
<h1>Titulo de la página</h1>
</header>
</body>
</html>
Esta etiqueta a usamos para delimitar os links que nos permitem navegar pelo site. Exemplo:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Nav em HTML5</title>
</head>
<body>
<nav>
<!-- A etiqueta <ul> serve para delimitar listas (li) -->
<ul>
<!-- A etiqueta <li> serve para delimitar links
Usado somente dentro da etiqueta <ul> -->
<li>
<!-- A etiqueta <a> se usa para os links -->
<a href="#">Link</a>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</body>
</html>
Esta etiqueta é usada para definir as seções de nossa página. Exemplo:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Section em HTML5</title>
</head>
<body>
<section>
<h2>Seção 1</h2>
<!-- A etiqueta <p> usada para
delimitar parágrafos de texto -->
<p>
Esta é a seção 1 da página
</p>
</section>
<section>
<h2>Seção 2</h2>
<p>
Esta é a seção 2 da página
</p>
</section>
</body>
</html>
Nesta etiqueta, conterá o que é importante para a página, como no caso de um blog, os posts. Exemplo:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Article em HTML5</title>
</head>
<body>
<section>
<article>
<h2>Post 1</h2>
<p>
conteúdo do primeiro post...
</p>
</article>
<article>
<h2>Post 2</h2>
<p>
conteúdo do segundo post...
</p>
</article>
</section>
</body>
</html>
Esta etiqueta é usada para conter elementos segundários, tais como botões de redes sociais, widgets, publicidade... Exemplo:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Aside em HTML5</title>
</head>
<body>
<section>
<aside>
<!-- Buscador -->
</aside>
<aside>
<!-- Redes sociais -->
</aside>
<aside>
<!-- Categorias -->
</aside>
</section>
</body>
</html>
Esta etiqueta é um pouco semelhante a header, só que esta representa o rodapé, por isso vai no final da página. Exemplo:
<!DOCTYPE html>Como podemos ver os nomes das etiquetas/tags são, por vezes, um tanto óbvia, sobre a sua utilização.
<html lang="pt">
<head>
<title>Footer em HTML5</title>
</head>
<body>
<footer>
<h4>Artigo criado por: Kaduh Santos</h4>
</footer>
</body>
</html>
Para finalizar, crie um arquivo de texto cuja extensão termina em .html (exemplo: page.html) e cole o seguinte código, salve e execute executado em um navegador moderno como o Chrome ou o Firefox.
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Página em HTML5</title>
</head>
<body>
<header>
<hgroup>
<h1>Usando etiquetas/tags HTML5</h1>
<h2>embora sem nenhum estilo aplicado...</h2>
</hgroup>
</header>
<section>
<article>
<h3>Testando tags do HTML5</h3>
<p>
Um pequeno texto aqui...
</p>
</article>
<article>
<h3>Página HTML5 sem estilos</h3>
<p>
em outros temas de CSS, veremos como aplicar estilos a uma página
</p>
</article>
</section>
<section>
<aside>
Tag: HTML5
</aside>
</section>
<footer>
Artigo criado por Kaduh Santos<br/>
Bloggermin - Dicas, tutoriais e gadgets para o seu blog do Blogger | All rights reserved
</footer>
</body>
</html>
