Para criar um site, utilizamos linguagens que possuem diferentes funções e, em algum nível, acabam comunicando-se entre si. De modo resumido, as linguagens front-end cuidam de tudo aquilo que o usuário pode ver ou tocar (as interfaces): textos, imagens, botões, cores etc; já as linguagens back-end são responsáveis por garantir que as interfaces se comuniquem corretamente com o banco de dados. Neste artigo, vamos falar da relação entre duas linguagens front-end: HTML e CSS.
O que é HTML?
HTML é uma sigla que significa, em português, Linguagem de Marcação de Hipertexto. É uma linguagem básica e essencial para a construção e exibição de páginas nos navegadores web (Chrome, Safari, Firefox etc). No HTML, utilizamos tags que permitem definir o começo e o fim de uma página, além de criar títulos, parágrafos, links, imagens, vídeos, formulários e muito mais. Este ótimo artigo em inglês explica cada parte da estrutura dos documentos em formato HTML.
Apesar das múltiplas funções, o HTML é incapaz de lógicas complexas, sendo fundamental o uso concomitante de linguagens como Javascript e PHP, além do próprio CSS, para que um site não tenha o que chamamos de layout estático. Até mesmo um template de e-mail marketing faz uso de códigos CSS para enriquecer visualmente o layout apresentado por e-mail.
Uma curiosidade sobre o HTML: esta linguagem foi escrita em uma primeira versão por Tim Berners-Lee em 1993, com o intuito de facilitar o intercâmbio de informações entre colegas de trabalho espalhados pelo mundo. Posteriormente, o projeto foi aprimorado e, atualmente, em sua versão HTML5, oferece uma série de recursos atualizados que facilitam o trabalho dos programadores, melhorando a qualidade e acessibilidade dos sites e aplicativos.
O que é CSS?
CSS é uma sigla que significa, em português, Folha de Estilo em Cascatas. Através do CSS conseguimos formatar a aparência e o layout dos elementos de uma página, desde a simples cor de um texto até a movimentação de elementos ao passar o mouse, por exemplo. Enquanto o HTML cria a estrutura, o CSS cuida da aparência, mas não só: ele também permite criar animações complexas, calcular dimensões a fim de definir a melhor largura e altura para um elemento, determinar como cada elemento deve se comportar em cada dispositivo (desktop, tablet ou mobile), entre outras funcionalidades.
Uma curiosidade sobre o CSS: ele foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996, portanto três anos após a criação do HTML, com o objetivo de complementá-lo, uma vez que o HTML não permite a estilização das páginas. Por conta disso, coisas simples como, por exemplo, definir qual fonte usar em um parágrafo era uma tarefa enorme, dificultando a vida dos programadores. A chegada do CSS foi definitiva e esta linguagem segue sendo relevante até os dias de hoje.
Qual a relação entre HTML e CSS?
A relação entre HTML e CSS é complementar, sendo o HTML encarregado de alicerçar os elementos da página, enquanto o CSS possibilita a customização visual destes elementos. Fazendo uma alusão à construção de uma casa, o HTML representaria as vigas, os canos, tijolos, paredes, portas e janelas; enquanto o CSS seria a pintura das paredes, a dimensão das janelas e dos cômodos e a disposição dos móveis.
Outra linguagem super importante para o front-end é o Javascript, que também trabalha junto com o HTML e o CSS. Por ser uma linguagem mais complexa, pesada, e permitir a conexão do front-end com o back-end, deixaremos para falar dele em breve, em um artigo específico.
