|
Lesson 9 |
 |
|
Lesson 9 |
|
Another little widget that you will find yourself using a lot is the Horizontal Rule.
<BODY> <HR> </BODY>
 |
We have a few options available to us...
<BODY> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>
|
This one is pretty self explanatory.
<BODY> <HR WIDTH=60% ALIGN="left"> <HR WIDTH=60% ALIGN="right"> <HR WIDTH=60% ALIGN="center"> </BODY>
|
We can control the thickness of the line...
<BODY> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15> </BODY>
|
And we can make it a solid line.
<BODY> <HR WIDTH=60% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=3 NOSHADE> <HR WIDTH=60% SIZE=8 NOSHADE> <HR WIDTH=60% SIZE=15 NOSHADE> </BODY>
|
Remember when I said that the browser doesn't understand formatting, it just displays text in a steady stream? Kind of like this...
<BODY>
///\\___
(@ @)
+----oOO----(_)-----------+
| BARRY GOLDWATER |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</BODY>
///\\___ (@ @) +----oOO----(_)-----------+ | BARRY GOLDWATER | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo |
Well, with the <PRE> (preformat) tag, we can put a stop to that and have things displayed the way we type them.
<BODY>
<PRE>
///\\___
(@ @)
+----oOO----(_)-----------+
| BARRY GOLDWATER |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</PRE>
</BODY>
///\\___
(@ @)
+----oOO----(_)-----------+
| BARRY GOLDWATER |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
|
Notice that a monospaced font is used.
The last tag we're going to discuss is a comment.
<BODY> <!--This is a comment--> This is not <P>A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, <!--Hi Mom!--> notes to yourself, <!--Pick up milk--> or write a helpful message to someone looking at the source of your page.<!--Copy anything off me and you're dead meat!--> </BODY>
This is not A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. You can insert hidden messages, notes to yourself, or write a helpful message to someone looking at the source of your page. |
Just to be absolutely clear, the comment must start with <!-- and end with -->
You can (usually) even put other html tags in a comment and they will be ignored. The browser will just keep ignoring everything until it sees a -->
Well, that about does it! You now know all the basic tags you'll need to create a web page! Aren't there more tags? Oh yeah. Lots more. But rest assured you've got most of the basic weaponry you'll need. After you tinker with these main tags awhile, you may want to look at some of my other slightly more advanced tutorials: Table Tutor, Form Tutor and Frames Tutor. They will give you a few more really neat things to have in your bag of web publishing tricks. Beyond that, there are quite a few redundant tags, that is tags that in theory have a specialized use, but in practice, duplicate more common tags presented here. There are a few outdated tags, and a few that have such a limited use, it wasn't even worth it to go over them. Plus there are a few browser-specific tags (tags that only work in one browser).
Lately there has been a push to separate structural markup (paragraphs, lists, tables etc) and presentational markup (colors, fonts etc.). The result, in part, has been the introduction of style sheets. While understanding style sheets is not at all necessary for making web pages, it is a related area where you might wish to expand your studies.
One of the neatest things you can do with a web page is to make it DO stuff. You can investigate the wonderful world of JavaScript and learn to write mini programs that you can insert in your pages. It's a little bit more complex than HTML, but I've written JavaScript Tutor, and that will give you a solid start on some of the basics. In addition there are dozens of "copy-n-paste" javascript sites that offer code for the taking.
I mentioned at the beginning of this tutorial some of my thoughts on HTML editors. In my opinion the best editors to use are not the big clunky wizard types. You know, the ones that say you don't need to know a lick of HTML to author a page. The problem is, a large number of the pages I see that have been put together with these programs look as if the author didn't know a lick of HTML. Not only that, if a problem arises, a person with a basic knowledge of HTML is going to solve that problem a heck of a lot faster than a person who has been leaning on one of those page maulers.
Most experienced authors use some sort of text-based editors. What these editors do is pop in a set of tags for you with a simple click. They make it so you don't have to manually type in color codes, LEFT, RIGHT, CENTER or whatever. You have absolute control over your page design. I once heard the phrase "text editor on steroids" to desribe one. That's about what they are. Several good (and free) ones that come to mind are listed in my Short List of Free HTML Editors. What they all have in common is that you must know some HTML. They will make your coding easier. They don't attempt to do it for you. What do I use? Lately I've been using NoteTab almost exclusively.
Once you have made your pages you will need to upload them to a server. The server is a computer that is running a server program that doles out documents to whoever requests them. For a little bit of guidance on putting your pages on the Web, have a look at Uploading Your Pages.
And before I go, I must say something about web page style and content. Better yet, I think I'll defer to Jeffrey Glover's Top 10 ways to tell if you have a sucky homepage.
Good luck and happy HTML'ing!
| ||||||||