Aprendendo a programar com HTML5 | Bloggermin
Jodiel Fabricio fevereiro 04, 2013 Editar este post
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:
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.
Agora, para dizer ao navegador que vamos usar HTML5, iniciamos nosso documento desta forma:
Como podem ver que é apenas uma linha de código muito simples, portanto, a estrutura de uma página web em HTML5 seria:
<!-- Atributo lang = "" é usada para a linguagem (pt-português) -->
<!-- Meta tags, scripts e ... -->
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:
Esta etiqueta, bem como o nome diz, é usada para incluir/delimitar os cabeçalhos. Exemplo:
<!-- Esse título será exibido na janela do navegador -->
<title>Header em HTML5</title>
<!-- A etiqueta/tag h1 é usada para o título principal da página -->
<h1>Titulo de la página</h1>
Esta etiqueta a usamos para delimitar os links que nos permitem navegar pelo site. Exemplo:
<title>Nav em HTML5</title>
<!-- A etiqueta <ul> serve para delimitar listas (li) -->
<!-- A etiqueta <li> serve para delimitar links
Usado somente dentro da etiqueta <ul> -->
<!-- A etiqueta <a> se usa para os links -->
Esta etiqueta é usada para definir as seções de nossa página. Exemplo:
<title>Section em HTML5</title>
<h2>Seção 1</h2>
<!-- A etiqueta <p> usada para
delimitar parágrafos de texto -->
Esta é a seção 1 da página
<h2>Seção 2</h2>
Esta é a seção 2 da página
Nesta etiqueta, conterá o que é importante para a página, como no caso de um blog, os posts. Exemplo:
<title>Article em HTML5</title>
conteúdo do primeiro post...
conteúdo do segundo post...
Esta etiqueta é usada para conter elementos segundários, tais como botões de redes sociais, widgets, publicidade... Exemplo:
<title>Aside em HTML5</title>
Esta etiqueta é um pouco semelhante a header, só que esta representa o rodapé, por isso vai no final da página. Exemplo:
<title>Footer em HTML5</title>
<h4>Artigo criado por: Kaduh Santos</h4>
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.