HTML5 e CSS3 parte 4: Avançando no CSS

Adaptando a página inicial - Introdução

Boas vindas ao quarto módulo do curso de HTML CSS, sou Pedro Marins e serei instrutor neste curso. Completamos três módulos: no primeiro, elaboramos a página inicial em que criamos toda a apresentação visual da Barbearia Alura; aprendemos trabalhar com texto, imagem, como marcar o texto e transformar todo o conteúdo criado no HTML em uma apresentação agradável visualmente.

No segundo módulo avançamos para a página de página de produto, aprendemos a criar listas, trabalhar com elementos responsivos, discutiremos sobre display line e display block e como se comporta o html e seus espaçamentos.

Já no terceiro módulo, passamos para a página de contato, em que mergulhamos a fundo em como funciona um formulário e uma tabela na internet. Passamos por todos os tipos de campo, como criar uma boa usabilidade, inserir campos obrigatórios e qual a diferença entre um campo de texto, e-mail e telefone.

Neste módulo iremos nos atentar para a home page , que está visualmente inacabada e incompatível com as outras páginas. Modificaremos a fonte, melhoraremos a distribuição do conteúdo, adicionar efeitos de sombra como importar um mapa e um vídeo para o site.

Vamos começar?

Adaptando a página inicial - Refazendo a página inicial

Começaremos a trabalhar para que a página inicial possua um aspecto melhor, mais condizente com a página de produtos. Ao acessarmos produtos.html, copiaremos o reset.csse style.css para index.html.

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">

Com a inserção desse código, as margens da página ficam maiores e os elementos ficam desorganizados, mas trata-se apenas de uma fase do processo e não o resultado final.

O cabeçalho da página inicial é diferente do que temos na página de produtos, portanto copiaremos o cabeçalho de proutos.html e inseriremos em index.html.

<header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>

A página inicial também não possui rodapé, então novamente coletaremos o código de rodapé da página de produto, que deverá ser inserido entes da última <div> em index.html.

<footer>
            <img src="logo-branco.png">
            <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
</footer>

Feito isso, precisamos melhorar a marcação que fizemos na página inicial, que estava muito simples. Sabemos que todo conteúdo precisa ser muito bem dividido e marcado, e para delimitar o conteúdo principal precisamos da tag <main>, semelhante a que temos na página de produto. Dito isso, envolveremos todas as informações principais nesta tag.

<img id="banner" src="banner.jpg">

<main>
            <div class="principal">
                <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

                <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

                <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
            </div>

            <div class="beneficios">
                <h3 class="titulo-centralizado">Benefícios</h3>

                <ul>
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>

                <img src="beneficios.jpg" class="imagembeneficios">
            </div>
</main>

A imagem não foi inclusa dentro da tag, pois ela não faz parte do conteúdo principal, trata-se apenas de uma imagem de exibição e que deve estar em destaque e ocupar toda a extensão da tela no sentindo horizontal.

Em nosso site, temos uma descrição com o título "Sobre a Barbearia Alura". Trata-de se informações que são fechadas em si mesmas, como uma sessão. Em nosso código esse conteúdo está sendo envolvido por uma <div>, mas para casos assim utilizamos a tag <section>.

<section class="principal">
                <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

                <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

                <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</section>

A diferença entre <div> e <section> é que no primeiro caso, trata-se apenas de uma divisão visual. Já no caso da <sectiom> teremos uma divisão por conteúdo complexo, semanticamente homogêneo.

Na parte de benefícios, também possuímos conteúdos fechados em si, neste caso também substituiremos a <div> por <section>.

<section class="beneficios">
                <h3 class="titulo-centralizado">Benefícios</h3>

                <ul>
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>

                <img src="beneficios.jpg" class="imagembeneficios">
            </section>

Ao retornarmos para o navegador, perceberemos as sessões centralizadas, mas ainda resta fazermos ajustes nas imagens, lista de benefícios assim por diante. Faremos esse processo passo a passo, elemento por elemento, de forma que possamos revisar conteúdos que já conhecemos, assim como evoluirmos o projeto.

Teremos que em alguns pontos reescrever o que já foi feito, pois isso é rotineiro para quem trabalha com desenvolvimento, afinal sempre há implementações novas e atualizações. Sempre será necessário melhorar nossos conteúdos, refatorar códigos, realizar manutenções e reparos.

Adaptando a página inicial - Adaptando o CSS

Temos o HTML, mas resta criarmos o CSS de cada um dos elementos. Em nossa página inicial temos o banner que criamos o id para ele. Contudo, aprendemos que o identificador não é necessário neste caso.

<img id="banner" src="banner.jpg"> 

Substituiremos o identificador por uma classe. No universo HTML e CSS, ao falarmos de estilo, usamos uma classe, quando falamos de comportamento, usamos o identificador. A força da classe não é tão grande, então ela pode ser sobrescrita e seu estilo alterado, por isso é importante em CSS sempre utilizarmos classes, assim criamos um padrão em nosso código, o que é fundamental.

<img class="banner" src="banner.jpg">

Em style.css criaremos o banner. É importante que documentemos nosso código para que ele se torne compreensível. Em CSS, utilizase /* para demarcar a linha de comentário, ela não será interpretada pelo navegador.

/*css da página inicial*/
.banner {
    width:100%;
}

Ao acessarmos o navegador, verificaremos que a imagem já o ocupa o espaço total da tela, como havíamos planejado. Agora, trabalharemos na parte de "sobre" da barbearia Alura. Em nosso HTML index.html teremos esse conteúdo marcado pela classe principal, já o título será marcado pela classe titulo-centralizado.

<section class="principal">
                <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

                <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

                <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</section>

É importante dizer que que a classe titulo-centralizado não possui um bom nome, afinal sempre que criamos uma classe do CSS é importante que ela seja específica e ao mesmo tempo o mais genérica possível. Quando temos um nome como "titulo centralizado", estamos imprimindo um comportamento, então se quiséssemos alinhar o título à esquerda, teríamos de modifcar o nome da classe, ou criar uma nova.

Portanto, alteraremos o nome da classe para titulo-principal, e em style.css faremos as especificações de estilo. As medidas proporcionais no CSS são um assunto crucial no mento de definir escalas, tamanho de fonte e assim por diante. Até agora em nosso projeto utilizamos pixel e percentual, no caso do percentual ela se trata de uma media proporcional, como notamos ao definir que a imagem do banner deveria o ocupar 100% de largura em relação a página, se quiséssemos que o banner ocupasse metade da largura da página, bastaria escrever 50%.

Se quisermos que a fonte de titulo-principal seja o dobro da fonte padrão, independe do tamanho dessa fonte padrão, utilizamos a medida em, a media proporcional para pixels. Se quisermos duas vezes o tamanho base (15 pixels), basta escrever 2em.

Incluiremos uma margem de 0 0 1em. É sempre interessante inserir um espaçamento que seja proporcional ao tamanho da fonte, o que facilita a leitura do usuário.

.titulo-principal {
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
}

Temos a classe principal p que envolve os parágrafos. então em style.css configuraremos uma margem de 0 0 1em, proporcional ao tamanho da fonte.

.principal p {
    margin: 0 0 1em;
}

Toda a vez que tenhámos a tag strong o peso do texto esteja em negrito e a tag em indicará que o estilo da fonte seja em itálico.

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

Na sessão de "Benefícios", também substituiremos titulo-centralizado por titulo-principal, e então o estilo que definimos em style.css será aplicado.

<section class="beneficios">
                <h3 class="titulo-principal">Benefícios</h3>

                <ul>
                    <li class="itens">Atendimento aos Clientes</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais Qualificados</li>
                </ul>

                <img src="beneficios.jpg" class="imagembeneficios">
</section>

Para finalizar aula, regularemos o tamanho de imagembeneficios

.imagembeneficios {
    width: 60%
}

Desse modo a imagem não fica tão distorcida. Nas próximas aulas inseriremos a imagem da sessão "Sobre a Barbearia Alura", em que o texto engloba essa imagem. Trata-se de uma técnica de CSS que ainda não aprendemos.

Sobre o curso HTML5 e CSS3 parte 4: Avançando no CSS

O curso HTML5 e CSS3 parte 4: Avançando no CSS possui 114 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Adaptando a página inicial
• Conteúdo externo
• Melhorando o CSS
• Selecionando qualquer coisa
• Opacidade e sombra
• Design responsivo