Aula 2

WEB DESIGN
AULA 2
Prof. Matias Peruyera

CONVERSA INICIAL
Depois de compreender o contexto histórico e o funcionamento da web,

chegou a hora de começar a praticar códigos. Nesta aula, vamos abordar o
básico das linguagens HTML e CSS, para aprender a estruturar um arquivo
HTML e determinar seus estilos, primeiro pela parte tipográfica e, depois,
preparando um arquivo para o layout. Esta aula está dividida nos seguintes
temas:
• Introdução ao HTML;
• Introdução ao CSS;
• Tipografia usando CSS;
• Separando o conteúdo do HTML;
• Formatando os elementos.
CONTEXTUALIZANDO
Várias pessoas que trabalham com web design não trabalham

diretamente com códigos, por terem à disposição alguém que cuida dessa parte.
No entanto, é importante saber como esse código funciona, suas possibilidades
e limitações, para poder projetar sites e outros produtos digitais de uma maneira
criativa, mas conhecendo as limitações do meio.
TEMA 1 – INTRODUÇÃO AO HTML
Vamos começar relembrando a estrutura básica de um arquivo HTML,

que vimos em momento anterior de nossos estudos. Copie esse código em um
arquivo de texto novo e salve com o nome index.html, que é o nome padrão para
homepages. É com base nele que vamos trabalhar. Mantenha esse arquivo
aberto ao mesmo tempo em um editor de texto e em um navegador.
2
<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>
Como você deve lembrar, esse código não apresentava nenhum resultado
no navegador. Vamos colocar algum conteúdo nele. Que tal começar a fazer um
site de receitas? Além de deliciosas, as receitas têm vários elementos textuais
diferentes, permitindo usar vários recursos de HTML e CSS. Vamos passar uma.
Você pode copiar e colar dentro do body. Aproveite para deletar o comentário.
Bolo de cenoura
Que tal um bolo de cenoura bem gostoso? O segredo é bater tudo no
liquidificador, menos a farinha. Receita ideal para um café da tarde
com jeito caseiro.
Ingredientes
Massa
1/2 xícara (chá) de óleo
3 cenouras médias raladas
4 ovos
2 xícaras (chá) de açúcar
2 e 1/2 xícaras (chá) de farinha de trigo
1 colher (sopa) de fermento em pó
Cobertura
3 colheres (sopa) de chocolate em pó
1 colher (sopa) de manteiga
1 xícara (chá) de açúcar
1 xícara (chá) de leite
Modo de preparo
Massa
No liquidificador, bata a cenoura, os ovos e o óleo no até ficar
homogêneo.
Acrescente o açúcar e bata por 5 minutos.
Despeje a mistura em uma tigela e acrescente a farinha. Misture à mão
ou com batedeira.
Incorpore o fermento e misture lentamente.
Preaqueça o forno. Asse a 180°C por aproximadamente 40 minutos. Use um
palito para ver se está pronto.
Cobertura
Em uma panela pequena, misture a manteiga, o chocolate em pó, o açúcar
e o leite.
Leve a fogo baixo até ficar com uma consistência cremosa. Despeje por
cima do bolo.
Salve (no editor de texto) e recarregue o arquivo (no navegador). Você

deverá ver algo como a Figura 1.
3
Figura 1 – Site sem tags HTML
É evidente que ainda não há nada que indique o que é cada elemento
desse arquivo. O navegador sequer leva em consideração as quebras de linha
do arquivo. Então, tudo precisa estar entre tags.
Comece pelos títulos e subtítulos. O nome do prato deve ser o título
principal. Depois, veja que a receita se divide em duas partes, que, por sua vez,
também se dividem em partes. Coloque as tags corretas (dica: h1, h2 e h3) nos
títulos e subtítulos.
Agora, vamos cuidar do texto de apresentação. Muitos sites de receitas
começam com um texto enorme contando mil histórias relacionadas ao prato.
Aqui, temos apenas uma apresentação rápida logo depois do nome do prato.
Esse texto é um parágrafo. Use a tag adequada.
Lembre sempre de salvar e recarregar, para ir vendo o resultado das suas
modificações. Se acontecer algo inesperado, revise bem o código. Nessas
4
horas, um editor que mostre as diferentes partes do código com diferentes cores
é muito útil.
Agora vem a receita em si. Você já deve ter formatado os títulos e
subtítulos. Temos duas listas de ingredientes, que podem ser formatadas com a
tag para listas. É necessário colocar cada item da lista – nesse caso, cada
ingrediente – entre tags li e a lista inteira entre tags ul. Veja um modelo:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Se você estiver vendo bolinhas – bullets – no começo de cada linha, é

porque deu certo.
O modo de preparo também é uma lista, porém ela precisa seguir uma
ordem, já que não posso assar os ingredientes antes de misturá-los. Cada passo
também vai ser colocado entre tags li, mas a lista inteira, em vez de tags ul, vai
entre tags ol. Essas tags são as abreviaturas de unordered list e ordered list
– lista sem ordem e lista ordenada. Se em vez dos bullets você estiver vendo
números, deu certo.
Um último detalhe. Para a página ser encontrada pelos buscadores, e
também para aparecer corretamente quando ela for favoritada ou linkada por
outros sites, é importante que ela tenha um título. Mas não estamos falando do
título que fica entre as tags h1. A tag title deve ser colocada dentro do head, ela
é obrigatória. Então, dentro do head, deverá ir o seguinte código:
<title>Receita de bolo de cenoura</title>
Repare que, por estar dentro do head, não aparecerá na página. Sua
página HTML deveria estar como na Figura 2.
5
Figura 2 – Site com tags HTML
E o código deveria estar assim:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
6
<h1>Bolo de cenoura</h1>
<p>Que tal um bolo de cenoura bem gostoso? O segredo é bater tudo
no liquificador, menos a farinha. Receita ideal para um café da tarde
com jeito caseiro.</p>
<h2>Ingredientes</h2>
<h3>Massa</h3>
<ul>
<li>1/2 xícara (chá) de óleo</li>
<li>3 cenouras médias raladas</li>
<li>4 ovos</li>
<li>2 xícaras (chá) de açúcar</li>
<li>2 e 1/2 xícaras (chá) de farinha de trigo</li>
<li>1 colher (sopa) de fermento em pó</li>
</ul>
<h3>Cobertura</h3>
<ul>
<li>3 colheres (sopa) de chocolate em pó</li>
<li>1 colher (sopa) de manteiga</li>
<li>1 xícara (chá) de açúcar</li>
<li>1 xícara (chá) de leite</li>
</ul>
<h2>Modo de preparo</h2>
<h3>Massa</h3>
<ol>
<li>No liquidificador, bata a cenoura, os ovos e o óleo no até
ficar homogêneo.</li>
<li>Acrescente o açúcar e bata por 5 minutos.</li>
<li>Despeje a mistura em uma tigela e acrescente a farinha.
Misture à mão ou com batedeira.</li>
<li>Incorpore o fermento e misture lentamente.</li>
<li>Preaqueça o forno. Asse a 180°C por aproximadamente 40
minutos. Use um palito para ver se está pronto.</li>
</ol>
<h3>Cobertura</h3>
<ol>
<li>Em uma panela pequena, misture a manteiga, o chocolate em
pó, o açúcar e o leite.</li>
<li>Leve a fogo baixo até ficar com uma consistência cremosa.
Despeje por cima do bolo.</li>
</ol>
</body>
</html>
Pode não estar tão atraente, mas está correto e pronto para aplicar CSS.
TEMA 2 – INTRODUÇÃO AO CSS
Vamos começar a definir estilos para a nossa página. Vamos começar

pela tipografia. A maneira mais recomendada para isso é ter um arquivo de folha
de estilos separado. Crie um arquivo de texto chamado styles.css e salve-o na
mesma pasta do seu arquivo index.html. No index.html, cole a seguinte linha de
código dentro do head, pode ser logo depois do title:
<link rel="stylesheet" href="styles.css">
7
A tag link – repare que ela não precisa de tag de fechamento – serve
para indicar recursos externos ao HTML. No caso, ela vai indicar ao HTML que
ele deve procurar os estilos no arquivo styles.css que está no mesmo diretório –
pasta – do arquivo HTML. Salve o HTML e pode fechar. A partir de agora,
mantenha o HTML aberto no navegador e o CSS aberto no editor de texto. Vá
salvando o arquivo e recarregando a página no navegador.
O código CSS consta de várias indicações da aparência de um ou mais
elementos HTML. Ele consta de um seletor, propriedades e valores (Paz, 2021,
p. 94; W3schools, S.d.). Vamos usar o mesmo exemplo do livro:
p {
color: blue;
font-size: 11;
}
Nesse caso, o seletor é o p, ou seja, os parágrafos do HTML. As

propriedades que ele está modificando são aquelas entre as chaves: a cor e o
tamanho do texto – color e font-size.
Copie esse código em seu arquivo CSS, salve e atualize o site. O
parágrafo deverá ficar azul. Se deu certo, é porque os arquivos HTML e CSS
estão conectados e você poderá continuar trabalhando nesses arquivos. Se não
deu certo, verifique o nome e localização dos arquivos.
Esse código pode ser escrito em apenas uma linha, mas formatado dessa
maneira você consegue editar linhas inteiras sem precisar ter cuidado de não
deletar a chave de fechamento ou modificar o seletor sem querer.
Saiba mais
Toda propriedade CSS tem um valor padrão, que será considerado a

menos que seja especificado outro valor.
2.1 Seletores
Boa parte do poder e da praticidade da linguagem CSS é a parte “em

cascata” – cascading, o significado do C. Isso quer dizer que um mesmo
elemento pode ser modificado por várias declarações. Se especificarmos que o
texto inteiro de uma página está na cor verde, como a seguir:
8
body {
color: green;
}
E que o h1 deve medir 60 pixels:
h1 {
font-size: 60px;
}
O título da página ficará verde, pois está dentro do body, e em corpo 60, pois foi
indicado em outro lugar, apenas para a tag h1. Acrescente esses códigos ao seu
CSS e veja o que acontece.
Isso pode ser usado para otimizar o seu código CSS. Em vez de declarar
os valores de cada propriedade, você pode agrupar elementos que devam
compartilhar das mesmas características.
Para isso, é possível incluir mais elementos dentro do seletor. Para incluir
mais de um elemento HTML, vamos separá-los com vírgulas:
h1, h2, h3 {
font-family: Helvetica, Arial, sans-serif;
}
Nesse código, estamos determinando que os títulos e subtítulos do 1 ao

3 fiquem na fonte Helvetica.
Saiba mais
Repare que indicamos mais duas fontes, como plano B: caso a Helvetica
não esteja disponível no sistema, será usada a Arial e, se nenhuma das duas
estiver disponível, será usada a sem serifa padrão do sistema. Esta última é
chamada de callback font e sempre deve ser declarada, afinal, não sabemos se
as fontes vão funcionar em todos os dispositivos.
Há várias maneiras de trabalhar com seletores. É possível escolher, por

exemplo, apenas o primeiro parágrafo de um texto, ou a primeira linha, ou
elementos com determinados argumentos.
Para terminar, um pequeno desafio: volte a deixar o texto da página preto,
e determine três tamanhos diferentes (60, 40 e 20 pixels) para os títulos e
subtítulos.
9
TEMA 3 – TIPOGRAFIA USANDO CSS
Uma boa composição tipográfica é fundamental para um bom projeto. Na

web, é a mesma coisa, mas é necessário implementar os princípios da boa
tipografia de outra maneira, considerando que nosso site será visto nos mais
variados dispositivos. Quase tudo o que pode ser feito em um programa de
editoração pode ser feito em CSS.
Antes de mais nada, apague todo o conteúdo do seu arquivo CSS, para
começarmos do zero.
3.1 Alinhamento
Vamos começar com o alinhamento do texto. Isso é feito com a

propriedade text-align, que pode ter os valores left, center e right. Há um
valor para justificar o texto, mas é importante observar que textos justificados
não ficam bem na web. Um texto justificado precisa de hifenização e muitos
ajustes para ficar uniforme, o que ainda não foi bem implementado na web.
Portanto, fique com o alinhamento à esquerda.
Centralize o título e o parágrafo de abertura do seu HTML. Lembre de que
é possível combinar elementos em um mesmo seletor.
3.2 Escolhendo a família tipográfica
Próximo passo: vamos mudar a família tipográfica da nossa página. Você

já sabe como fazer isso, mas agora vamos aproveitar recursos mais recentes.
Antigamente, era possível apenas escolher fontes que soubéssemos que
estariam instaladas nos computadores. Agora, com sistemas servidores de
fontes, como Google Fonts e Adobe Fonts, temos muito mais possibilidades.
Saiba mais
Vamos escolher uma família tipográfica para nosso site de receitas.

Escolhemos a Andada Pro, de autoria de Carolina Giovagnoli e publicada pela
Huerta Tipográfica. É uma serifada com pouco contraste entre os traços,
adequada para texto e títulos, e com um jeito amigável que combina com nossa
receita.
10
Para escolher, acesse o link a seguir:
GOOGLE FONTS. Andada Pro. Google Fonts, S.d. Disponível em:
<https://fonts.google.com/specimen/Andada+Pro>. Acesso em: 4 set. 2021.
No site indicado – e no de qualquer outra fonte do Google Fonts –, você

deverá escolher quais estilos precisa. No caso, selecionamos os estilos 400, 400
italic, 800 e 800 italic. Esses números indicam o peso visual das letras. Não
selecione estilos que você não vá usar, porque esses arquivos serão carregados
mesmo que não sejam usados. Ou selecione para fazer testes, e depois elimine
os que não foram usados, gerando novos códigos no Google Fonts.
Uma vez selecionados os estilos da(s) família(s) tipográfica(s) que você
escolheu, o site gerará dois códigos: um que deverá ser inserido no head do
HTML:
<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@0,
400;0,800;1,400;1,800&display=swap" rel="stylesheet">
E outro que será usado no CSS:
font-family: 'Andada Pro', serif;
Insira esses códigos nos lugares corretos. Use o segundo código para
modificar a fonte da página inteira – ou seja, no body.
3.4 Tamanho do texto
Já vimos como mudar o tamanho do texto usando pixels. Porém, por se

tratar de um valor absoluto, pode não ser uma boa ideia. Há outras medidas que
podem ser usadas, que variam de acordo com diferentes situações (W3schools,
S.d.; Mozilla, S.d.b):
• px: é um valor absoluto, útil para quando se sabe o tamanho da tela na qual
o site vai ser acessado – o que é cada vez mais incomum;

• em: um em equivale ao tamanho atual da fonte do navegador. Por padrão,
esse valor é de 16 pixels, mas pode ser mudado pelo usuário ou redefinido
11
em outros elementos do HTML, modificando proporcionalmente todos os
textos definidos dessa maneira;
• %: se comporta de maneira similar ao em.;
• rem: também é um tamanho relativo, mas em vez de ser relativo ao elemento
no qual o texto está inserido, é relativo ao tamanho de fonte padrão, sem

interferências de outros elementos nos quais o texto esteja contido;
• vw: significa viewport width ou view window (Paz, 2021, p. 160). A medida
1vw equivale a 1% da largura da tela ou janela na qual o site está sendo
exibido. Por isso, é interessante ao trabalhar com sites responsivos, que se

adaptam às diferentes telas;
• large, small, medium etc.: também são valores relativos ao tamanho padrão,
mas funcionam de modo menos preciso.
Para garantir a acessibilidade, a sugestão é usar valores que sejam

relativos ao tamanho de fonte escolhido pelo usuário (Mozilla, [S.d.]b).
No nosso exemplo, vamos usar em. Defina os tamanhos de h1, h2 e h3 em
3em, 2em e 1.5em, respectivamente.
3.5 Espaçamentos
As propriedades letter-spacing e word-spacing modificam o

espaçamento entre as letras e as palavras respectivamente. Tipicamente, são
definidas em pixels (Mozilla, [S.d.]c).
A entrelinha é definida com a propriedade line-height, que pode ser
definida em px, em, % ou simplesmente em um número que define a entrelinha a
partir do tamanho da fonte. Assim, se especificarmos line-height: 1.8, estamos
dizendo que a entrelinha será de 1,8 vezes o tamanho da fonte do texto.
O texto também pode receber espaço com propriedades como padding e
margin, usadas também para outro tipo de elementos, que veremos mais
adiante. Essas propriedades são úteis, por exemplo, para acrescentar espaços
entre parágrafos.
12
3.6 Itálicos, peso, maiúsculas
Vamos ver algumas outras possibilidades (Mozilla, [S.d.]c):
• font-style: geralmente é usado com o valor italic, mas também tem o
valor normal.
• font-weight: é o peso da fonte. Admite os valores normal e bold, ou, mais
recentemente, números entre 100 e 900.

• text-transform: converte para caixa alta ou caixa baixa. Alguns valores
possíveis são none (não altera), uppercase (deixa tudo em maiúsculas),

lowercase (tudo em minúsculas) e capitalize (põe maiúscula na primeira
letra de cada palavra, padrão em títulos em inglês).
3.7 De volta ao exemplo
Com tudo o que você acaba de ver, vamos pensar em alguns

refinamentos tipográficos que podem ser feitos na nossa receita:
• Aumentar a entrelinha em geral, para deixar o texto mais arejado;

• Aumentar um pouquinho o tamanho geral do texto;
• Deixar o título em maiúsculas e com as letras mais espaçadas, para ficar
mais imponente;
• Deixar o texto de abertura maior e em itálico;
• Trocar o bold dos títulos h3 por itálico.
Tente fazer todos esses refinamentos e depois compare com o nosso

código.:
h1, p {
text-align:center;
}
body {
font-family: 'Andada Pro', serif;
font-size: 1.2em;
line-height:1.8;
}
h1 {
font-size:4em;
text-transform: uppercase;
}
13
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
font-weight:100;
font-style:italic;
}
p {
font-size:1.5em;
font-style:italic;
}
Há várias outras maneiras de conseguir uma composição tipográfica
refinada, mas com estas você já consegue um resultado que vai além dos
padrões. Se você fez tudo certo, seu site deve estar como o da Figura 3.
Figura 3 – Site depois da aplicação de estilos CSS
14
TEMA 4 – SEPARANDO O CONTEÚDO DO HTML
Por enquanto, vimos elementos HTML mais relacionados ao texto e ao

que cada parte desse texto é. Para organizar melhor um arquivo HTML e
prepará-lo para receber um layout que vá além da formatação do texto, há vários
outros elementos que podem ser usados para dividir o conteúdo e para
diferenciar elementos que se repetem.
4.1 Elementos de separação de conteúdo
Há vários elementos que servem para dividir o conteúdo. Lembre que eles
também devem ser usados semanticamente. Vamos mostrar os principais
(Mozilla, [S.d.]a):
• header: serve como cabeçalho de um site ou de uma seção do site. Não
confunda com head;

• nav: contém os elementos de navegação principais de um site, como o menu
com seções;
• main: contém a seção principal da página;
• section: serve para dividir uma página em várias seções;
• article: contém um elemento de conteúdo de um site, como um post de um
blog, uma notícia de um portal, ou um artigo à venda em um site de e-

commerce;
• footer: delimita o rodapé da página, que tipicamente contém informações
como direitos autorais, endereço, contatos, entre outros.
4.2 Atributos class e id
Os atributos class e id são atributos globais, ou seja, podem ser usados

em qualquer elemento HTML (Paz, 2021, p. 131). Eles servem para diferenciar
elementos do mesmo tipo, e são úteis para modificar os estilos separadamente
sem cair no erro de mudar a tag para uma que seria semanticamente incorreta.
O atributo class pode ser usado várias vezes, enquanto o atributo id é
para elementos que aparecem uma única vez no código. No HMTL, são
declarados junto das tags de abertura. Por exemplo:
15
<h2 class='ingredientes'>
<header id='principal'>
No CSS, eles precisam de seletores especiais. As classes são indicadas

com um ponto, e os ids com uma cerquilha:
.ingredientes {
}
principal {
}
Cabe mencionar que um mesmo elemento pode pertencer a várias

classes, o que pode ser útil em algumas situações.
Vamos retornar a nosso HTML e aplicar algumas dessas separações. Por
enquanto, é uma página bem simples. Vamos considerar que a receita seja o
conteúdo principal – main. Vamos considerar a possibilidade de adicionarmos
mais elementos, como chamadas para outras receitas, por isso também vamos
fundir nossa receita em tags article. Nosso site, por enquanto, tem um único
elemento que pode ser considerado um cabeçalho, que é o nome da receita e o
texto de introdução, por isso vamos dividir o conteúdo do article em um header
e duas seções – ingredientes e modo de preparo.
Para diferenciar os dois elementos section, vamos usar dois elementos
class, pensando que talvez seja necessário colocar mais receitas em um futuro.
O código deve ficar assim:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@0,
400;0,800;1,400;1,800&display=swap" rel="stylesheet">
</head>
<body>
<main>
<article>
<header>
<h1>Bolo de cenoura</h1>
<p> Que tal um bolo de cenoura bem gostoso? O segredo é
bater tudo no liquificador, menos a farinha. Receita ideal para um
café da tarde com jeito caseiro.</p>
</header>
<section class='ingredientes'>
16
<h2>Ingredientes</h2>
<h3>Massa</h3>
<ul>
<li>1/2 xícara (chá) de óleo</li>
<li>3 cenouras médias raladas</li>
<li>4 ovos</li>
<li>2 xícaras (chá) de açúcar</li>
<li>2 e 1/2 xícaras (chá) de farinha de trigo</li>
<li>1 colher (sopa) de fermento em pó</li>
</ul>
<h3>Cobertura</h3>
<ul>
<li>3 colheres (sopa) de chocolate em pó</li>
<li>1 colher (sopa) de manteiga</li>
<li>1 xícara (chá) de açúcar</li>
<li>1 xícara (chá) de leite</li>
</ul>
</section>
<section class='preparo'>
<h2>Modo de preparo</h2>
<h3>Massa</h3>
<ol>
<li>No liquidificador, bata a cenoura, os ovos e o óleo no
até ficar homogêneo.</li>
<li>Acrescente o açúcar e bata por 5 minutos.</li>
<li>Despeje a mistura em uma tigela e acrescente a
farinha. Misture à mão ou com batedeira.</li>
<li>Incorpore o fermento e misture lentamente.</li>
<li>Preaqueça o forno. Asse a 180°C por aproximadamente 40
minutos. Use um palito para ver se está pronto.</li>
</ol>
<h3>Cobertura</h3>
<ol>
<li>Em uma panela pequena, misture a manteiga, o chocolate
em pó, o açúcar e o leite.</li>
<li>Leve a fogo baixo até ficar com uma consistência
cremosa. Despeje por cima do bolo.</li>
</ol>
</section>
</article>
</main>
</body>
</html>
Repare que, se você recarregar o site no navegador, ele vai continuar

praticamente igual ao anterior – e se houve alguma mudança maior, é porque
algo está errado. É que não aplicamos nenhum atributo de estilo a essas divisões
que fizemos. O navegador, então, simplesmente ignora essas tags.
TEMA 5 – FORMATANDO OS ELEMENTOS
Verifique que seu arquivo HTML ficou salvo, e vamos novamente mexer
no CSS. Agora, vamos modificar algumas das separações que acabamos de
fazer, começando pela cor do fundo. Há várias possibilidades para definir o fundo
17
de um elemento (Paz, 2021, p. 99–100), mas aqui vamos usar cores. No CSS,
vamos acrescentar o seguinte código:
header {
background:#ffd9cc;
}
.ingredientes {
background:#d9ffcc;
}
.preparo {
background:#ccf2ff;
}
Primeiro, repare nos seletores. O seletor header vai afetar todos os

elementos header do documento – por enquanto é um só. Os seletores
.ingredientes e .preparo afetam todos os elementos com os atributos
class=’ingredientes’ e class=’preparo’, respectivamente. Neste caso, são
dois elementos section. No entanto, se houvesse outros elementos que não

fossem section e tivessem alguma dessas classes, também seriam afetados.
Note também que se houvesse outro elemento section que não pertencesse a
nenhuma dessas classes, ele não seria afetado. Os seletores CSS são
poderosos, mas também podem causar confusões.
Definimos as cores com códigos hexadecimais. Falaremos deles adiante.
Seu site deverá ficar como na Figura 4. Como ficou maior, não estamos
mostrando por completo.
18
Figura 4 – Site com estilos de fundo aplicados
O que não ficou bom foi que o conteúdo ficou próximo demais das bordas
das caixas. Para resolver isso, vamos aprender mais duas propriedades CSS:
margin e padding.
O margin cria um espaço (uma margem, justamente) para fora do

elemento. O padding cria um espaço para dentro do elemento (padding pode ser
traduzido como acolchoamento), incluindo o fundo que determinamos para ele.
Vamos incluí-los nos nossos estilos:
header, section {
margin:20px;
padding:20px;
}
19
Veja que especificamos um seletor que pega todo elemento header e todo
elemento section. O header afeta o único header do nosso HTML, o cabeçalho.
O section afeta tanto a seção dos ingredientes como a do modo de preparo, já
que os dois são section, independente do atributo class que atribuímos a eles.
Seu site deve ficar como a Figura 5. Para entender melhor a diferença
entre margin e padding, a sugestão é apagar um de cada vez (ou mudar o valor
para 0px) e ver o que acontece.
Mais adiante, você verá como controlar a posição de cada um desses
elementos. Por enquanto, apenas preparamos o HTML para isso.
Figura 5 – Site com margin e padding aplicados
20
TROCANDO IDEIAS
Compare a maneira de trabalhar com tipografia em CSS e em programas

como o InDesign. Qual você acha mais prática? Qual oferece mais
possibilidades? Será que a maioria de seus colegas concorda com você?
NA PRÁTICA
Dê continuidade ao seu portfólio digital com o que você aprendeu nesta

aula. Você já consegue definir os estilos dos textos que serão usados no site e
começar a preparar a folha de estilos. Já é mais um passo.
FINALIZANDO
Esta aula teve um viés mais prático, e você teve um primeiro e importante
contato com o código que compõe a internet. Aprendeu a estruturar um código
e a como aplicar estilos aos diferentes elementos. Novamente, é um
conhecimento importante ainda que você não pretenda trabalhar diretamente
com código. Inclusive, é um conhecimento que tem as suas aplicações no
impresso.
21
REFERÊNCIAS
GOOGLE FONTS. Andada Pro. Google Fonts, S.d. Disponível em:

<https://fonts.google.com/specimen/Andada+Pro>. Acesso em: 4 set. 2021.
MOZILLA – MDN WEB DOCS. Elementos HTML. Mozilla, [S.d.]a Disponível em:
<https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element>. Acesso em: 4
set. 2021.
_____. Font-size. Mozilla, [S.d.]b. Disponível em:

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-size>. Acesso em: 4
set. 2021.
_____. Fundamental text and font styling. Mozilla, [S.d.]. Disponível em:
<https://developer.mozilla.org/en-
US/docs/Learn/CSS/Styling_text/Fundamentals>. Acesso em: 4 set. 2021.
PAZ, M. Web design. Curitiba: InterSaberes, 2021.
W3SCHOOLS. CSS font size property. W3Schools, [S.d.]. Disponível em:

<https://www.w3schools.com/cssref/pr_font_font-size.asp>. Acesso em: 4 set.
2021.
22

Aula 2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 2

Enviado por

Direitos autorais:

Formatos disponíveis

WEB DESIGN

Prof. Matias Peruyera

Depois de compreender o contexto histórico e o funcionamento da web,

Várias pessoas que trabalham com web design não trabalham

TEMA 1 – INTRODUÇÃO AO HTML

Vamos começar relembrando a estrutura básica de um arquivo HTML,

Salve (no editor de texto) e recarregue o arquivo (no navegador). Você

Se você estiver vendo bolinhas – bullets – no começo de cada linha, é

<title>Receita de bolo de cenoura</title>

E o código deveria estar assim:

TEMA 2 – INTRODUÇÃO AO CSS

Vamos começar a definir estilos para a nossa página. Vamos começar

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

Nesse caso, o seletor é o p, ou seja, os parágrafos do HTML. As

Toda propriedade CSS tem um valor padrão, que será considerado a

Boa parte do poder e da praticidade da linguagem CSS é a parte “em

E que o h1 deve medir 60 pixels:

Nesse código, estamos determinando que os títulos e subtítulos do 1 ao

Há várias maneiras de trabalhar com seletores. É possível escolher, por

Uma boa composição tipográfica é fundamental para um bom projeto. Na

Vamos começar com o alinhamento do texto. Isso é feito com a

3.2 Escolhendo a família tipográfica

Próximo passo: vamos mudar a família tipográfica da nossa página. Você

Vamos escolher uma família tipográfica para nosso site de receitas.

No site indicado – e no de qualquer outra fonte do Google Fonts –, você

<link rel="preconnect" href="https://fonts.googleapis.com">

E outro que será usado no CSS:

font-family: 'Andada Pro', serif;

3.4 Tamanho do texto

Já vimos como mudar o tamanho do texto usando pixels. Porém, por se

o site vai ser acessado – o que é cada vez mais incomum;

• rem: também é um tamanho relativo, mas em vez de ser relativo ao elemento

no qual o texto está inserido, é relativo ao tamanho de fonte padrão, sem

1vw equivale a 1% da largura da tela ou janela na qual o site está sendo

exibido. Por isso, é interessante ao trabalhar com sites responsivos, que se

mas funcionam de modo menos preciso.

Para garantir a acessibilidade, a sugestão é usar valores que sejam

As propriedades letter-spacing e word-spacing modificam o

Vamos ver algumas outras possibilidades (Mozilla, [S.d.]c):

• font-style: geralmente é usado com o valor italic, mas também tem o

recentemente, números entre 100 e 900.

possíveis são none (não altera), uppercase (deixa tudo em maiúsculas),

letra de cada palavra, padrão em títulos em inglês).

3.7 De volta ao exemplo

Com tudo o que você acaba de ver, vamos pensar em alguns

• Aumentar a entrelinha em geral, para deixar o texto mais arejado;

Tente fazer todos esses refinamentos e depois compare com o nosso

Figura 3 – Site depois da aplicação de estilos CSS

Por enquanto, vimos elementos HTML mais relacionados ao texto e ao

4.1 Elementos de separação de conteúdo

• header: serve como cabeçalho de um site ou de uma seção do site. Não

confunda com head;

• section: serve para dividir uma página em várias seções;

• article: contém um elemento de conteúdo de um site, como um post de um

blog, uma notícia de um portal, ou um artigo à venda em um site de e-

como direitos autorais, endereço, contatos, entre outros.

4.2 Atributos class e id

Os atributos class e id são atributos globais, ou seja, podem ser usados

No CSS, eles precisam de seletores especiais. As classes são indicadas

Cabe mencionar que um mesmo elemento pode pertencer a várias

Repare que, se você recarregar o site no navegador, ele vai continuar

TEMA 5 – FORMATANDO OS ELEMENTOS

Primeiro, repare nos seletores. O seletor header vai afetar todos os