Front-end com Vue 3

Aparência

Diferença entre HTML, CSS e JavaScript ​

HTML, CSS e JavaScript formam a tríade fundamental do desenvolvimento web, cada um desempenhando um papel distinto que, quando combinado, permite a criação de páginas web ricas e interativas.

HTML (Linguagem de Marcação de Hipertexto) ​

  • Função: Estrutura
  • Importância: O HTML é o esqueleto de qualquer página web. Ele é usado para marcar e organizar o conteúdo, como texto, imagens, vídeos e links, em uma estrutura lógica. Sem HTML, não haveria conteúdo web para estilizar ou com o qual interagir.

CSS (Cascading Style Sheets) ​

  • Função: Estilo
  • Importância: O CSS é usado para estilizar o conteúdo estruturado pelo HTML. Ele define a aparência da página, incluindo cores, fontes, layouts e muito mais. CSS permite a criação de páginas visualmente atraentes, melhorando a experiência do usuário.

JavaScript ​

  • Função: Interatividade
  • Importância: O JavaScript é a linguagem de programação usada para adicionar interatividade às páginas web. Ele pode ser usado para criar páginas dinâmicas que respondem a eventos do usuário, como cliques de botão, entradas de formulário e muito mais. JavaScript também é fundamental para o desenvolvimento de aplicações web complexas.

Exemplo Básico ​

Vamos ver um exemplo básico que mostra como HTML, CSS e JavaScript trabalham juntos para criar uma página web interativa.

html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo Tríade Web</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #mensagem {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1 id="mensagem">Olá, Mundo!</h1>
    <button onclick="mudarTexto()">Clique Aqui</button>

    <script>
      function mudarTexto() {
        document.getElementById("mensagem").textContent =
          "Texto alterado com JavaScript!";
      }
    </script>
  </body>
</html>
  • HTML: Estrutura a página com um cabeçalho (<h1>) e um botão (<button>).
  • CSS: Estiliza o cabeçalho com uma cor azul, alterando a aparência do texto.
  • JavaScript: Adiciona interatividade. Quando o botão é clicado, o JavaScript muda o texto do cabeçalho.

Esse exemplo ilustra a função distinta e a importância de cada uma dessas tecnologias no desenvolvimento web. O HTML estrutura a página, o CSS a embeleza, e o JavaScript adiciona comportamento dinâmico, criando uma experiência rica e interativa para o usuário. Juntos, eles formam a base sobre a qual a web moderna é construída, permitindo o desenvolvimento de sites e aplicações web cada vez mais complexos e funcionais.