Ao longo do curso, usaremos diversas imagens que o nosso designer preparou. Nesse ponto, vamos importar todas as imagens dentro do projeto que criamos antes para que possamos usá-las nas páginas.
- Copie a pasta mirror-fashion de dentro da pasta Caelum/43para a área de trabalho de sua máquina.
- Verifique a pasta img, agora cheia de arquivos do design do site. Além desta pasta, teremos as pastas js e css, que ainda não usaremos.
Dentro da pasta mirror-fashion, vamos criar o arquivosobre.html com a estrutura básica contendo o DOCTYPE e as tagshtml, head e body:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sobre a Mirror Fashion</title>
</head>
<body>
</body>
</html>
A página deve ter uma imagem com o logo da empresa, um título e um texto falando sobre ela.
O texto para ser colocado na página está no arquivo sobre.txtdisponível na pasta Caelum/43/textos. São vários parágrafos que devem ser adaptados com o HTML apropriado.
Após copiar o texto do arquivo sobre.txt coloque cada um dos parágrafos dentro de uma tag <p>. Coloque também o títuloHistória dentro de uma tag <h2>.
Use a tag <img> para o logo e a tag <h1> para o título. Seu HTML deve ficar assim, no final:
<img src="img/logo.png">
<h1>A Mirror Fashion</h1>
<p>
A Mirror Fashion é a maior empresa de comércio eletrônico no segmento
de moda em todo o mundo. Fundada em 1932, possui filiais
em 124 países........
</p>
Um texto corrido sem ênfases é difícil de ler. Use negritos e itálicos para destacar partes importantes.
Use a tag <strong> para a ênfase mais forte em negrito, por exemplo para destacar o nome da empresa no texto do primeiro parágrafo:
<p>A <strong>Mirror Fashion</strong> é a maior empresa comércio eletrônico.......</p>
Use também a ênfase com <em> que deixará o texto em itálico. Na parte da História, coloque os nomes das pessoas e da família em<em>.
A página deve ter duas imagens. A primeira apresenta o centro da Mirror Fashion e deve ser inserida após o segundo parágrafo do texto. A outra, é uma imagem da Família Pelho e deve ser colocada após o subtítulo da História.
As imagens podem ser carregadas com a tag <img>, apontando seu caminho. Além disso, no HTML5, podemos usar as tags<figure> e <figcaption> para destacar a imagem e colocar uma legenda em cada uma.
A imagem do centro de distribuição está em img/centro-distribuicao.png:
<figure>
<img src="img/centro-distribuicao.png">
<figcaption>Centro de distribuição da Mirror Fashion</figcaption>
</figure>
A imagem da família é a img/familia-pelho.jpg e deve ser colocada na parte de História:
<figure>
<img src="img/familia-pelho.jpg">
<figcaption>Família Pelho</figcaption>
</figure>
Verifique o resultado no navegador. Devemos já ver o conteúdo e as imagens na sequência, mas sem um design muito interessante.
Nenhum comentário:
Postar um comentário