An introduction
A long time ago, I was confronted with a friend's computer with BASIC. Since I only knew DOS, I was unable to help my friend. Since then, I have at least learned how to get out of the BASIC screen (by typing SYSTEM if you really want to know), but I have steered clear of what is called programming.
What has this got to do with HTML? Only that I have seen HTML mentioned as HTML programming , which might stop some people from learning it. Thankfully for those of us not suited to programming, there is no programming involved.
HTML is only a way of formatting plain text, so that it will look good on the web.
What's in a tag?
This is done with the use of tags. A tag is one or more word enclosed in "<" and ">". There is an opening (starting) tag:
<tag> and a closing (ending) tag:
</tag>. So long as you remember to close any tags you open (it is the most common mistake of most people, including myself) and learn the basic tags, your HTML will be perfect.
Each tag expresses an
element - an element consists of the opening tag, the closing tag and everything in between. Each element can have one or more
attributes and each attribute has a certain
value.
Let's get started
The absolute necessary supply for writing in HTML is a plain text editor that will output plain text. Some examples: Windows Notepad, DOS Edit, Mac Simple Edit (Mac friends, please correct me if I am wrong), a multitude of text editors for Unix and Linux (Vi and Emacs come to mind).
A trick for Windows users (all kinds except 16 bit Windows 3+):
Search for the folder: "Send To" (Start->find->files or folders) and open it (in Windows NT and 2000 choose the one belonging to your user account - or administrator). You will find various shortcuts in there. Just add one more for your plain text editor. Find the file "notepad.exe" or the executable for your preferred editor. Right click on the file and drag it to the folder "send to" - from the menu choose: "Create shortcut here".
From then on, every time you right click on an HTML file (or any file for that matter) you will be able to send it to (open with) your text editor.
So, you write in plain text whatever you want to write for your web page/s. You save it with the extension "htm" or "html" (save as all files). If it gets saved as file.htm.txt, just rename it.
To be able to view all extensions in Windows, open a folder and choose from the menu: view->options, pick the tab "view" and uncheck the radio button "Hide file extensions for known file types" - this is checked by default. (this will also let you see if you receive a visual basic script with your email, that could be a virus - it would have an extension of "vbs").
So now you have a web page that looks rather strange when you open it with your web browser, something like this. What went wrong?
Nothing actually, it is just that the text is unformatted yet and HTML doesn't recognise change of line the same way as a text editor (also extra spaces, blank lines, the use of the tab key), so your text is all in one (long) line. This can be easily fixed, but let's do the boring and seemingly useless stuff first. You will not see any difference if you don't do what the next paragraph says, but it will be proper HTML. So, let's do things properly:
First tags
These are the tags that don't do much difference. It is recommended that you make a file with all these tags, personalize it and save it as template.htm , then change its attributes to read only, so that you will not accidentally overwrite it. It saves a lot of typing and mistakes.
There are some basic things you should know about all tags:
- Tags are not case sensitive . That means that you can have them in all capitals if it will help you make sense of your document, or just in small case, to save yourself some more typing strokes.
- All elements, with a few exceptions, must have both an opening and a closing tag. If the closing tag is missing or misspelled, the tag is considered by the browser to never end until the end of the page, with very strange results.
- Tags that are nested (enclosed) in another tag must close before the parent (or container) tag closes, e.g. you open the HEAD tag, next open the TITLE tag, then close the TITLE tag and finally close the HEAD tag. You can't reverse the order of the last two.
- Tag
attribute values
, follow the equal (=) sign and are always enclosed in
quotes
("). There are times when you don't have to use quotes as in an all-numbers property, but it is much better to be consistent and use them all the time. In the example below "background" is an attribute of the BODY tag, with a value of "image.jpg":
<body background="image.jpg">
- And, lastly, not necessary, but it will help a lot: A well formatted plain text (with line breaks, blank lines etc.) will help you a lot to make sense of your document, when you want to modify it.
The HTML tag
The (almost) absolutely useless tag: Just write <html> </html> - you will enclose everything else (except for the DOCTYPE definition below) between these two tags. It will not make any difference to the way your page looks, because all browser programs determine that a file is HTML from the extension and not from the tag. Still this tag is the proper way. It might also be necessary with later browsers, since it is included in the accepted standards.
To make it more proper, you can include in the beginning a definition of the type of HTML that the document contains (DTD=Document Type Definition). This will come in handy if you use an online validator. A useful type is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> </html>
This says that your file is HTML 4.0, but not strict; you can break some rules and include some HTML 3.2 elements, but you can also use HTML 4.0 elements, like stylesheets. And the EN that you see above, doesn't mean that your page should be in English; it is just the language of the specifications.
Also the HTML tag, like the others, can have some attributes, like the language, e.g.
<html lang="en">
which above is English, but that would be considered advanced HTML.
The HEAD and BODY tags
These will also make no difference in the appearance of your page, but will come in useful later. They are written like this:
<html> <head> </head> <body> </body> </html>
Notice that the HEAD and BODY tags are enclosed in the HTML one. Also the BODY tag can have some properties, the most useful of which are the ones for your page's background color (bgcolor) and background image (background). All the text that we want to appear on our web page will be included in the BODY tags.
So, our page includes all these and still looks the same, but at least it is a proper HTML page. In the next page we will see what else we can do with the head tag.