Monday, Dec. 11, 2017

In Pictures: The History Of The Website

Written By:

|

September 1, 2017

|

Posted In:

In Pictures: The History Of The Website

We have had the World Wide Web since the 1990s, and it sure has come a long way. Wait a sec, that’s almost 30 years! Yes, the WWW is soon to turn 30. And, just to make things clear, that’s not even the history of the internet which predates the WWW. The WWW is the system of interlinking hypertext documents with URI’s, versus the internet which is the interlinking of electronic computers that started in the US in the 1950s (!).

In this article, we’re talking about the WWW. We’re going to give you a visual tour from the earliest, most primitive webpages to the most advanced webpages we have today.

The First Webpage

The world’s first recorded webpage was created in 1991 and looked like this:

(Click to link to the actual page)

As you can see, there was no CSS styling or javascript functionality. There were no images even, just hyperlinks and simple hierarchical formatting. This page seems to serve as some kind of starting-point for the web, as a guide for those embarking on a hypertext journey.

If you look at the HTML source code, there are some interesting things to note (if you have a basic knowledge of HTML). Instead of the usual html>head,body structure of a webpage, this one uses just header,body. This is HTML 1.0, which only included 20 elements, of which 13 are still in use today. But thankfully, most web browsers are still able to interpret these old HTML versions. Plus you just have weird formatting of this HTML, where none of it is indented, and all the link attributes are on a new line in full caps. It looks cool though. For a history of HTML, see here

It should be noted that during this time, webpages were not viewed like they are today through graphical web browsers. This first webpage would have been viewed with a ‘line mode browser’ that displayed it within a computer console. You can play around with a simulation of a line mode browser online here.

HTML 2.0

The web explodes into a vast network of interlinking webpages in 1994, with HTML 2.0 being released and adopted as the official standard. Just to clarify, HTML means Hypertext Markup Language. It is the simple code that makes up the structure and content of webpages. Meanwhile, the first graphical web browsers were released and became part of the website explosion, the most popular of these was called Mosaic and later renamed Netscape.

HTML 2.0 developed the ability to make tables which enabled website layouts to be formatted in far more sophisticated ways. The sidebar and menu bar were born. ‘Frames’ were also introduced which allowed websites to embed other webpages within the same page, so you can have boxes and columns within a webpage with their own scrollbars. With HTML 2.0 you could embed music within a site and even make it play automatically. You can style webpages with any font, colours and background images that you want. You can use moving images (gifs) and even image cursors. You can even make text blink or scroll across the page.

It is clear that there were some serious missteps during this period of growth and development. A lot of the new ‘features’ that I just listed turned out to be very easy to misuse and create awful websites. Some of the flashy websites of the 90s are amazingly still online and you can still visit them to experience the wave of unbriddled excitement.

(All of these 90s websites can be clicked on to go to the actual website)

The 1996 Space Jam website

We like the repeating background image and also the pretty cutting-edge image links arranged around the page that scream the excitement of the hypermedia revolution. The code is pretty wack as well, there are like five line-breaks between everything, but anyway.

1997—Ron Oslund’s Home Page

Boy oh boy, where do we start with this one….

This has to be one of the worst websites ever created. It has a tiling, non-continuous background, it it under construction (of course), it has a visitor counter, it has a ‘Cool Links and Stuff’ page and what it’s attributed to Diana, Princess of Wales (What!?).

This is the most 90s thing that we have ever seen.

The 2004 Arngen website

Information overload what the hell close the page! This webpage is a blast, there’s just so much going on here. You can see that it’s trying to be like a newspaper, but it doesn’t grasp the difference of the web: concentration span is the limitation, not page space. You should see the HTML, the whole thing is an enormous complex table.

This

(An image won’t do this one justice, you have to click the link)

http://www.dokimos.org/ajff/

Ok, that’s enough of those. But if you want even more 90s nostalgia, look into Geocities. Yahoo! Geocities was a web hosting service created in 1994. So basically, people coded their own webpages and Yahoo! hosted them up on the web. The webpages were horrible. If even huge companies like Warner Bros. hadn’t developed web design sense back then, then ordinary people were even worse. Geocities is no longer hosted by Yahoo!, but several archives exist including this that you can explore.

Server-Side Scripting

In 1994, web browsers started being able to evaluate javascript code, and this allowed web-pages to include javascript to do a lot of advanced things. HTML is not a programming language, it can only determine the layout of the page, whereas javascript is a full programming language, enabling the web designer to make a webpage into practically anything. This unlocked an entire new field of potential for the website that was initially used to make widgets. For instance, those 90’s visitor counters (‘You are the 17721th visitor on this site’) were javascript widgets. Nowerdays, javascript is used to make entire web apps.

The Turn Of The Millenium: Time To Re-Evaluate The Webpage

From around 2000 onwards, the initial excitement of the WWW gave way to some concerns over the quality of many websites on the web. People were questioning whether the gif backgrounds and comical sound effects of geocities were still aligned with the utopianism of the WWW’s founding. Basically, there was a reaction against annoying website features. Here is a breakdown of some of the worst website features that fell by the wayside:

(See this website for a demonstration of all the worst website features in one)

  • Frames: These pages within pages confuse search engines and web users alike
  • Scrolling text: distracting and there is never a reason to use this
  • Gifs (animated images): distracting
  • Image backgrounds, especially tiled and animated: make it hard to read text, ugly and distracting
  • Image cursors: when the cursor is an image, this just makes it harder to click

All of these are annoying but most of them you can still use today if you want to. But most people don’t.

From the 2000s onwards, there was also a lot of work done to clean up and standardise the HTML that people were writing their webpages with. Basically, a standard called XHTML was produced, so websites that were coded in XHTML were and still to some extent are held to be high-standard websites, however looser definitions of HTML code are still recognised by browsers.

CSS

A big leap around the turn of the millenium was the advent of Cascading Style Sheets (CSS). This is a language that styles webpages. Not only did this increase the capacities of web styling, but the main advantage is: the seperation of form and content. In other words, no longer were styles coded within the layout of the actual page. Now, you just write a stylesheet and apply it to the page. The advantage being that if you want to change all the headings from blue to green, you can just change one thing in the CSS rather than change every heading in the HTML.

Flash

Do you remember Adobe Flash Content? Those animations that take a long time to load and never worked because you always had to install the latest version of Flash on your computer or update your browser plugin? Those were the days in the first decade of the new millenium when entire websites could be created using Flash. So basically, the whole website was a Flash animation, with interactive buttons and hyperlinks to other pages. It lead the way in visual effects, user experience and online games in websites, even though it was rather slow.

An online Flash game:

HTML5 and CSS3

Now we are up to the present day—where we have websites that have the wide range of effects of Flash, without the clunkiness and support issues. HTML5 was published in 2015 to bring many of these features right into HTML, and CSS3 went part of the way when it was introduced in 2011. Many of the cleanest, most responsive websites are now created using these two new standards. This includes websites that display well on mobile phones, because these two developments have features that allow you to code a mobile version into your site.

Here is a website that has won an Awwward for its use of HTML5:

It also showcases the design trends that have gone hand-in-hand with the modernisation of the web, including minimalism and full-width (no margins) design.

Here is a website that has won an Awwward for its use of CSS3:

(Click the menu icon to see this website’s elegant use of CSS3)

Web Apps

Web apps are one of the ways that we can clearly see a lot of development in the future of the webpage. We already have sophisticated web apps like Gmail and complex online games like League of Legends. These are based on a lot of client-side scripting (the website runs the code, not your PC) in various heavy programming languages like C++. This technology is a bit beyond this article, but needless to say it is developing at a rapid rate, along with the increases in internet speeds and processing power around the world. We are sure to see the internet behaving more and more like the desktop PC as we move into the next decade of the WWW.

Share This Article

Related News

How Google AMP Is Changing The Web Even More Than You Think
Google’s New Technology (AMP) Can Make Your Mobile Site Load Instantaneously

About Author

Leave A Reply

Leave a Reply

Your email address will not be published. Required fields are marked *