Introdução ao HTML 5 – Conhecendo tags e atributos e criando a primeira página

Que legal que você decidiu aprender e estudar o HTML, aqui nesse artigo você verá uma introdução ao HTML e poderá criar sua primeira página simples com o HTML puro. Esse com certeza é a primeira passo para entender a estrutura e evoluir no desenvolvimento web.

Tendo em vista sua iniciativa quero primeiramente lhe dá os parabéns e dizer que desde já estou feliz por você e também estou na torcida por ti. Então sem mais delongas, mais em frente!

Lista do Conteúdo do artigo

Introdução ao HTML, o que é, e para que serve?

O conceito básico que posso te dizer nesse momento sobre o HTML, para ficar simples o seu entendimento vou resumir que o HTML é a forma como nós programadores definimos como queremos que uma página web seja exibida em um navegador (browser). Ou seja, podemos dizer que o HTML é o esqueleto da página, logo ele começará com a cabeça (head) seguida do corpo (body). Sendo o body do HTML a parte visível de uma página web. Como assim? O body é onde colocamos nossos elementos que queremos exibir para o usuário final, coisas como títulos, parágrafos, imagens, links, etc.

Estrutura básica do HTML introdução:

Para começamos a escrever os códigos HTML da nossa primeira página vamos primeiramente entender um pouco sobre tags HTML.

Tags HTML, veja a forma como declarar uma tag:

Em resumo para escrever uma tag correta e válida no HTML, teremos que escrever a abertura, conteúdo e por último o fechamento da tag, veja o exemplo da tag de parágrafo:

<p>conteúdo</p>

Acima temos uma tag de parágrafo válida! Explicando a tag:
<p> é a abertura da tag.

</p> é o fechamento da tag.

E o que fica entre a abertura e o fechamento é o conteúdo.

Agora veja mais exemplos de tags HTML:

<html> Conteúdo do HTML vai entre a abertura e o fechamento </html>
<head> Conteúdo -> essa é uma  tag head </head>
<body> Conteúdo -> essa é uma  tag body </body>
<h1> Conteúdo -> essa é uma  tag h1, título 1</h1>
<h2> Conteúdo -> essa é uma  tag h1, título 2</h2>
<h3> Conteúdo -> essa é uma  tag h1, título 3 </h3>
<h4> Conteúdo -> essa é uma  tag h1, título 4 </h4>
<h5> Conteúdo -> essa é uma  tag h1, título 5 </h5>
<h6> Conteúdo -> essa é uma  tag h1, título 6 </h6>
<p> Conteúdo -> essa é uma  tag p, paragrafo </P>

Acima vimos alguns exemplos de tags, no entanto, devo ressalvar que ainda teremos dezenas de outras tags que vermos nos próximos posts.

Além disso, é importante você saber que não são todas as tags que tem fechamento. Pois algumas tags terão somente abertura. Veja abaixo exemplo de tags que tem somente abertura:

<br>
<hr>
<img>
<input>

Acima também citei apenas algumas tags que não tem fechamento, ainda existem outras tags que não terão fechamento.

Atributos das tags do HTML

Certamente você deve ter ficado curioso sobre as tags sem fechamento. Afinal de contas onde colocamos o conteúdo dessas tags. As tags desse tipo que tem conteúdo que queremos exibir para o usuário, o conteúdo será passado via atributo. Ou seja, como parâmetro do atributo. Pode ter ficado confuso, mas não se preocupe, pois agora explicarei a baixo, os atributos serão adicionados na abertura da tag. Mais precisamente após o nome da tag e antes do sinal de > (maior que), veja abaixo:

<img src="link_da_imagem_aqui">

Acima vemos o exemplo da tag img usada para exibir imagens em um site, neste exemplo temos um atributo chamado src característicos da tag img. É por meio desse atributo que nossa imagem será carregada e exibida em um site.

Uma tag pode ter mais de um atributo, por exemplo, podemos passar para essa mesma tag img atributos de tamanho e largura da imagem. Dessa forma o navegador saberá em qual tamanho deve exibir a imagem no site. Exemplo:

<img src="link_da_imagem_aqui" width="320px" heigth="200px">

Enfim, continuemos os estudos e depois voltaremos e aprenderemos na prática esse assunto.

HTML básico para exibir um simples Hello World no navegador

Agora que você teve a introdução básica do HTML com suas tags e atributos vamos escrever o HTML da nossa primeira página web em HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Acima está o exemplo de uma estrutura completa do HTML 5, que nesse momento que escrevo esse artigo é a versão mais atual.

Bom no exemplo acima, temos as tags principais da estrutura do HTML, e como ver pode ver algumas têm atributos com valores. E embora tenhamos várias linhas de código, nossa página mostra apenas um Hello World ao ser aberta em um navegador. Veja como ficou a página carregada no navegador Google Chrome:

Use um Editor de código inteligente para te ajudar

Para você testar esse código futuros que escreveremos, você precisará de um editor de código que facilite a edição e visualização do seu conteúdo HTML. Uma ótima opção para isso é o Visual Studio Code (VS Code), um editor gratuito e altamente popular entre desenvolvedores, disponível para Windows, Mac e Linux.

Primeiro, baixe e instale o Visual Studio Code (VS Code) em seu computador. Em seguida, crie uma pasta onde você guardará seu projeto. Por exemplo, pode chamar a pasta de “MeuProjetoHTML” e colocá-la em um local fácil de acessar, como a área de trabalho. Dentro dessa pasta, crie um novo arquivo e nomeie-o como “index.html“. Esse arquivo será onde você escreverá o código HTML para a sua primeira página.

Abra o VS Code, clique em “Arquivo” > “Abrir Pasta” e selecione a pasta “MeuProjetoHTML”. Com isso, a pasta será aberta no VS Code, e você poderá criar ou modificar arquivos diretamente pelo editor. Agora, crie o arquivo “index.html” clicando com o botão direito na pasta e escolhendo “Novo Arquivo” e digitando “index.html” como o nome.

No arquivo “index.html”, você pode copiar e colar o seguinte código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Bom, se você leu e praticou os códigos feitos aqui, você está de parabéns, e digo mais você será um grande desenvolvedor. Pois para se tornar um, requer estudos e dedicação, habilidade que você está praticando agora.

Agora que você já leu esse conteúdo, o próximo artigo já está pronto, clique aqui e leia-o.

Por hoje ficamos por aqui e logo mais daremos continuidade em nossos estudos de HTML. Continue praticando e bons estudos.

HTML 5