How HTML Works
All HTML files are simple text files and can be created with the
most basic text editors such as TextEdit (Macintosh) or Notepad
(Windows). HTML has evolved to include more complex and useful page
layout elements such as Tables, Frames, Layers and Cascading Style Sheets but the underlying
structure remains as simple as the original HTML specifications. These
specifications allowed documents to be transmitted quickly across
the Internet and provided cross platform compatibility.
The basic HTML structure consists of "Tags" that are understood
by a web browser which renders the HTML text file into the desired
format of its author. For the sake of basic understanding, it is fair
to say that HTML Tags have an open and a close. All text between the
Open and the Closing tag is given the prescribed format by the browser.
An HTML tag simply consists of a predefined command surrounded by the characters < and >. Perhaps the simplest tag creates bold text and is formed as follows:
The text within <B>the bold tags</B> becomes bold! |
A web browser understands that everything between <B> and
</B> should be bold text and renders the sentence like this:
The text within the bold tags becomes bold! Within the simple construction of using "tags", the meaning of Hyper Text Markup Language (HTML) can be seen. Documents that include such tags are "marked up" and will be understood accordingly by any well written browser program.
If you want to try this out, you should start your text file with the following:
Then type anything you like to test out the tag for Bold and use some other common tags like "I" for italic and "P" to start a new paragraph (within the < and > of course).
To make a link to another file, try this:
<A HREF="http://www.notamall.com">Link to NotAMall</A> |
viewed in a browser that will be:
Link to NotAMall
Thus, the "A" tag is the linking tag and the HREF= part is the property of the link that tells it where to go. The URL is written between simple quotes (not curly quotes though " or ' will work) with whatever text you like in between the tags. To make your text display in a particular font and size, try this:
| <FONT FACE="Courier, Courier New" SIZE="3">Some <B>text</B> between.</FONT> |
This will look like this:
Some text between.
I have indicated Courier because this page uses Verdana and it might be hard to see the result but any font on your system can be called this way. Just note that a font that is ONLY on your system will not display on someone else's computer if the page were actually posted to a web server. The second font indication for Courier New shows that you can specify an alternate font (or several fonts) that will show if the first font is not available on a particular computer. You'll also note that I made the word "text" bold to show how tags can be "nested" to create a wide variety of formatting options ... all with very simply tags!
Last, be sure to close your page with ... surprise:
And there you have a simple HTML file that you can drag and drop onto a browser window or open from the browser's File menu.
Please note that this is a very basic explanation using conventions that are now being superseded with other tags that are intended to function better in a more complex XML compliant world that is fast upon us. But, the principles remain the same and the tags still work just fine.
Here is a completed sample of the code just described ... all in one place:
<HTML>
<BODY>
<FONT FACE="Courier, Courier New" SIZE="3">
<P>Thanks <A HREF="http://www.notamall.com">NotAMall</A>.</P>
<P>This <B>web business</B> isn't <i>very</i> hard!</P>
</FONT>
</BODY>
</HTML>
|
Which should look like this:
Thanks NotAMall.
This web business isn't very hard!
|