7.1 Primeiro documento html
Bora criar nosso primeiro documento html (arquivo html). Normalmente o arquivo principal do projeto web é chamado de index.html: sugiro não fugir dessa tradição maneiríssima. Para isso, clica com o botão direito na pasta web-storm-10:
E digita o nome do arquivo:
O WebStorm vai criar o arquivo pra você e abrir ele na hora:
Na real, isso é um documento html vazio. Tudo que você vê aí é informação técnica. Todos os dados reais vão ficar dentro das tags <body> e </body>. O que são tags, você vai descobrir na próxima aula.
Bora escrever uma mensagem legal e pomposa dentro dessas tags. Tipo essa:
Caminho de 10 mil milhas começa com um único passo!
Você pode simplesmente copiar e colar na linha 8 (dentro das tags <body>). Acostume-se a copiar textos – assim, dá menos erro e não tem erro de digitação. Aqui está como meu documento ficou:
Se meu texto não tá sombrio e pomposo o suficiente pra você, escolha o seu – afinal, é seu primeiro projeto Web. Aqui estão mais 3 opções pra escolher:
- "O lado sombrio me oferece o que a luz não pode: verdadeira liberdade."
- "O lado sombrio é o caminho para o poder sem limites."
- "Eu escolho meu destino, e ele está nas trevas."
7.2 Executando o primeiro projeto
Agora vamos "executar" nosso projeto e ver como o navegador vai mostrar nosso arquivo html.
Pra executar o projeto, tem que clicar no triângulo verde no menu superior. À esquerda, tá o nome do arquivo que vai começar a rodar:
Você também pode rodar seu arquivo pressionando Shift+F10.
Vamos lá, faz isso e você vai ver como o navegador vai mostrar seu primeiro arquivo html. Olha como o meu ficou:
Em laranja está o host na URL — o servidor web do nosso projeto, que o WebStorm rodou.
Em verde está o caminho na URL — caminho para o index.html a partir da raiz do nosso projeto.
Em azul — informação técnica pro WebStorm.
Em vermelho está o texto que o navegador mostrou baseado no nosso documento html.
7.3 Trabalhando com erros
E se a gente cometer um erro? Como o navegador e o WebStorm vai reagir?
Vamos apagar o primeiro caractere na linha 9 e ver a reação do WebStorm. Olha o que deu pra mim:
O que a gente vê aqui:
- A palavra na linha 9 deixou de ser uma tag, então o WebStorm agora escreve ela em cinza, não em amarelo.
- Na linha 10 você tem a tag de fechamento
<html>, mesmo que a tag<body>deveria aparecer antes da tag de fechamento<html>. Então o WebStorm vê isso como um erro. - O número de erros no documento aparece no canto superior direito – temos um.
- O local do erro também é duplicado na barra de rolagem – lá embaixo à direita. Isso é muito útil pra documentos longos.
Agora vamos rodar esse arquivo e ver como o navegador reage ao erro:
O navegador também acha que a tag incompleta <body> é só texto, então ele mostra como texto comum.
A falta da tag de fechamento <body> também não incomodou o navegador: problemas com tags podem ser piores. No geral, ficou tudo aceitável.
GO TO FULL VERSION