Entendendo o HTML e criando meu primeiro Hello World

Vamos tentar entender o básico do HTML para que você, que gostaria de iniciar uma aventura sem volta, consiga deslanchar com maior impulso.

O HTML é uma sigla que você não precisa entender para usar, mas precisa saber que é um Hyper Text Markup Language, ou seja, uma linguagem de marcação. De forma mais didática vamos imaginar como um idioma novo que o navegador é capaz de interpretar.

Temos uma estrutura básica que eu comparo com a nossa estrutura física: Cabeça e Corpo. De modo bem grosseiro, novamente, para facilitar o entendimento. Para quem não sabe nada de inglês (recomendo que aprendam), cabeça é head e corpo é body.

Body não é Bode, nem se fala bódi, pronuncia-se Bóri :)

Então dentro do nosso HTML, temos Head e Body. Até aqui, tudo certo, né?

Como o HTML é uma “linguagem” (não vou discutir esse termo) de marcação, ela tem início e fim. Devemos dizer ao HTML onde ele inicia e onde ele termina, seguindo essa regra para head, body, e demais Tags que veremos adiante.

Sabendo disso, vamos avançar para nosso próximo passo:

Hello World

Vamos para nosso exemplo prático e direto ao ponto.
Não se preocupe, no final dos passos, eu colocarei o código completo para conferência.

  1. Crie um arquivo e salve como index.html (Há várias formas de fazer isso, se usa windows, pode usar o próprio bloco de notas, se usa linux ou mac, pode usar o terminal e usar o comando touch index.html).
  2. Abra esse arquivo com um editor de texto qualquer, a princípio não importa a ferramente utilizada, e sim, o resultado alcançado.
  3. Abra a tag html digitando o seguinte texto: <html>
    Observe o uso de < e >, é isso que faz uma Tag ser uma Tag. O primeiro texto escrito após <, é o nome da tag. Se restou dúvidas, vai entender a seguir.
  4. Em seguida, aperte Enter e digite </html>
    Pronto temos um arquivo html. Tudo agora deverá ficar entre essas duas Tags.
  5. Entre o <html></html> vamos inserir nosso head e nosso body, seguindo a mesma ideia.
Isso é o mínimo

Preciso fazer uma pausa para explicar o quão fácil é entender isso.
Abrimos nosso HTML, dentro dele temos HEAD e BODY, e fechamos nosso HTML. A Head (cabeça) tem início e fim, e o mesmo acontece com o Body (corpo). Estou repetitivo para você entender a base.

Agora vamos entender onde colocar o conteúdo.

Já que o head é a cabeça, e nossa cabeça tem um cérebro, vamos interpretar que o html age da mesma forma. Nossos pensamentos e ideias, influências, etc, estão presentes em algum lugar da nossa cabeça. No HTML é a mesma coisa. Tudo o que ficar dentro do Head pode definir como nosso site vai se comportar, mas a princípio, não mostra nada, não expõe nada. Imagine um cérebro funcionando sem um corpo.

Por enquanto, vamos ignorar o head.

O body é o corpo, isso eu consigo ver. Então, tudo o que eu colocar dentro do Body, será visível no site. Agora é a hora do nosso quero Hello World.

Aproveite nosso arquivo index.html e vamos adicionar nosso Hello World.

Salve nosso arquivo e vamos abrir ele no navegador.

Pronto. Hello World Feito.

O que mais eu consigo fazer? Talvez aumentar o tamanho do texto?

Headings (Títulos)

Temos várias tags no html e algumas são responsáveis por organizar os títulos. Já que estamos falando de títulos, imagine 6 níveis de títulos.

Título 1
Título 2
Título 3
Tìtulo 4
Título 5
Título 6

Mas o código deve ser escrito em inglês. Poderia ficar:

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Seria chato eu escrever isso dentro de uma tag: <heading1>Hello World</headding1>

As coisas devem ser mais simples. Por isso existem as tags h1, h2, h3, h4, h5, h6. Para economizar tempo, vamos testar todas de uma única vez?

Bom, esse é o início de uma grande jornada. Espero que continue os estudos e conheça outras tags html lendo o link abaixo.

Arquiteto e Urbanista de formação, e Programador Web por paixão. Stack: PHP + MySQL e atualmente estudando Node React/Vue

Arquiteto e Urbanista de formação, e Programador Web por paixão. Stack: PHP + MySQL e atualmente estudando Node React/Vue