HTML (HyperText Markup Language) é a base de toda página web. Se você está começando a aprender desenvolvimento web, entender HTML é o primeiro passo essencial. Neste artigo, vamos explorar o que é HTML, como ele funciona e guiá-lo passo a passo na criação da sua primeira página HTML.
Introdução ao HTML
HTML é uma linguagem de marcação usada para criar e estruturar o conteúdo de páginas na web. Ele funciona organizando textos, imagens, links e outros elementos em uma página, permitindo que os navegadores entendam e exibam corretamente essas informações.
Cada página na web é construída com HTML, o que torna esse conhecimento crucial para qualquer desenvolvedor web. Saber o básico de HTML permite que você crie páginas simples e compreenda o funcionamento de sites mais complexos. Conforme você avança, poderá integrar outras tecnologias, como CSS e JavaScript, mas tudo começa com o HTML.
Passo a passo para criar a primeira página
Agora que entendemos o que é o HTML, vamos criar a sua primeira página.
Abrir um editor de texto
Para começar, você pode usar qualquer editor de texto simples, como o Bloco de Notas no Windows ou um editor mais sofisticado como o Visual Studio Code (VS Code), que facilita a escrita de código com sugestões automáticas e realce de sintaxe. Para o nosso exemplo utilizaremos o Visual Studio Code.
Criar o arquivo .html
Selecione ou crie uma pasta no seu computador onde deseja armazenar sua página HTML. Essa pasta será o local onde seus arquivos HTML e outros recursos (como imagens e folhas de estilo) serão mantidos organizados.
Após selecionar, crie um novo arquivo.
Ao salvar o arquivo, dê um nome que faça sentido para o conteúdo da página. Por exemplo, se for sua primeira página, um nome como “minhaPagina.html” funciona bem. Certifique-se de salvar o arquivo com a extensão .html, pois isso indica ao sistema e ao navegador que este é um arquivo HTML.
Agora é só clicar no arquivo criado e você está pronto para começar a escrever o código HTML!
Inserir a estrutura básica
No seu arquivo HTML, insira a seguinte estrutura básica de um documento HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Primeira Página HTML</title>
</head>
<body>
<!-- Seu conteúdo aqui -->
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script></body>
</html>
Para entendermos a estrutura básica que envolve um documento HTML, podemos fazer uma analogia com o corpo humano, em que temos a cabeça (<head>) e o corpo (<body>), cada uma com sua função específica.
Declaração <!DOCTYPE html>
No topo do documento HTML, temos a declaração <!DOCTYPE html>. Ela informa ao navegador que o arquivo deve ser interpretado como HTML5, que é a versão mais recente da linguagem de marcação até o momento. Isso é fundamental para que o navegador entenda corretamente o conteúdo da página e aplique as regras adequadas ao exibir o seu site.
A tag <html>
Logo após a declaração <!DOCTYPE html>, encontramos a tag <html>, que envolve todo o conteúdo da página web. Tudo dentro desta tag faz parte do documento HTML. A tag <html> também pode incluir o atributo “lang” para definir o idioma da página. Por exemplo, lang=”pt-br” define que a página está em português do Brasil.
Cabeça (<head>) – O cérebro do documento
Dentro da tag <html>, temos a tag <head>, que funciona como o cérebro de uma página web. Assim como a cabeça de uma pessoa armazena informações importantes (como o cérebro, que processa tudo), a tag <head> armazena dados essenciais para o funcionamento da página, mas que não são diretamente visíveis para o usuário. Dentro dela podemos colocar informações como:
Meta informações: a tag <meta charset=”UTF-8″> define a codificação de caracteres, garantindo que letras acentuadas e símbolos sejam exibidos corretamente. Caso esta tag não seja utilizada, o navegador não sabe qual codificação de caracteres deve usar. Como resultado, ele pode interpretar os acentos de maneira errada, substituindo-os por símbolos estranhos.
Por exemplo, em um parágrafo como:
<p>Essa é uma página com caracteres acentuados: á, é, í, ó, ú, ç.</p>
A exibição no navegador pode ficar assim:
“Essa é uma página com caracteres acentuados: á, é, Ã, ó, ú, ç.”
Título da página: a tag <title> define o nome da página que aparece na aba do navegador, semelhante ao exemplo abaixo.
Links externos: como arquivos de CSS (para definir o estilo da página) ou scripts de JavaScript (para adicionar interatividade).
Mesmo que o conteúdo do <head> não seja visível no navegador, ele é crucial para a interpretação correta do documento, assim como o cérebro é vital para o funcionamento do corpo.
Corpo (<body>) – O que é visível
A tag <body>, por outro lado, é o que define o corpo da página web, ou seja, tudo o que o usuário realmente vê e interage. Assim como no corpo humano, onde os braços, pernas e rosto são visíveis, tudo dentro do <body> aparece na tela do navegador. No <body>, podemos incluir:
Títulos: o <h1> é usado para o título principal da página, que geralmente tem maior destaque.
Ex: <h1>Bem-vindo à minha página!</h1>
Parágrafos: o <p> é utilizado para blocos de texto descritivos ou explicativos.
Ex: <p>Essa é a minha primeira página HTML.</p>
Imagens: o <img> exibe uma imagem no navegador. Ele tem um atributo chamado “src” que define a localização da imagem, e um outro atributo chamado “alt” que descreve a imagem caso ela não seja carregada.
Caso a você tenha o link de uma imagem, você pode adicionar da seguinte forma:
Ex:<img src=”C:/arquivos/imagem.png” alt=”Imagem de exemplo” />
Links: o <a> cria um hiperlink que vai direcionar o usuário para uma outra página ou para um link interno. Ele tem o atributo “href” que define o endereço do link, e o “target=”_blank”” que vai informar ao navegador que o link deve ser aberto em uma nova aba.
Ex: <p>Se quiser aprender mais sobre programação, visite o site da <a href=”https://nextwave.education/” target=”_blank”>Next Wave Education</a> para mais informações.</p>
Essa separação clara entre a cabeça (<head>) e o corpo (<body>) permite que a página seja organizada de forma lógica. A cabeça contém as instruções e configurações para o navegador, enquanto o corpo exibe os elementos visíveis e interativos para o usuário.
Agora, se colocarmos todas as tags acima em nosso projeto de exemplo, vamos ter algo semelhante a isso:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Minha Primeira Página HTML</title>
</head>
<body>
<h1>Bem-vindo à minha página!</h1>
<p>Essa é a minha primeira página HTML.</p>
<img decoding="async" src="https://nextwave.education/wp-content/uploads/2024/07/CapaNumeros.png" alt="Imagem de exemplo" />
<p>Se quiser aprender mais sobre programação, visite o site da <a href="https://nextwave.education/" target="_blank">Next Wave Education</a> para mais informações.</p>
<script type="text/javascript" id="perfmatters-delayed-styles-js">!function(){const e=["keydown","mousemove","wheel","touchmove","touchstart","touchend"];function t(){document.querySelectorAll("link[data-pmdelayedstyle]").forEach(function(e){e.setAttribute("href",e.getAttribute("data-pmdelayedstyle"))}),e.forEach(function(e){window.removeEventListener(e,t,{passive:!0})})}e.forEach(function(e){window.addEventListener(e,t,{passive:!0})})}();</script></body>
</html>
Testando a página no navegador
Em seguida, vá até a pasta onde o arquivo foi salvo e abra-o no navegador (normalmente basta dar um duplo clique no arquivo).
Você verá a sua página pronta com os elementos que você inseriu!
Conclusão
Parabéns! Você acabou de criar sua primeira página HTML. Este é o primeiro passo no mundo do desenvolvimento web. Com o tempo, você aprenderá a usar CSS para estilizar suas páginas e JavaScript para adicionar interatividade. A prática é fundamental, então continue experimentando com diferentes tags e crie novas páginas.
Dominar o HTML é a base para se tornar um desenvolvedor web completo. Bons estudos e boas criações!