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.
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.
- 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).
- Abra esse arquivo com um editor de texto qualquer, a princípio não importa a ferramente utilizada, e sim, o resultado alcançado.
- 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. - Em seguida, aperte Enter e digite </html>
Pronto temos um arquivo html. Tudo agora deverá ficar entre essas duas Tags. - Entre o <html></html> vamos inserir nosso head e nosso body, seguindo a mesma ideia.
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.
