Passo 2 - Criar a Marcação para esses Containers

Os containers são marcados com a tag <div>. Como foi visto na Aula 2 deste curso, a tag <div> serve para agrupar elementos e, juntamente com os atributos id e class, possibilita definir a estrutura de um documento.

Como todos os containers devem ser marcados com a mesma tag <div>, então é necessário nomeá-los diferentemente para que possamos aplicar diferentes estilos a cada um deles. Assim, temos duas opções: criar diferentes classes através do atributo class, ou criar diferentes identificadores através do atributo id.

Usualmente, cada container aparece uma única vez no documento, assim, se este for o caso, você deve usar o atributo id para nomear o container. Caso contrário, você pode nomeá-los usando o atributo class.

Para criar a estrutura definida na Figura 1, devemos iniciar a marcação dos elementos da seguinte maneira: primeiramente identificamos o container mais externo, no exemplo da Figura 1 é o container de nome “container”. Esse será o primeiro elemento <div> a ser definido no (X)HTML e dentro dele definiremos os demais containers identificados no passo anterior. Assim, a definição dos containers é estabelecida de acordo com o mostrado no (X)HTML a seguir.

Observe que para criar um container dentro do outro basta especificá-lo entre as tags <div> do container pai, ou seja, definir elementos <div> hierarquicamente.