So I made a Webring (which was the style at the time)

While I was suffering from a bout of World Wide Web Nostalgia I built The HTML Hobbyist website. The intent was to:

1. Enjoy building a simple hand-coded artisanal HTML website.
2. Provide instructions on how others could build and upload a similar hobbyist website of their own.
3. Show how quick, easy, and affordable it has become to get a website up and running.

Of course giving into that first wave of nostalgia brought on more nostalgia…

There has been some recent discussion about bringing webrings back.

Let’s say I wanna bring back webrings. How should I build it?

First communities are gonna be #a11y, #PerfMatters, #CSSGrid, and #BoyBandWebmasters.

(ICYMI: Webrings were curated communities with dope badges that you could explore with simple `< prev` and `next >` links.)

— Tatiana Mac (@TatianaTMac) April 6, 2019

And some developers have been attempting to recreate the feature:

• Let’s bring Fan Sites and webrings back!, February 2019
• A Webring Kit, April 2019
• Let’s Bring Webrings Back, September 2020
• How You Might Build a Modern Day Webring, November 2020

The implementation of these webrings at the user level is very developer focused. If a webmaster wanted to put one of these webrings on their site they’d have to know a little something about Git, JavaScript, and/or web components. I think that may be a bit much to ask of a hobbyist webmaster, which are who the original webrings were built for.

Webrings of the Late 1900s

The original webrings coded in the late 1900s used Common Gateway Interface (cgi scripts) on the server side to manage the application. They were created to solve a very specific problem: how to find more websites. In the days before laser-focused search engines, people would surf the web. Browsing from site to site, clicking link to link, hoping to find good and relevant content. A webring was a convenient way to group websites together, related by a particular subject, object, or particular philosophy.

The webring would display on a website as an ordinary clickable image but each of the individual “buttons” within the image would perform a different action (next, join, random, etc.).

Webmasters used code for an image map (HTML code that plotted out link locations on an image). Their code looked something like this (note that this is some old school HTML, please don’t copy it):

<center><table border="3" cellspacing="3" bgcolor="black"><tbody><tr><td>
<img src="http://www.geocities.com/EnchantedForest/1250/tvtune.gif" usemap="#tvtune"></td></tr>
</tbody></table></center>
<map name="tvtune">
  <area shape="rect" coords="4,92,72,131" href="http://www.webring.org/cgi-bin/webring?ring=cartoon&amp;id=1&amp;next">
  <area shape="rect" coords="75,90,146,129" href="http://www.webring.org/cgi-bin/webring?ring=cartoon&amp;id=1&amp;next5">
  <area shape="rect" coords="5,134,73,174" href="http://www.webring.org/cgi-bin/webring?ring=cartoon&amp;id=1&amp;random">
  <area shape="rect" coords="77,133,146,174" href="http://www.webring.org/cgi-bin/webring?home&amp;ring=cartoon">
  <area shape="default" nohref="">
</map>

A slightly more complex version (for the ring member) would use a table-based layout with actual HTML element links in it, and would appear like this:

The code for the table version was a bit more complex, so I’ll spare you what the code looked like. After copy/pasting the code to their site, from the webmaster’s point of view joining a webring was maintenance free. All of the management tasks, adding and removing members, could be handled by the webring owner.

Webring Development

In scripting my own webring, I wanted a solution that relied on pure HTML as much as possible and would be easy for a hobbyist webmaster to put on their site. I also wanted the server side component to be simple to use and adapt, so that others could create their own webrings. In keeping with the philosophy of the HTML Hobbyist website, the ideal solution would be HTML-only, or as close as possible.

My initial intent was to build the webring using just HTML, without any JavaScript or server side coding, and I may attempt that in the future as a proof-of-concept. In the meantime I decided to create an iteration using PHP, a server side scripting language that’s available on most web hosts.

My build criteria for the webring members:

• Make it easy for a webmaster to implement the member link on their site without needing very much additional coding skills.
• Make it so that it didn’t require any additional downloading of code (scripts, components, etc.).
• Use mostly pure HTML, with as little JavaScript as possible.

I decided on using a simple iframe wherein you could pass a query string. The query string would let the webring identify which member site it’s on. Similar to the ring parameter in the original webring code. However, with a little thought, I realized that I could create individual directories for each member which would then serve as the member identifier. While that might be tiring to hand code, automating it with PHP makes it easy.

The main page, the member list, and all the individual member ring sites ended up being all written in pure HTML. The only scripts used are for the random page button and a publication script, to automate building out the member list and the member pages based on data in a control file (the webring.json file).

The Result

A simple web ring that makes it ridiculously easy for a hobbyist webmaster to join a webring and add it to their page with a single line of standard HTML.

<iframe height="260" width="640" src="https://webring.htmlhobbyist.com/site/www.htmlhobbyist.com/" title="The HTML Hobbyist Webring"></iframe>

Visit The HTML Hobbyist Webring to see the results and visit the HTML Hobbyist website to see it in action.