HTML5 e CSS3
Antes de mergulharmos de cabeça em técnicas específicas, propriedades de CSS e combinações de tags e estilos, vamos praticar um pouco de front-end arroz com feijão para garantir que estamos prontos para os demais assuntos e que as bases de desenvolvimento web estejam bem claras para você.
Um dos principais centros financeiros da cidade, a avenida Paulista também possui diversas opções de entretenimento...
Depois de um dia de trabalho, nada melhor do que um bom chopp, um petisco e uma conversa em uma mesa de bar...
Um dos cartões postais da cidade, o parque dispõe de mais de 1,5 km² de área verde...
Vamos começar pela parte mais importante da página, o conteúdo. Que no caso, são os 3 lugares que você não pode deixar de visitar em São Paulo. O primeiro, a Avenida Paulista, ficará assim:
📌 O que temos aqui?
Primeiro, um título secundário utilizando a tag h2, acompanhado de dois parágrafos com texto, delimitados pela tag p.
💪 Tags de ênfase
A tag em é utilizada para indicar ênfase, que terá o seu texto exibido em itálico na página.
🔗 Links
O link é criado pela tag a (derivada de anchor — âncora). O atributo href indica o endereço que o link aponta, e o target indica que o link deve ser aberto em uma nova página.
Seguindo em frente, podemos adicionar o resto do nosso conteúdo, outros 2 lugares. Um deles é a região da Vila Madalena, e o último é o Parque do Ibirapuera.
Com a parte principal no seu lugar, vamos continuar na lista de melhorias a fazer para a nossa página. Todo site precisa de um título, certo? Para isso vamos utilizar a tag h1, que representa um título principal. Além disso, dentro do elemento head, podemos preencher a tag title com um título para a janela do navegador.
Para começar o CSS da nossa página vamos fixar a largura disponível para o conteúdo e centralizar o mesmo na página, deixando um espaço em branco nas laterais. Para isso, adicionamos uma tag div em volta de todo o HTML que criamos dentro do body, com uma classe chamada container.
E o CSS para centralizar esta div na página:
📐 width: 960px
Fixa a largura para 960px, adequando o conteúdo a telas de pelo menos 1024px de largura, como tablets e netbooks.
↔️ margin: 0 auto
A margem superior e inferior está com 0, e as margens laterais em auto cuidam de centralizar o elemento na página.
O próximo passo é melhorar a exibição dos textos, ajustando um pouco o estilo das fontes:
🍎 Lucida Grande
Será a fonte utilizada pelo Mac OS X ao exibir a nossa página.
🪟 Lucida Sans Unicode
Será vista por usuários do Windows, já que este sistema operacional não possui a primeira fonte da nossa lista.
📱 Verdana / sans-serif
Em casos mais extremos, Verdana será utilizado ou o navegador irá exibir uma fonte sem serifa por padrão.
Se analisarmos com mais detalhe o nosso conteúdo, estamos falando sobre 3 lugares diferentes, onde cada um possui um título e uma descrição. Para essa definição transparecer no nosso código, podemos colocar os elementos de cada lugar dentro de um novo elemento, para agrupar cada um.
Esta alteração não tem impacto nenhum no visual da nossa página, mas nos dá por onde adicionar um estilo para cada um dos 3 lugares, já que agora existe um elemento específico que engloba o seu conteúdo. Assim, adicionamos um pouco de espaçamento e bordas a cada um deles.
🖼️ border
Borda sólida — uma linha — de 1px. A princípio todas as bordas são do mesmo tom de cinza.
📏 margin-bottom: 20px
Coloca 20px abaixo de cada um dos elementos, adicionando espaço entre eles e ao término da lista.
📦 padding: 10px
Adiciona o espaçamento dentro do elemento, que no caso é de 10px em todos os lados.
🎨 border-color
Muda as bordas da direita e de baixo para outro tom de cor, repetindo o mesmo cinza para as outras bordas.
Para ajustar o espaçamento, podemos remover a margem do h2 completamente. De brinde, adicionamos uma borda verde abaixo do título.
Hora de trocar o preto e branco da nossa página e colocar algumas cores. Primeiro, cuidaremos do fundo da página. Além de uma nova cor, vamos combinar isso com uma imagem com um efeito de ruído, que será aplicado em cima da cor de fundo, assim:
Agora, os elementos .place precisam de um fundo diferente, para ajudar a leitura dos textos. Podemos então colocar um fundo branco neles.
Podemos também mudar a cor dos links existentes no nosso conteúdo. Podemos trocar o tom de azul (cor padrão dos navegadores para links), e mudar os links para negrito.
É comum adicionar um link ao título da página que leve para a página principal do site, que no nosso caso é a própria página em que estamos. Vamos mudar o código HTML do nosso h1 para adicionar um link.
E é claro, uma cor especial para este link:
Também podemos mudar a cor do link para quando se posicionar o cursor em cima dele, utilizando um pseudo-seletor do estado hover do elemento.
🖱️ :hover
Para quando o cursor do mouse está sobre o elemento.
⌨️ :focus
Para elementos que estejam focados pelo teclado, como links ou campos de um formulário.
🔗 :visited
Para endereços já visitados pelo usuário.
👆 :active
Para o instante onde o elemento está sendo pressionado pelo mouse.
Um dos elementos clássicos que não utilizamos até agora é o img, utilizado para exibir imagens que fazem parte do seu conteúdo — diferentes de imagens utilizadas no estilo da sua página, que são aplicadas utilizando a propriedade background via CSS.
Vamos adicionar uma tag img entre cada h2 e os parágrafos de cada um dos elementos .place.
🖼️ src
O atributo src deve conter o caminho para o arquivo da imagem.
📝 alt
O alt é um texto alternativo para a imagem caso ela não seja carregada pelo navegador. Este mesmo texto pode vir a ser usado no atributo title.
📐 width / height
Também podemos fixar esses valores com os atributos width e height — caso o tamanho real da imagem seja diferente, o navegador irá redimensionar a imagem conforme o necessário.
Para resolver o problema de layout com as imagens, vamos aplicar alguns estilos e utilizar a propriedade float para alinhar os elementos horizontalmente.
E para resolver o problema de "vazamento" das imagens, vamos adicionar um elemento vazio com a classe .clear:
Bem, já temos todo o conteúdo da nossa página no seu devido lugar com um pouco de CSS para deixar tudo mais apresentável. Precisamos agora de mais alguns elementos adicionais para complementar a nossa página, como um rodapé e uma barra lateral com mais conteúdo.
Vamos primeiro ao rodapé:
O próximo da nossa lista é a barra lateral:
Mais uma div, um título em um h3 e uma lista ordenada, a tag ol, com alguns itens a mais. E é claro que este elemento acompanha um pouco de CSS.
Por ser uma barra lateral, ela não deveria pegar toda a largura disponível, e se encaixar ao lado do nosso conteúdo principal. Outro caso de uso para o float.
Após apenas algumas páginas, já temos um exemplo simples, elegante e funcional de um layout com uma pequena pitada de CSS.
Caso você esteja começando nesse mundo de HTML e CSS, que tal implementar uma página similar para a sua cidade? Coloque-a no ar e eu ficarei muito contente de fazer um link para ela.
- ✅ Estrutura básica de HTML com tags semânticas (h1, h2, p, a, img, div, ol)
- ✅ CSS básico: font-family, line-height, margin, padding, border, background
- ✅ Uso de classes para estilizar elementos
- ✅ Pseudo-seletores como :hover
- ✅ Propriedade float para criar layouts com colunas
- ✅ Imagens e atributos src e alt
- ✅ Problemas comuns de layout e suas soluções
- ✅ HTML semântico — use as tags certas para cada tipo de conteúdo (h1, h2, p, a, img, ol, div).
- ✅ CSS de formatação — font-family, line-height, margin, padding, border, background.
- ✅ Classes — use classes para aplicar estilos a grupos de elementos.
- ✅ Pseudo-seletores — :hover, :focus, :visited, :active para interações.
- ✅ Float — alinhe elementos horizontalmente com float: left ou right.
- ✅ Imagens — use a tag img com src e alt, e comprima suas imagens para performance.
- ✅ Limpeza de float — use clear: both para resolver problemas de layout.
- ✅ Centralização — margin: 0 auto com largura fixa.
0 Comentários