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.
Download
