Mão na Massa: Como Criar Seu Primeiro Site em HTML do Zero
Agora que já lemos bastante sobre a teoria e a história da linguagem de marcação HTML, chegou a hora mais esperada: colocar a mão na massa e criar o seu primeiro Website!
Escolha o seu editor de códigos favorito (recomendamos o moderno e gratuito VS Code, mas até o Bloco de Notas serve para começar), aqueça o seu navegador e prepare-se para dar os primeiros passos na carreira de Desenvolvedor Front-End.
Seja muito bem-vindo ao Curso de HTML Progressivo!
Quer transformar seus estudos em profissão?
Aprenda a criar sites profissionais, domine o Front-End e fature alto no mercado de tecnologia com o nosso material completo.
🚀 Baixar Apostila HTML ProgressivoComo criar o primeiro site em HTML (Só com texto)
Lembre-se: HTML é uma linguagem de marcação. Ou seja, o que nós fazemos no código é apenas "marcar" um texto comum, dizendo ao navegador como ele deve ser exibido na tela.
Por isso, para criar nossa primeira página, vamos abrir o nosso editor de códigos e digitar um texto simples, sem nenhuma tag ainda. Digite exatamente assim:
Curso HTML Progressivo - Meu primeiro sitePronto! Agora salve o seu arquivo com o nome index.html (a extensão .html é fundamental). Ao salvar com essa extensão, o seu Sistema Operacional entende automaticamente que se trata de uma página de internet.
Dê um duplo clique no arquivo salvo. Ele vai abrir no seu navegador (Google Chrome, Edge, Firefox, etc.). O navegador nada mais é do que um programa feito para ler e interpretar códigos HTML. Como não usamos nenhuma marcação de código, ele simplesmente pegou o seu texto e jogou na tela.
O Mistério do "ENTER": Por que o texto não desce?
Agora vamos fazer uma alteração. Volte no seu editor de código e quebre a frase em duas linhas usando a tecla ENTER, deixando assim:
Curso HTML Progressivo
Meu primeiro siteSalve o arquivo e atualize a página (F5) no seu navegador.
Opa, como assim? Você deu um ENTER após a primeira frase, mas no navegador o texto continuou na mesma linha! Que bruxaria é essa?
Comandos em HTML: A tag de quebra de linha <br>
A explicação para o problema acima está na ausência de marcação. Nós precisamos dizer ao navegador web como exibir a informação. Queremos que ele exiba uma quebra de linha, e fazemos isso usando a nossa primeira Tag HTML: o <br>.
O br vem da palavra em inglês break, que significa quebra. Altere o conteúdo do seu código para:
Curso HTML Progressivo!<br>
Meu primeiro site!Salve e atualize o navegador. Sucesso! Agora a segunda frase foi para a linha de baixo, exatamente como você queria.
O que nós fizemos foi dar um comando: "Ei, navegador, exiba a segunda frase após uma quebra de linha!". E nós dissemos isso usando uma Tag, que é a base de toda a linguagem HTML.
Um teste para comprovar a teoria
Lembra que falamos que o HTML ignora o layout que você digita no editor? Teste o código abaixo, colocando tudo na mesma linha:
Curso HTML Progressivo!<br>Meu Primeiro site!Viu o que aconteceu? O resultado na tela é exatamente o mesmo do exemplo anterior. O navegador só se importa com a tag <br>, ele não liga se o seu código está todo espremido em uma linha ou separado.
Agora que você é um futuro Webmaster, você precisa pensar com duas cabeças: como humano (usuário lendo a tela) e como máquina (escrevendo as tags no código).
🏋️ Exercício Prático: O Seu Nome em HTML
- Crie um novo arquivo chamado
exercicio.html. - Digite o seu nome completo e abra no navegador para vê-lo em uma única linha.
- Agora, altere o código inserindo tags
<br>para que cada parte do seu nome (Nome e Sobrenomes) apareça em uma linha diferente na tela, como se fosse uma escada.
Nenhum comentário:
Postar um comentário