Diário do Programador

Estrutura principal

<html>

A tag raiz que abraça todo o conteúdo da página. Tudo o que faz parte do documento fica dentro dela.

Configurações da página

<head>

O cabeçalho do documento. Aqui ficam as informações invisíveis para o usuário, mas essenciais para o navegador, como o título da aba.

Conectar arquivos

<link>

Usado dentro do <head> para conectar um arquivo externo à página, como uma folha de estilos CSS. O atributo href diz onde o arquivo está.

Conteúdo visível

<body>

O corpo da página. Tudo o que você vê na tela (textos, imagens, botões) fica dentro desta tag.

Parágrafo

<p>

A tag usada para criar blocos de texto normais. É a base para escrever conteúdos longos na web.

Identificador único

id

Um atributo que dá um nome único a um elemento (como um CPF). Só pode existir um id igual na página. No CSS, é selecionado usando a cerquilha #nome.

Classe ou grupo

class

Agrupa elementos parecidos (como um uniforme de time). Vários elementos podem usar a mesma classe. No CSS, é selecionada com um ponto .nome.

Títulos

<h1> até <h6>

Usados para criar cabeçalhos. O <h1> é o mais importante (o título principal), e o <h6> é o menos importante.

Links

<a>

Cria um link para outra página. Usa o atributo href para definir o endereço de destino.

Imagens

<img>

Insere uma imagem na página. É uma tag que não tem fechamento. O atributo src diz de onde a imagem vem e o alt dá um texto alternativo.

Listas

<ul>, <ol> e <li>

Criam listas de itens. O <ul> faz uma lista com bolinhas, o <ol> com números, e o <li> é cada item da lista.

Recipientes Genéricos

<div> e <span>

A <div> é uma caixa de bloco genérica usada para agrupar conteúdos. O <span> é genérico, mas de linha (não quebra a linha do texto).

Ênfase Forte

<strong>

Destaca um trecho importante do texto. Por padrão, os navegadores deixam esse texto em negrito.

Seletor de Tag

tag

Seleciona todos os elementos de um certo tipo. Basta escrever o nome da tag, sem nenhum símbolo antes.

Seletor de Classe

.classe

Seleciona elementos que têm o atributo class correspondente. Usa-se um ponto . antes do nome da classe.

Seletor de ID

#id

Seleciona um elemento único que tem o atributo id correspondente. Usa-se o símbolo da cerquilha # antes do nome.

Espaçamento externo

margin

Cria um espaço fora do elemento, empurrando os outros elementos para longe dele. Pode ser usado para afastar um parágrafo do outro.

Cor de fundo

background-color

Pinta a caixinha invisível que existe atrás de cada parágrafo — não a letra, mas o fundo dela. Sem o traço entre as duas palavras, o navegador não entende o comando.

Arredondamento de borda

border-radius

Deixa os cantos de um elemento arredondados. Quanto maior o valor, mais redondo fica o canto.

Cor da letra

color

Pinta o texto em si — as letras. O valor é o nome da cor em inglês (como red, blue, green, white, black) ou um código de cor.

Tamanho da fonte

font-size

Define o tamanho do texto. Pode ser usado com várias unidades de medida, como px (pixels), em ou rem.

Borda

border

Adiciona uma linha ao redor do elemento. Você define a espessura, o estilo (solid, dashed, dotted) e a cor.

Alinhamento do texto

text-align

Decide para onde as linhas do parágrafo se distribuem em relação à página.

left alinha à esquerda, right à direita, center centraliza, e justify estica o texto para encostar nas duas margens.

Espaçamento interno

padding

Cria um espaço dentro do elemento, empurrando o conteúdo para longe das bordas.

Peso da fonte

font-weight

Define a espessura da letra. Valores comuns são normal ou bold (negrito).

Decoração de texto

text-decoration

Adiciona linhas ao texto, como sublinhado (underline) ou tachado (line-through).

Sombra

box-shadow

Adiciona uma sombra atrás do elemento. Útil para dar sensação de profundidade e destacar caixas na tela.

Opacidade

opacity

Controla a transparência de um elemento. Vai de 0 (invisível) até 1 (totalmente visível).