Estrutura Básica de um Documento HTML
Um documento HTML segue uma estruutra padrão que define a base da página web. Veja um exemplo revisado:
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Título do Site</title>
</head>
<body>
<!-- Elementos visíveis aqui -->
</body>
</html>
O `` declara o tipo de documento. A tag <html> envolve todo o conteúdo, enquanto <head> contém metadados e <body> inclui os elementos visíveis.
Tags HTML Comuns
HTML utiliza tags para estruturar conteúdo. Aqui estão algumas das mais usadas:
<h1>a<h6>: Títulos, onde<h1>é o maior.<p>: Parágrafo.<a href="url">: Link para outra página.<img src="caminho" alt="texto alternativo">: Inserção de imagem.<ul>e<ol>: Listas não ordenadas e ordenadas, com<li>para itens.<div>: Contêiner genérico para blocos.<span>: Contêiner em linha para trechos de texto.<table>,<tr>,<td>: Tabelas, linhas e células.<form>: Formulários, com<input>para campos.
Exemplo de uso:
<div id="cabecalho">
<h1>Bem-vindo</h1>
<p>Este é um parágrafo com <strong>ênfase</strong> e <em>itálico</em>.</p>
</div>
Caracteres especiais como (espaço) e < (menor que) também são usados para inserir símbolos.
Propriedades de Tags HTML
As tags possuem atributos que definem comportametno e estilo. Exemplos:
<a href="url" target="_blank">: Abre link em nova aba.<img src="imagem.jpg" width="100" height="50">: Define dimensões da imagem.<input type="text" name="campo" placeholder="Dica">: Campo de entrada com texto de ajuda.
Para tabelas, atributos como border, cellpadding e cellspacing controlam aparência. Embora tags como <font> estejam depreciadas, propriedades CSS modernas as substituem.
Exemplo de CSS aplicado a uma div:
.caixa {
cor de fundo: #f0f0f0;
fonte-familia: Arial, sans-serif;
tamanho da fonte: 14px;
borda: 1px sólida #ccc;
}
Vocabulário em Inglês para Desenvolvimento Front-End
Ao trabalhar com HTML e CSS, termos em inglês são frequentes. Aqui estão alguns comuns:
| Termo | Significado |
|---|---|
| charset | Conjunto de caracteres |
| stylesheet | Folha de estilo |
| href | Referência de hyperlink |
| background-color | Cor de fundo |
| src | Código de origem |
| width | Largura |
| height | Altura |
| display | Exibição |
| text-align | Alinhamento de texto |
| border | Borda |
| margin | Margem |
| padding | Preenchimento |
| float | Flutuação |
| position | Posição |
Esses termos ajudam na leitura de documentações e código existente.