Lição sem título

Aula 4

Criando uma seção escola

Página web: utilizando
HTML e CSS para construir
um site criativo

Unidade

O que vamos
aprender?

Aplicar o efeito degradê
utilizando a proprieda-
de background-image.

Conhecer diferentes pro-
priedades de alinhamento
e posicionamento de
elementos.

Adicionar e customizar uma
imagem na seção Escola.

Clique e acompanhe a aula na Alura

2ª edição

3

Construindo a seção escola

Na aula anterior, o cabeçalho da primeira seção da página foi
finalizado. Vamos prosseguir na criação dos demais elementos dessa
seção. Vamos observar quais são eles por meio da imagem a seguir:

Podemos notar que a seção possui uma imagem posicio-
nada à direita da tela, um título e um texto. Vamos cons-
truir esses elementos.

4

No VSCode, devemos abrir os arquivos index.html e style.html. No arqui-
vo index.html, criaremos uma seção adicionando a tag <section>.Ela
divide o código HTML em partes, para melhorar sua organização.

</header>
<section>

</section>

</body>

Adicione a tag <h2> para criar o título da página. Essa tag insere na pá-
gina um texto com letras de tamanho um pouco menor que a tag <h1>.

<section>
<h2>Sobre a Escola</h2>

O texto da seção possui dois parágrafos. Então, adicione duas vezes a tag
<p>, que cria parágrafos na página.

<h2>Sobre a Escola</h2>
<p></p>
<p></p>

5

Por fim, crie classes para estes elementos para que possamos estilizá-
-los usando o CSS.

<sectionclass=”escola”>
<h2class=”escola-titulo”>Sobre a Escola</h2>
<pclass=”escola-texto-um”></p>
<pclass=”escola-texto-dois”></p>

</section>

Para adicionar o texto às tags de parágrafo, vamos até o protótipo no Fig-
ma. Clique duas vezes em cima do texto para selecioná-lo:

Clique com o botão direito do mouse; na janela que abrir, cli-
que em Copy, que significa “copiar”.

6

Então, cole o texto copiado no arquivo index.html e reorganize as tags

<p> para que cada parágrafo esteja posicionamento corretamente.

<pclass=”escola-texto-um”>A escola Alura foi fundada em 2010 com o objetivo de
ensinar
Pensamento Computacional através da Programação. </p>
<pclass=”escola-texto-dois”>A turma mais famosa é a Segunda Série A. Uma turma
diversa
e engajada, as vezes, um pouco bagunceira, mas
que entrega excelentes resultados!</p>

Ao carregarmos a página, podemos observar que os textos foram adicio-
nados.

7

Para a imagem, vá até o site https://storyset.com/ e escolha uma imagem
de que você goste para adicionar na seção. Para escolher uma categoria
de imagens, digite a palavra desejada em inglês. Sugestão: school, que
significa “escola”, em inglês.

8

Selecionada a imagem, você pode mudar sua paleta de cores clicando
em change color, que significa “alterar a cor”.

E então, clicar para baixar a imagem utilizando o botão Download PNG.
Salve-a na sua pasta img, do projeto no VSCode.

9

Ao baixarmos a imagem, podemos observar que a seguinte janela é
exibida:

Retorne ao projeto no VSCode mas não feche essa janela.
Agora, vamos adicionar essa imagem no arquivo index.html utilizando a
tag <img> logo após o fechamento do último parágrafo.

<imgsrc=”./img/Formula-bro.png”alt =”professora no quadro”>

10

Ao carregarmos a página podemos observar que a imagem foi adicio-
nada. Mas ela está muito grande.

Para alterar o tamanho da imagem, no arquivo index.html crie uma clas-
se chamada escola-imagem e defina uma nova largura para a imagem
adicionada.

<imgclass=”escola-imagem”src=

E então, adicione à propriedade width o valor que desejar; como
sugestão, adicione 25%.

.escola-imagem{
width:25%;
}

11

Ao carregar a imagem, a largura foi alterada.

Adicionada a imagem, devemos alterar a cor de fundo da página e a fon-
te do texto. Vamos começar pela cor de fundo.
Perceba que a cor de fundo da seção possui um degradê, ou seja, a se-
ção possui mais de um tom que se dilui ao longo da página. Para fazer
esse efeito, utilizamos a propriedade background-image com o valorli-
near-gradient na classe escola.

.escola {
background-image: linear-gradient();
}

12

A cor que vamos usar é a mesma do cabeçalho, mas você pode escolher
a cor que preferir.

.escola {
background-image: linear-gradient(#383D58);
}

Além da cor que inicia, é necessário adicionar uma cor que finaliza o efei-
to. Escolha a que preferir. Um ponto importante é que as cores devem
ser divididas por vírgula.

.escola {
background-image: linear-gradient(#383D58,#00c0eb);
}

Ao carregarmos a página, podemos observar que o efeito foi implemen-
tado.

13

Para alterar a cor da fonte dos textos dessa seção, adicione a proprieda-
decolor e a defina como white.

background-image: linear-gradient(#383D58,#00c0eb);
color: white;

Ao carregarmos a página, a cor da fonte foi alterada.

Temos todos os elementos necessários em nossa seção, agora precisa-
mos organizá-los para que se pareçam com o protótipo do Figma.
Vamos adicionar a propriedade displaye o valorflex à classe escola,
pois ela está agrupando todos os elementos dessa seção.

color: white;
display:flex;

14

Ao fazermos isto, os elementos serão exibidos tal como na imagem a se-
guir. O título está “grudado” na margem e os parágrafos do texto estão
lado a lado.

15

Isso acontece porque a propriedade displayestá sendo atribuída em to-
dos os elementos, sem diferenciar parágrafos e imagens. Para que pos-
samos, dentro de uma seção, obter comportamentos diferentes entre os
elementos, precisamos adicionar uma tag chamada <div>. Essa tag cria
uma divisão capaz de ser personalizada. Vamos adicionar essa tag logo
após a abertura da tag <section>; fecharemos essa tag antes a abertu-
ra da tag <img>:

<sectionclass=”escola”>
<divclass=”escola-conteudo”>
<h2class=”escola-titulo”>Sobre a Escola</h2>
<pclass=”escola-texto-um”>A escola Alura foi fundada em 2010 com o objetivo de
ensinar>
Pensamento Computacional através da Programação. </p>
<pclass=”escola-texto-dois”>A turma mais famosa é a Segunda Série A. Uma turma
diversa
e engajada, as vezes, um pouco bagunceira, mas que entrega excelentes
resultados!</p>
</div>

16

Perceba que a classe escola-conteudo foi adicionada a essa divisão
<div>.
Ao carregarmos a página, podemos observar que os textos estão agru-
pados um abaixo do outro.

17

É necessário alterar o espaço que o texto deve ocupar na tela. Vamos al-
terar a largura do conteúdo para 35% da página.

.escola-conteudo{
width: 35%;
}

Ao carregarmos a página, podemos visualizar o seguinte resultado:

18

A próxima propriedade que deve ser adicionada será o ajuste do conteú-
do para que ele fique centralizado da mesma forma que o protótipo do
Figma. Para isso, adicione à classe escola a propriedade justify-con-
tente o valor center.

display:flex;
justify-content: center;

Com isso, o texto está centralizado em relação à disposição dos elemen-
tos.

19

Para centralizar o texto em relação à altura da página, devemos adicio-
nar a propriedade align-items com o valor center.

justify-content: center;
align-items: center;

Ao carregar a página, o posicionamento foi atualizado:

20

Agora que os elementos foram posicionados, vamos acrescentar os es-
paçamentos a eles, começando pela classe escola. Adicione o espaça-
mento interno de24px para cima e para baixo e 0 para as laterais.

align-items: center;
padding: 24px0;

Adicione o mesmo espaçamento à classe escola-titulo.

.escola-titulo {
padding: 24px0;
}

Ao carregarmos a página, podemos observar que os espaçamentos fo-
ram adicionados:

A seção Escola ainda não terminou, mas já está bem próxima do que deve
ser reproduzido no protótipo. Um lembrete importante é sempre salvar
as alterações feitas utilizando o atalho CTRL+S para salvar seu progresso.

21

Desafio

Durante esta aula você aplicou um efeito degradê ao fundo da página,
além do valor linear-gradient; existem outras customizações e forma-
tos que você pode fazer brincando com as cores do projeto. Para o de-
safio de hoje, você deverá realizar uma breve pesquisa sobre os tipos de
efeitos que é possível adicionar nas cores do projeto. Feita a pesquisa,
tente aplicar um efeito diferente em seu projeto.

Avalie este material acessando o link: https://forms.gle/EcEZdj59zGS9QTwY9