ICORI Instalação e configuração de computadores em redes locais e Internet Pedro Amaro –...
17
ICORI Instalação e configuração de computadores em redes locais e Internet Pedro Amaro – [email protected]
Transcript of ICORI Instalação e configuração de computadores em redes locais e Internet Pedro Amaro –...
ICORIInstalaçã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:
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;}
</style> </head>
<body><div id="vermelho">Vermelho</div>
</body></html>
Tag <div>
CSS
HTML
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>
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.
