HTML Coding by Boucher

Essential HTML Coding
Jerry Boucher

HTML stands for "Hyper-Text Markup Language", and is the essential and basic, underlying language used for preparation of materials for the internet. This page will give you the tools necessary to creat a simple, but usable web page using HTML. After you become proffecient in using this fundamental version, you can expand into more sophisticated coding. But please do yourself (and me) the favor of bearing with me to get these fundamentals down before moving on.

HTML is written in TEXT format. Thus, you must use a TEXT processor like NotePad to write it.
If you haven't done so already I strongly recommend that you bring Notepad out to your front page so that you can easily access it to work on the HTML coding. In Windows XP go to "My Computer" and click on C: > Windows > System32 > and find Notepad.exe. Right-Click and drag it to your front screen and select "Create shortcut here"

For now PLEASE do not use any of the many programs that are avaliable to make web pages, like FRONTPAGE, DreamWeaver, etc, or saving a program as "HTML" in Microsoft Word, or WordPerfect, etc. They create monster code, which we don't need now. If you insist, you can explore them later.
HTML is essentially a very simple computer language which tells a "browser" like NetScape or Microsoft Explorer how to display the web page. Think of it as a rather crude word processor where you have to insert all the commands about how to display the text and graphics.
Basic HTML is written using two kinds of commands: "Special characters" and "Tags." In the text below, special character codes will be displayed in orange; the special characters as they appear on the web page will be displayed in blue; and the tags will be displayed in purple. Text as it appears on the web page will be in black.
"Special characters" are how those characters which do not ordinarily appear on a standard PC keyboard are displayed. They also include four characters which do appear on the keyboard, but which are also used to write HTML itself, and so need to be treated specially. These are & " < >:
- The Ampersand &: The ampersand is used to create the special characters and so we need to use a special code to display it when we simply want to have an ampersand appear in our displayed web page. That is done by writing the ampersand as &. That is, "ampersand number-sign 38 semi-colon"
- The Quotation mark ": The quotation mark is used within many of the HTML "Tags" (discussed below) and so we need to use a special code to display it when we simply want to have a quotation mark appear in our displayed web page. That is done by writing the quotation mark as ". That is, "ampersand number-sign 34 semi-colon"
- The Less Than < and Greater Than > characters, or -- as I prefer to think of them, the "angle brackets". All "Tags" are enclosed in these brackets, so on those rare occasions when we want those symbols to appear in our text we need to use these special codes:
 < is < and > is >.
- The characters that are used in other languages, such as the umlaut in German, the accents in French and Spanish, etc. There is a table of the most common of these characters available on this web site at charcode.html.
- Non-breakable space   This character addresses several difficuties in coding HTML. First, HTML will never allow more than one space between characters. You might write six spaces thinking you will get an "indented" line, but on the displayed page only one of those spaces will actually appear. But if instead of using a regular space you use six   there will be six blank spaces in the text.
 A second difficulty is that HTML performs an automatic word wrap at the end of a line, breaking at the nearest space and continuing on the next line. But there are times where you want certain text to appear un-broken, so you can use the   to make the line break occur at a different place. For example, in "Washington D. C." you wouldn't want D. C. to break between the "D" and the "C" so replace the space with  .
Tags. Tags are basic commands which control the display and formatting of the web page. These are always written between angle brackets < and >, and usually come in pairs, where the ending tag has a "forward slash". For example, to display a section of text in bold text, we encloses it between the tags  and . So our source page could read This is bold text. and the displayed page would be This is bold text.

Some tags include "attributes" within the tag. For example, the <HEAD> tag often contains instructions about the color of the page, text and links, and can even call for an image to be used as background for the page. (This will be elaborated below.)
Tags are often "nested". For example:
<CENTER> This is a centered, bold, underlined, italicized line. </CENTER> 

yields
This is a centered, bold, underlined, italicized line.

Some common tags are:
>

<B> </B>	For example: "Here is some <B> bold<</B>text." yields "Here is some bold text."
<I> </I>	For example: "Here is some <I> italicized</I> text." yields "Here is some Italicized text."
<U> </U>	For example: "Here is some <U> underlined</U> text." yields "Here is some underlined text."
<CENTER> </CENTER>	Displays text centered on the page.
<BR>	This is the line break, and does not need an ending tag. Two or more of these tags can be used to get paragraph spacing: <BR><BR>.
<HTML> </HTML>	Web pages *must* begin and end with this tag. It tells the browser that whatever is between these tages is written in HTML code.
<HEAD> </HEAD>	Web pages must have these tags enclosing the header information immediately after the HTML tag. Within this section will be the TITLE and BASE tags (See below). For example, the header of the page you are now reading is: <HEAD> <TITLE> HTML Coding by Boucher </TITLE> <BASE HREF="http://www.usfca.edu/~boucherj/research/htmlcode.html"> </HEAD>
<TITLE> </TITLE>	These tags must occur with the header. This is the title you give to the page itself, not necessarily any title you might wish to use in the actual text.
<BASE>	This tag (if used) must occur within the header and will contain the full URL of the page, and is used by browser to clear up any ambiguities which might occur in links. (See the example in the HEAD section above.) I recommend the use of this tag on each web page. There is no closing tag for this element.
<BODY> </BODY>	These tags must follow the header and enclose everything else on the page up to the closing </HTML> tag. The <BODY> tab usually contains "attributes" which set the overall way the page is displayed. Any or all of the following might be used (Color notation will be discussed in another section below.): BACKGROUND="image.gif" where "image.gif" is a small image to be used as a "tiled-in" pattern for the page. (To be elaborated below.) BGCOLOR="#000000" where "#000000" is the color used to set the background of the page. TEXT="#000000" where "#000000" is the color used for normal text on the page. LINK="#000000" where "#000000" is the color used for normal links on the page. VLINK="#000000" where "#000000" is the color used for normal links after they have been visited on the page.
<FONT> </FONT>	These tags control how the text is to be displayed between the opening and closing tags. The <FONT> tag contains "attributes" which set the way the text is displayed. Any or all of the following might be used (The actual color notation will be discussed in another section below.): COLOR="#000000" where "#000000" is the color used for the text. SIZE="3" where "3" is the size of the font, running from the smallest SIZE="1" through SIZE="3"which is the normal size, to SIZE="7" which is the largest font that can be displayed. For example: FONT SIZE="1" FONT SIZE="2" FONT SIZE="3" FONT SIZE="4" FONT SIZE="5" FONT SIZE="6" FONT SIZE="7" FACE="Arial" where "Arial" is the font face. This is a somewhat problematic atttribute in that the end-user's system must have the font installed. For example, it is common to keep the browser set with the default faunt being "Times New Roman" but on occassion it is necessary to display the font as "Arial". To illustrate (if your system will permit): This is text in Times New Roman font. This is text in Arial font.

Color Control: This is one of those things which appears to be very complicated, but which is in fact very simple once you understand it. In the tags, color is indicated in the form of "RRGGBB" where RR is a value for the amount of red that is present, GG is the amount of green that is present, and BB is the amount of blue that is present. Please, for now, just accept that this means that there are 256 shades of red, 256 shades of green and 256 shades of blue, running from 0 being not present to 255 being the maximum present. These combine to the result that there are 256 x 256 x 256, or 16,777,216 possible colors available! ( If you are interested, there is a table which will give you the exact conversion numbers at hextable.html.)

For example, the special characers on this page are presented in "orange". This color is, in fact, "FC4404"

To be continued ....

Return to Research Page

This page last updated 4/24/05 jdb