- Enjoy building a simple hand-coded artisanal HTML website.
- Provide instructions on how others could build and upload a similar hobbyist website of their own.
- 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.
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
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&id=1&next"> <area shape="rect" coords="75,90,146,129" href="http://www.webring.org/cgi-bin/webring?ring=cartoon&id=1&next5"> <area shape="rect" coords="5,134,73,174" href="http://www.webring.org/cgi-bin/webring?ring=cartoon&id=1&random"> <area shape="rect" coords="77,133,146,174" href="http://www.webring.org/cgi-bin/webring?home&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.
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 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.).
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).
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>