Agora que sabemos como a web funciona, vamos começar por a mão na massa? Uma página web possui 3 pilares: HTML, CSS E Javascript. O HTML é a estrutura do site, CSS é aparência e o Javascript é o que anima e faz as funcionalidades do site.
Agora vamos criar um arquivo html para ver na prática como ele funciona.
Para iniciar a construção do nosso projeto, pelo seu Terminal (Linux ou MAC) ou CMD (Windows) digite o seguinte comando:
mkdir tutorial-jsladies
O que esse comando acima fez foi criar uma pasta para nós adicionarmos os nossos arquivos. O próximo comando a ser rodado é:
cd tutorial-jsladies
Esse comando acima nos leva para dentro da pasta.
Agora que temos um local para iniciar o nosso projeto, vamos criar nosso primeiro arquivo, para isso, rode o seguinte comando:
Terminal (Linux ou MAC)
touch index.html
CMD (Windows):
echo > index.html
Esses comandos acima podem criar um arquivo html.
Vamos abrir agora esse arquivo com o seu com um editor de sua preferência (Sublime, VSCode, Atom e etc...) Caso você não saiba onde você criou o arquivo você pode pelo seu Terminal (Linux ou MAC)/cmd (Windows) descobrir onde você está digitando o seguinte comando:
Terminal (Linux ou MAC):
pwd
CMD (Windows):
cd
Com o arquivo aberto no editor, vamos começar a criar a estrutura do nosso site:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hamtaro - { JS Ladies }</title>
</head>
<body>
<h1>Minha primeira Página</h1>
<small>Eu vou fazer um jogo com Hamtaro</small>
</body>
</html>
Abra agora o seu arquivo html no seu navegador, ele apareceu com algumas coisas que você escreveu no html, né? Então vamos explicar o porque...
O html não é uma linguagem de programação e sim uma linguagem de marcação, e utilizamos as tags para avisar qual é o elemento que o nosso navegador deve renderizar. As tags começam com < e terminam com >. Essas tags marcam os elementos.
A tag principal <html> deve ser colocada qualquer em página da web e deve-se sempre encerrar a página com </html>, as outras tags vão dentro dela, como é mostrado no código acima.
A tag <head> é um elemento que contém informações sobre o documento que não são mostradas na tela e a tag <body> é um elemento que contém tudo o que é exibido como parte de uma página de um site.
Para ver mais tags e sua usagem indicamos o site com a lista a seguir: https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/HTML5_element_list
Até agora o seu html está muito "preto e branco", que tal colorirmos nossa página web?
Vamos lá na nossa pastinha do projeto (tutorial-jsladies), se não souber onde está você pode fechar o seu Terminal/CMD e abrir e rodar o comando:
cd tutorial-jsladies
Agora que estamos na pasta que desejamos, você deve criar uma pasta chamada "assets", se não souber como fazer isso pelo seu terminal ou cmd, segue a cola:
mkdir assets
Agora que temos a estrutura de onde fica arquivos css e js, vamos criar nosso primeiro arquivo css, para isso rode o seguinte comando:
touch main.css
Vamos abrir agora esse arquivo com o seu editor de sua preferência (Sublime, VSCode, Atom e etc.). Com o arquivo aberto no editor, vamos adicionar o arquivo css no nosso arquivo html (como é mostrado na linha 6):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hamtaro - { JS Ladies }</title>
<link rel="stylesheet" href="assets/main.css">
</head>
<body>
<h1>Minha primeira Página</h1>
<small>Eu vou fazer um jogo com Hamtaro</small>
</body>
</html>
Agora vamos adicionar as seguintes linhas no nosso arquivo arquivo css:
body {
background-color: yellow;
}
h1 {
color: purple;
border: 1px solid black;
}
small {
color: purple;
}Abra agora o seu arquivo html no seu navegador, ele não está com cores diferentes? Vamos entender o que aconteceu?
O css é um documento estruturado usando uma linguagem de marcação, no nosso caso o nosso html. Ele trabalha selecionando os elementos no seu html e aplicando as formatações que você desejar.
Para ver mais sobre formatações com css o site a seguir: https://developer.mozilla.org/pt-BR/docs/Aprender/CSS