Olá a todos, sejam bem vindos à coluna de Desenvolvimento Web da Cat Geek. Hoje falarei sobre HTML 5 e criaremos um site simples nessa poderosa e revolucionária linguagem.
O HTML (HyperText Markup Language - Linguagem de marcação de hipertexto) é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web.
É baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós – ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. Eles não estão conectados linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguidamente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas.
O HTML5 é a nova versão do HTML. Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final.
O lançamento do HTML5 trouxe mudanças no cenário de desenvolvimento web mundial, e é utilizado por grande número de desenvolvedores para a criação de projetos web. As mudanças na linguagem, começam no cabeçalho das páginas, mais especificamente na escrita do DOCTYPE.
Em HTML, uma página web era criada da seguinte maneira:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titulo do site</title>
</head>
<body>
Conteúdo do site
</body>
</html>
Hoje, uma página web escrita em HTML 5 é escrita assim:
| <!DOCTYPE HTML> |
| <html lang="pt-br"> |
| <head> |
| <meta charset="UTF-8"> |
| <link rel="stylesheet" type="text/css" href="estilo.css"> |
| <title></title> |
| </head> |
| <body> |
| </body> |
| </html> |
Não existe mais a necessidade de todo o texto da declaração:<!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">. A declaração DOCTYPE é suficiente.
Existem dois tipos de links no HTML: a tag <a>, que leva os usuários à outro conteúdo, e a tag <link>, usadas para fontes externas que serão usadas dentro do documento.
<link rel="stylesheet" type="text/css" href="estilo.css">
No exemplo acima, a tag link importa a folha de estilos CSS para a pagina web, desta maneira, quando os elementos que forem estilizados no arquivo "estilo.css", veremos o resultado no nosso documento.
O conteúdo da página
Existem regras básicas que foram herdadas do HTML. Elas são responsáveis por mostrar onde os elementos podem ou não estar.
Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos:
a, strong, em, img, input, abbr, span.
Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias estão a seguir. Manteremos os nomes das categorias em inglês para que haja um melhor entendimento:
• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content
• Interactive content
O HTML5 trouxe uma série de elementos que nos ajudam a definir setores principais no documento HTML. Com a ajuda destes elementos, podemos por exemplo diferenciar diretamente pelo código HTML5 áreas importantes do site como sidebar, rodapé e cabeçalho. Conseguimos seccionar a área de conteúdo indicando onde exatamente é o texto do artigo.
Com base na apostila de HTML 5 da W3C, seguem abaixo uma lista com os novos elementos e atributos incluídos no HTML 5:
section
| section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.
A tag
|
nav
| nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no Rodapé e também para compor o menu principal do site.
O elemento
|
article
| article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.
O elemento
|
aside
| aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.
O elemento
|
hgroup
|
Este elemento consiste em um grupo de títulos. Ele serve para agrupar elementos de título de H1 até H6 quando eles tem múltiplos níveis como título com subtítulos e etc.
|
header
| header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos.
O elemento
|
footer
| footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.
O elemento
|
time
|
Este elemento serve para marcar parte do texto que exibe um horário ou uma data precisa no calendário gregoriano.
|
Agora que vimos uma pequena introdução em HTML 5, vamos então criar um site simples na poderosa linguagem. usaremos como base o artigo do Tutotialzine.
Crie um novo arquivo em seu editor de HTML preferido - Dreamweaver, Notepad, Bloco de notas.
O código a seguir faz parte do cabeçalho do documento:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial de HTML 5 - Cat Geek</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!– Internet Explorer HTML5 enabling code: –>
<!–[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js%22%3E%3C/script>
<style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style>
</head>
Abaixo, insira a tag <body>, para dar início a parte que o usuário pode visualizar:
<body>
<section id="page">
O conteúdo da tag <header>
<header>
<hgroup>
<h1>Tutorial de HTML 5 no Cat Geek</h1>
<h3><a href="http://catgeek.blogspot.com.br/"> Desenvolvimento Web por Rodrigo Zandonadi</a></h3>
</hgroup>
<nav class="clear">
<ul>
<li><a href="#article1">Introdução ao Wordpress</a></li>
<li><a href="#article2">Quando é a hora de invistir em meu blog</a></li>
</ul>
</nav>
</header>
O conteúdo do site, fica dentro da tag <section>
<section id="articles">
<!– Article 1 (artigo 1) –>
<div></div>
<article id="article1">
<h2>Sweet Tabs</h2>
<div></div>
<div>
<figure>
<a href="http://tutorialzine.com/2010/01/sweet-tabs-jquery-ajax-css/%22%3E%3Cimg src="http://tutorialzine.com/img/featured/633.jpg" width="620″ height="340″ /></a>
</figure>
<p>Este é um tutorial sobre HTML 5 do Cat Geek.</p>
<p>O que eu vou ganhar investindo em meu blog? <br>
A primeira coisa é, acessos, dinheiro dependendo de quantos visitantes ou leitores fixos você tenha, autores, colunistas entre outros..</p>
<p>O que eu faço para ganhar mais leitores e visitantes?<br>
Hospedagem, um bom domínio é essencial para um blog/site fazer sucesso, é vendo e pensando nisso que a Cat Geek também irá colocar um domínio, básico, mas vamos..</p>
<p>Preciso gastar muito para receber muito?<br>
Talvez, se quer ganhar muito precisa investir mais ou menos..</p>
<p>Como?<br>
Coloque um domínio, após isso, ponha anúncios, feche parcerias com outros blogs famosos e vá criando assim um ciclo lucrativo.</p>
</article>
<!– Article 1 end –>
<section id="articles"> <!– A new section with the articles –>
<!– Article 2 start –>
<div></div> <!– Dividing line –>
<article id="article2"> <!– The new article tag. The id is supplied so it can be scrolled into view. –>
<h2>Halftone Navigation Menu</h2>
<div></div>
<div>
<figure> <!– The figure tag marks data (usually an image) that is part of the article –>
<a href="http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/%22%3E%3Cimg src="http://tutorialzine.com/img/featured/610.jpg" width="620″ height="340″ /></a>
</figure>
<a href="#">Topo</a>
</div>
</article>
<!– Article 2 end –>
Pra finalizar, a tag <footer>
<footer>
<div class="line"></div>
<p>Copyright 2010 – Cat Geek</p>
<a href="#" class="up">Go UP</a>
<a href="http://tutorialzine.com/2010/02/html5-css3-website-template/" class="by">Template by Tutorialzine</a>
</footer>
</section> <!– Fecha a #page section, abaixo do body –>
<!– JavaScript Includes –>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js%22%3E%3C/script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
Agora vamos fazer nossa folha de estilos. Abra seu editor, e crie um arquivo stlyes.css. Nele insira:
@charset "utf-8";
/* CSS Document */
header,footer,
article,section,
hgroup,nav,
figure{
display:block;
}
body{
font-size:0.825em;
color:#fcfcfc;
background-color:#355664;
font-family:Arial, Helvetica, sans-serif;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
/* Headings */
h1,h2,h3{
font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
text-shadow:0 1px 1px black;
}
h1{
/* Texto do logo*/
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}
h3{
/* Texto do slogan*/
font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
font-size:2em;
font-weight:normal;
margin:0 0 1em;
}
h2{
font-size:2.2em;
font-weight:normal;
letter-spacing:0.01em;
text-transform:uppercase;
}
p{
line-height:1.5em;
padding-bottom:1em;
}
.line{
height:1px;
background-color:#24404c;
border-bottom:1px solid #416371;
margin:1em 0;
overflow:hidden;
}
article .line{
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}
footer .line{
margin:2em 0;
}
nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;
border:1px solid #FCFCFC;
-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}
.clear:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
nav ul li{
display:inline;
}
nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}
nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}
nav, article, nav ul li a,figure{
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#page{
width:960px;
margin:0 auto;
position:relative;
}
article{
background-color:#213E4A;
margin:3em 0;
padding:20px;
text-shadow:0 2px 0 black;
}
figure{
border:3px solid #142830;
float:right;
height:300px;
margin-left:15px;
overflow:hidden;
width:500px;
}
figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}
figure img{
margin-left:-60px;
}
footer{
margin-bottom:30px;
text-align:center;
font-size:0.825em;
}
footer p{
margin-bottom:-2.5em;
position:relative;
}
footer a,footer a:visited{
color:#cccccc;
background-color:#213e4a;
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}
footer a:hover{
text-decoration:none;
background-color:#142830;
}
footer a.by{
float:left;
}
footer a.up{
float:right;
}
Se você não entende de CSS, e muito menos de CSS 3, no próximo artigo irei falar um pouco sobre isso, e explicar um pouco do estilo usado acima.
Agora, crie um novo documento e salve-o como script.js. É o nosso arquivo JavaScript. Insira nele o código abaixo e salve.
// JavaScript Document
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
$('nav a,footer a.up').click(function(e){
// If a link has been clicked, scroll the page to the link's hash target:
$.scrollTo( this.hash || 0, 1500);
e.preventDefault();
});
});
Pronto, você já tem seu primeiro site em HTML 5. Agora, pode trocar as imagens e textos, e mudar os aspectos que acha melhor. Lembrando que o objetivo desse tutorial, é apenas introduzir você à linguagem. Veremos mais funcionalidades do HTML 5 nos próximos artigos.
Abraçõs, e até a próxima semana.
+ comentários + 3 comentários
Ual, no básico, na introdução, eu achei muita informação! Imagina no resto! Muito bom o artigo!
Obrigado pelo comentário Eduardo. O HTML 5 tem muita coisa pra explorar. Fique atento nos próximos artigos.
Abraços.
Ótimo post Rodrigo, Temos que conseguir comentário de um público diferente ok? Por exemplo, novas pessoas uehuehuehue
Postar um comentário