ICORI
Instalação e configuração de computadores em redes locais e Internet
Pedro Amaro – [email protected]
Tag <div>
A tag <div> define uma divisão ou secção
num documento HTML.
É suportada por todos os principais
browsers.
Tag <div>
Exemplo:
- Divisão em 3 secções
- Cada secção tem
configuração própria
(neste caso, o atributo
background-color)
Tag <div>
Identificar as divisões:
Tag <div>
Identificar as divisões:
Tag <div>
Utilização da tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Div - Exemplo</title>
<style type="text/css">
#vermelho
{
background-color: #ff0000;
}
CSS
</style>
</head>
<body>
<div id="vermelho">Vermelho</div>
</body>
</html>
HTML
Tag <div>
Definição da formatação:
<style type="text/css">
#texto
{
background-color: #000080;
color: #ffffff;
width: 200px;
border: solid 2px black;
}
</style>
Tag <div>
Definição da divisão:
<body>
<div id=“texto">
<p> Bla bla bla bla bla </p>
</div>
</body>
Tag <div>
<html>
<head><title>Div - Exemplo 1</title>
<style type="text/css">
#vermelho
{
background-color: #ff0000;
}
#azul
{
background-color: #0000ff;
}
#verde
{
background-color: #00ff00;
}
</style>
</head>
<body>
<div id="vermelho">vermelho</div>
<div id="azul">azul</div>
<div id="verde">verde</div>
</body>
</html>
Tag <div>
<html>
<head><title>Div - Exemplo 1</title>
<style type="text/css">
(…)
</style>
</head>
<body>
<div id="vermelho">vermelho</div>
<div id="azul">azul</div>
<div id="verde">verde</div>
<div id="azul">azul</div>
<div id="verde">verde</div>
<div id="vermelho">vermelho</div>
</body>
</html>
Importante: cada div pode ser usado várias vezes na página
Tag <div>
<html>
<head><title>Div - Exemplo 2</title>
<style type="text/css">
#sidebar
{
background-color: #ff0000;
float: left;
width: 20%;
}
#main
{
background-color: #00ff00;
margin-left: 20%;
}
</style>
</head>
<body>
<div id="sidebar">sidebar</div>
<div id="main">principal</div>
</body>
</html>
Tag <div>
Objectivo:
Tag <div>
pagecontainer:
#pagecontainer
{
width: 800px;
margin: auto;
}
Tag <div>
Sidebar e content:
#sidebar
{
background-color: #ffffff;
float: left;
width: 200px;
border: dashed 2px blue;
}
#content
{
background-color: #cccccc;
margin-left: 250px;
}
Tag <div>
footer:
#footer
{
background-color: #000000;
color: #ffffff;
clear: both;
text-align: right;
padding: 2px;
}
Tag <div>
HTML:
<div id="pagecontainer">
<div id="sidebar">
(...)
</div>
<div id="content">
<p>(...)</p>
</div>
<div id="footer"> (...) t</div>
</div>
Tag <div>
Exercício:
Criar uma página semelhante à exemplificada, recorrendo a divs. Deve ter-se em atenção os seguintes elementos:
- A página está contida num container com 800 pixels de largura;
- Possui um header, uma sidebar, uma área de conteúdo e um footer;
- O header possui padding de 10px;
- O texto está na font Calibri, com tamanhos que variam entre os 16 e 12 pixels;
- Existe uma margem de 10 pixels entre os vários elementos;
- A largura da sidebar é 200 pixels;
- A área de conteúdo dista 50 pixels da sidebar.