Passo 4 - Inserir e Estilizar Conteúdos

Terminada a etapa de posicionamento, pode-se começar a inserção de conteúdo na página. Lembre-se de que o conteúdo deve ser marcado adequadamente de acordo com sua semântica, ou seja, usar as tags h1-h6 para títulos, p para textos, ul para listas e assim sucessivamente.

Inseridos os textos, o layout deverá ser testado novamente em diferentes navegadores.

A Figura 4 (lado direito) ilustra o layout definido anteriormente com o conteúdo da página Clara Camarão, ilustrada na Figura 4 (lado esquerdo), que você viu nas aulas sobre HTML (foram retiradas as propriedades referentes à altura dos containers para a adequação deles ao tamanho do conteúdo).

Se você comparar com a primeira versão dessa página, irá perceber que embora inacabada, ela é mais atrativa que a página da Figura 4 (lado esquerdo). E ainda falta estilizar cada um dos elementos que aparecem nela, tais como títulos, parágrafos, menus.

Observe também que o conteúdo do container contents fica ao redor do menu, e não como uma coluna no documento inteiro. Se você desejar criar colunas realmente separadas para contents e menu, será necessário aplicar as propriedades float:left; e width:450px; em contents, e também usar a propriedade clear:both; em footer.

Então, mãos à obra! Estilizando alguns elementos e inserindo aqueles menus definidos na aula passada nesse documento, pode-se ter o seguinte resultado:

See the Pen Autoria Web - Aula 08 - Figura 05 by Materiais (@materiais) on CodePen.