Aprenda a criar seu site em HTML do zero com nosso guia passo a passo. Domine o básico da codificação web e comece hoje mesmo!
Se você está iniciando no mundo do desenvolvimento web e tem vontade de criar seu primeiro site, provavelmente já se perguntou: Como criar uma página web em HTML?
Antes de começarmos, é importante saber que o HTML não é uma linguagem de programação, mas sim uma linguagem de marcação que permite descrever o layout, organizar e formatar uma página web.
Essa linguagem de marcação é muito fácil de aprender, não importando se você é um iniciante no mundo do desenvolvimento web.
Atualmente, não se criam páginas web apenas com código HTML, pois para que a web funcione perfeitamente, é necessário um alto conhecimento. Hoje em dia, com o uso de Sistemas de Gerenciamento de Conteúdo (CMS) como WordPress, Magento ou Joomla, é possível fazer todo o trabalho. No entanto, aqueles que conhecem o código HTML podem aproveitar ao máximo suas propriedades.
Pronto para dar os primeiros passos? Vamos começar!
O que é o HTML?
HTML é a sigla para Hypertext Markup Language, uma linguagem de marcação criada pelo cientista da computação Tim Berners-Lee, com o objetivo de ser um sistema de hipertexto na Internet.
Sua primeira versão foi publicada em 1991 com 18 tags (etiquetas) e desde então ganhou novas versões, popularidade e cresceu muito no mercado. Hoje, é considerado o padrão oficial da Internet.
De acordo com a Referência de Elementos HTML, atualmente existem mais de 140 tags HTML. Embora algumas delas estejam obsoletas e não sejam suportadas pelos navegadores. As especificações do HTML podem ser consultadas no Consórcio World Wide Web (W3C), responsável pela documentação e novos desenvolvimentos.
Em 2014, o HTML5 foi lançado e é a versão mais recente com novas tags semânticas, como <article>, <header> e <footer>.
Como criar uma página web em HTML?
Agora que sabemos o que é o HTML e que é possível criar um site do zero usando essa linguagem de marcação, vamos desenvolver seu primeiro projeto. Para começar, vejamos quais são os primeiros passos para criar uma página web em HTML.
Documentos HTML são arquivos com extensões .html ou .htm e podem ser visualizados em qualquer navegador, que lê o arquivo e renderiza o conteúdo para que os usuários possam vê-lo.
Esse documento pode ser criado a partir de qualquer editor de texto disponível em seu computador.
Mas não se preocupe! Vamos apresentar um guia passo a passo e oficialmente iniciar seu projeto de criação.
1. Escolha o editor de texto
Existem muitas opções de editores de texto disponíveis na Internet, tanto gratuitos quanto pagos. Entre as opções gratuitas, há vários que oferecem todos os recursos necessários para criar seu site.
Existem dois tipos de editores:
Editores WYSIWYG: What You See Is What You Get (sim… é isso que eles se chamam!). São aqueles que permitem que você veja como o código aparece em uma página web enquanto você o desenvolve.
Para iniciantes, os editores WYSIWYG são altamente recomendados, pois não é necessário ter experiência em codificação. Alguns exemplos incluem:
- Atom
- Sublime
- Notepad++
- Visual Studio Code.
Editores HTML textuais: São baseados em texto e exigem que você tenha conhecimento em HTML. Esses editores não permitem ver ao vivo o resultado do seu código.
Exemplos incluem o Word e o Bloco de Notas nativo dos computadores com sistema operacional Windows. Em nosso post sobre JavaScript, usamos o Fiddle, uma plataforma onde é possível ver o código que está sendo executado.
2. Defina o projeto web
Você já definiu um tema para sua primeira página web em HTML? Não? Não se preocupe, é o seu site, então você pode criar a ideia que mais gosta, falar sobre si mesmo ou usar algum tema como exemplo. Neste caso, falaremos sobre editores de texto.
Preparado? Vamos começar o projeto!
Para criar sua primeira página web em HTML, escolhemos o editor Visual Studio Code. Mas você pode usar o que estiver instalado em seu computador.
Abra seu editor de texto e crie um novo documento, no qual começaremos a trabalhar.
3. Estruture o código HTML
Assim que você criar o documento, começaremos a escrever o código.
Primeiro, escreveremos o seguinte bloco:
<!DOCTYPE HTML>
<html>
<head>
<title>Minha Primeira Página</title>
<meta name="description" content="Descrição da minha página">
<meta name="keywords" content="HTML, desenvolvimento web, tutorial">
</head>
<body>
<!-- Conteúdo da página aqui -->
</body>
</html>Agora, vamos explicar passo a passo o código:
- <!DOCTYPE HTML>: Esta é a tag que define que o documento é HTML;
- <HTML>: Esta é a tag principal de uma página HTML;
- <HEAD>: Esta é a tag que abre o bloco de informações sobre o site;
- <TITLE>: Aqui, escrevemos o título incrível que daremos à página da web, aquele que aparece na borda da janela do navegador.
Importante! Na estrutura do código HTML, é muito importante que você feche uma tag que você “abriu”, usando a barra “/” para indicar que aquele bloco de informações terminou.
Hoje, sabemos que não basta criar um site e colocá-lo na Internet, é necessário também facilitar a descoberta dele. Portanto, vamos usar as tags:
- <META =”description”>: Informa aos mecanismos de busca, por meio da descrição que você criou, sobre o que se trata o seu site;
- <META =”keywords”>: Ajuda seu site a ser encontrado por meio dessas palavras-chave.
Agora criamos as informações principais para sua página web e agora vamos elaborar um conteúdo para ela. Para isso, vamos trabalhar com a tag <BODY>.
4. Crie um conteúdo para sua página web
Antes de começar a criar o texto visível para os utilizadores, vamos guardar o documento.
Ao guardar o conteúdo, nomeamos o ficheiro como index.html, onde “index” é o nome do documento e .html é a extensão que indica que é um ficheiro HTML. Dentro da tag <BODY> </BODY>, vamos criar um texto de boas-vindas para o visitante do teu site.
<h1> Exemplos de editores de texto WYSIWYG </h1>A tag <h1> define o título de nível 1 e pode ser estendida até <h6>.
<p> São editores que permitem que vejas como o código aparece numa página web em tempo real. Para os iniciantes, os editores WYSIWYG são altamente recomendados, pois não é necessário ter experiência em codificação. </p>Quando precisamos abrir um parágrafo, fazemos usando a tag <p>. Neste caso, escrevemos uma breve introdução para que o leitor saiba sobre o que estamos a falar.
<h2>Alguns Editores WYSIWYG populares:</h2>
<ol>
<li>Atom</li>
<li>Sublime Text</li>
<li>Notepad++</li>
<li>Brackets</li>
</ol>Para criar uma lista com os nomes dos editores, usamos o elemento <ol> – que define o bloco de listas ordenadas – e o <li> – que deve ser usado para cada item da lista.
Juntando temos:
<h1> Exemplos de editores de texto WYSIWYG </h1>
<p> São editores que permitem que vejas como o código aparece numa página web em tempo real. Para os iniciantes, os editores WYSIWYG são altamente recomendados, pois não é necessário ter experiência em codificação. </p>
<h2>Alguns Editores WYSIWYG populares:</h2>
<ol>
<li>Atom</li>
<li>Sublime Text</li>
<li>Notepad++</li>
<li>Brackets</li>
</ol>5. Adicione links e cores ao texto
Uma página web apenas em preto e branco não chama muita atenção, certo? Então, vamos adicionar algumas linhas de código para tornar o seu site um pouco mais atrativo.
- Cor: Para dar cor aos seus textos, você precisa indicá-la entre as tags:
<span style="color:red"> </span>Mas há uma regra para definir a cor do texto, além das tags: escrevê-la corretamente.
Para isso, você pode consultar o Seletor de Cores HTML da W3Schools, escolher a cor que mais gosta e copiar o código HEX – ou escrever o nome na tag.
- Links: Outra tag muito importante é a <a> </a>, que adiciona um link ao texto colocado entre elas.
Por exemplo, se você quiser que o visitante seja direcionado para outro site ou para outra aba do seu próprio site, basta adicionar um texto entre essas tags desta forma:
<a target="_blank" href=" [URL do link]"> Texto do link </a>A informação “_blank” significa que, ao clicar no link, a página será aberta em uma nova aba. Mas se você desejar que ela seja aberta no mesmo documento, precisará substituir essa informação por “_self”.
6. Finalize sua página web
Agora que terminamos de criar o código HTML básico para sua página web, vamos ver como ficou o seu primeiro projeto. Dependendo do editor, você poderá salvar o arquivo como .html em seu computador e abri-lo em seu navegador.
A página acima foi gerada com o código abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplos de Editores de Texto WYSIWYG</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 {
color: #333;
}
p {
color: #666;
max-width: 600px;
margin: 0 auto;
}
h2 {
color: #333;
}
ol {
list-style-type: decimal;
max-width: 600px;
margin: 0 auto;
padding-left: 20px;
}
li {
color: #666;
}
</style>
</head>
<body>
<h1>Exemplos de editores de texto WYSIWYG</h1>
<p>São editores que permitem que você veja como o código aparece em uma página web em tempo real. Para os iniciantes, os editores WYSIWYG são altamente recomendados, pois não é necessário ter experiência em codificação.</p>
<h2>Alguns Editores WYSIWYG populares:</h2>
<ol>
<li>Atom</li>
<li>Sublime Text</li>
<li>Notepad++</li>
<li>Brackets</li>
</ol>
</body>
</html>
Trabalhamos com os principais atributos e tags do HTML até agora. No entanto, é importante que você continue explorando mais informações sobre como criar uma página web em HTML.
Como mencionamos no início do conteúdo, o uso de um Sistema de Gerenciamento de Conteúdo (CMS) é mais adequado para criar um site, pois economiza tempo e oferece mais recursos e possibilidades.
Considerações Finais
Agora que você sabe como criar uma página web em HTML, lembre-se de que, para publicar seu site na internet e fazê-lo funcionar normalmente, será necessário registrar um domínio e hospedar seu site em algum serviço de hospedagem web. Confira também: