Learning HTML

Quick Links
[1stPage] [!Virus Writers!] [My Computer] [Color Tables]
[Colors Comparison] [Graphics Primer] [Rantz'n'Ravz]

or, How to Move Beyond the 'Store-Bought' HTML Editors

(No Nonsense™, just take me to the HTML tags, or Escape Characters!)

I've been trying to answers some HTML questions inside the GeoCities Help Forums. Sometimes, the same question is asked several times in a single day. This page results from the apparently eternal search for answers to HTML (HyperText Markup Language) questions. Rather than typing out miniature tutorials in the Help Forums, only to have them deleted in a couple of days, I've written this page just to tell people an easy place to look for their answers. Hopefully, this page will answer some questions...without adding to the confusion.

As with all the examples on this page, those that contain variables (e.g. numbers and percentiles) or not, feel free to take my arbitrarily chosen values and change them as you'd like. Basically, the raison d'etre of this page is for you to take whatever information you may find, and, to dissect and rearrange it, as though you were filming the remake of Frankenstein's Monster! Beware! This first part is Very Scary! back

<HTML>
<HEAD><TITLE>First, an Easy Web Page</TITLE></HEAD>
<BODY>
Hi There!
</BODY>
</HTML> (this is copy/pastable)

Above is something that looks pretty daunting, right? And, as a dedicated computer-phobe, your eyes aren't deceiving you, it does look a little like, gasp, computer programming! Actually, there isn't anything to fear. Above is the source code for the most simple and uncomplicated web page possible (well, using 'correct' HTML coding...)!

Let's break it down.

The above source code shows the four most essential HTML 'building blocks', and if you'll notice, they each come in pairs. HTML (HyperText Markup Language) has been described as a structure or framework of containers. Maybe this example will help illustate:

<HTML>

<HEAD>

<TITLE>First, an Easy Web Page</TITLE>

</HEAD>

<BODY>Hi There!</BODY>

</HTML> (this is copy/pastable)

Example 1

Most HTML tags have opening tags (<...>) and closing tags (</...>). The entirety of a web page is contained between <HTML> and </HTML>. The HTML tags basically tell your Internet browser, 'Hey, this is a web page!'. The title of your page is contained within <TITLE> and </TITLE>, which, in turn, is contained between <HEAD> and </HEAD>. The HEAD | TITLE line is used for naming the page; it's the name that shows up in the upper left-hand corner of the browser window when you're visiting it, and, perhaps most importantly, it's the name that will appear when someone creates a Bookmark or Favorite for the page. It's important to keep your page's TITLE shorter than around 255 characters, because a TITLE that's longer than that will get hung-up in the 'History' folder (a folder which automatically saves Bookmarks or Favorites of every page you visit) of some browsers, and, will prevent deleting except through a DOS session. The main section of your web page is contained within <BODY> and </BODY>. The BODY of a web page contains the page itself. The opening BODY tag is also important for further page specifications that I'll mention later.

Let's try it out.

The above web page is so simple yet complete, you can easily use it yourself, by doing some copy/pasting.

Simply place your mouse cursor next to the left most < of <HTML> press down your mouse button, and highlight the text from <HTML> to </HTML> by 'dragging' your mouse over it.
Once the text is highlighted (or selected), move your mouse cursor to the upper part of your browser.
If you see the word 'Edit', click it with your mouse.
On the menu that drops down, find 'Copy', and click on it. Ok, now you've saved the highlighted text to an area of memory.
- Open the program.
- Make sure that you've got a blinking cursor inside the text program's window.
- Move the mouse cursor up to the top, locate 'Edit', click on it, then, on the drop down menu, click on 'Paste'.

There! You should have the text that you previously selected, that looks exactly like the top example...just sitting there. The final step ('whew!', right?) to completing this example web page is to move the mouse cursor to the text editor's tool bar, locate 'File', click on it, and, on the drop down menu, choose 'Save As', then, name the file, say, 'example.htm', and save it to the desktop. Now, you probably want to see what that page looks like. Ok, open your Internet browser. When it's open, simply 'drag' the example.htm file over to the browser window, and 'drop' it (Dragging entails putting your mouse cursor upon an object, clicking and holding down the button, and sort of pulling the object around the desktop. Dropping is simply letting go of the held down button once you've reached the destination of the drag.)! It should open the web page that you've just laboriously copy & pasted! If that doesn't work, save the example.htm file to your A:\> or B:\> floppy drive. Leave the floppy in the drive for this try. Now when you open your browser, go up to the address/URL line, and type a:\example.htm, and example.htm will get opened, and, you've completed your first Web Page!

Let's get into it Further.

If you tried copy/pasting the above example, it wasn't too exciting or interesting, was it? For example, black text and a silver/gray background are the default values, if you don't add the colors like you'd like. If you're ready, here's another simple web page:

<HTML>
<HEAD><TITLE>Second, a More Difficult Web Page</TITLE></HEAD>
<BODY BGCOLOR="SLATE" TEXT="DARKSLATEGRAY">
<CENTER>
<TABLE BORDER=5>
<TR ALIGN=CENTER>
<TD BGCOLOR="WHITE">
Hi There!<BR>An example of large text 'headers':
<H1>Here's H1,</H1> <H2>here's H2,</H2> <H3> here's H3,</H3> <H4>here's H4,</H4> <H5>here's H5,</H5> <H6>here's H6.</H6>
</TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML> (this is copy/pastable)

Above is a web page that declares both it's background color (BGCOLOR=) as slate and a text (TEXT=, duh...) color of darkslategray, and both are contained within the opening BODY tag itself. If one doesn't declare the colors for either BGCOLOR or TEXT, the default colors get used, automatically. The default BGCOLOR is a grayish/silver color, and the default TEXT color is black. If you decide that your page will look best with a black background, but, you neglect to specify your TEXT color, well, you'll have black text on a black BGCOLOR...which means that your text will need to be highlighted before anyone can read it! Look at my color tables for more color name possibilties. Directly after the opening BODY tag, you'll see the opening CENTER tag. This tag makes everything after it centered on the web page. Looking down, next to the closing BODY tag, you'll see the closing CENTER tag. If the closing CENTER tag isn't included, the rest of the page will be centered to, beyond what you wanted centered! Easily noticed when previewing your page, but now, you'll know what's missing! Also, you'll notice that there's a little more information enclosed between the BODY tags. It's basically a brief introduction to HTML header tags. As you can see, the headers (H1, H2, etc.) all have closing tags, too. If you somehow forgot to add the closing </H2> on the end of the header, all of the text, from the opening <H2> to </HTML> would be sized H2!! Here's another 'table-ized' version, if it helps your understanding:

<HTML>

<HEAD>

<TITLE>Second, a More Difficult Web Page</TITLE>

</HEAD>

<BODY BGCOLOR="SLATE" TEXT="DARKSLATEGRAY">
<CENTER>
<TABLE BORDER=5><TR ALIGN=CENTER><TD BGCOLOR="WHITE">
Hi There!<BR>An example of HTML text 'headers':
<H1>Here's H1,</H1> <H2>here's H2,</H2> <H3> here's H3,</H3>
<H4>here's H4,</H4> <H5>here's H5,</H5> <H6>here's H6.</H6>
</TD></TR></TABLE>
</CENTER>
</BODY>

</HTML> (this is copy/pastable)

Example 2

More Nit-Picky Stuff

As you've noticed (I hope...), I've used HTML header and center tags on this page. I've also used some emphasis tags on words, from making them bold and italicized, to changing their colors, too. I've also used a couple horizontal lines, and, there's a layered, bulleted section up there. This is the section that will cover those little specifics. First, adding emphasis to your text. The HTML 'rules' for these six items are pretty simple and straight forward: You just need to surround the text you want changed with the opening and closing tag...remember, 'containers'.

<STRONG></STRONG> and <B></B> will make your enclosed text bold (what the 'B' stands for). STRONG is the recommended command because it has a logical name that future browsers might put further meanings to.

<EM></EM> and <I></I> will italicize the text between the tags (what the 'I' stands for, natch). EM (emphasis) is the recommended command because of it's logical name...

<U></U> will underline the captured text. I've seen it said that 'underlining is sophmoric', however, I believe that any way to add emphasis, hoping to give a fuller meaning to the text, is worth using!

<S></S> will put a strike through the captured text. Why anyone would use this... Wait! ~~If you need to correct a Rough Draft that's been 'Red Lined', you could create a new page, including the phrases that were xxx'd out!!~~

<SUP></SUP> and <SUB></SUB> are sort of 'cousins'. The SUP tag will put the enclosed text above the regular line of text, and the SUB tag puts the nestled text below the regular line. They are kind of unusual commands, and, I doubt that you will be using these much. Unless you're trying to write Int_el® as it appeared on their old logo. Interesting thing is that it appears that the SUB-tagged letter isn't the same font as the rest of the page.

<BR> is one of those HTML tags that is a tag unto itself. I refer to BR as a hard break, and, it's purpose is to drop whatever follows it down to the next line. If you're formatting text to wrap around a graphic (see my Graphics Primer for further information), the use of the BR tag will end that.
<P> is the Paragraph tag, and it functions as a double <BR>. P is another HTML tag that doesn't need a closing tag...but, you can close it if you want to - 'closing optional' (sorry, couldn't help it...I'm feeling punny this afternoon). The default justification for the P tag is to the left, as we read left to right (my apologies to the Chinese, who do not read from left to right). If you want to have your text justified to the right, you'll need to use <P ALIGN="RIGHT">, and text after that tag will be justified right.
<FONT COLOR="RED"></FONT> will change the text color for the entrapped text to RED.
Example - Here's how I wrote the 'Very Scary!' up at the top of the page: <STRONG><U><FONT FACE="CREEPY" COLOR="CRIMSON">Very</FONT> <EM><FONT FACE="CREEPY" COLOR="MAUVE">Scary</FONT></EM></U></STRONG>!

Notice how I put the everything, including the FONT, EM, and U tags, inside the STRONG tags. These tags work well together, coloring and emphasising anything from a single letter up to paragraphs and entire pages! Play around with the text changing commands, as you're likely to use them pretty often. The FACE command is available to most versions of Internet Explorer, and Navigator 3.0, only (at least at this point in the battle for HTML standards...). If you decide to use the FACE command, one must realize that not all browsers will recognize it, therefore, it is important that the pages on which you use the FACE command aren't relying on it too heavily for the 'look' of the page. The FACE command is also dependent upon the FONTs that your viewers have installed on their computers...if your viewers don't have either the specific FONT, or, the browser necessary to see it, their browser will simply display the default FONT that they have chosen.

Okay, now 'Horizontal Rule' lines. <HR> will give you a line almost all of the way across the page. 'The ones on this page aren't that wide, though.', you object. Okay, the horizontal lines' width can be varied by using percentages, which is a Good Thing™ because the horizontal lines will appear on everyone's browser using the exact same percentile width, no matter the size of their browser window, nor their monitor! All of the horizontal lines that I've used were written as <HR WIDTH="50%"> or <HR WIDTH="33%">, but, the percentage can be varied from 1% to 100%, your choice, although 100% isn't necessary because it's the 'default' value, as if you didn't even mention WIDTH. This is the first HTML tag that I've mentioned that doesn't need a closing tag. It's basically just a self contained line. Some people use grahics for their horizontal lines. If you want to jump into putting graphics onto web pages, check out this Graphics Primer.

Now, let's see how to make bulleted, unordered lists (UL):

This is a 'List Item' (LI)
This is a 'nother List Item
...3....
...4...

Here's how it's coded: <UL><LI>This is a 'List Item' (LI)<LI>This is a 'nother List Item<LI>...3....<LI>...4...</UL>. Lists need their closing tags. List item tags don't need a closure tag. Getting kind of confusing isn't it? If you want two or more sets of text, perhaps with list items using numbers (ordered lists - [OL]), and, staggered no less, here's how you'd do it:

<UL><LI>This is a 'List Item' (LI)<LI>This is a 'nother List Item<OL><LI>Wow, a <EM>numbered</EM> list item!<LI>A <STRONG>second</STRONG> numbered list item!<UL><LI>...3....<LI>...4...</UL></OL></UL>

This is a 'List Item' (LI)
This is a 'nother List Item
1. Wow, a numbered list item!
2. A second numbered list item!
  - ...3....
  - ...4...

Notice how both an ordered list and an unordered list are parts of the original unordered list - the opening <OL> tag is at the end of an unordered list item, and the second <UL> begins at the end of an ordered list item. The closing tags look a little odd, all stacked up like that, right? Well, the first </UL> closes the last unordered list, the </OL> closes the second-to-last ordered list, and the final </UL> closes the first, original list! Gotta love that container analogy! Although I know that there's a way to make lists like this using Roman numerals, I seem to have misplaced it in my memory. No, no, not the computer's memory.

Ok. Being a careful observer of everything that your eyes take in, I have the amazing belief that you've noticed the mosquito byte-like things I've tagged onto words, like Good Thing™ or Int_el®. Those are Trademark and Registered Trademark, respectively, and they are created using what are called 'escape' characters. What that means to HTML writing is that you write the escape characters into the source code, and the escape characters will show the symbol that they represent on the web page proper. Trademark is created by typing ™ and Registered Trademark is written as ® -- the only other escape tags that I really use are © and   ...can you guess what they do? You can cheat and find out by typing them in between the BODY tags of the two example web pages that you dutifully copied and pasted... Ok, © gives you the Copyright symbol (©), and, ready for this,   creates just a blank space! It's actually the only 'secret' that I've found for indenting paragraphs, and, I haven't heard of anyone's browser having difficulties in 'reading' that particular escape character.

Oops, almost forgot...the escape characters that I've used the most on this page have been < and > -- these combinations have given me the lesser than (<) and greater than (>) symbols necessary for displaying HTML tags on a web page, so that they're visible, and able to be copy & pasted. These are escape characters that you wouldn't ordinarily use, unless, like this page, one is trying to teach a little web page authoring. For the eternally curious -- No, I wasn't able to simply type the escape characters in order for them to show up on this page...that would have lead to the symbol's display, rather than the actual escape character. The escape characters are visible as they are supposed to look, but typed to make them visible. The escape character for ampersand (&) is & -- I guess that I fooled...something.

Flashing and Moving Text

Netscape Navigator has the <BLINK></BLINK> tag. BLINK causes the text enclosed within the tags to blink. Internet Explorer has the <MARQUEE></MARQUEE> tag. It basically creates a marquee, out of the text between the tags, that scrolls across the screen like a ticker tape. These tags are sort of frowned-upon because once they were cool and novel, and, now that they've proliferated throughout the Internet, they're dull, passe, and generally yesterday's news....but, Multimedia artists need every available tool, right? Users of Navigator will see the word 'Blink' blinking, whereas Internet Explorer users will just see the word 'Blink'. Internet Explorer will show 'This is a MARQUEE...isn't it neat?' scrolling from right to left, and, Navigator will just see the phrase. Here's an example of <BLINK> Blink</BLINK>, and, here's what a MARQUEE looks like <FONT COLOR="GRAY"><MARQUEE ALIGN="MIDDLE" BEHAVIOR=SCROLL DIRECTION=LEFT SCROLLDELAY=150 SCROLLAMOUNT=20 WIDTH=30%> This is a MARQUEE...isn't it neat?</MARQUEE></FONT>. I've added the ALIGN="MIDDLE" command to the MARQUEE command, because, without it, the default positioning is actually ALIGN="BOTTOM", and, it makes the spaces between lines of text uneven.

Interesting. Maybe I knew this before, and subsequently forgot...I figured that I could jazz up the lettering in the MARQUEE window by surrounding the text, within the MARQUEE tag, with empahsis tags. Wrong! With MARQUEE, you apparently need to add the emphasis on the outside of the MARQUEE tag, itself, for it to be visible within the MARQUEE! "Too bad that there's no real HTML or browser standardization!"! I guess to be as complete as possible, it would be best to write web pages that support all of Navigator's and Internet Explorer's differing tags and extensions, so that users of eitherbrowser could get maximum enjoyment out of your pages. If someone wants to use BLINK, add the MARQUEE tags within it...if someone wants to use MARQUEE, simply put it inside the BLINK tags. Like so: <BLINK> <FONT COLOR="GRAY"><MARQUEE ALIGN="MIDDLE" BEHAVIOR=SCROLL DIRECTION=LEFT SCROLLDELAY=150 SCROLLAMOUNT=20 WIDTH=30%>This is a BLINKing MARQUEE! </MARQUEE></FONT></BLINK>! That way, although neither browser supports both of these tags, what you wanted to emphasize in one browser is now emphasized in both!

Adding Autoplay Sounds

To begin with, do you have any sound files? Sound files that I've seen on the Internet usually have filename extensions of .mid, .wav, and .au. Again, there are two sets of instructions, for the two major browser types. To have an autoplay sound that Navigator users will hear, you'll need <EMBED SRC="kansas.wav" WIDTH=155 HEIGHT=40 AUTOSTART=TRUE LOOP=FALSE>

To allow Internet Explorer to autoplay sounds, you'll need the <BGSOUND SRC="kansas.wav" LOOP=INFINITE> (or LOOP="2" or "3" or "4"...) tag. In these tags, the LOOP command determines how many times the sound will play. LOOP=TRUE and LOOP=INFINITE both mean that the sound will play over and over as long as people are on the page...it's all right with a long-playing song, but the sound I've got is pretty annoying, isn't it!? 'Just for demonstration purposes...'! Conversely, LOOP=FALSE means that the sound or song will play one time...with BGSOUND, leaving off the LOOP command, entirely, means that the sound will play once; LOOP=2 or 3 or 4(etc.) will play that song that number of times. If you want users of both Navigator and Internet Explorer to hear your melodious tunes, autoplay, the coding needs to be <EMBED SRC="kansas.wav" WIDTH=155 HEIGHT=40 AUTOSTART=TRUE LOOP=FALSE (or TRUE)><NOEMBED><BGSOUND SRC="kansas.wav"></NOEMBED>. As an aside, there is a way to have users start up the sound on their own, and, this tag would open a small window for playing the sound...in other words, if you have a long or fantastic song, this little sound window would remain open, upon the viewers' desktop, until users actually close it. This coding is what's called a link; I'm linking to the sound file itself... "Toto? I have a feeling we're not in Kansas anymore...!" <A HREF="kansas.wav">Toto? I have a feeling we're not in Kansas anymore...!</A>

Wrapping it up.

If you've managed to read down this far without clicking on any of my 'source code' links, I'd suggest that you choose one from the top of this page, instead. If you have already perused my examples of what I consider relatively clean source code, I'm just going to direct you to the source code for this very page. Careful, though, because there are enough escape codes jumbling everything to begin confusing an 'old-timer'! Also, if you've started feeling more comfortable with HTML, and the Hows & Whys of writing it, be certain to look at my Graphics Primer! More refinements coming soon!

Let me know what you thought of this page!

Back to the 1stPage