Material sobre HTML e CSS
Este material contém o conteúdo a ser abordado na prova de Desenvolvimento Web 1
(1ª Chamada). Serão usadas analogias simples e exemplos do mundo real para simplificar
a compreensão dos conceitos.
HTML
HTML (HyperText Markup Language) é a linguagem de marcação usada para criar
páginas na web. Ele estrutura o conteúdo, como textos, imagens, links, vídeos,
formulários, entre outros. HTML não é uma linguagem de programação, mas sim de
marcação, usada para descrever a estrutura do conteúdo.
Para criar sites e páginas web utilizamos as tags.
Pense nas tags como etiquetas ou marcadores que dizem ao navegador (e aos leitores
de tela) que tipo de conteúdo está sendo apresentado. Elas organizam e classificam cada
parte de uma página da internet.
Por exemplo:
• Quando o HTML usa a tag <h1>, ele está dizendo:
“Este é o título principal da página”
(como se fosse o nome de um capítulo num livro).
• A tag <p> diz:
“Aqui começa um parágrafo de texto.”
Essas tags não aparecem visualmente na tela, mas são interpretadas pelos navegadores
e leitores de tela, que comunicam a função de cada parte da página para a pessoa
usuária.
Estrutura Padrão de uma Página HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Título da Página</title>
</head>
<body>
<!--conteúdo vem aqui, dentro da tag Body-->
</body>
</html>
Tags principais:
Imagine que a criação de uma página HTML é como construir uma casa. Para que a
página seja funcional e consiga ser interpretada pelo navegador, algumas tags fazem
parte de sua estrutura padrão:
<!DOCTYPE html>
• Significa: “Este é um documento HTML5”.
• Serve para: Avisar ao navegador que o conteúdo a seguir usa o padrão mais
moderno do HTML.
<html lang="pt-br">
• Tag <html>: Envolve todo o conteúdo da página.
• Atributo lang="pt-br": Diz que o conteúdo está em português do Brasil.
o Isso ajuda leitores de tela e buscadores a interpretarem corretamente o
idioma da página.
<head>
• Parte da página que contém informações ocultas, ou seja, que não aparecem
diretamente para o usuário.
• Dentro do <head>, vão coisas como:
o Título da aba
o Configurações de codificação
o Links para arquivos de estilo (CSS), scripts etc.
<meta charset="UTF-8">
• Indica o conjunto de caracteres usado, no caso, o UTF-8.
• Isso garante que acentos e caracteres especiais (como ç, ã, é) funcionem
corretamente.
<title>Título da Página</title>
• Define o título que aparece na aba do navegador.
• Também é importante para leitores de tela e mecanismos de busca.
<body>
• É onde fica o conteúdo visível da página, como:
o Textos, imagens, vídeos, links, botões, formulários etc.
• O leitor de tela “lê” o que estiver dentro do <body>.
<!--conteúdo vem aqui, dentro da tag Body-->
• Isso é um comentário.
• Comentários são instruções ou anotações visíveis apenas no código, não
aparecem na página.
• Começam com <!-- e terminam com -->.
Inserindo Imagens
A tag <img> é a responsável por mostrar imagens em sua página, como se você estivesse
pendurando fotos nas paredes da sua casa. Você diz à sua página onde encontrar as
imagens (com "src") e ela as exibe.
Pense em uma moldura. Dentro dela, você coloca uma imagem que deseja exibir. A tag
<img src="[Link]"> é como o ato de colocar uma foto dentro da moldura. A palavra
"src" significa "source" ou "fonte", que é de onde a imagem vem.
Você pode inserir imagens do seu computador ou da internet. Basta colocar dentro das
aspas do src, no lugar do nome do arquivo, o link da imagem da internet.
Associando Arquivos CSS
Para dar vida à sua página, você precisa escolher cores e estilos. A linguagem CSS é como
a tinta e a decoração:
Arquivos de marcação são criados com a extensão .html. Por exemplo: [Link].
Arquivos de estilização são criados com a extensão .css. Por exemplo: [Link].
• Para vincular um arquivo CSS externo chamado "[Link]", você utiliza a tag
<link rel="stylesheet" href="[Link]">. Isso é como pedir a um decorador
para trazer os materiais e aplicar as cores que deseja em suas paredes.
Criando Títulos e Subtítulos
Os títulos e subtítulos em HTML são como placas em uma estrada. Eles ajudam a
direcionar as pessoas e a entender onde estão.
• As tags <h1> a <h6> são os diferentes tamanhos e tipos dessas placas, onde <h1>
é a maior e mais importante, como um grande sinal de "Bem-vindo", enquanto
<h6> é um subtítulo, mais discreto.
• Para criar parágrafos com textos simples usamos a tag <p>.
Criando Botões
Para criar um botão em HTML, use a tag <button>.
Pense em um botão como a campainha da sua casa. Quando você pressiona a
campainha, algo acontece. Da mesma forma, quando você pressiona um botão em uma
página, ele é programado para realizar uma ação, como enviar informações.
Links
A tag <a> é usada para criar um link.
O atributo href define o endereço de destino.
O texto entre <a> e </a> é o que aparece para o usuário.
Exemplo de link: <a href="[Link] o site</a>
Imagem como Link
Se você quer que uma imagem leve as pessoas a outro lugar, você usa <a
href="[Link] src="[Link]"></a>. Isso é como ter uma porta
que leva a um novo cômodo quando você a abre. Quando o usuário clicar na imagem,
navegará para a página [Link]
Formulários
Um formulário HTML é uma área da página onde o usuário pode digitar informações e
enviá-las para um servidor ou processá-las com JavaScript.
Ele é criado com a tag: <form> ... </form>
Elementos mais usados em formulários
Os formulários geralmente são criados com labels e inputs. Labels são rótulos que
indicam o que o usuário deve digitar em um campo. Os Inputs são os próprios campos
onde o usuário pode digitar as informações.
Pense em formulários como a área para fazer Login na Netflix. Existe o campo (input) de
Email e sobre ele existe um label escrito “Email” para informar ao usuário o que deve
ser inserido no primeiro campo. Também existe o campo (input) senha, onde você
precisa inserir a senha. Além do botão Entrar para que os dados sejam enviados, seja
verificado se você tem uma conta e é assinante e então a página é redirecionada para o
catálogo de filmes.
Inputs
Existem inputs de vários tipos. Inputs para colocar senha, para coletar email, para coletar
textos e vários outros.
Campos de texto (<input type="text">)
Exemplo de uso:
<label>Nome:</label>
<input type="text" name="nome">
Campo de e-mail:
<label>Email:</label>
<input type="email" name="email">
Senha:
<label>Senha:</label>
<input type="password" name="senha">
Botão para enviar (<input type="submit">)
<input type="submit">Enviar</input>
Exemplo de formulário completo:
<form action="/enviar" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="mensagem">Mensagem:</label><br>
<textarea id="mensagem" name="mensagem"></textarea><br><br>
<button type="submit">Enviar</button>
</form>
Envio de Dados do Formulário
O atributo "action" em um formulário é como um endereço. Ele diz para onde as
informações do formulário devem ser enviadas, garantindo que os dados cheguem ao
lugar certo.
Formas de Usar CSS
Existem três maneiras de aplicar o CSS:
1 - CSS Inline: É aplicado diretamente na tag HTML, usando o atributo style.
Exemplo:
<p style="color: blue; font-size: 18px;">Este é um parágrafo com CSS inline.</p>
Vantagem: rápido e direto.
Desvantagem: difícil de manter em páginas grandes.
2 - CSS Interno (embutido): É escrito dentro da própria página HTML, dentro da tag
<style> no <head>.
Exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo CSS Interno</title>
<style>
p{
color: green;
font-size: 20px;
</style>
</head>
<body>
<p>Este parágrafo foi estilizado com CSS interno.</p>
</body>
</html>
Vantagem: bom para páginas pequenas.
Desvantagem: fica misturado com o HTML, o que pode dificultar manutenção.
3 - Externo: O estilo fica em um arquivo separado (.css), e é ligado à página HTML com
a tag <link>.
Arquivo HTML ([Link]):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo CSS Externo</title>
Esta linha link o html ao css -> <link rel="stylesheet" href="[Link]">
</head>
<body>
<p>Este parágrafo foi estilizado com CSS externo.</p>
</body>
</html>
Arquivo CSS ([Link]):
p{
color: red;
font-size: 22px;
Vantagem: melhor organização e reutilização de estilos em várias páginas.
Desvantagem: depende de carregar um arquivo externo.
Propriedade CSS para Cor do Texto
A propriedade CSS para mudar a cor do texto é color. Imagine a cor da tinta que você
escolhe para escrever algo em um caderno. Isso muda o impacto visual do que está
escrito.
Propriedade O que faz Exemplo
color Cor do texto color: blue;
background-color Cor de fundo background-color: yellow;
font-size Tamanho da fonte font-size: 16px;
font-family Tipo de letra font-family: Arial, sans-serif;
text-align Alinhamento do texto text-align: center;
font-weight Peso da fonte (negrito, normal...) font-weight: bold;
Tamanho e Espaçamento
Propriedade O que faz Exemplo
width Largura do elemento width: 300px;
height Altura do elemento height: 200px;
margin Espaço fora do elemento margin: 20px;
Propriedade O que faz Exemplo
padding Espaço dentro do elemento padding: 10px;
border Borda do elemento border: 1px solid black;
Outras tags de espaçamento
Para que possamos dar espaços entre textos e botões, de forma que nossa página não
tenho conteúdos amontoados, podemos usar Padding e Margin.
Padding:
É o espaço interno de um elemento, entre o conteúdo (como texto ou imagem) e a borda
do próprio elemento.
Exemplo:
Se você aumentar o padding, o conteúdo "afasta-se" das bordas internas da caixa.
Exemplo de uso da tag: padding: 20px;
Margin:
É o espaço externo de um elemento, ou seja, a distância entre esse elemento e os que
estão ao redor dele.
Exemplo:
Se você aumentar a margin, o elemento se "afasta" dos outros elementos próximos.
margin: 20px;
Dica para lembrar:
• Padding = dentro da borda
• Margin = fora da borda
O que são seletores?
Seletores é a forma de identificar tags na página HTML e aplicar estilos a eles.
Posso identificar por nome, por id e por class.
Seletor por nome (ou por tag)
Esse seletor aplica o estilo a todas as tags com o mesmo nome.
Exemplo: p {
color: blue;
Isso vai deixar todos os parágrafos <p> da página com texto azul.
2. Seletor por ID
Para selecionar um elemento com o ID "menu", você usa #menu. Imagine o ID como um
nome exclusivo que você dá a um elemento da sua página, como uma imagem, um texto
ou uma div. Seleciona um elemento único, identificado com o atributo id.
HTML:
<h1 id="meuTitulo">Título Principal</h1>
CSS:
#meuTitulo {
font-size: 24px;
color: red;
Dica: IDs são únicos. Você só deve usar um id com o mesmo nome uma vez por página.
3. Seletor por Classe
Seleciona um ou mais elementos que compartilham a mesma classe (class). Para
selecionar um elemento com a Class "destaque", você usa .menu ;
HTML:
<p class="destaque">Texto com fundo amarelo</p>
<div class="destaque">Outro elemento destacado</div>
CSS:
.destaque {
background-color: yellow;
Dica: Classes podem ser reutilizadas em vários elementos.
Propriedade para Largura
A propriedade width define a largura de um elemento. É como escolher se você quer
que uma mesa seja pequena ou grande dentro da sua sala.
Largura da Página
Se você quer que um elemento ocupe toda a largura da página, use width: 100%.
Imagine um sofá que se estende de parede a parede em sua sala de estar.
Flexbox
Imagine que você está organizando vários objetos em uma prateleira. Você pode
controlar como esses objetos ficam alinhados, se eles se apertam ou se espalham, se vão
para a linha de baixo, e muito mais.
O Flexbox serve exatamente pra isso: organizar elementos dentro de um container com
muito mais controle e flexibilidade.
1. display: flex
Essa é a propriedade que ativa o Flexbox em um container.
"É como dizer: 'Esta caixa vai usar as regras do Flexbox pra organizar seus itens internos'."
Exemplo:
.container {
display: flex;
2. flex-direction
Essa propriedade define a direção principal em que os itens são organizados dentro do
container.
"Pense numa fila de brinquedos: você pode organizá-los em linha da esquerda para a
direita, de cima para baixo, ou até de trás pra frente."
Opções do flex-direction:
1. row (padrão)
Os itens ficam em linha, da esquerda para a direita.
Exemplo visual: carrinhos alinhados lado a lado, como em uma corrida.
2. row-reverse
Os itens ficam em linha também, mas da direita para a esquerda.
Exemplo visual: carrinhos indo na direção contrária.
3. column
Os itens são organizados em coluna, de cima para baixo.
Exemplo visual: blocos empilhados, como livros numa pilha.
4. column-reverse
Os itens vão de baixo para cima.
Exemplo visual: pilha invertida, como empilhar livros do chão para cima.
Exemplo de uso:
.container {
display: flex;
flex-direction: column;
3. justify-content
Controla o alinhamento horizontal dos itens (da esquerda pra direita).
Imagine que os itens estão alinhados em linha reta dentro da prateleira. Essa
propriedade diz como eles se posicionam na horizontal.
Opções:
• flex-start: itens encostam na esquerda
• center: itens ficam centralizados
• flex-end: itens encostam na direita
• space-between: espaço entre os itens
• space-around: espaço ao redor de cada item
• space-evenly: espaço igual entre todos
"Pense em potes organizados em uma prateleira: você decide se ficam coladinhos à
esquerda, espaçados no meio ou bem distribuídos."
4. align-items
Controla o alinhamento vertical dos itens (de cima pra baixo), quando eles estão em
uma linha horizontal.
"Se os itens forem caixinhas de altura diferente, align-items decide se as bases vão ficar
alinhadas, os topos, ou o centro das caixinhas."
Opções:
• flex-start: alinha no topo
• center: alinha no meio
• flex-end: alinha embaixo
• stretch: estica os itens pra ocupar toda a altura
• baseline: alinha pelo texto interno
5. flex-wrap
Por padrão, os itens ficam em uma linha só e encolhem para caber. Com flex-wrap, você
pode permitir que quebrem de linha.
Opções:
• nowrap: (padrão) tudo numa linha só
• wrap: quebra para outra linha se precisar
• wrap-reverse: quebra para cima (linha de trás vai para cima)
"Imagine colocar livros lado a lado numa prateleira. Se a prateleira for curta, wrap
permite continuar em outra prateleira embaixo."
6. flex-grow
Define quanto um item pode crescer para ocupar espaço extra.
• 0: o item não cresce
• 1: o item cresce proporcionalmente (compartilha o espaço extra)
Exemplo:
.item {
flex-grow: 1;
"Se sobrou espaço na prateleira, o item com flex-grow: 1 se espalha pra ocupar esse
espaço."
7. flex-shrink
Controla quanto um item pode encolher quando falta espaço.
• 0: não encolhe
• 1: encolhe normalmente
"Se os itens são grandes e a prateleira é pequena, o flex-shrink diz se eles podem
encolher pra caber."
Resumo:
"Flexbox é como organizar objetos numa prateleira.
Você ativa com display: flex.
O justify-content alinha os objetos na horizontal.
O align-items alinha na vertical.
O flex-wrap permite que pulem pra outra linha.
O flex-grow deixa eles crescerem.
E o flex-shrink permite que encolham se faltar espaço."