Como o HTML, CSS e JavaScript se conectam?

HTML: o ponto de partida da Web

Quando o assunto é páginas web, todas tem a sua origem em HTML. Seu nome vem de HyperText Markup Language. Na prática, HTML é a linguagem que organiza o conteúdo de uma página online. O HTML é uma linguagem de marcação responsável por estruturar o conteúdo de um website, organizando as páginas e dando propósito a elas.

Dessa forma, ao acessarmos um site ou qualquer página da internet, conseguimos ler textos e informações, visualizar as imagens que ali estão contidas e diversas outras funcionalidades. O HTML cria a estrutura de um site.

Algumas tags fundamentais ajudam a dar forma a essa estrutura:

<html> : envolve todo o documento e indica que aquele arquivo é uma página HTML

<head> : guarda informações importantes da página, como o título da página e arquivos externos

<body> : onde o conteúdo visível como textos e imagens, ficam

Sem HTML, não existe página web.

CSS:

Dando forma, cor e personalidade A parte do HTML é estruturar, o Css vem para personalizar e caracterizar a página. A sigla vem de Cascading Style Sheets e sua função é cuidar da aparência visual da página. Com CSS, você decide cores, tamanhos de fonte, espaçamentos, alinhamentos e até pequenas animações. É aqui que funciona a personalização para transformar uma página em algo agradável aos olhos. No CSS, trabalhamos principalmente com:

Seletores, que indicam o que será estilizado (ex: body, h1, .classe, #id)

Propriedades, que definem como esse elemento vai parecer (ex: color, font-size, background-color)

JavaScript:

Até agora, falamos da estrutura que o HTML faz e aparência, que é por conta do CSS.

Mas e o funcionamento da página? É aí que entra o JavaScript.

JavaScript é a linguagem que permite criar interatividade: botões que respondem a cliques, formulários que validam dados, elementos que mudam sem recarregar a página. É a linguagem de programação usada em navegadores de internet. O JavaScript é essencial na criação e na manutenção de uma página web, pois cria-se extensões e sites que reagem com interações dos usuários. Essa linguagem é acessível com quem está dando os primeiros passos na programação, pois não precisa acessar servidores, podendo ser utilizado no Vs Code.

Dois conceitos muito comuns em JavaScript são:

Eventos, que escutam ações do usuário (como cliques ou digitação)

Manipulação do DOM, que permite alterar elementos da página em tempo real

DOM: ligação entre JavaScript e a página

Para que o JavaScript consiga interagir com o HTML, existe o DOM — Document Object Model.

O DOM é uma representação da página em forma de árvore de objetos. Quando o navegador carrega um HTML, ele não vê apenas texto: ele constrói uma estrutura interna onde cada elemento vira um nó. É graças ao DOM que conseguimos mudar textos, cores, classes e comportamentos sem recarregar a página.

Por que o DOM é tão importante?

Sem o DOM, páginas seriam estáticas e não executariam suas funcionalidades. Já com o DOM, é possível fazer alterações em tempo real, interagir com o usuário criando experiências web mais interativas. É o DOM que permite: atualizações em tempo real, respostas às ações do usuário e experiências interativas.

Como se conectam?

HTML, CSS e JavaScript cooperam.

HTML define o que existe na página.

CSS define como isso é apresentado.

JavaScript define como se comportam.

Essa estrutura de programação, esses três elementos, são importantes para o desenvolvimento web formando sua base e garantindo assim funcionalidade. Por isso, para quem tem interesse e curiosidade em desenvolvimento web, essas linguagens serão vistas com mais frequências que outras.

Você pode visitar esse site que criei utilizando essas três tecnologias. É um site gerador de frases aleatórias, com tema de galáxia. A estrutura do site foi feita utilizando HTML, já a personalização foi em CSS e o funcionamento do site, a geração de frases aleatórias foram previamente colocadas no JavaScript.

https://fernandabarbozab.github.io/Galaxia-de-Frases/

Repositório no Github: https://github.com/FernandaBarbozaB/Galaxia-de-Frases

Obrigada por ler!