HTML, CSS e JavaScript: o papel de cada um

Imagine estes dois trechos:

• “Panqueca de banana” — funciona como o título da receita.
• “Uma receita simples para o café da manhã.” — funciona como um parágrafo de apresentação.

Com HTML, podemos indicar essas funções, em vez de apenas reunir palavras.

A receita também precisa destes ingredientes:

• 1 banana
• 1 ovo
• 2 colheres de aveia

Com HTML, podemos organizá-los como itens de uma lista. Assim, indicamos que são partes de um mesmo conjunto, e não parágrafos independentes.

Imagine uma receita que usa 1 xícara de arroz para 2 porções.

Você escolhe preparar 4 porções. A página calcula a nova quantidade e passa a mostrar 2 xícaras de arroz.

Nesse exemplo, instruções em JavaScript usam sua escolha para recalcular a quantidade e mostrar o resultado na própria página.

Imagine a receita apenas em HTML. O navegador costuma mostrar o título em destaque e deixar espaços entre os parágrafos.

Essa aparência básica vem dos estilos padrão do navegador. Portanto, não ter CSS criado pelo autor não significa ficar sem nenhuma formatação.

Clicar no link “Ver outras receitas” pode levar você à página de destino sem JavaScript.

Já o recálculo das quantidades na própria página, visto antes, é um exemplo de comportamento personalizado programado com JavaScript.

Um teatro vai divulgar uma peça. A página terá o nome do espetáculo, uma sinopse e o preço do ingresso.

A equipe quer organizar essas informações, escolher cores e espaçamentos e calcular o valor total quando o visitante mudar a quantidade de ingressos.

Sua tarefa é identificar a responsabilidade principal de cada linguagem nesse projeto.