Páginas web: estrutura e estilo — Informática, 7–10

Uma página web tem conteúdo e instruções sobre o seu aspeto. O HTML dá-lhe estrutura; o CSS muda a sua aparência.

Ideia

Pensa numa página web como um pequeno documento feito para um navegador. O HTML diz o que é cada parte, como um título, um parágrafo, uma imagem ou uma ligação. O CSS diz como essas partes devem parecer, por exemplo a cor, o tamanho e o espaço. Os dois trabalhos colaboram, mas não são iguais.

Porque existe

Uma página precisa de uma estrutura clara para que um navegador, um leitor de ecrã e uma pessoa compreendam as suas partes. Também precisa de uma forma separada de mudar o aspeto sem reescrever cada frase. Manter a estrutura e o estilo separados torna as páginas mais fáceis de atualizar, partilhar e adaptar a diferentes ecrãs.

Exemplo resolvido

Imagina que queres uma página sobre o teu gato. Passo 1: coloca as palavras «A minha gata Luna» num título HTML. Passo 2: acrescenta um parágrafo: «A Luna dorme ao sol.» Passo 3: adiciona uma imagem e uma ligação. Passo 4: usa CSS para pôr o título azul-escuro e aumentar o parágrafo. O conteúdo ficou igual; só mudou a apresentação.

Uma armadilha comum

Um erro compreensível é usar muitos espaços ou linhas vazias repetidas para empurrar algo para o sítio certo. Pode parecer correto no teu ecrã, mas outro ecrã pode ter uma largura diferente e tudo muda de lugar. As regras de disposição do CSS são melhores porque descrevem a relação entre as partes, em vez de esconderem o problema com espaços.

Fora da escola

Sempre que lês uma página de notícias, uma receita, uma loja ou um site de um clube, um navegador organiza conteúdo estruturado e dá-lhe estilo para o teu ecrã. Podes usar as mesmas ideias para criar uma página sobre um passatempo, um projeto da turma ou um evento local. Uma boa estrutura também ajuda quem usa tecnologia de apoio.

Continua a explorar

Outras línguas

A carregar o MyLeoNes™…