It's 1996 and Someone Just Asked You to Build a Website

If you want to learn a little about making your own websites, it might be helpful to start near the beginning. Today's web is infinitely more complex than it was in the mid-1990s, but a lot of what was there then remains today. So I'm writing this as a fictional story, and I'll move from the narrative to the instructive parts back and forth.

The very first iteration of HTML was created and released by Tim Berners-Lee in 1991 and only had 18 tags, a majority of which are still used in modern web pages. Some examples include header tags (h1, h2...h6), paragraph (p), anchor (most commonly seen in links as 'a href') and many others. You can still build a functioning web page using ONLY the original tags, or at least the ones that haven't been deprecated like 'nextid,' which was used for NeXt computers.

I see a lot of blogs asking for help with layouts. This isn't going to help you make the layout of your dreams, at least not right away. I've always found things to be most-helpful when they start from foundational principles. If you'd rather not, I totally get that. 

For those of you who ARE interested in learning from the very beginning, let's imagine it's the year 1996.

The Set-Up

You work in the computer lab of a small college. Most of your day is spent playing Command and Conquer and Warcraft II between administrative tasks. But today the dean has interrupted your latest gaming session with a knock at your office door. You quickly turn off the game and invite him in.

"Fictional computer person," the dean begins, "I was just reading about this new Internet device in Newsweek. There's something called the world-wide web now, I need you to make us a computer page for the school. Can you do that?"

You think for a second. The answer is "no," but you don't want risk the dean hiring an outside consultant, one who might come into the computer lab and completely ruin the good thing you've got going. So you say "yeah, I can do that."

The dean smiles. "Great, I want this world wide web page to have the school's name, a description of us, a list of the departments and what they do, then maybe some kind of index card-dealie with our phone numbers, so people know where they can reach us."

You hear yourself say out loud "We should give the departments email addresses, and list those too." Internally you sigh at yourself for allowing pride to volunteer you for another task.

"Electronic mail? I love it. I've been toying with the idea of having us experiment with that technology." The dean stands up to leave, finally allowing you to return to your games, but not without turning around to add one more thing.

"I need this done before the end of the month," he says.

"Oh yeah, not a problem at all," you say. He smiles and exits your office. Just then, your brain reminds you that the end of the month is two weeks from now. "Stupid brain!" you say.

The Information Super Highway On-Ramp

Now that you've opened your big dumb mouth, you need to actually start building the website. Thankfully you have a disc of shareware programs and on one of them is a copy of a world wide web browser called NSCA Mosaic. After installing it, you consult some of your computer magazines for advice on how and where to find information on creating these new online information kiosks. 

Thankfully it's not long before you find an article suggesting you point your computer to something called https://www.w3.org/MarkUp/html-spec/L2index.html. (note: it probably wasn't actually that specific site and it definitely wasn't https). There's also an article in another magazine explaining the basics. You look it over and realize "actually... this isn't that hard," and fire up your text editor.

The Basics

The dean made the following requests: The name of the school (which we'll call Oak Leaf Community College), a brief description, a list of the departments and their purposes, and then some kind of "index card" with the emails.

You imagine in it your head based off the other academic websites you've been checking out. Seems pretty simple. 

Oak Leaf Community College

"A school for people who live nearby."

Description

Community College Departments

History

Studies History

Science

Studies Science

Arts & Humanities

Studies the Arts and Humanities

How to Contact the Departments

Department name, department email

Well then. You congratulate yourself on completing the planning stage, and for a reward you allow yourself six unbroken hours of Warcraft II playtime.

Making that general outline into a working website in 1996 was, in fact, extremely easy. Easy enough anyone could figure it out. The hardest part back then was getting it on a webserver, but we're just going to skip all of that and pretend it's been taken care of. Let's look at what the code would be for the Oak Leaf Community College website circa 1996.

And that was pretty much it. Here's what it would have looked like on NCSA Mosaic, the web browser pretty much everyone was using (until Netscape came out, at least). Also, for the purposes of this illustration I cheated a little bit, adding some code into the text that's not in the example above due to some differences in how modern browsers display certain parts of a web page. Lemme know if you know what I did (it's two different things, if that helps).

Breaking Down the Web Page

In this example we have some really simple HTML. There's no <html>, <head>, <body> tags, or DOCTYPE declaration at the start because most people just didn't use them. You still don't HAVE to, but you will anger the web design community and leaving those out will almost certainly cause problems. It's considered best-practices.

We have the <title></title>, which is an easy one to figure out: that's where the title of your page goes. Now you see that info in the tabs, but you can see on Mosaic it was in the nav bar.

The title of the page is in an h1 tag, the most powerful and largest type of header. Headers go from h1 all the way down to h6, which is basically small, bolded text at that point. To search engines and web browsers, though, headers are a way to organize data. So the h1 in this case is What The Page Is About (Oak Leaf CC). The h2 headers are the next level of information, in this case the departments and then how to contact them.

I used h3 in the description list (dl) because those are the next level of information down: announcing the name of the departments, followed by a small description. But I did it in list form. There are several types of lists in HTML, and I'd say the most common are ol (ordered lists) and ul (unordered lists). To be fair... I'm not actually sure if this is a best-practice, using a header inside a list element. If it's not, and you know it's not, let me know.

In this case the list is a description list, and the elements are <dt> (define terms, or the name of the departments) and then <dd>, the description of the defined term. Could you use a different kind of list and have it make just as much sense? Yeah, of course. Ultimately it's about how readable your page is, but people in the know would be correct to point out actually, it does matter. 

Finally we have another h2, a brief bit of text, and then a table. This table has th (table headers), tr (table rows) and then td (table data). Rows go inside tables and data goes in those rows. Think of a td like a cell in Excel, basically. If you're like me, you always get rows and columns mixed up even though it's completely obvious what a column is, but thankfully there is no column tag, you just stack rows of data on top of one another. 

You might see tables without borders being used in layout, and this was a really common workaround for building layouts for a very long time. In fact it still is. But tables are only supposed to contain information and are NOT supposed to be used for layout purposes, in spite of the fact the practice is really common. For layout, you should be using CSS elements instead, which is a whole different thing.

Initial Website Success

Congrats, 1996 you. You've just built a website. You have now increased your value in the job market (of 1996) to an almost unbelievable degree. 

The dean has seen your work and loves it. He loves it so much he asks you to build web pages for each of the departments and link them from the homepage. The curse of doing a good job has now bitten you on the ass. Doing good once means doing more later. 

"Oh, and could you scan in an image of our logo and put that at the top of every page?" he asks. 

"Yes of course, but we need a new scanner," you say to him, lying because the scanner you have now works fine but you see an opportunity to have the school pay for a newer, fancier one.

"Not a problem, I'll use some of our technology budget," he says. 

Adding Images and Links

This post has gone on a long time, and if you're still with me, I want to congratulate you. Rather than go through all the steps again, I'm going to do what 1996 you would have done and made it as easy as possible.

After the new scanner arrives, you immediately scan all your photos from the last four years of get-togethers and concerts you've attended so you can start adding them to your own personal website. Once that's completed you scan in the school's logo and add it to the top of the homepage, right below the title tags.

You then copy the contents of the file three times and paste them into new files titled history.html, science.html, and arts.html and upload them to the server after adding in the relevant information. Then you go back to the index page, the one you started with, and add in a new heading above the contact section in an unordered list with links to the pages. 

The img tag with the src is still the exact same now as it was then, although there's a lot more you can do thanks to CSS. But any image in a website is going to start with the img tag. Same with links: a followed by href and then the link. In this example, the links would resolve to http://www.olcc.edu/webpage.html if the page were real. 

A job well done. And now you have access to a brand-new bed scanner. (It doesn't seem like that big of a deal today, but having scanner access back then meant you had the option to add photos to your websites. Digital cameras were just not a thing. You had to take photos on film, get them developed, scan them in and then upload the files).

Suddenly there's a knock at your door. It's the dean again.

"Great work, the site looks incredible with that logo at the top," he says. You nod in agreement because you already know it looks incredible.

"Now for the next version, I want to you add a cartoon image of a virtual campus, so people can navigate around the website with an image-map!" Before you can say anything, he gets up and walks away.

I will not be talking about imagemaps because no one uses them and they sucked, even back then. (I also won't be talking about 1997-you being asked to develop a frames-based layout).

Hope this helps someone, anyone.