Fundamentos de HTML e CSS
Agora que entendemos o que é o DOM, vamos dar uma olhada rápida nos fundamentos de HTML e CSS. Isso é importante porque o DOM é essencialmente uma representação em árvore da estrutura HTML da sua página web.
HTML – A Estrutura Básica
HTML, ou HyperText Markup Language, é como a cola que mantém a web unida. Ele estrutura o conteúdo da sua página. Vamos ver um exemplo simples:
<!DOCTYPE html> <html> <head> <title>Minha Página</title> </head> <body> <h1>Olá, Mundo!</h1> <p>Este é um parágrafo.</p> </body> </html>
Aqui, <html>
, <head>
, <title>
, <body>
, <h1>
, e <p>
são tags HTML. Cada uma desempenha um papel específico na estrutura da página.
CSS – Estilo e Aparência
Agora, imagine que HTML é como os tijolos da sua casa e CSS é a pintura nas paredes. CSS, ou Cascading Style Sheets, é usado para estilizar e posicionar elementos na página. Vamos dar uma olhada:
h1 { color: blue; } p { font-size: 16px; }
Aqui, definimos que os títulos (<h1>
) devem ter cor azul, e os parágrafos (<p>
) devem ter um tamanho de fonte de 16 pixels.
Passamos bem rápido em alguns fundamentos do HTML e CSS, mas para quem não sabe ou esqueceu, vou deixa os links dos cursos que explica detalhadamente:
- Curso Fundamentos de HTML: Construindo a Web
- Fundamentos do CSS: Guia para Iniciantes em Estilização Web
Confere lá, mas depois volte!
Conectando com o DOM
A mágica acontece quando conectamos esses fundamentos ao DOM. O DOM reflete a estrutura HTML, e o CSS define como ela deve parecer. Manipular o DOM com JavaScript nos permite mudar dinamicamente o conteúdo e o estilo da nossa página.
Agora, com essa base sólida, você está pronto para explorar como acessar o DOM e começar a fazer alterações. Vamos mergulhar nisso no próximo tópico! Fique animado, pois a verdadeira diversão está prestes a começar.