Get APLawrence.com by RSSCreating 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="/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.
Enter your email address for automatic notification of new posts here
(be sure to whitelist 'feedburner.com' if you use spam filtering)
| Views for this page | ||||
|---|---|---|---|---|
| Today | This Week | This Month | This Year | Overall |
| 13 | 13 | 293 | 3,103 | 22,561 |
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.
Your ad here - $24.00 yearly!
http://bcstechnology.net Full service Linux & UNIX systems integrator; Windows to UNIX/Linux Client-Server Specialist; Secure E-Mail & Website Hosting; Thoroughbred Software Developer; Custom Industrial Automation; Hardware & Electronics Experts; In Business Since 1985.
http://www.schewanick.com SCO Unix, Solaris, Linx (various), PHP, MySQL, Apache, uniBasic, dL4, Perl, System Administration and more....
SCO, OpenServer, UnixWare, software, servers, security, networks, installation, administration, troubleshooting, maintenance, Watchguard, firewalls, VPNs, e-mail. Visit us at http://opensystemscomputing.com and www.go2unix.com.
Related Posts
Publish your articles, comments, book reviews or opinions here!
CreateWebPage :
---January 7, 2005
Regarding the use of PRE: I assume that the BackupEdge announcement you extensively quoted above uses PRE, but some of the paragraphs display in my brower (IE6) as one continuous single line of text. I'm left with a rather large horizontal scroll bar at the bottom of my window. Is there a way to mark text as preformatted, but still have it conform to the general dimensions of the page (IOW, make it wrap semi-intelligently)?
--Bob
---January 7, 2005
That was my fault. PRE generally is just what it is, though you CAN add BR tags too.
All fixed now
--TonyLawrence
Wed Oct 5 10:08:08 2005: Subject: anonymous
Nice tutorial dear
http://shainaoverseas.com
Wed Oct 5 13:21:19 2005: Subject: anonymous
Wed Oct 5 10:08:08 2005 anonymous ( key 3XShuQbP8)
Nice tutorial dear
Oooh! Wait until Linda reads that -- dear! <Grin>
Add your comments