“Hello Word”: Como criar sua primeira página na web
Você está começando sua jornada no mundo da programação e não sabe por onde começar? Talvez esse texto seja para você.
Até o início de 2018, eu não fazia a menor ideia do que era HTML, CSS e Javascript. Como muitas pessoas, não entendia como funcionava as páginas web e nem mesmo {programação}.
Pensando em todos aqueles que querem entender como as páginas web funcionam, resolvi escrever um passo-a-passo bem simples para iniciantes. Ao final desse texto, você será capaz de escrever o primeiro de muitos “Hello World” na tela. Vamos lá?
1º passo: Exponha suas dúvidas
“Não se deve ter medo de dizer “não sei” ou “não entendo”, ou de fazer perguntas “idiotas”, já que nenhuma pergunta é uma pergunta estúpida.” — Margaret Hamilton
Isso mesmo! Toda dúvida é uma dúvida construtiva. Quando você está no processo de aprendizado, não tenha medo ou vergonha, por mais simples que uma pergunta possa ser.
Pergunte mais, pergunte SEMPRE!
2º passo: Conheça o HTML
O que é e para que serve o HTML?
HTML, acrônimo para HyperText Markup Language (Linguagem de Marcação de Hipertexto) é o corpo de um site. Também pode ser considerado a estrutura da página. Sendo uma linguagem de marcação, podemos escrever documentos que por sua vez serão lidos em qualquer navegador da web.
Para classificar as informações, o HTML utiliza as tags.
2.1 Tags
As tags servem para indicar onde termina e começa um elemento. Algumas precisam de uma abertura e fechamento, e outras não necessitam de fechamento (são chamados elementos vazios).
Tag de abertura < >
Tag de fechamento </>
Por exemplo: <p> Esse é um paragrafo </p>
2.2 As principais tags HTML
<!DOCTYPE>: Marca que tipo de documento está sendo escrito.
<html> </html>: Envolve todo o documento html
<head> </head>: É a “cabeça” do documento. O que estive aqui, não será visível para os visitantes da sua página.
<title> </title>: É o título do seu documento, que ficará visível na aba do navegador. Ele é diferente do título da sua página.
<body> </body>: É o corpo do documento. Aqui é onde ficará toda a estrutura da sua página, como títulos, subtítulos, imagens, links, etc.
<h1> </h1> até </h6>: São marcações de título de uma página, por ordem de relevância. H1 é o título principal da página.
<p> </p>: é um paragrafo, onde fica o conteúdo da sua página.
<br>: Uma quebra de linha, que não precisa de tag de fechamento.
<!– –> <!– –>: É a sintaxe de um comentário no seu código, que pode ser utilizado para explicar o seu código. O texto dentro dessa tag não será visível para o usuário.
Depois de se familiarizar com a sintaxe do HTML, você começará a entender melhor como essa estrutura e estará pronto para o próximo passo, que é:
3º Passo: Tenha um editor de texto/código-fonte
Agora você precisa baixar um software de edição de texto. Eu recomendo o Visual Code, Atom ou Sublime Text.
Já baixou? Ótimo! Agora você precisa criar uma pasta no seu computador, que guardará o seu documento html. Esse é um passo importante para não deixar o seu documento perdido no computador.
Criou a pasta? Agora abra o software escolhido por você. Eu estou utilizando o Atom.
3.1 Criando um documento.
Ao abrir o editor de texto/código, procure pela aba de ‘Arquivo/File’ e crie um novo documento em ‘Novo Arquivo/New File’.
No documento em branco, digite na primeira linha: <!DOCTYPE html>. Essa é a tag que marca o início do documento, e faz com que a sintaxe do html seja reconhecida.
Comece a escrever!
Digite a tag <html>. Todo o seu documento precisa estar aqui dentro, como uma grande caixa. Dessa forma, a tag de fechamento (</html>) ficará no final do seu documento.
Por enquanto, o seu documento deve estar assim:
<!DOCTYPE html><html></html>
Respeite a ordem das tags HTML: <html>, <head> e <body>
- A “cabeça” do seu documento, o head (<head> </head>) é a próxima tag a ser adicionada. Dentro do head, vem o título do documento, que será visível na aba de qualquer browser. Lembre-se que qualquer outro conteúdo escrito dentro do head não será visível para o usuário
<!DOCTYPE html><html><head><title>Meu primeiro Hello World! </title></head></html>
Depois vem o “corpo”, o body (<body> </body>). Dentro dele, vamos escrever o conteúdo da sua página, que será visível para o usuário.
Escreva um cabeçalho e um parágrafo dentro do <body>.
<h1> Hello Word!</h1><p> Essa é minha primeira página na web </p>
O seu documento deve estar assim:
3.2 Salvando o seu documento
Para salvar esse incrível trabalho, clique em ‘Arquivo/File e procure pela opção ‘Salvar Como/Save As’
Selecione a pasta que você criou. Nomeie o documento para “index.html” e clique em ‘Salvar’.
3.3 Abrindo sua página na web
Para visualizar o seu trabalho, abra sua pasta e clique duas vezes no documento ‘index.html’.
Taranranrannnnn
Parabéns! Sua primeira página na web foi criada com sucesso!
Eu me lembro de como foi gratificante chegar até aqui e escrever as minhas primeiras linhas de HTML. Afinal, o “Hello World” é um início de uma grande jornada, que se torna cada dia mais incrível e desafiador.
Agora que você já conhece um pouco de como funciona o HTML e tem noção de como uma página web é criada, tente fazer esse teste novamente, sem consultar o passo-a-passo. Inclua as tags que já conhecemos, e pesquise novas tags para criar conteúdos diversos.
Brinque com outros cabeçalhos (<h1> até <h6>) e veja as diferenças de formato em um texto texto. Esse é só o primeiro passo para o fantástico mundo da programação web.
Espero que tenham gostado, e até a próxima!
