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?
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.css
e 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">© 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 <section>
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.
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.
O curso HTML5 e CSS3 parte 4: avançando no CSS possui 116 minutos de vídeos, em um total de 49 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:
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas