Como uma página funciona? Integração HTML - CSS - Javascript
Tags: webdev, beginners, programming, html
Published: 2021-10-29 23:53:57

Quando eu estava começando no mundo da programação, meu maior desafio foi entender como as coisas aconteciam numa página. 

No início geralmente é complicado, por que normalmente quando começamos a estudar, vemos primeiro o HTML, depois o CSS, juntamos um pouco os dois, depois vemos Javascript, e depois juntamos os três, bem lentamente. Então não vemos rápidamente como eles se integram. 

Nessa postagem vou tentar mostrar um pouco como acontece essa integração e porque é importante estudar essa base da programação web antes de avançar pra um framework ou uma outra linguagem.

## HTML
O HTML, HyperText Markup Language, é o "esqueleto". 
É uma linguagem de marcação que é interpretada pelo navegador para montar a estrutura da página.
- Exemplo de código HTML (criar um arquivo index.html):
```HTML
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu blog - Exemplo</title>
</head>
<body>
    <h1>Felizardo News</h1>
    <section>
        <h2>Doação de animais no centro de Cabo Frio</h2>

        <p>Acontece nessa quinta feira, 04/11, a grande feira de doação de animais na cidade de Cabo Frio./ </p>
        <p>Esses animais foram resgatados em situação de rua, muitos filhotes, e tratados pelo Centro de Animais Felizardo, e agora estão prontos para receberem todo amor de um lar</p>

        <button>Saiba Mais</button>
    </section>
</body>
</html>
```
Vamos analisar melhor o efeito de algumas tags desse código utilizando o dev-tools do Google Chrome (F12).
Na aba "Elements" do dev-tools podemos ver bem como é montado essa estrutura.

![Estrutura do HTML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubknvbbzo5ysljh4gcg0.png)

Como podemos observar, o HTML montou uma estrutura básica da página, porém não é assim que são as páginas que visitamos, certo? 
Exato, é aí que entra o nosso próximo tópico.

## CSS
O CSS é que trás o estilo à nossa página.
Com ele podemos modificar a posição dos elementos HTML, as cores, adicionar backgrounds, espaçamentos, efeitos.
Irei adicionar algumas propriedades de CSS no arquivo HTML que criei, e podemos fazer isso de três formas:
- colocando o estilo diretamente no arquivo HTML, dentro de uma tag `<style>`;
- colocando diretamente na tag HTML (exemplo: `<p style="color: blue;">Texto azul </p>`);
- colocando em um arquivo externo, que é como utilizarei;

Mas não se preocupe com isso, futuramente irei fazer uma nova postagem sobre Arquitetura de CSS, explicando algumas formas de desenhar o CSS do seu projeto.
No arquivo index.html, iremos adicionar a tag `<link rel="stylesheet" href="./index.css">` antes da tag `<title>`, que faz a ligação entre o index.html e index.css.
- Exemplo de código CSS (criar um arquivo index.css):
```CSS
body {
    background-color: #333;
    padding: 1rem;
    color: #FFF;
}

section {
    max-width: 600px;
    border: 1px solid #95f8bb;
    padding: 1rem;
}

h1 { 
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 4px;
}

h2 { 
    font-size: 1.4rem;
    margin: 0;
    color: #fff;
}

button {
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    background: mediumpurple;
    margin-top: 1rem;
    color: #FFF;
    font-weight: bold;
    font-size: .925rem;
    border-radius: 4px;
}
```
Com o CSS aplicado é possível perceber a mudança entre um contexto só com HTML e um com HTML + CSS.
![Página com CSS Aplicado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0enp5hs2ks4km7zm2ypj.png)

E pelo dev-tools podemos verificar também o CSS que foi aplicado em cada elemento:
![CSS aplicado na section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45txaf58x9u86g1v183o.png)

Mas e o Javascript? 
##Javascript
O Javascript cria basicamente todas as interações feitas na página. 
É através dele que muitas ações são tomadas, como por exemplo, ao clicar num botão de fechar um pop-up na página, esse elemento sumir.
Então com ele manipulamos aqueles elementos da árvore DOM do HTML e damos vida à página.
Vou dar um exemplo um pouco mais avançado de ao clicar no botão "Saiba Mais" do nosso exemplo, ele abra um modal com a notícia.
Eu farei isso manipulando o CSS através do Javascript (pode não ser a melhor forma, mas dá pra visualizar bem um uso do javascript)

O objetivo é mostrar a interação entre o javascript e o CSS nesse caso.
Para isso, eu criei um outro elemento HTML com a notícia, já estilizado com o CSS e com o conteúdo completo da notícia. E coloquei ele com um [atributo no HTML](https://tutorialehtml.com/pt/html-tutorial-atributos/) (noticia-container) para ficar mais fácil de manipular, assim como os botões.
Nesse estilo HTML, eu coloquei a noticia escondida 2000px para a esquerda, ou seja, ela já está na tela, porém está oculta. Quando eu clico em "Saiba mais", pelo javascript eu altero o estilo CSS que coloca a notícia 2000px para esquerda e coloco na posição original (0px), com isso, o container com a notícia aparece na tela. 
Ao clicar em "Fechar", eu manipulo o CSS para que o container com a notícia novamente vá 2000px para a esquerda.
![Dinamica javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3knsna3qtd6s9ssqkgx.gif)

[Baixe aqui o código completo](https://matheusfelizardo.com.br/documents/projeto-noticias-basico.zip)

E aí, conseguiu entender como funciona essa interação entre o HTML, CSS e Javascript?
Agora é só estudar os principais conceitos dessas tecnologias para ficar fera e conseguir criar páginas incríveis, pois é assim que a maioria das páginas funcionam.

Uma importante qualidade de um bom dev é pesquisar, então vou deixar aqui boas referências para os assuntos abordados:
- [MDN](https://developer.mozilla.org/pt-BR/docs/Learn)
- [W3Schools](https://www.w3schools.com/)

Linkedin: https://www.linkedin.com/in/matheus-felizardo/
Site pessoal: https://matheusfelizardo.com.br