Aprendendo a programar com HTML5

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.

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.
A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.
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.

logo w3c versão html5
W3C HTML5

Tutorial

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>
<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>
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:
  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>

<header>

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>

<nav>

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>
<section>

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>
<article>

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>
<aside>

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>
<footer>

Esta etiqueta é um pouco semelhante a header, só que esta representa o rodapé, por isso vai no final da página. Exemplo:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Footer em HTML5</title>
</head>
<body>
<footer>
<h4>Artigo criado por: Kaduh Santos</h4>
</footer>
</body>
</html>
Como podemos ver os nomes das etiquetas/tags são, por vezes, um tanto óbvia, sobre a sua utilização.
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>
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Aprendendo a programar com HTML5
Aprendendo a programar com HTML5
Introdução ao HTML5: Aprendendo a programá-lo
http://4.bp.blogspot.com/-YBLH1XVeikg/UQ8c66e8ehI/AAAAAAAAAvc/uhbPL9qTjIk/s1600/HTML5_Logo_256.png
http://4.bp.blogspot.com/-YBLH1XVeikg/UQ8c66e8ehI/AAAAAAAAAvc/uhbPL9qTjIk/s72-c/HTML5_Logo_256.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2013/02/introducao-ao-html5.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2013/02/introducao-ao-html5.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar