A sintaxe básica do HTML segue o padrão: <nome-da-tag atributo1="valor1" atributo2="valor2">conteúdo</nome-da-tag>. Arquivos CSS externos permitem reutilização de estilos; basta alterar o arquivo CSS para que todas as páginas vinculadas sejam atualizadas.
Ao criar uma nova página, comece com a estrutura HTML mínima. Utilize comentários com o atalho Ctrl+/. Recomenda-se nomear subdiretórios com o prefixo "sub".
Aplicação de Estilos: Métodos e Hierarquia
Existem três formas prinicpais de vincular estilos CSS. Quando há conflitos, a regra é a proximidade: estilos mais próximos do elemento têm prioridade. A hierarquia de pesos é: inline > interno > externo.
- Externo: Vincule um arquivo CSS externo usando a tag
link.
<link rel="stylesheet" href="estilos/principal.css" />
Dentro do arquivo CSS, defina propriedades como cor de fundo:
/* Define o fundo do corpo da página como vermelho */
body {
background-color: #ff0000;
}
Poiscione a tag link dentro do head do documento HTML:
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de Página</title>
<link rel="stylesheet" href="estilos/tema.css" />
</head>
<body>
<!-- Conteúdo da página -->
</body>
</html>
- Interno: Defina estilos dentro de uma tag
stylenohead.
<style>
p { color: blue; }
</style>
- Inline: Aplique estilos diretamente a um elemento usando o atributo
style.
<p style="background-color: yellow;">Este parágrafo tem fundo amarelo.</p>
Diferença entre Atributos e Estilos CSS
Estilos CSS podem controlar apresentação visual de maneiras que atributos HTML não conseguem, mas atributos HTML definem comportamentos ou metadados que estilos não afetam.
Elementos do head: Meta Tags e Configurações
O head contém tags importantes para configuração, como title e meta. A tag title define o nome da página exibido na aba do navegador. A tag meta fornece metadados como codificação de caracteres.
Codificação de Caracteres: UTF-8 vs. GB2312
A escolha da codificação impacta suporte a idiomas e compatibilidade:
- GB2312: Focado em chinês simplificado, com caracteres de 1 a 2 bytes. Oferece suporte limitado e é raramente usado na web moderna.
- UTF-8: Codificação universal que suporta todos os idiomas e emojis, com caracteres de 1 a 4 bytes. É o padrão recomendado para desenvolvimento web.
Use sempre UTF-8 para evitar problemas de exibição. Declare-a no head:
<meta charset="UTF-8">
Uso de Meta Tags Comuns
meta description: Fornece um resumo para mecanismos de busca.meta keywords: Lista palavras-chave para SEO (menos relevante atualmente).meta viewport: Configura a visualização em dispositivos móveis.
<meta name="description" content="Uma página de exemplo para aprendizado.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Diretrizes para Títulos de Páginas Web
Um bom título de página web deve ser conciso (10–30 caracteres), incluir o nome do site ou serviço, e descrever o propósito principal. Ele melhora a experiência do usuário e a indexação por buscadores.