Por que separar o que um site “é” do que ele “parece”? Fundamentos da Web para quem está começando

Se você está dando os primeiros passos em desenvolvimento web, provavelmente já ouviu falar de HTML e CSS como se fossem a mesma coisa. Não são. E entender essa diferença logo no início vai economizar meses de confusão mais adiante.

Neste primeiro artigo da série sobre Linguagem de Marcação, vamos direto ao ponto: o que é uma linguagem de marcação, como a Web se formou até chegar onde está hoje, e o desafio prático que a turma começa a resolver a partir de agora.

O que é, afinal, uma linguagem de marcação?

Uma linguagem de marcação é um sistema de anotações que descreve a estrutura e o significado de um conteúdo — sem dizer nada sobre como esse conteúdo deve aparecer na tela.

Repare no exemplo abaixo. É uma receita descrita usando marcação:

<receita>
  <titulo>Bolo de fubá</titulo>
  <ingrediente>3 ovos</ingrediente>
  <!-- a marcação descreve o QUE é, não como aparece -->
</receita>

Nenhuma dessas tags diz se o título vai ficar vermelho, centralizado ou em negrito. Elas só dizem o que cada pedaço de texto representa. Essa separação entre conteúdo e aparência é a ideia mais importante para carregar dessa aula em diante — é ela que sustenta toda a lógica do HTML e do CSS.

Nem toda marcação é HTML

Aliás — este texto que você está lendo foi escrito em Markdown antes de virar uma página bonitinha no WordPress. A ironia não é coincidência.

WWW não é sinônimo de internet

Uma confusão comum: internet e World Wide Web (WWW) não são a mesma coisa.

• Internet é a infraestrutura física — cabos, servidores, roteadores — que conecta computadores no mundo inteiro.
• World Wide Web é um serviço que roda sobre a internet: páginas, links, navegadores. A Web é o conteúdo; a internet é a estrada por onde ele trafega.

Como a Web mudou

Onde você entra nisso

Criar páginas web envolve alguns papéis diferentes, e este curso te coloca direto no primeiro deles:

• Front-end — constrói o que o usuário vê e toca (é onde você está atuando agora).
• Back-end — cuida da lógica e dos dados por trás da página, no servidor.
• UX/UI Design — planeja a experiência e a interface antes de qualquer linha de código.

O desafio: uma empresa sem site nenhum

A partir de agora, a turma trabalha em cima de um cenário prático: uma empresa — real ou fictícia, do setor que cada grupo escolher — nunca teve presença na web. Vocês fazem parte do time responsável por planejar essa primeira versão.

A missão, por enquanto: planejar e estruturar a página, sem estilização ainda. Nada de cor, fonte ou layout bonito — o foco é montar uma estrutura e uma semântica corretas. A parte visual entra só na etapa seguinte.

Antes de sair codando, vale planejar no papel (ou numa ferramenta simples) como a página vai se organizar: onde fica o menu, onde entra o texto, onde entra a imagem. Esse esboço é o que chamamos de wireframe — um desenho estrutural da tela, sem cor, sem fonte definida, sem preocupação estética. Serve só para validar a organização antes de qualquer estilização. Se quiser se aprofundar antes da próxima aula, escrevi um artigo dedicado só a wireframes, com passo a passo, ferramentas e o que precisa estar no seu.

Entrega:

• Wireframe de tela validado
• HTML estrutural, semântico e correto

Atividade de hoje: em duplas ou trios, escolham um setor para o “cliente” fictício do grupo e listem quais páginas ou seções o site vai precisar. Alguns pontos de partida:

• Metalúrgica
• Alimentícia
• Logística
• Construção civil
• Tecnologia
• Educação profissional

Não se preocupem em estruturar nada ainda — o objetivo agora é só levantar ideias. Guardem essa lista: ela vira a base do wireframe do próximo encontro.

Para fixar

• Marcação — anotação que descreve a estrutura/significado de um conteúdo.
• Semântica — uso de elementos que descrevem corretamente o significado do conteúdo.
• W3C — consórcio que define e valida os padrões oficiais da Web.
• Wireframe — esboço estrutural de uma tela, sem preocupação estética.

No próximo artigo da série, colocamos a mão na massa com o wireframe de cada grupo. Até lá!

Referências: ANDRADE, Sidnei da Silva. Criação e interfaces para web HTML5 e CSS3. São Paulo, 2017. MANZANO, José Augusto N.G; TOLEDO, Suely Alves. Guia de orientação e desenvolvimento de sites: HTML, XHTML, CSS e JavaScript/JScript. São Paulo: Érica, 2010. BARBOSA, R. L. Linguagem de marcação: Uma introdução. Novatec Editora, 2020.