APLawrence.com -  Resources for Unix and Linux Systems, Bloggers and the self-employed

Creating simple web pages

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 Headline

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).

Links

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

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.

View Source

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.



3 comments



Increase ad revenue 50-250% with Ezoic


More Articles by

Find me on Google+

© Tony Lawrence







Fri Jan 18 17:36:16 2008: 3491   TonyLawrence

gravatar
Amusingly enough, this specific page was broken for a long time in IE6. It was just one line too long that threw the dumb browser into a tizzy, but that does serve as a good example of Things That Go Bump In The Night.



Thanks to Leigh Graham for alerting me to the broken page..



Fri Jan 18 23:48:29 2008: 3496   BigDumbDinosaur


...just one line too long...

Y'mean the line had too many chars before a linefeed was encountered?



Sat Jan 19 13:32:57 2008: 3497   TonyLawrence

gravatar
Yes, exactly that.

------------------------
Kerio Samepage


Have you tried Searching this site?

Unix/Linux/Mac OS X support by phone, email or on-site: Support Rates

This is a Unix/Linux resource website. It contains technical articles about Unix, Linux and general computing related subjects, opinion, news, help files, how-to's, tutorials and more.

Contact us





Anyone even peripherally involved with computers agrees that object-oriented programming (OOP) is the wave of the future. Maybe one in 50 of them has actually tried to use OOP – which has a lot to do with its popularity (Steve Steinberg)

Securing a computer system has traditionally been a battle of wits: the penetrator tries to find the holes, and the designer tries to close them. (Gosser)












This post tagged: