Tutorial HTML 5: Como criar uma página em HTML 5 + CSS3 + jQuery!
* header – Envolve o cabeçalho da página;
* footer – Envolve o rodapé da página;
* section –
* article – Separa os artigos individuais do resto da página;
* nav – Contém o menu de navegação;
* figure – Geralmente contém uma imagem usada como ilustração para o artigo.
Estes são utilizados exatamente como você poderia usar divs normal. Com a diferença de que essas marcas organizar sua página semanticamente. Em outras palavras, a ideia é organizar os espaços do site para facilitar o reconhecimento de cada parte pelos motores de busca, gerando mais visibilidade para a sua página e consequente mais visitantes.
No entanto, existem algumas implicações em usar HTML5 hoje. Uma das mais notáveis é a família de navegadores IE, que não suporta essas marcas (que pode ser corrigido com um simples arquivo de inclusão JavaScrip). É por isso que você deve basear sua decisão de se mudar para HTML5 em audiência do seu site.
template.html – Head
<!DOCTYPE html> <!– The new doctype –>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Coding A CSS3 & HTML5 One Page Template | Tutorialzine demo</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"></script><style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style><![endif]–>
</head>
Você pode observar o novo <!DOCTYPE html> na linha um, que informa ao navegador que a página é criada com o padrão HTML5, também é muito mais curto e mais fácil de lembrar que doctypes mais antigos.
Depois de especificar a codificação do documento e do título, passamos a incluir um arquivo JS especial que permitirá que o Internet Explorer (qualquer versão) processe tags HTML5 corretamente. Novamente, isso significa que se um visitante está usando o IE e tem JavaScript desabilitado, a página vai ser vista toda desarrumada.
template.html – Body
<body>
<section id="page"> <!– Defining the #page section with the section tag –>
<header> <!– Defining the header section of the page with the appropriate tag –>
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!– The nav link semantically marks your main site navigation –>
<ul>
<li><a href="#article1">Photoshoot</a></li>
<li><a href="#article2">Sweet Tabs</a></li>
<li><a href="#article3">Navigation Menu</a></li>
</ul>
</nav>
</header>
Nesta parte do código já utilizamos as novas tags, que dividem a página em seções separadas semânticanticamente. O #page section define uma largura de 960px na folha de estilo (largura padrão, principalmente levando-se em conta telas de computadores mais antigos). Depois vem a tag de cabeçalho e de navegação.
Observe os atributos do link (href), o símbolo # corresponde ao id do artigo que ele indica.
template.html – Article
<section id="articles"> <!– A new section with the articles –>
<!– Article 1 start –>
<div class="line"></div> <!– Dividing line –>
<article id="article1"> <!– The new article tag. The id is supplied so it can be scrolled into view. –>
<h2>Photoshoot Effect</h2><div class="line"></div>
<div class="articleBody clear">
<figure> <!– The figure tag marks data (usually an image) that is part of the article –>
<a href="http://tutorialzine.com/2010/02/photo-shoot-css-jquery/"><img src="http://tutorialzine.com/img/featured/641.jpg" width="620" height="340" /></a>
</figure><p>In this tutorial, we are creating a photo shoot effect with our just-released PhotoShoot jQuery plug-in. With it you can convert a regular div on the page into a photo shooting stage simulating a camera-like feel.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus quam quis nibh fringilla sit amet consectetur lectus malesuada. Sed nec libero erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi nisi, rhoncus ut vestibulum ac, sollicitudin quis lorem. Duis felis dui, vulputate nec adipiscing nec, interdum vel tortor. Sed gravida, erat nec rutrum tincidunt, metus mauris imperdiet nunc, et elementum tortor nunc at eros. Donec malesuada congue molestie. Suspendisse potenti. Vestibulum cursus congue sem et feugiat. Morbi quis elit odio. </p>
</div>
</article><!– Article 1 end –>
A marcação acima é compartilhada entre todos os artigos. A primeira é a linha divisória. Após isso, temos o novo artigo (tag <article>), com um ID único, que é utilizado pela navegação de rolar a página.
Dentro temos o título do artigo, dois parágrafos e a nova tag figure, o que marca o uso de imagens no artigo.
template.html – Footer
<footer> <!– Marking the footer section –>
<div class="line"></div>
<p>Copyright 2010 – YourSite.com</p> <!– Change the copyright notice –>
<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> <!– Closing the #page section –>
<!– JavaScript Includes –>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
A tag footer faz exatamente o que você espera que ela faça. Na parte inferior da página estão o resto do JavaScript, o que aumenta a biblioteca jQuery e o do scrollTo plug-in, que vamos usar nas próximas etapas.
CSS 3
Como estamos utilizando HTML5, temos que tomar algumas medidas adicionais com o styling. As marcas que esta nova versão do HTML introduz ainda não são fornecidos com um estilo padrão. Esta é, no entanto, facilmente corrigido com um par de linhas de código CSS:
CSS 3 – parte 1
header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}body{
/* Setting the default text color, size, page background and a font stack: */
font-size:0.825em;
color:#fcfcfc;
background-color:#355664;
font-family:Arial, Helvetica, sans-serif;
}/* Hyperlink Styles: */
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{
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}h3{
/* The slogan text */
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{
/* The dividing line: */
height:1px;
background-color:#24404c;
border-bottom:1px solid #416371;
margin:1em 0;
overflow:hidden;
}article .line{
/* The dividing line inside of the article is darker: */
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;
}/* The clearfix hack to clear the floats: */
.clear:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}/* The navigation styling: */
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{
/* Applying CSS3 rounded corners: */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
Nós basicamente precisa definir o mostrar valor das novas etiquetas para block, Como você pode ver a partir do primeiro par de linhas. Após isso, o estilo pode usá-los como gostaríamos de fazer com divs regular.
CSS 3– parte 2
/* Article styles: */
#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 styling: */
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;
}
Na segunda parte do código, nós aplicamos um estilo mais detalhada dos elementos. A largura para a cada seção da página, uma propriedade hover para o figura e estilos para os links dentro do rodapé. Há também alguns estilos que não estão incluídos aqui, mas você pode vê-los no arquivo styles.css. O layout está organizado na maneira como ilustra a figura abaixo:
jQuery
Para melhorar o modelo, vamos criar um efeito de rolagem suave quando o visitante clicar em um link de navegação, usando o plug-in scrollTo jQuery que foi incluído na página anterior. Para fazer funcionar só precisamos de um loop nos links na barra de navegação (o link e UP no rodapé) e atribuir um evento onclick que irá acionar a função $. SrollTo () , que é definida pelo plug-in.
script.js
$(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();
});});
Finalizando isto, nossa página esta terminada:
Tutorial Original: Tutorialzine Tradução de Jomar Bellini
Tweet This
Share on Facebook
Digg This
Save to delicious
Stumble it
RSS Feed
7 Comentários