Nas aulas passadas eu dei uma explicação rápida sobre algumas mudanças do xhtml para o HTML5 que são importantes para fazer uma migração a nova tecnologia. Isso não significa necessariamente que o HTML5 seja apenas aqueles detalhes pois ele é muito maior que isso como o DND, trabalhar com sessões e etc...
Isso eu vou explicando com o tempo pois o motivo dessa aula é montar um site simples mas já utilizando novas tecnologias.
Na aula passada eu montei uma estrutura de conteúdo para nosso site e nessa aula vamos finalmente começar a dar vida a ele. Mãos a OBRA...
Antes nosso css estava assim (para o body):
body{
background-color:#2F4F4F;
}
Vamos deixar ele com uma imagem de fundo então vai ficar assim:body{
background-image:url('fundo.png');
background-repeat:repeat-x;
}
Explicação rápida:background-image estamos chamando a imagem de fundo, e no repeat estamos dizendo como será a repetição nesse caso repete apenas no eixo x (matemática se lembra?)
Só um detalhe, vc sabe pq matemática tem acento no má? Pois ele é proparoxitona e toda proparoxitona tem acento... Oo
Voltando ao css perceba que chamos uma imagem de fundo com o nome "fundo.png" no meu caso é um filete que no fim vai fazer muita diferença, vou colocar ele aqui para vc copiar:
Coloquei ele várias vezes assim vc não se perde... De uma olhada no seu site e sinta a diferença.Agora vamos para o html editar nosso código
No corpo mudamos para:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>CRIANDO UM SITE EM HTML5 COM PV</title>
</head>
<body>
<div class="estrutura">
<header class="topo">
<img src="logo.png"></img>
<b>SITE COM HTML5</b>
<div class="menu">
<a href="">PRINCIPAL</a> |
<a href="">SOBRE</a> |
<a href="">SITE</a> |
<a href="">CONTATO</a> |
<a href="">AULAS</a> |
</div>
</header>
CONTEUDO DO MEU SITE
<footer>
RODAPE 2011
</footer>
</div>
</body>
</html>
e o CSS pegamos o menu alteramos e adicionamos ações:
.menu{
height:50px;
text-align:center;
font-size:22px;
}
.menu a{
text-decoration:none;
color:#000;
}
.menu a:hover{
text-decoration:none;
color:#F23;
}
Esqueci de dizer que adicionei uma imagem no topo inserindo a classe topo nele
O site começa a ficar com cara, caso tenha interesse em saber como anda ficando faça o download aqui
Por hoje é só, vai dar trabalho explicar tudo mas vamos com calma que chegamos la.
Olá,
ResponderExcluirGostaria de saber se as aulas de Site com HTML5,css e jquery acabara na terceira aula mesmo? Aguardo resposta.