A Step by Step Guide to Making a Simple Web Page by Hand

I've had some complaints already that my simple rules were in fact obtuse and confusing, so I've added this step by step guide to writing a simple webpage by hand. Note that you should read parts 1-3 of this primer if you haven't already, which will explain a little more about getting a place to put this stuff, and putting it there.

Here we go!

  1. Boot up your text editor. This can be anything from Pico/vi on Unix systems to Simpletext on the Mac to Microsoft Office. Remember that all HTML files must be saved as PLAIN TEXT ONLY. Using native Microsoft Word format will not work!
  2. Lay out a general template for the page. This is just the skeleton which defines the page as being HTML, and shows the head and body areas. Your file should now look something like this: (this is a perfectly valid HTML page, it just doesn't contain anything!) Click here to view!
    <html>

    <head>
    </head>

    <body>
    </body>

    </html>
  3. Now let's give the page space for a title. Click here to view!
    <html>

    <head>
    <title></title>
    </head>

    <body>
    </body>

    </html>
  4. Now add the actual title between the starting and ending <title> tags. What you type here is what will display in the top of the browser window (not on the actual page itself). Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    </head>

    <body>
    </body>

    </html>
  5. How about making the background white? Add an attribute to the <body> tag. Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    </head>

    <body bgcolor=FFFFFF>
    </body>

    </html>
  6. Now we put a title on the actual webpage itself. This will go inside a header (<h1>) tag. Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    </head>

    <body bgcolor=FFFFFF>
    <h1>Welcome to Mike's Webpage!</h1>
    </body>

    </html>
  7. How about a pretty picture? Just use the <img> tag. Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    </head>

    <body bgcolor=FFFFFF>
    <h1>Welcome to Mike's Webpage!</h1>
    <img src=prettypicture.jpg>
    </body>

    </html>
  8. But let's center it, by putting it inside a centered paragraph. Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    </head>

    <body bgcolor=FFFFFF>
    <h1>Welcome to Mike's Webpage!</h1>
    <p align=center><img src=prettypicture.jpg></p>
    </body>

    </html>
  9. While we're at it we can center the header. Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    </head>

    <body bgcolor=FFFFFF>
    <h1 align=center>Welcome to Mike's Webpage!</h1>
    <p align=center><img src=prettypicture.jpg></p>
    </body>

    </html>
  10. Add a paragraph with some text about the picture. Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    </head>

    <body bgcolor=FFFFFF>
    <h1 align=center>Welcome to Mike's Webpage!</h1>
    <p align=center><img src=prettypicture.jpg></p>
    <p align=center>Here is my description!</p>
    </body>

    </html>
  11. Finally, let's add some text that we will click for a link. Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    <basefont size=4>
    </head>

    <body bgcolor=FFFFFF>
    <h1 align=center>Welcome to Mike's Webpage!</h1>
    <p align=center><img src=prettypicture.jpg></p>
    <p align=center>Here is my description!</p>
    <p align=center>Click here for more information</p>
    </body>

    </html>
  12. And of course, we can't forget the link tag itself. Notice that it goes INSIDE the paragraph tags. Click here to view!
    <html>

    <head>
    <title>This is Mike's Cool Page!</title>
    <basefont size=4>
    </head>

    <body bgcolor=FFFFFF>
    <h1 align=center>Welcome to Mike's Webpage!</h1>
    <p align=center><img src=prettypicture.jpg></p>
    <p align=center>Here is my description!</p>
    <p align=center><a href=http://www.yahoo.com/>Click here for more information</a></p>
    </body>

    </html>
  13. That's it, now you have a fully functioning webpage! Granted it doesn't happen to be a particularily useful page, but the sky's the limit from here.