Muita gente faz parecer que o html é algo de outro mundo. Com documentações densas que poderiam ser mais enxutas para que você sinta que está avançando rápido.
E é pra isso que estamos aqui, para facilitar seu aprendizado. Então vamos nessa!
Mas primeiro vamos criar uma lista de tarefas para essa aula para que possamos mapear seu aprendizado ok? Você também pode anotar num papel ou no bloco de notas do celular ou computador.
Nós vamos:
- - Criar um arquivo html [ ];
- - Entender as regras básicas do html [ ];
- - Escrever nossas primeiras tags html [ ];
- - Entender o que cada tag que veremos faz[ ];
- - Ver seu código funcionando [ ];
Pronto agora que estamos com nosso mapa do que faremos, vamos nessa!
1- Escolha qualquer pasta no seu computador e clique em “exibir” (onde está marcado de amarelo). Você só precisará fazer isso uma vez.
- - Irão aparecer algumas opções ao você clicar. Selecione a caixinha “Extensões de nomes de arquivos”:
ok, tudo que formos fazer aqui em diante, você não vai precisar repetir o procedimento a cima.
- - Crie um arquivo de texto clicando em:
Agora você seleciona “Documento de texto”. E seu documento deve estar criado. Você vai renomear o arquivo para “index” (Pode ser qualquer nome, mas vamos usar o padrão geralmente utilizado) e depois você vai apagar a parte “.txt” do nome do arquivo e mudar para “.html”.
E voalá! Você criou seu primeiro html. pode marcar um “X” na nossa lista:
1 - Criar um arquivo html [x]; FEITO!
De agora em diante, teremos que ter um editor de código ou uma IDE (se quiser pode anotar “IDE” pra pesquisar no google depois). Nós temos um tutorial de instalação de uma IDE que rapidinho você faz e estamos prontos para continuar.
Agora precisamos entender um pouco sobre as regras básicas do html (Se você já sabe, pode pular pra parte que te interessa).
No html existem diversas tags que sempre irão começar com “<” e terminar com “>”. Chato né? Vamos ver isso na prática então:
abra seu arquivo na sua IDE e escreva:
(Entender essa tag “h1” não é importante por enquanto).
Agora ficou melhor de visualizar. Perceba que há uma barra (/) na tag onde você está fechando seu texto. Isso serve pra você falar pro navegador “oh navegador, aqui eu estou fechando minha tag h1. ok?” por que se você não fizer isso o navegador não vai saber que aquilo é uma tag.
Agora entendemos uma regra básica mas que é muito importante e…
- - Entender as regras básicas do html [x]; FEITO
- - Escrever nossas primeiras tags html [x ]; FEITO
Nossa, matamos dois itens da nossa lista sem nem perceber. Viu?
Agora iremos continuar. Vamos ter que entender a estrutura básica que todo html deve ter para funcionar.
E vou te dizer, vai ser complicado só agora mas você pega rápido se praticar o que iremos ver, eu te ajudo 😉
Mas antes, vamos ver seu código funcionando?
É fácil, é só abrir o google, voltar na pasta do seu arquivo e arrastar seu arquivo para área de pesquisa e deve aparecer algo assim:
Agora só pressionar enter e você verá:
Parabéns! mas lembra que eu falei que você deve entender a estrutura básica? então, vamos lá!
Escreva tudo como está a seguir porque depois vou te explicar o que é cada coisa.
<!DOCTYPE html> vai dizer ao navegador qual a versão do html que você está usando.
<html></html> vai ser a tag que vai conter tudo que você for fazer. Agora você pressiona enter dentro da tag e escreve:
<head></head> Vai conter informações importantes para o documento. Por enquanto você só precisa saber isso.
Agora dentro do head você vai escrever coisas que por enquanto não são fundamentais pra você entender o funcionamento do html. Jajá faremos mais postagens explicando isso. por enquanto só copia:
Esse tag title irá conter titulo da sua página.
E por ultimo e não menos importante a tag “body”.
Mas tem uma observação importante, o <body> fica entre a <head> e a </html>. Desse modo:
Tudo que aparece numa página fica dentro da tag body. Enfim Terminamos?
Vamos só fazer mais uma coisa que creio eu que você vai gostar.
Dentro da tag body você pode dgitar aquela mesma tag <h1></h1> E escreva o que quiser dentro e pode testar seu código fazendo aquele mesmo procedimento de mover o arquivo pro campo de busca do google. Eu ja fiz o meu aqui, falta você:
