Como funcionava o famoso site do Space Jam de 1996?
Tags: webdev, beginners, braziliandevs, html
Published: 2023-09-19 13:10:57

Esse site era genial, e permanece nos anais das coisas geniais feitas apenas com HTML e gambetagem. Na época do HTML4.1, as decisões de design do mesmo incorporava uma série de atributos relacionados à layout e design que foram depreciados pra serem aplicados via CSS.

Nesse artigo vamos abrir o capô da marcação desse site e entender como funcionava layout em um mundo não tão colorido pra pessoas frontend, mas que ainda assim era repleto de criatividade.

<br />

--------

<br />

## Logo na primeira página

![Tag body com os atributos bgcolor, alink, vlink, link e text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ika7j6cgw5f7bzhwltzl.png)

O atributo [`alink`](https://www.w3.org/TR/html401/struct/global.html#adef-alink) era do HTML 3.2, definia a cor dos links selecionados, depreciado no HTML 4.1 junto com `vlink`, que era cor dos links visitados e com background diretamente no elemento.

Percebe o atributo `text`? Esse atribuía a cor do texto do elemento e seus descendentes. Lembra muito a escolha de design do [Bootstrap](https://getbootstrap.com/docs/4.0/utilities/colors) ou [Tailwind](https://tailwindcss.com/docs/text-color) de usar `text` ao invés de `color` como palavras chaves nas suas classes utilitárias pra cor da fonte. Esse nome já era percebido como uma forma menos ambígua de definir cor de texto naquela época.

&nbsp;


![Ainda no layout da home, uma tag center rodeada de comentários dizendo que alguns espaços do site estavam reservados pra anúncios](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qli3ytv13pfiswu72t2.png)

&nbsp;

A tag `center` que não poderia faltar foi depreciada na transição do HTML 4.1 pro HTML 5.0, apesar de ainda ser usada  por muita gente, inclusive no código fonte do Jira.

E esse comentário ai? Provavelmente os anúncios já eram injetados via script nessa época, e pensando que o git foi em 2005, não tinha forma mais clara de sinalizar as outras pessoas a não futricar naquele cantinho do código.

<br />

--------

<br />

## O layout dos planetas


![Layout do Space Jam com planetas ao redor do logotipo do filme. Eles eram posicionados de forma circular ao redor de uma tabela bidimensional](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kard5amxa8vspqg6oa9x.png)



Dei um [`border-collapse`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) e pintei as bordas, e wow, que truque de mestre!

> 🔎 Se pensar bem, funciona de forma muito semelhante ao `display: grid`. Ajuda vocês a pensar em CSS grid como um sucessor espiritual do layout com table? Pra mim faz muito sentido.

Eu tentei recriar esse layout com grid, mas passando as _props_ via HTML (sem as imagens, pra simplificar). Se já é complexo com grid, imagina com table?

{% codepen https://codepen.io/camilo-micheletto/pen/KKrjZJJ %}

&nbsp;

O segredo desse nível de posicionamento com `table` é colocar mais ou menos certo usando a propriedade [v-align](https://www.w3.org/TR/html401/struct/tables.html#adef-valign) e usar `<br>` pra fazer os ajustes finos.

![Print do devTools inspecionando a tabela do Space Jam. Na célula, a imagem com seu alinhamento e vários <br> acima dela](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luamlm1vwgnd4rt5wj24.png)

&nbsp;

> 🚫 Inclusive, você sabia que [o elemento `<br>` foi depreciado](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br)? Então procure usar só em Markdown, pois hoje existem diversas formas de controlar espaço, viu?

&nbsp;

Pra fechar essa parte, se liguem nessa tag `<font>` que [já tava depreciada na época (HTML 3.0 > HTML 4.1)(https://www.w3.org/TR/html401/present/graphics.html#edef-FONT), mas já recebia atributos de classe (era só uma margem de 5px).

![Uso da tag font no HTML com a classe css footer-link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlxkychohp8kn96nx6ig.png)

<br />

--------

<br />

Ficamos por aqui, mas na próxima vamos fuçar como eles fizeram essa sidebar **irada**, e ainda com um easter egg.

![Sidebar do space-jam com hiperlinks pra todos os planetas do site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy90d99jowy88w96208q.png)



<br />

--------

<br />

## Referências

Lista de atributos do HTML 4.1 da W3C [(link, site em inglês)](https://www.w3.org/TR/html401/index/attributes.html)

Lista de elementos do HTML 4.1 da W3C [(link, site em inglês)](https://www.w3.org/TR/html401/index/elements.html)