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>
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.
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;
}
Com o CSS aplicado é possível perceber a mudança entre um contexto só com HTML e um com HTML + CSS.
E pelo dev-tools podemos verificar também o CSS que foi aplicado em cada elemento:
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.
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)