HTML, que significa HyperText Markup Language, é a espinha dorsal da web.
É graças a ele que podemos ver as páginas na internet organizadas com títulos, parágrafos, imagens, links e muito mais.
Hoje, para qualquer pessoa interessada em tecnologia, seja para criar seu próprio site ou para entender o básico de desenvolvimento web, aprender HTML é um excelente ponto de partida.
Diferente de linguagens de programação como Python ou JavaScript, o HTML não é voltado para lógica e processos, mas sim para a estrutura e o conteúdo.
Se você quer entender o HTML de uma maneira fácil, pense nele como a estrutura de uma casa: ele cria a fundação e as paredes, enquanto CSS (para estilo) e JavaScript (para funcionalidades) são como a decoração e os equipamentos.
Estrutura básica de um documento HTML
Quando abrimos um arquivo HTML, a primeira coisa que encontramos é o “esqueleto” da página.
Esse esqueleto é composto por tags que organizam o conteúdo. A estrutura básica de qualquer arquivo HTML inclui as seguintes partes:
<!DOCTYPE html>
<html>
<head>
<title>Meu Primeiro Site</title>
</head>
<body>
<h1>Bem-vindo ao meu site!</h1>
<p>Esse é um parágrafo de exemplo.</p>
</body>
</html>
Vamos entender o que cada uma dessas tags faz:
- <!DOCTYPE html>: Informa ao navegador que estamos usando HTML5.
- <html>: A tag raiz que envolve todo o conteúdo HTML.
- <head>: Contém informações sobre o documento, como o título e links para arquivos de estilo.
- <title>: Define o título da página, que aparece na aba do navegador.
- <body>: Onde o conteúdo visível da página fica. Isso inclui textos, imagens, links e outros elementos.
Tags fundamentais: <!DOCTYPE>, <html>, <head>, <body>
Essas tags são o ponto de partida, e cada uma desempenha um papel específico:
- <!DOCTYPE> é obrigatório em documentos HTML5 e ajuda os navegadores a entenderem como interpretar o código.
- <html> indica o início e o fim do documento HTML.
- <head> guarda informações “de fundo”, ou seja, coisas que não aparecem na página, mas que são importantes para seu funcionamento.
- <body> contém tudo que vai aparecer na tela.
Trabalhando com títulos, parágrafos e links
Para que o conteúdo faça sentido, precisamos organizá-lo de forma clara e lógica. Aqui entram os elementos de título e parágrafo, representados pelas tags <h1> até <h6> e <p>, respectivamente:
<h1>Esse é o título principal</h1>
<p>Esse é um parágrafo com algumas informações importantes sobre o meu site.</p>
Além disso, temos os links, que são feitos com a tag <a>. Por exemplo:
<a href=”https://www.example.com”>Visite meu site!</a>
O atributo href dentro da tag <a> é o que define para onde o link vai nos levar.
Imagens e listas no HTML
Imagens são fundamentais para deixar um site visualmente atraente.
Para adicioná-las, usamos a tag <img>:
<img src=”imagem.jpg” alt=”Descrição da imagem”>
- src define o caminho da imagem.
- alt é uma descrição alternativa, importante para acessibilidade e SEO.
E, se quisermos criar listas, temos duas opções principais:
- Listas Ordenadas (<ol>)
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
- Listas Não Ordenadas (<ul>)
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
As listas são ótimas para organizar o conteúdo de maneira fácil de ler.
Formatação e estilização com HTML
Mesmo que o CSS seja a ferramenta principal para estilização, o HTML também possui alguns atributos e tags que ajudam a formatar o texto:
- Negrito: <b> ou <strong>
- Itálico: <i> ou <em>
- Sublinhado: <u>
Exemplo:
<p>Esse é um texto em <b>negrito</b>, <i>itálico</i> e <u>sublinhado</u>.</p>
Essas tags são úteis para destacar partes específicas do conteúdo.
Formulários e inputs
Os formulários são essenciais para interação com o usuário.
Eles são feitos com a tag <form>, e podem incluir diversos tipos de campos de entrada, como <input>, <textarea>, e <button>.
<form action=”/enviar-dados” method=”POST”>
<label for=”nome”>Nome:</label>
<input type=”text” id=”nome” name=”nome”>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”>
<button type=”submit”>Enviar</button>
</form>
Esses elementos fazem com que a página interaja com o usuário, coletando informações e as enviando para um servidor.
Estrutura semântica
O HTML5 introduziu novas tags semânticas que tornam o código mais legível e organizado. Essas tags incluem:
- <header>: para o cabeçalho da página.
- <nav>: para a navegação.
- <article>: para o conteúdo principal.
- <section>: para dividir o conteúdo em seções.
- <footer>: para o rodapé.
Exemplo de uso:
<header>
<h1>Meu Site Incrível</h1>
</header>
<nav>
<a href=”#home”>Home</a>
<a href=”#about”>Sobre</a>
</nav>
<section>
<article>
<h2>Sobre HTML</h2>
<p>HTML é a base da web…</p>
</article>
</section>
<footer>
<p>© 2023 Meu Site</p>
</footer>
Essas tags ajudam tanto o navegador quanto os motores de busca a entenderem melhor o conteúdo.
Boas práticas e organização do código HTML
Para manter o código limpo e fácil de entender, siga estas dicas:
- Identação: Sempre organize o código com recuos para que ele seja mais legível.
- Comentários: Use comentários (<!– comentário –>) para explicar partes importantes do código.
- Fechar todas as tags: Mesmo que algumas tags possam ser auto-fechadas, é uma boa prática fechar todas para evitar erros.
- Manter o código organizado: Dividir o conteúdo em seções claras.
Como interage com CSS e JavaScript
HTML sozinho é só o começo. Para adicionar estilo e interatividade, você precisará de CSS e JavaScript:
- CSS: adiciona cor, fontes, margens e outros elementos de estilo.
- JavaScript: permite interatividade, como animações, validações de formulário e exibição de alertas.
Veja um exemplo de HTML com CSS e JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
<script>
function mostrarMensagem() {
alert(“Bem-vindo ao meu site!”);
}
</script>
</head>
<body onload=”mostrarMensagem()”>
<h1>Meu Site com HTML, CSS e JavaScript</h1>
<p>Este é um exemplo completo de uma página web.</p>
</body>
</html>
Este é um guia que cobre todas as bases dessa linguagem de marcação de texto, e fornece uma introdução completa para iniciantes.
O próximo passo é praticar, criar suas próprias páginas e explorar as possibilidades.
Esse foi o artigo de hoje. Espero que você tenha gostado. Caso tenha alguma dúvida é só deixar nos comentários que farei questão de responder
Não esqueça de deixar seu comentário também. Ele é de fundamental importância para mim…
Como Iniciar Na Programação Da Forma Correta
E-BOOK Grátis Revela A Forma Correta De Iniciar No Mundo Da Programação E Ter Resultados...
0 Comentários