lembrando - blog da prof andrea garcia€¦ · qual a diferença entre colocar div e essas novas...
TRANSCRIPT
Prof. Andrea Garcia
Novas tags no HTML
Lembrando:
Formato de diagramação antiga e nova no HTML5:
Antigo Novo
Prof. Andrea Garcia
Prof. Andrea Garcia
Prof. Andrea Garcia
Qual a diferença entre colocar div e essas novas tags do HTML5?
Visualmente e funcionalmente, nenhuma. A única diferença é o nome da tag e o significado que elas carregam. E isso é bastante importante. Dizemos que a função do HTML é fazer a marcação do conteúdo da página, representar sua estrutura da informação. Não é papel do HTML, por exemplo, cuidar da apresentação final e dos detalhes de design - isso é papel do CSS. O HTML precisa ser claro e limpo, focado em marcar o conteúdo.
Comparativo na programação:
Prof. Andrea Garcia
Prof. Andrea Garcia
Projeto - Exemplo:
Vamos desenvolver uma estrutura de site utilizando HTML5 + CSS através das
novas tags.
Passo 1:
O Layout Web foi dividido em 4 partes horizontais definidas como: header
(cabeçalho), main (principal) e footer (rodapé). Aqui Container é uma div pai.
Código HTML
<div id="container">
<div id="header">1 Header</div>
<div id="nav">2 Nav</div>
<div id="main">3 Main</div>
<div id="footer">4 Footer</div>
</div>
Prof. Andrea Garcia
Código CSS
#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
height:30px;
}
#main
{
overflow:auto;
}
#footer
{
height:40px;
}
Prof. Andrea Garcia
Passo 2:
A div main (part content) foi dividida em duas partes verticais main_left (parte
article) e main_right (parte sidebar).
<div id="main">
<div id="main_left">Article</div>
<div id="main_right">Sidebar</div>
</div>
Código CSS
#main
{
overflow:auto;
}
#main_left
{
float:left;
width:600px;
}
#main_right
{
float:left;
width:300px;
}
Prof. Andrea Garcia
Passo 3:
Agora trabalhando com uma lista desordenada <ul> tag.
<div id="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>
</div>
Código CSS:
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
Prof. Andrea Garcia
Home Page
Esta página poderia estar com múltiplos títulos de artigos linkados e o leitor
poderia rapidamente encontrar mais informações.
Página dos Artigos (Article)
Aqui o título do artigo é o mais importante nível, então o título poderia ser a
tag <h1> .
Prof. Andrea Garcia
Código Final
<!DOCTYPE html> <head> <title>9lessons CSS demo</title> <style type="text/css"> #container { width:900px; margin:0 auto; overflow:auto; } #header { height:90px; border:solid 2px #006600 } #nav { overflow:auto; border:solid 2px #006699; margin-top:3px; } #nav ul { list-style:none; height:30px; padding:0px; margin:0px; } #nav ul li { float:left; margin:10px; } #main { overflow:auto; margin-top:3px; } #main_left { float:left; width:600px; background-color:#f2f2f2;
Prof. Andrea Garcia
min-height:400px; } #main_right { float:left; width:300px; background-color:#ffffcc; min-height:400px; } #footer { height:40px; border:solid 2px #FF9900; } </style> </head> <body> <div id="container"> <div id="header"> <img src="9lessonsnew.png" style="margin-top:20px"/> </div> <div id="nav"> <ul> <li>HOME</li> <li>PROJECT</li> <li>TUTORIALS</li> <li>FACEBOOK</li> <li>JQUERY</li> </ul> </div> <div id="main"> <div id="main_left">Article</div> <div id="main_right">Sidebar</div> </div> <div id="footer">Footer</div> </div> </body> </html>