Create a Website that Looks Like it was Made in the 90s – Part 1: Using Legacy Code

We will go through the process of creating a simple web page. The website will have a very basic design and no images.
90s Website

Introduction

The 1990s were a time when the World Wide Web was growing in popularity. The internet was becoming more accessible to the public, and more people were using it to communicate and share information.

HTML was the primary markup language for creating websites. It allowed developers to create pages with text, images, and other elements. There were no widely-used standards for styling websites. As a result, websites looked very different from one another. Some websites used tables to layout their content, while others used frames or inline styles. CSS was not yet widely used, so most websites were very difficult to style and customize.

We will go through the process of creating a simple web page. The website will have a very basic design and no images.

Note: Some of the HTML tags that we will use in this article like <center> and <font> are obsolete in HTML5.

Contents hide
1. Introduction
2. Perquisites
3. The HTML Template
4. Creating the Page Header
5. Adding Link Tables
6. Result
7. Conclusion

Perquisites

  • A text editor
  • A web browser

The HTML Template

We start with a simple HTML template.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
    <meta name="keywords" content="web point, search engine">
    <meta name="description" content="The Web Point, a well-respected search engine.">
    <title>The Web Point</title>
<head>
</head>
<body>
    <!-- Our content will go here -->
</body>
</html>

The <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> line is a document type declaration. This line tells the web browser that the document is written in HTML 3.2 which is web standard that was introduced in 1997. It defines a number of features that were not included in earlier versions of HTML, including tables, frames, and applets.

Creating the Page Header

First, we will define a centered header that will contain the web page title, a search bar and a few links inside the body tag.

<form method="GET" action="">
    <center>
        <br>
        <font size="6">
        <h1>The Web Point</h1>
        </font>
        <hr size="1" width="500">
        <input type="text" name="search" size="30">
        <input type="submit" value="Search">
        <br>
        <font size="-1" face="Arial,Helvetic">
            [ <a href="#">News</a> ]
            [ <a href="#">Maps & Directions</a> ]
            [ <a href="#">Weather</a> ]
            [ <a href="#">Mail</a> ]
            [ <a href="#">Finance</a> ]
        </font>
    </center>
</form>

Adding Link Tables

Now, let’s create a table with 4 columns and 2 rows. We’ll make a layout that is inspired by Google’s old “More Google” page.

<br>
<br>
<center>
    <table border="0"  cellspacing="8">
        <tbody>
            <tr valign="top">
                <td>
                    <a href="#"><font size="+1">Web Point Mail</font></a>
                    <br>
                    See what our mail service has to offer!
                </td>
                <td>
                    <a href="#"><font size="+1">Careers</font></a>
                    <br>
                    We are hiring, work with us!
                </td>
            </tr>
            <tr valign="top">
                <td>
                    <a href="#"><font size="+1">News Blog</font></a>
                    <br>
                    Listing of news posts about Web Point
                </td>
                <td>
                    <a href="#"><font size="+1">File Directory</font></a>
                    <br>
                    A useful file directory that has essential documents and software
                </td>
            </tr>
            <tr valign="top">
                <td>
                    <a href="#"><font size="+1">FAQ</font></a>
                    <br>
                    Frequently asked questions about our services
                </td>
                <td>
                    <a href="#"><font size="+1">Maps & Directions</font></a>
                    <br>
                    Introducing our brand-new maps and directions service
                </td>
            </tr>
            <tr valign="top">
                <td>
                    <a href="#"><font size="+1">Terms & Privacy</font></a>
                    <br>
                    Terms of our services and how we handle your privacy
                </td>
                <td>
                    <a href="#"><font size="+1">Contact</font></a>
                    <br>
                    We will reply as soon as possible
                </td>
            </tr>
        </tbody>
    </table>
</center>

Finally, let’s add a copyright notice at the bottom to complete the web page.

<br>
<br>
<center>
    Copyright (C) 1999 The Web Point
</center>

Result

Conclusion

We created a very basic web page using HTML. This page isn’t very pretty, most pages in the World Wide Web in the 90s looked bland (at least the ones that weren’t hosted on GeoCities) until the advent of CSS.

In the next part we will create a GeoCities style website.

Related Posts