Get APLawrence.com by RSS(OLDER) <- More Stuff -> (NEWER) (NEWEST)
Home > Basics > Creating simple web pages
Printer Friendly Version
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 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 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).
Links
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 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/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
Images are easy and yet a little confusing. Getting the image itself into your page is easy:
<img src="http://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 http://www.htmlgoodies.com/primers/primer_6.html 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 are writing an article for this site, I am of course more than happy to help you with any HTML questions you may have.
If this page was useful to you, please click to help others find it: Your +1's can help friends, contacts, and others on the web find the best stuff when they search.
Inexpensive and informative Apple related e-books:
iWeb '09
Take Control of TextExpander
Buying a Mac
Switching to the Mac
Safari 5
More Articles by Tony Lawrence - Find me on Google+
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. We appreciate comments and article submissions.
Many of the products and books I review are things I purchased for my own use. Some were given to me specifically for the purpose of reviewing them. I resell or can earn commissions from the sale of some of these items. Links within these pages may be affiliate links that pay me for referring you to them. That's mostly insignificant amounts of money; whenever it is not I have made my relationship plain. I also may own stock in companies mentioned here. If you have any question, please do feel free to contact me.
Specific links that take you to pages that allow you to purchase the item I reviewed are very likely to pay me a commission. Many of the books I review were given to me by the publishers specifically for the purpose of writing a review. These gifts and referral fees do not affect my opinions; I often give bad reviews anyway.
We use Google third-party advertising companies to serve ads when you visit our website. These companies may use information (not including your name, address, email address, or telephone number) about your visits to this and other websites in order to provide advertisements about goods and services of interest to you. If you would like more information about this practice and to know your choices about not having this information used by these companies, click here.
Buy Kerio from a dealer who knows tech: I sell and support
Kerio Connect Mail server, Control, Workspace and Operator licenses and subscription renewals
Click here to add your comments
Wed Oct 5 10:08:08 2005: anonymous
Nice tutorial dear
http://shainaoverseas.com
Wed Oct 5 13:21:19 2005: anonymous
Wed Oct 5 10:08:08 2005 anonymous ( key 3XShuQbP8)Nice tutorial dear
Oooh! Wait until Linda reads that -- dear! <Grin>
Don't miss responses! Subscribe to Comments by RSS or by Email
Click here to add your comments
If you want a picture to show with your comment, go get a Gravatar