" "

Como criar site em HTML: passo a passo para construir um código em 3 etapas

Como criar site em HTML: passo a passo para construir um código em 3 etapas
Photo by John Schnobrich / Unsplash

O nosso passo a passo sobre HTML é para você, iniciante, que possui interesse em aprender sobre desenvolvimento web e adentrar nesse vasto mundo da tecnologia, algo tão presente atualmente e que promete muito mais no futuro.

Com tanta informação sobre HTML disponível, é difícil saber por onde começar, não é mesmo? Por isso, vamos deixar tudo mais fácil para você agora. Confira:

Como criar site em HTML: o que são os códigos?

HTML é uma das linguagens de programação mais fundamentais da internet. Com ela, é possível trabalhar na estruturação de montagem de páginas virtuais. O manuseio dos códigos permite que, após estruturada, você consiga visualizar o resultado em seu navegador.

O HTML permite a organização e estruturação de elementos como textos, vídeos, imagens e, até mesmo, som. Confira abaixo como criar site em HTML passo a passo.

Como criar uma página HTML?

Criar uma página HTML parece algo complicado e até impossível para muitas pessoas. Vamos te mostrar que isso não é verdade! É muito simples. Veja:

1. Abra um editor de texto: para desenvolver códigos HTML para sites, você pode utilizar simples editores de texto, como o bloco de notas do Windows, por exemplo. Caso tenha interesse, existem muitos bons editores de código disponíveis para utilização, como o Atom, Sublime Text, entre outros.

2. Adicione o código HTML no editor e salve: tendo uma estruturação dos códigos HTML, você pode utilizá-la em seu editor de texto, adicionar todo o conteúdo que deseja e salvar o arquivo com a extensão .html. Neste mesmo artigo te explicaremos esse exemplo de estruturação de códigos HTML mostrada nas imagens abaixo.


3. Abra o arquivo no navegador: selecione o arquivo salvo e abra em seu navegador. Pronto! O resultado da criação de sua primeira página HTML estará disponível e você poderá realizar alterações, caso ache necessário.

Principais tags e códigos HTML

Temos aqui um exemplo de estrutura básica de linguagem, com as principais tags e códigos HTML para sites. Elas devem ser inseridas nesta ordem, para que a linguagem dê certo no resultado final, quando acessar o navegador. Entenda também o que significa cada tag nas explicações abaixo.

1. <!DOCTYPE html>

2. <html lang-"pt-br">

3. <head>

4. <meta charset="UTF-8"/>

5. <title>Digital House</title>

6. </head>

7. <body>

8.  <p>Aprenda HTML de forma simples e fácil</p>

9. </body>

10. </html>

Linha 1: a palavra DOCTYPE é sempre a primeira coisa a aparecer em uma linguagem HTML, indicando qual é a versão de linguagem utilizada. Aqui utilizamos o HTML5 como exemplo, uma versão simples do DOCTYPE.

Linhas 2 e 10: início e fechamento da tag HTML. Eles delimitam o conteúdo do documento. Todas as outras tags devem estar nesse intervalo. No exemplo acima, colocamos o código para linguagem em português.

Linhas 3 e 6: a tag head representa o cabeçalho da página. Esse conteúdo não aparecerá no navegador, mas possui instruções sobre o conteúdo e seu comportamento. Aqui podem ser colocados os scripts, por exemplo.

Linha 4: a meta representa o conjunto de caracteres (character set ou charset) usado na renderização do texto da página. O UTF-8 é o mais utilizado em páginas web.

Linha 5: aqui temos o título da sua página, que aparecerá na aba do navegador.

Linhas 7 e 9: a tag body delimita o espaço onde está todo o conteúdo visual da página, como textos, botões e imagens.

Linha 8: aqui vai todo o conteúdo da sua página. As tags com a letra “p” simbolizam o início e o fim de um parágrafo.

Você pode copiar o exemplo de estrutura de códigos acima para praticar em seu próprio computador. Fácil até aqui, não acha? Isso prova que qualquer pessoa pode aprender HTML, assim como outras linguagens da programação. O processo de absorção é como aprender uma língua nova, sendo necessário estudo, dedicação e muita prática!

Quer criar site em HTML? Aprenda programação!

Ficou interessado em aprender e se aprofundar ainda mais no assunto? Que tal ser um expert em programação? Na Digital House, o curso de Desenvolvimento Web Full Stack é 100% ao vivo e dinâmico, utilizando as melhores ferramentas de educação digital do mercado. Esteja preparado e capacitado para o mercado de trabalho nessa área tão aquecida.

Veja também nossa biblioteca de conteúdo e o Blog DH, com diversos materiais de tecnologia e tutoriais para te agregar muito mais conhecimento e habilidades diferenciadas no mercado.

Leia mais no blog DH:

+ Minha primeira linguagem de programação: como escolher?

+ Primeiros passos no Git: o que eu preciso saber?

+ Pague só quando possuir renda: conheça o modelo ISA da DH

E aí, já segue a gente no Twitter? Vem pra rede, vamos conversar sobre habilidades digitais! ;)