Fundamentos de HTML e CSS

Do Básico ao Avançado: Curso Completo de Manipulação de DOM

Sobre a Aula

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:

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.

Siga-me

Entrar na conversa