Creating simple web pages
Some material is very old and may be incorrect today
© December 2005 Tony Lawrence
I really don't understand why, but many people seem to think creating web pages with HTML is much more difficult than it actually is. People who have enthusiastically jumped into learning Perl or Python have told me that HTML is "too hard".
It really isn't. Sure, it can be complicated and confusing if you are trying to push things to the absolute limit, but if you just need simple pages, you can get started with very little knowledge. Happily, you can also make lots of mistakes and everything will still work most of the time. That's because web browsers are very forgiving of your mistakes: they have to be, because there are a LOT of technically "broken" HTML pages out there. I try to keep pages on this site W3C compliant, but I often make mistakes through ignorance or carelessness. Few visitors will ever notice because almost all web browsers are willing to display reasonable results regardless. Because that has been true right along, mistakes don't get noticed and don't get fixed, and that makes it necessary for browsers to keep ignoring the errors, and on it goes. It will likely be a long, long time (if ever) before you have to write "perfect" HTML. Not that you shouldn't strive for that: "correct" HTML is easier for search engines to parse, and if you ever need to write something to restructure your pages, your coding effort will be easier if the pages are "well formed".
Here's a very simple and complete HTML page:
<html><head><title>My Page</title><body><h2>My Headline</h2><p>My sentences go here.</p><p>This is a new paragraph. This isn't.</p></body</html>
Although that's perfectly good HTML, you'd probably rather read it (and write it) like this:
<html> <head> <title>My Page</title> <body> <h2>My Headline</h2> <p>My sentences go here.</p> <p>This is a new paragraph. This isn't.</p> </body</html>
Put this in a file called "mypage.htm". Use a simple text editor like Notepad or vi only - no Microsoft Word for this. In your browser, use "File->Open" to view it.
If you are writing for this site, you don't even have to bother with most of that; just give me:
<h2>My Headline</h2> <p>My sentences go here.</p> <p>This is a new paragraph. This isn't.</p>
Observing that in a browser, you'd see:
My sentences go here.
This is a new paragraph. This isn't.
Ignoring the opening and closing stuff, many technical articles can be written with just <H2> and <P> tags, plus one more (<PRE>) that I'll get to in a minute. Notice that the tags can be upper or lower case, <P> and <p> mean exactly the same thing. No spacing happens between your sentences unless you use <p>. You can use <br> if you just want a new line without the extra space. While technically quite different, for display purposes, <br><br> looks very much like <p>.
The <H2> has to be "closed" with </H2>; <p> tags often are not closed (though you can and you should if you want to be "perfect": </p>). br tags have no closing tag, but can be "self-closed": <br />
<PRE> is often used to display text from a file or from command lines you are demonstrating. For example:
<p>Here's the command I used: <PRE> $ cd /tmp $ date </PRE> <p>To my complete surprise, that printed todays date!
Like <H2>, <PRE> has to be closed with </PRE>
In a browser, that might look like:
Here's the command I used:
$ cd /tmp $ date
To my complete surprise, that printed todays date!
(If you do this at your machine and do "File->Open" in your browser, what you see will probably look a little different. That's because I use Style Sheets here which affect the appearance of certain tags).
Another tag you probably need to learn is for creating links. This looks a little more complicated that the stuff we've seen so far, but it's really not hard. You want to add a reference to http://aplawrence.com/Linux/index.html to your page. You can ALWAYS do it like this:
<p>If you want the Linux page, <a href="http://aplawrence.com/Linux/index.html">Click here!</a>
That will produce:
If you want the Linux page, Click here!
The reason links can be confusing is because if the page you wrote were, for example, at http://aplawrence.com/Linux/yourpage.html, you could also write the link as
<a href="index.html">Click here!</a> or <a href="http://aplawrence.com/index.html">Click here!</a>
That's because links can also be referenced relative to the page you are looking at or relative to the whole site. If that's confusing, just use the http:// form for now: that will always work.
Images are easy and yet a little confusing. Getting the image itself into your page is easy:
<img src="http://foo-web.com/someimage.gif" width=468 height=60>
(again, same relative rules apply). What can be confusing at first is where text appears relative to the image, etc. The rules actually aren't all that difficult, see Web Graphics for the details and experiment.
Your browser has this under one of its menus. For big, complicated pages, especially those created by HTML generators, the source may be really confusing and intimidating at first. But simpler, hand generated pages (like most of the pages at this site ) are easier to understand, and you can learn how to do things from them. This page is a little complicated because of it showing tags, but you probably can understand most of it.
With only the tags covered here, you can create useful web pages. As you learn more, you can become more adventurous. Your pages will be lean and efficient, will load quickly, and will be easy to understand and edit should you need to. It's not much to learn, and you might find it fun and interesting too.
If you can, try comparing simple pages like this with the same text generated by Microsoft Word ("Save As Web Page") or any other web generator. You'll see how bloated and confusing the generated pages are.
Got something to add? Send me email.
(OLDER) <- More Stuff -> (NEWER) (NEWEST)
Printer Friendly Version
More Articles by Tony Lawrence © 2009-11-07 Tony Lawrence