Construindo a Seção Empresa do Website
Agora chegou a hora de construirmos a página "Empresa" do site. Para isso, apenas duplicamos o arquivo "index.html" e o renomeamos como "empresa.html". Também podemos aproveitar para mudar o título na tag title, deixar o link "Empresa" do menu como ativo e retirar o conteúdo da Home que será substituído pelo conteúdo desta nova seção:
<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Empresa - Site da Empresa</title>
<link href="css/estilos.css" rel="stylesheet">
</head>
<body>
<div id="site">
<div id="cabecalho">
<div id="menu-principal">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a class="ativo" href="empresa.html">Empresa</a>
</li>
<li>
<a href="servicos.html">Serviços</a>
</li>
<li>
<a href="contato.html">Contato</a>
</li>
</ul>
</div>
</div>
<div id="conteudo">
<div id="conteudo-principal">
<!-- conteúdo da seção Empresa aqui -->
</div>
<div id="conteudo-secundario">
<!-- conteúdo da seção Empresa aqui -->
</div>
</div>
<div id="rodape">
<p id="telefone-email">
contato@exemplo.com.br
<br>
<span class="ddd">41</span> 5555-5555
</p>
<p id="endereco">
Rua do Endereço, 123, Bairro
<br>
CEP 80000-000
<br>
Curitiba - PR
</p>
<small id="copyright">
© Empresa Ltda. Todos os Direitos Reservados.
</small>
</div>
</div>
</body>
</html>
O link "Empresa" no menu já deve estar funcionando, desde que o arquivo esteja na mesma pasta que a "index.html". Nos exemplos aqui do curso, a não ser que especificado o contrário, os links não funcionarão devido à estrutura de pastas do site (mas haverão exemplos navegáveis do website mais para frente).
No quesito texto, temos uma estrutura bem simples nesta seção. Consultando o layout, vemos que há um título seguido de um parágrafo de texto, seguido de um subtítulo e um parágrafo de texto e, por fim, seguido de mais um subtítulo e uma lista de itens. A tradução para tags HTML é até um pouco óbvia neste caso, quando analisamos e descrevemos o conteúdo desta forma.
Portanto, iremos usar, para o título principal da página, uma tag h1. Os dois subtítulos têm o mesmo nível de hierarquia, ou seja, são dois subtítulos do título principal. Por isso, para os dois iremos usar h2. Para os parágrafos, a tag p. Para a lista, como esta não é uma lista numerada e não possui uma ordem definida, usaremos a lista não ordenada ul com seus itens de lista li:
<div id="conteudo-principal">
<h1>Empresa</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada eros lorem, nec commodo justo.
Duis semper feugiat turpis, sed commodo nisi semper et. Maecenas et elit leo. Duis posuere elementum nulla vitae tempor. Ut ut quam non odio dapibus facilisis.
</p>
<h2>Missão</h2>
<p>
Curabitur dapibus porta laoreet. Proin venenatis, sapien a scelerisque cursus, tortor enim vestibulum velit, quis dictum ipsum justo eget purus. Duis vestibulum pharetra scelerisque.
Aenean feugiat, nunc tristique fermentum venenatis, urna turpis mattis turpis, non aliquet elit metus et metus. Vivamus sagittis nulla at leo vestibulum ac bibendum nulla tincidunt.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam mi leo, pharetra non tincidunt in, elementum nec erat.
</p>
<h2>Valores</h2>
<ul>
<li>Morbi porttitor risus tortor, sit amet faucibus arcu.</li>
<li>Pellentesque eget libero libero, in hendrerit magna.</li>
<li>Etiam condimentum sapien id mi imperdiet auctor.</li>
<li>Curabitur hendrerit imperdiet mollis.</li>
</ul>
</div>O código CSS que definimos na lição anterior já cuidará da estilização do texto de acordo com padrões do site. Essa é a vantagem de ter um arquivo CSS externo: um arquivo apenas governará a apresentação visual do site inteiro!
O conteúdo secundário desta página é uma imagem com uma legenda. Veremos como marcar e estilizar este conteúdo na próxima unidade.