DEV Community 👩‍💻👨‍💻

Cover image for Como uma página funciona? Integração HTML - CSS - Javascript
Matheus Felizardo
Matheus Felizardo

Posted on • Updated on

Como uma página funciona? Integração HTML - CSS - Javascript

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):
<!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>
Enter fullscreen mode Exit fullscreen mode

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

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):
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;
}
Enter fullscreen mode Exit fullscreen mode

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

E pelo dev-tools podemos verificar também o CSS que foi aplicado em cada elemento:
CSS aplicado na section

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 (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

Baixe aqui o código completo

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:

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

Top comments (0)

What image format should you use in your next project? 🤔