Creating simple web pages
I really don't understand why, but many people seem to think HTML is much more difficult than it actually is. Amazingly, people who have enthusiastically jumped into learning Perl or Python have told me that HTML is "too hard".
It isn't. Sure, it CAN be complicated and confusing if you are trying to push things to the limit, but you can get started with very little knowledge. 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 mistakes: they have to be, because there is a LOT of technically "broken" HTML out there. I try to keep pages on this site W3C compliant, but honestly a lot are not, either through errors or just lazy sloppiness. The willingness of web browsers to display reasonable results regardless will ensure that web page authors keep making mistakes, 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.
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>This is a new paragraph. This isn't.</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>This is a new paragraph. This isn't. </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>This is a new paragraph. This isn't.
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 don't have to be closed (though you can: </p>).
<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 harder that the stuff we've seen so far, but it's really not hard. You want to add a reference to //aplawrence.com/Linux/index.html%20to%20your%20page.%20You%20can%20ALWAYS do it like this:
<p>If you want the Linux page, <a href="//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 //aplawrence.com/Linux/yourpage.html, you could also write the link as
<a href="index.html">Click here!</a> or <a href="//aplawrence.com/Linux/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="//aplawrence.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 Basic HTML Class: Working with Images on your Website 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 are writing an article for this site, I am of course more than happy to help you with any HTML questions you may have.
Got something to add? Send me email.
(OLDER) <- More Stuff -> (NEWER) (NEWEST)
Printer Friendly Version
Increase ad revenue 50-250% with Ezoic