Introdução
Pra quem nunca viu nada de HTML na vida, pode até achar que é um tipo de bruxaria ou até, uma linguagem de uma civilização maia perdida…
<!DOCTYPE html>
<html>
<head>
<title>Título Mucho Louco</title>
</head>
<body>
<h1>Isso é um cabeçalho</h1>
<p>E aqui, um paragrafo!</p>
</body>
</html>
Ao ler o texto acim, você deve até estar se perguntando:
- O que é esses negócios entre <>?
- h1? p? head? body? Eu não sei inglês!
- Que gatinho fofo!
- Dentre outras perguntas diversas.
Então vamos ver como esse HTML ficaria num navegador:
Como você pode ver, é um site bem simples, mas ainda é um site!
No HTML nós não estamos fazendo um programa que manda misséis nucleares para um país no oriente médio, só organizando texto como organizamos um armário com roupas!
Importante ter isso em mente quando montar seu site, pois tudo gira em torno dessa base.
Montando seu primeiro HTML
Agora vamos montar seu primeiro HTML!
Eu irei tentar narrar o código para ficar mais fácil para você.
Abra seu editor de texto de preferência (pode ser o Bloco de Notas do Windows, o Notepad++, VSCode, qualquer editor de texto simples!) e vamos começar dissecando o exemplo que dei anteriormente.
Primeiro, vamos decretar esse arquivo como sendo um arquivo html, pra isso específicamos o DOCTYPE colocando na primeira linha “<!DOCTYPE html>”, logo em seguida vamos ter nossa primeira (de muitas) TAG, o <html>.
Tudo que estiver encapsulado dentro dessa TAG será considerado parte do documento HTML. Mas como utilizá-la?
<!DOCTYPE html>
<html>
</html>
Quase todas as tags no HTML encapsulam conteúdo, logo você tem que abrí-las e as fechar quando terminar de usar, nesse caso você irá abrir a tag html colocando-a <html> e na linha de baixo, fechando-a com </html>!
A barra lateral direita (/) é o que indica o fechamento de uma TAG, já sua abstência forma a abertura da mesma.
Agora vamos escrever algo!
Coloque no seu texto um Header (ou cabeçalho), usando a tag <h1> da mesma maneira que fizemos com a tag <html>
Então, dentro do Header coloque o texto que você quiser.
<!DOCTYPE html>
<html>
<h1>Teste Teste</h1>
</html>
E seu HTML ficaria dessa maneira como indicado na foto ao lado.
O problema é que não dá para fazer um site assim, quero dizer, tecnicamente dá; Porém rapidamente você verá que sua web-página ficará desorganizada.
Por isso, agora vamos usar 2 tags específicas para organização.
Vamos primeiro usar a tag <\head>, que serve para segregar tudo que ficará na “cabeça” do site, ou seja, a parte de cima. Nela, comumente colocamos configurações sobre como o texto do site deve ser apresentado.
Logo após ela, vamos colocar o <\body>, que serve como o “corpo” do site.
Nesse momento, vamos colocar o nosso Header (<h1>), no <body> de nosso site. Aproveite e tente adicionar um Parágrafo com a tag <p>!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Teste Teste</h1>
<p>texto texto</p>
</body>
</html>
Agora não só temos um Cabeçalho, como também temos um pequeno Parágrafo no corpo de nosso site!
Vamos aproveitar então e adicionar um Título à nossa página com a tag <title>!
Com a tag <title> temos um Título que aparece na aba de nossa guia no navegador! Podendo assim melhor representar nosso site quando minimizado pelo usuário final.
<!DOCTYPE html>
<html>
<head>
<title>Titulo legalzão!</title>
</head>
<body>
<h1>Teste Teste</h1>
<p>texto texto</p>
</body>
</html>
Uau!
Você conseguiu! Você fez um site básico em HTML sem ter uma convulção no processo!
Esse é de fato o básico de HTML, como organizar o texto de uma maneira agradável ao olho!
Mas antes precisamos expandir nosso conhecimento nas TAGS do HTML.
Claro, para deixar bonito e formar uma página inteira, precisaremos de um pouco de CSS, que, se pensarmos no seu site como um bolo, o HTML é a massa e o CSS é a cobertura.
Nossa, fiquei com uma fome danada só de imaginar fazer um bolo de HTML e CSS!
Basico