HTML: A base da criação de sites
HTML, sigla para HyperText Markup Language, é a linguagem padrão usada para criar páginas web.
HTML é uma linguagem de marcação que define a estrutura de um conteúdo web, Ao invés de ser uma linguagem de programação que usa lógica.
Estrutura Básica de um Documento HTML
Todo documento HTML segue uma estrutura básica, que inclui as seguintes partes principais:
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título da Página</title>
</head>
<body>
<h1>Bem-vindo ao HTML</h1>
<p>Esta é uma página web básica.</p>
</body>
</html>
Vamos decompor este exemplo:
<!DOCTYPE html>: Informa ao navegador que este é um documento HTML5.<html lang="pt-BR">: Inicia o documento HTML e define o idioma como português brasileiro.<head>: Contém metadados (dados sobre o documento), como a codificação de caracteres e o título da página.<meta charset="UTF-8">: Define a codificação de caracteres para UTF-8, que suporta quase todos os caracteres usados por humanos.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura a viewport para garantir que a página seja renderizada corretamente em todos os dispositivos.<title>: Define o título da página, que aparece na aba do navegador.<body>: Contém o conteúdo visível da página, como títulos, parágrafos, imagens, links, etc.
Elementos Comuns do HTML
Aqui estão alguns dos elementos HTML mais comuns que você usará ao criar páginas web:
Títulos:
- Os títulos são definidos pelas tags
<h1>a<h6>, onde<h1>é o título mais importante e<h6>é o menos importante.
html
Copiar código
<h1>Este é um título de nível 1</h1>
<h2>Este é um título de nível 2</h2>
Parágrafos:
- Os parágrafos são definidos pela tag
<p>.
html
Copiar código
<p>Este é um parágrafo de texto.</p>
Links:
- Links são criados usando a tag
<a>e o atributohref.
html
Copiar código
<a href="https://www.exemplo.com">Visite o Exemplo</a>
Imagens:
- Imagens são incorporadas usando a tag
<img>e o atributosrc.
html
Copiar código
<img src="imagem.jpg" alt="Descrição da imagem">
Listas:
- Listas ordenadas (
<ol>) e não ordenadas (<ul>) contêm itens de lista (<li>).
html
Copiar código
<ul>
<li>Item de lista não ordenada</li>
<li>Outro item</li>
</ul>
<ol>
<li>Item de lista ordenada</li>
<li>Outro item</li>
</ol>
Tabelas:
- Tabelas são criadas usando as tags
<table>,<tr>(linha),<th>(cabeçalho) e<td>(célula).
html
Copiar código
<table>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
</tr>
<tr>
<td>Dados 1</td>
<td>Dados 2</td>
</tr>
</table>
Atributos HTML
Os atributos fornecem informações adicionais sobre os elementos HTML. Aqui estão alguns exemplos comuns:
Atributo href em Links:
html
Copiar código
<a href="https://www.exemplo.com">Link para Exemplo</a>
Atributo src em Imagens:
html
Copiar código
<img src="imagem.jpg" alt="Descrição da imagem">
Atributo alt em Imagens:
html
Copiar código
<img src="imagem.jpg" alt="Descrição da imagem">
Atributo class para Estilização:
html
Copiar código
<p class="estilo-paragrafo">Parágrafo estilizado</p>
Atributo id para Identificação Única:
html
Copiar código
<h1 id="titulo-principal">Título Principal</h1>
Formularios
Os formulários são uma parte essencial de muitas páginas web, permitindo que os usuários enviem dados. Eles são criados usando a tag <form>.
html
Copiar código
<form action="/submit" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<input type="submit" value="Enviar">
</form>
Neste exemplo:
<form action="/submit" method="post">: Define a ação do formulário (para onde os dados são enviados) e o método de envio (POST ou GET).<label for="nome">Nome:</label>: Cria um rótulo para o campo de entrada.<input type="text" id="nome" name="nome">: Campo de entrada de texto.<input type="submit" value="Enviar">: Botão de envio.
Boas Práticas
Para garantir que suas páginas HTML sejam bem estruturadas e acessíveis, siga estas boas práticas:
Validação HTML:
- Use validadores HTML (como o W3C Validator) para verificar a conformidade do seu código com os padrões HTML.
Uso Semântico de Tags:
- Utilize tags HTML semânticas (
<header>,<footer>,<article>,<section>, etc.) para melhorar a acessibilidade e SEO.
html
Copiar código
<header>
<h1>Cabeçalho da Página</h1>
</header>
<section>
<h2>Seção Principal</h2>
<p>Conteúdo da seção.</p>
</section>
Acessibilidade:
- Adicione atributos
altàs imagens e use elementos HTML de forma que sejam acessíveis a leitores de tela e outras tecnologias assistivas.
html
Copiar código
<img src="imagem.jpg" alt="Descrição detalhada da imagem">
Estruturação com CSS:
- Separe a estrutura (HTML) da apresentação (CSS) para um código mais limpo e fácil de manter.
html
Copiar código
<link rel="stylesheet" href="estilos.css">
Uso de Metadados:
- Utilize metadados no
<head>do seu documento para fornecer informações sobre a página aos motores de busca e navegadores.
html
Copiar código
<meta name="description" content="Descrição da página para SEO">
<meta name="keywords" content="HTML, guia, iniciante">
