Dando Vida a sua página Web – Parte 3

Dando Vida a sua página Web – Parte 3

Uma página não vive apenas de conteúdo. Sem um bom layout e uma boa estilização, podemos transformar um excelente texto em uma experiência chata e monôtona que pode fazer as pessoas nunca o lerem. Vamos começar dando vida a sua página web.

Antes de tudo: As Imagens

Tiraremos isso da frente logo, está me incomodando essas imagens quebradas. Coloquei o banner e o logo que usarei em uma pasta do Google Drive que você pode acessar aqui.

Coloque as imagens na pasta onde está seu arquivo tutorial.html e atualize a página. Seu logo ainda deve estar quebrado, isso porque essa logo que enviei para você está no formato PNG. Troque a extensão ‘.jpg’ para ‘.png’ no atributo src das tags img que mostram o logo.

Falarei mais sobre isso em outra oportunidade, mas normalmente é uma boa evitar imagens em PNG em seu site pois elas costumam ter um tamanho de arquivo muito grande. Neste caso, por ser uma imagem pequena, não veremos muitos problemas.

E… Agora as imagens devem estar grandes até demais:

Vamos começar corringindo o tamanho delas com o CSS e para isso precisamos criar o arquivo e avisar ao nosso html que esse arquivo existe e que o usaremos.

Iniciando o seu CSS

No Visual Studio Code, você pode ir no menu superior em “Arquivo > Novo Arquivo…” (ou “File > New File…”). Ele abrirá um arquivo sem nada, salve em “File > Save”, escolha a mesma pasta de seu arquivo HTML e escolha o nome do arquivo e o tipo de arquivo. Para escolher o Tipo de Arquivo, vá na caixa de seleção logo abaixo do campo para colocar o nome e escolha a opção “CSS (*.css)”. O nome pode ser como quiser, chamarei o meu de main.css por ser o nosso CSS principal (main, em inglês).

A sintaxe, ou seja, o jeito de escrever CSS é bem diferentes do HTML. Aqui não temos tags que precisam ser abertas e fechadas. Vamos por partes.

Por exemplo, se quisermos colocar uma cor vermelha no texto do site, deveriamos escrever:

color: red;

O que fizemos ali é parecido com os atributos de uma tag HTML. Dizemos qual estilo queremos aplicar, neste caso o color que significa Cor e após os dois pontos, dizemos qual o valor desse estilo, que é red que significa Vermelho. E no fim da instrução, colocamos um ponto e vírgula

Mas para que o navegador saiba que isso é um estilo ele precisa estrar dentro de chaves, assim:

{
  color: red;
}

Os espaçamentos e as quebras de linhas não são obrigatórios, mas assim como no HTML, é importante que identemos nosso código corretamente para facilitar sua leitura.

Ok, temos um bloco com um estilo. Mas além disso eu também quero que o texto esteja em negrito. Para isso precisamos apenas adicionar a nova instrução após o ponto e vírgula:

{
  color: red;
  font-weight: bold;
}

font-weight é o “Peso” da Fonte e bold é se referindo a Negrito.

Isso ainda não é suficiente porque ainda não falamos onde esses estilos serão aplicado, sendo assim, esse bloco não fará efeito algum em nossa página. Para remediar isso, precisamos passar o nome da tag do elemento que isso será aplicado antes do bloco de estilos. Por exemplo, a tag p:

p {
  color: red;
  font-weight: bold;
}

Agora sim, vai fazer efeito

Salve o arquivo e agora volte ao seu HTML, precisar avisa-lo que queremos usar esse arquivo e isso será feito com a tag link. Ela recebe 2 atributos: rel e href.

rel significa Relationship, ou seja, indicaremos nele qual é o Relacionamento entre o HTML e o arquivo que estamos ligando pela tag Link. Como queremos uma Folha de Estilos, o valor do atributo rel será stylesheet. Nós já vimos o que significa e como funciona o atributo href, só repetir o processo. Sua tag deve ficar parecida com esta abaxio e deve ser posicionada uma linha abaixo da tag title que usamos na postagem passada.

<link rel="stylesheet" href="main.css">  

Vá para o seu navegador onde o HTML está aberto e recarregue a página. Todo o texto abaixo do título deve estar vermelho. E se você criar uma nova tag p e colocar um novo texto ela também estará em vermelho. Para mostrar isso vou quebrar aquele parágrafo que temos em dois.

<p>
  Ipsum laborum ullamco proident ut dolor magna eu cupidatat pariatur Lorem
  deserunt tempor amet. Irure sint occaecat elit eu. Ut anim laboris ut
  nostrud do duis nulla mollit ea occaecat labore aliqua.
  <br />
  <strong>Nisi culpa incididunt non proident enim proident</strong> aute
  enim exercitation sint consectetur cillum. Voluptate commodo minim do
  mollit et occaecat reprehenderit et. Occaecat mollit nisi tempor dolore
  exercitation dolor occaecat.
</p>

Onde está a tag br iremos substituir pela tag p fechando e abrindo novamente:

<p>
  Ipsum laborum ullamco proident ut dolor magna eu cupidatat pariatur Lorem
  deserunt tempor amet. Irure sint occaecat elit eu. Ut anim laboris ut
  nostrud do duis nulla mollit ea occaecat labore aliqua.
</p>
<p>
  <strong>Nisi culpa incididunt non proident enim proident</strong> aute
  enim exercitation sint consectetur cillum. Voluptate commodo minim do
  mollit et occaecat reprehenderit et. Occaecat mollit nisi tempor dolore
  exercitation dolor occaecat.
</p>

E se intenção for na verdade atingir apenas um dos parágrafos? Para isso precisaremos de uma coisa chamada Classe. Elas são atibutos opcionais que podemos colocar em todas as tags dentro do nosso body. Ela serve para identificar um elemento e nos ajuda aplicar um mesmo estilo em vários elementos que queremos que tenha a mesma aparência.

Ao invés de dizermos que queremos aplicar aquele bloco de estilos acima para todas as tags p diremos que queremos aplicar a todas as tags que tenham uma certa classe.

Colocarei a classe “negrito” no primeiro parágrafo. O nome é da sua escolha. O nome do atributo é class. Se quisermos colocar mais de uma classe é só ir adicionando dentro do class separando por espaços como “negrito fontegrande”.

Como espaços indiciam novas classes, uma classe com mais de uma palavra não pode seprará-las por espaços. “fontegrande” deveria ser separado por underline (Snake Case), hífen (Kebab Case) ou colocando o início de cada nova palavra em maiúsculo (Camel Case). Ou seja, “fontegrande” poderia ser fonte_grande, fonte-grande ou fonteGrande.

Usarei o Came Casel, logo nesse exemplo seria fonteGrande.

Nossa tag p ficaria assim:

<p class="negrito">
  Ipsum laborum ullamco proident ut dolor magna eu cupidatat pariatur Lorem
  deserunt tempor amet. Irure sint occaecat elit eu. Ut anim laboris ut
  nostrud do duis nulla mollit ea occaecat labore aliqua.
</p>

E para avisar o CSS que queremos vincular aqueles estilos a esta classe precisamos trocar o p pelo nome da classe iniciado por um ponto final.

.negrito {
  color: red;
  font-weight: bold;
}

Farei outra mudança no HMTL. Em vez de um produto, colocarei uma lista de produtos. Repetindo a estruturas de da tag ul com as tags li dentro:

<ul>
  <li>
    <img src="produto-1.jpg" alt="Imagem do Produto 1" />
    <h3>Descolado</h3>
    <p>Smartphone perfeito para você se destacar nas festas!</p>
  </li>

  <li>
    <img src="produto-2.jpg" alt="Imagem do Produto 2" />
    <h3>Empresarial</h3>
    <p>
      Tenha acesso a todas as suas planilhas e documentos na palma de sua
      mão
    </p>
  </li>

  <li>
    <img src="produto-3.jpg" alt="Imagem do Produto 3" />
    <h3>Casual</h3>
    <p>Sempre ao seu lado. Feito especial para o seu dia-a-dia</p>
  </li>
</ul>

E as imagens desses produtos eu escolhi dentro do Unsplash buscando por Telefones.

Tudo está no lugar que devia estar, só falta estilizar corretamente. Vamos lá:

Voltando em nosso arquivo CSS vamos deletar aquela estilização que colocamos e começaremos pelo banner.

Diminuirei o tamanho dele e centralizarei a imagem. Um meio de cumprir esse objetivo é definindo uma Largura e uma Margem igual em cada uma das laterais.

Margens são usada para criar um espaço entre o elemento em si e tudo que estiver em volta. A sintaxe é uma das três opções abaixo:

margin: 0px 0px 0px 0px;
margin: 0px 0px;
margin: 0px;

Na primeira você define um valor em Pixels para cada um dos lados sendo, em ordem, Topo, Direita, Inferior, Esquerda.

Na segunda você define as margens verticais (Topo e Inferior) e as margens horizontais (Esquerda e Direita), também em ordem.

E por fim, você define um valor só para todos os lados.

Para centralizar um elemento, precisamos que as margens esquerda e direita tenham o mesmo valor, poderiamos fazer esse cálculo na mão, mas podemos usar o valor auto.

Sendo assim:

margin: 0px auto;

Auto definirá automaticamente os dois valores para sempre serem iguais. E só surte efeito horizontalmente, logo, podemos escrever desse jeito e escolher os valores verticais como precisarmos, que por enquanto estão zerados.

O próximo estilo é o display. Ele tem diversos valores que mudam o jeito que o elemento se comporta em relação a página em si. Colocando o valor como Block faremos com que o elemento ocupe um tamanho da largura total da tela. Se escolhermos uma largura menor, visulamente o elemento terá a medida que definirmos, mas todo o restante da linha também será ocupado sem efeito visual. Sendo assim, o próximo elemento aparecerá sempre embaixo e nunca ao lado.

display: block;

E por fim, por agora, colocaremos uma largura de 80% da largura (width, em inglês) da tela. Para isso:

width: 80%;

Essa porcentagem diz respeito ao elemento pai, e como nesse caso o elemento pai é a tag body que normalmente preenche a tela toda, podemos confiar que conseguiremos o que desejamos. Isso também serve para quando alguém diminuir o tamanho da janela do navegador.

Agora colocarei todos esses estilos dentro do seletor da classe banner e adicionarei a mesmo dentro do atributo class da imagem do Banner.

.banner {
  width: 80%;
  display: block;
  margin: 0px auto;
}

Já podemos ver que o Banner está centralizado e ocupando o espaço desejado.

Próximo ponto é o cabeçalho. Colocarei o Logo e o Menu de Navegação dentro de uma tag chamada div. Ela representa uma Divisão de Conteúdo e por padrão não tem qualquer efeito visual, nada deve mudar quando recarregarmos a página. A diferença aqui é que a tag div já vem definida por padrão com display: block;.

Coloque uma classe chamada cabecalho. O CSS não reconhece acentos e outros caracteres especiais, evite usá-los. Isso inclui a cedilha de Cabeçalho.

<div class="cabecalho">
  <img src="./logo.png" alt="Logo da Empresa X" />

  <ul>
    <li><a href="tutorial.html">Página Inicial</a></li>
    <li><a href="sobre.html">Sobre Nós</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul>
</div>

Vamos estilizar um pouco essa classe. Primeiro colocaremos uma divisória visual, para isso utilizaremos a propriedade Borda e aplicaremos apenas para o lado Inferior. E para isso usaremos o estilo border-bottom. Essa borda terá tamanho de 1 pixel e será do tipo solid, que significa que ela é uma borda com cor cheia sem tracejados. E por fim colocaremos a cor #28282821 (que é a cor de código #282828 com valor 21 em opacidade).

Esse código para a cor se chama Código Hexadecimal ou Código Hex. Para ele leva 6 caracteres para definir uma Cor e os 2 últimos são opcionais e definem a Opacidade. Para te auxiliar nisso, eu recomendo usar o site Html Colors.

Nosso css final fica assim:

border-bottom: 1px solid #28282821;

Queremos também que nada fique grudado nele nunca, e é para isso que serve a margem. Mas queremos isso apenas na parte inferior, de modo que o cabeçalho sempre ocupe toda a largura e não se distancie de nada que possa ficar acima.

Quando precisamos definir apenas uma direção para a margem, podemos fazer o mesmo que fizemos com a borda e colocar o margin-bottom.

Essa palavra após a margem ou a borda pode ser: bottom para o lado Inferior, top para o Topo, right para a Direita e left para a Esquerda.

margin-bottom: 30px;

.cabecalho {
  margin-bottom: 30px;
  border-bottom: 1px solid #28282821;
}

O próximo passo vai ser diminuir o tamanho do Logo. Colocarei a classe “logo” e uma largura de 160 pixels, logo:

.logo {
  width: 160px;
}

Farei o mesmo processo para as imagens dos produtos, em cada tag li eu colocarei a classe cartao com largura de 30% e as imagens dentro terão largura de 80%.

Perceba que o tamanho da tag li aqui somente correspondem a 30% largura da tela pois não definimos largura para a tag ul e portanto ela está ocupando 100% da tela. Já os 80% da imagem, aqui não se referem a largura total da página e sim ao próprio tag li pai. Por exemplo, se os 30% do li forem equivalentes a 100 pixels, a imagem dentro terá 80 pixels.

Para selecionar a tag filha de um elemento, podemos colocar o seu seletor (que nesse caso é a classe cartao), um espaço e o que está dentro do elemento anterior que nós queremos selecionar. Por exemplo, .cartao img para selecionar todas as tags img de dentro.

.cartao {
  width: 30%;
}

.cartao img {
  width: 80%;
}

Mudaremos um pouco isso num futuro próximo quando falarei de especificidade dentro do CSS.

Ficamos com um site desse jeito até o momento:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meu Primeiro Site</title>

    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div class="cabecalho">
      <img src="logo.png" class="logo" alt="Logo da Empresa X" />

      <ul>
        <li><a href="tutorial.html">Página Inicial</a></li>
        <li><a href="sobre.html">Sobre Nós</a></li>
        <li><a href="contato.html">Contato</a></li>
      </ul>
    </div>

    <img src="banner.jpg" class="banner" alt="Banner da Empresa X" />

    <h1>Nossos Produtos:</h1>

    <ul>
      <li class="cartao">
        <img src="produto-1.jpg" alt="Imagem do Produto 1" />
        <h3>Descolado</h3>
        <p>Smartphone perfeito para você se destacar nas festas!</p>
      </li>

      <li class="cartao">
        <img src="produto-2.jpg" alt="Imagem do Produto 2" />
        <h3>Empresarial</h3>
        <p>
          Tenha acesso a todas as suas planilhas e documentos na palma de sua
          mão
        </p>
      </li>

      <li class="cartao">
        <img src="produto-3.jpg" alt="Imagem do Produto 3" />
        <h3>Casual</h3>
        <p>Sempre ao seu lado. Feito especial para o seu dia-a-dia</p>
      </li>
    </ul>
  </body>
</html>

.banner {
  width: 80%;
  display: block;
  margin: 0px auto;
}

.cabecalho {
  margin-bottom: 30px;
  border-bottom: 1px solid #28282821;
}

.logo {
  width: 160px;
}

.cartao {
  width: 30%;
}

.cartao img {
  width: 80%;
}

Isso é tudo pessoal

As coisas já estão começando a tomar forma, mas existem muitas explicações que precisam ser feitas antes de crescermos cada vez mais o nosso arquivo CSS e continuarmos nossa estilização

Continuaremos o assunto no próxmo post desta série: Desembaraçando a Web: Personalizando seu site (Em Breve)