ICORI Instalação e configuração de computadores em redes locais e Internet Pedro Amaro –

Apresentação em tema: "ICORI Instalação e configuração de computadores em redes locais e Internet Pedro Amaro –"— Transcrição da apresentação:

1 ICORI Instalação e configuração de computadores em redes locais e Internet Pedro Amaro – pamaro@gmail.com

2 Tag A tag define uma divisão ou secção num documento HTML. É suportada por todos os principais browsers.

3 Tag Exemplo: -Divisão em 3 secções -Cada secção tem configuração própria (neste caso, o atributo background-color)

4 Tag Identificar as divisões:

5 Tag Identificar as divisões:

6 Utilização da tag: Div - Exemplo #vermelho { background-color: #ff0000; } Vermelho Tag CSS HTML

7 Definição da formatação: #texto { background-color: #000080; color: #ffffff; width: 200px; border: solid 2px black; } Tag

8 Definição da divisão: Bla bla bla bla bla Tag

9 Div - Exemplo 1 #vermelho { background-color: #ff0000; } #azul { background-color: #0000ff; } #verde { background-color: #00ff00; } vermelho azul verde

10 Tag Div - Exemplo 1 (…) vermelho azul verde azul verde vermelho Importante: cada div pode ser usado várias vezes na página

11 Tag Div - Exemplo 2 #sidebar { background-color: #ff0000; float: left; width: 20%; } #main { background-color: #00ff00; margin-left: 20%; } sidebar principal

12 Tag Objectivo:

13 Tag pagecontainer: #pagecontainer { width: 800px; margin: auto; }

14 Tag Sidebar e content: #sidebar { background-color: #ffffff; float: left; width: 200px; border: dashed 2px blue; } #content { background-color: #cccccc; margin-left: 250px; }

15 Tag footer: #footer { background-color: #000000; color: #ffffff; clear: both; text-align: right; padding: 2px; }

16 Tag HTML: (...) (...) (...) t

17 Tag 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.