Antes de começar, um disclaimer
Nesse artigo vou abordar o HTML com minhas palavras, e tentar explicar para alguém que nunca teve contato, mas quer saber mais sobre, o que é e como ele funciona.
Caso você tenha alguma dúvida ou correção de algum conceito, por favor, não deixe de escrever nos comentários.
Vamos lá...
O que é?
HTML é, na verdade, uma abreviação para HyperText Markup Language, ou em português, linguagem de marcação de hipertexto. Usando a estrutura HTML você pode construir páginas web.
Se você não sabe o que é hipertexto, provavelmente só não é familiar com o termo mas no fundo está acostumado com a ideia. Imagine um texto que fala sobre patos. No meio desse texto você encontra um trecho dizendo que patos podem ser encontrados tanto em ambientes de água doce quanto em água salgada. E esses dois termos em destaque são clicáveis, levando a outros textos inteiramente dedicados a explicar sobre água doce e água salgada respectivamente.
Em resumo, podemos dizer que "hipertexto" é simplesmente um texto que "linka" com outros textos. Se você usa internet a um tempo já deve estar habituado com o conceito de links.
E qual é essa estrutura?
Simples, ela é definida por tags, que por sua vez tem o nome do elemento, seus atributos, e seus "filhos" ou children.
<elemento atributo="valor">...</elemento>
Nesse caso, a tag pode ter childrens associados a ela, mas algumas vezes, nós não precisamos desses childrens, e se esse for o caso, usamos o auto-fechamento de tags.
<elemento atributo="valor" />
Exemplos com tags
Para demonstrar, vou te mostrar duas tags que abrem e fecham (E podem ter childrens), e duas com auto-fechamento.
Que "Abrem e fecham"
<p>Hello World!</p>
A tag <p> serve para demarcar parágrafos, dentro dela você pode escrever o conteúdo que quer exibir.
<a href="https://github.com/joaopedrov0">GitHub</a>
A tag <a> é usada quando queremos criar um link. Nesse caso temos o nome do elemento a, um atributo href (HyperText Reference), e o valor do atributo é o link para o meu GitHub.
E ainda no exemplo da tag <a>, a palavra GitHub é o children, nesse caso foi um texto, mas childrens podem ser outras tags também.
Com auto-fechamento (self closing tags)
<img src="patinho.png" />
A tag img serve para inserir uma imagem.
Nesse exemplo, img é o nome do elemento, src(source) é um atributo e o valor desse atributo é o nome do arquivo da imagem que eu quero exibir.
E esse é o conceito de tags!
Com esse conceito, agora basta entender individualmente algumas tags, e usar isso para estruturar os documentos HTML.
...
Com os conceitos que eu acabei de apresentar, eu construí um exemplo final:
<h1>Hello World</h1>
<h2>Um parágrafo aleatório:</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<a href="https://github.com/joaopedrov0">E um link</a>
Eu salvei esse código em um arquivo .html e abri ele no navegador... E o resultado é esse!
E nesse momento, pode ser que você esteja com duas perguntas...
O que era aquela tag "h1" e "h2" no seu exemplo?
Bem, essas são tags de título, tanto a h1 quanto a h2.
O número que vem depois da letra "h", é pra definir a importância daquele conteúdo na sua página, quanto maior o número, menor a importância e vice-versa! Sendo o h1 o mais importante, geralmente o título principal da sua página, ou em alguns casos o seu logo, e o h6 o título com menor relevância.
E que troço horroroso é esse resultado?! Você não disse que isso é usado para construir páginas web? Eu nunca vi uma página assim!
Bem observado, realmente a aparência não ficou das melhores, mas é pra isso que serve uma outra linguagem, o CSS (Cascading Style Sheets), que é usado para definir cores, posições, tamanhos, fontes, etc. Depois de ler esse artigo, não deixe de ler esse outro que eu escrevi sobre CSS.
Mas eu fortemente aconselho que você não saia por ai criando um amontoado de tags sem entender algumas coisas antes...
Criando um documento HTML
Se você praticar o suficiente, estará familiarizado com o conceito de tags e como organizar o conteúdo da sua página usando elas. Só que não basta apenas organizar o conteúdo sem algumas estruturas básicas.
Tem 4 coisas que é importante que você tenha nos seus documentos HTML e são coisas importantes que você conheça.
- Tag
<!DOCTYPE html> - Tag
<html></html> - Tag
<head></head> - Tag
<body></body>
Essas tags são essenciais para praticamente qualquer documento HTML que você criar.
O <!DOCTYPE html> é um sinal para o navegador, instruindo-o de que se trata de um arquivo HTML 5. Existem outras versões do HTML e essa tag já revela ao navegador a versão que ele precisa interpretar.
A tag html engloba toda a página, normalmente vindo abaixo apenas da tag <!DOCTYPE html>. Dentro da tag html, normalmente temos apenas duas que são diretamente filhas dela (childrens), a tag head, usada para adicionar metadados sobre o documento, e a tag body, usada para adicionar o conteúdo da página em si.
E é isso! Espero que tenha entendido, qualquer dúvida, não deixe de colocar nos comentários.
Bons estudos, e até mais!
Créditos da imagem de cover
Imagem de James Osborne por Pixabay
Top comments (0)