HTML Only Experiments

I hadn't thought about the pure HTML site motherf-ingwebsite.com in years1. Then, Salma Alam-Naylor (aka whitep4nth3r) posted a link to it and asked "what can you do with just HTML"2.

Thinking about the constraint nerd-snipped me.

The Experiments

I ended up making six HTML only sites. And, when I say HTML only, I mean that literally. There's no JavaScript, CSS.

I also decided <img> tags were out of bounds. They themselves are HTML, but they call assets that aren't. (I do use some deprecated HTML tags. But, being HTML, they fit the constraint.)

The sites are:

  1. ASCII Art
    The initial experiment. I used a python script to create ASCII art out off some paintings and threw the output in <pre> tags. Nothing special, but I did use an old school <center> tag and bgcolor attributes to position things and shade them to highlight the art.

  2. Pixel Art
    After using bgcolor attributes on the ascii art site, I realized I could use them with table cells to make basic pixels. Another trip through a python script to generate the values led to this site. (With deprecated width and height attributes helping keep things lined up.)

  3. Display Board

    Is a set of HTML experiments even worth it if you don't play with the marquee tag? Probably. But, why risk it. This one make a kind of split-flap display with the venerable tag.

  4. Maze
    This was the most complex, by far. I had to dig into maze making algorithms. They're very cool if you ever have cause to check them out. Broke my brain a bit, but we got there in the end thanks to some more python to generate the pages.

  5. Random Pattern
    Next up was randomness. Super easy to do with JavaScript. Making a good visualization with HTML is trickier. The technique I came up with was to generate a numbered collection of html pages with random colors set via the deprecated bgcolor tag on the <body> element.

    Each page also has a <meta http-equiv="refresh"> tag with a random time in it that points to the next file in the chain. So, the files always go in the same order, but each one jumps to the next at a different interval.

    The final assembly was done by creating a table and loading each cell with a random page from the numbered collection in an iframe. The different times for jumps between pages makes things appear random even though each cell is going through the same series. Just started at different locations.

    (I generate this site statically. It does the same thing every time, plus or minus timing jitter based on page load times, etc... Running it on a dynamic server would let you make new randomness every time both at the top display page level and the individual iframes.)

  6. Animation
    This is the one I'm most proud of. It combines iframe pages with <meta http-equiv="refresh"> tags and ASCII art to recreate The Horse in Motion. One of the first steps in the development of video3.

    Some of the other experiments took way more work. This one looks the coolest, though

Code Review

Making these sites was a ton of fun. I've got another idea for a Wordle style guessing game. I'll get to that at some point. In the mean time, I hope you enjoy these.

-a

-- end of line --

Footnotes

1 There's also bettermotherf-ingwebsite and thebestmotherf-ingwebsite. They're worth checking out too.

2 The original link from whitep4nth3r no longer works for me. I had to paraphrase here.

3 As I understand it, The Horse in Motion also proved that all four of a horse's feet leave the ground during a gallop. Something that had been a prior topic of debate. (Rumors that there was a bet about it seem to be unfounded.)