Introdução
Se você quer aprender a criar sites, o HTML é o melhor lugar para começar. HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto.
Ele é responsável pela estrutura de uma página na internet. Com HTML, podemos criar títulos, textos, imagens, links, botões e muito mais.
Neste tutorial, você vai criar seu primeiro site passo a passo.
O que você precisa?
Para começar, você precisa apenas de:
- Um computador
- Um navegador, como Chrome, Firefox ou Edge
- Um editor de código, como VS Code ou Sublime Text
Criando seu primeiro arquivo HTML
Crie uma pasta para o seu projeto. Depois, dentro dela, crie um arquivo chamado:
index.html
Agora coloque este 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>Meu Primeiro Site</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Este é o meu primeiro site criado com HTML.</p>
</body>
</html>Salve o arquivo e clique duas vezes nele para abri-lo no navegador.
Parabéns! 🎉 Você acabou de criar sua primeira página
Entendendo o código
<!DOCTYPE html>
Indica ao navegador que estamos utilizando HTML5.
<html>
É a tag principal que contém todo o conteúdo da página.
<head>
Contém informações importantes sobre o site, como o título da página e configurações.
<title>
Define o nome que aparece na aba do navegador.
<body>
Aqui fica todo o conteúdo visível para os visitantes.
<h1>
Cria um título principal.
<h1>Meu primeiro site</h1><p>
Cria um parágrafo.
<p>Estou aprendendo HTML!</p>Adicionando mais conteúdo
Agora vamos deixar o site um pouco mais completo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Primeiro Site</title>
</head>
<body>
<h1>Bem-vindo ao meu site!</h1>
<h2>Sobre mim</h2>
<p>Olá! Estou aprendendo a criar sites utilizando HTML.</p>
<h2>O que estou aprendendo?</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Em breve meu site ficará ainda mais bonito!</p>
</body>
</html>Adicionando um link
Para criar um link, utilizamos a tag <a>:
<a href="#"></a>O atributo href indica para onde o visitante será enviado.
Adicionando uma imagem
Para colocar uma imagem no site:
<img src="#" alt="Descrição da imagem">O arquivo imagem.jpg precisa estar na pasta do seu projeto.
