Cincom

Primer : HTML
The Internet is many things but perhaps the 2 most popular and useful aspects to it are electronic mail (Email) and the World Wide Web (or more simply web sites). HTML (Hyper Text Markup Language) is the language of the World Wide Web so if you plan to develop web pages, it is best to have a good knowledge of HTML.

This primer introduces you to HTML, what it is and how it is used to create web pages.

1. Launch your favorite text editor and enter the following:

<HTML>
<HEAD>
<TITLE>A Plain HTML Document</TITLE>
</HEAD>
<BODY>
This is about as
simple as it gets
</BODY>
</HTML>

2. Save this file as webpage1.htm in a directory/folder of your choice. Then open this file in your favorite web browser.


Figure 1. Your first HTML file

Let's make a few observations about this web page or document.
  • The characters inside the angled brackets are called tags
  • The browser doesn't care about white space (extra spaces, carriage returns, etc.
  • The text of the document is top-right and flush left by default
  • Since no fonts were specified, your browser chose one by default
  • The tags are in a nested format and have start and end to them

Tags

HTML is a language that consists of a set of pre-defined tags that are included along with plain text. These tags - approximately 120 of them - tell the browser whether the text is to be a paragraph, a heading, an image, bold, etc. At the same time, tags also allow a certain amount of formatting information to be included, such as alignment of images with respect to text.

In the above example, all tags were in upper case so as to distinguish them as something other than plain text. When HTML was first created, most web page authors used all upper case letters for tags; however, the latest release/specification of HTML (version 4.0) recommends using lower case because this often allows better compression of the document, as the content is likely to contain more lower than upper case text.

In HTML, there are 2 types of tags: start tags and end tags. End tags are the same as the start tags except that end tags are preceded by a forward slash. The combination is used to indicate where the effect of the tag begins and finishes. There are exceptions to this rule in that some tags don't have/require an end tag and they will be identified later on in this primer.

Let's take a closer look at the tags used in this document.

<html>

This tag signals the beginning of the HTML document and is typically the very first line of an HTML document. Closing this tag with </html> ends the document - anything appearing after it is supposed to be ignored by browsers.

<head>

This tag signals the document header, which is used to contain generic information about the document, such as the title, the base URL, what style is used (if any) and so on. There are a host of other tags that can be used in this area of the document, but for now, it is used to set the title of the document and nothing else.

<title>

This tag sets the title of the document, which is displayed in the caption area of the browser window. This tag should be used only within the head tags.

<body>

The body section is where the meat of your HTML goes. This tag marks the beginning and end of the body section, where you add the text you want displayed in the main browser window.


3. Now let's make our document a little more interesting. Edit webpage1.htm, make it look like the one below and save it as webpage2.htm.

<html>
<head>
<title>A Simple HTML Document</title>
</head>
<body>
<center>
<h1> Still Simple but a bit more interesting </h1>
</center>
</body>
</html>

4. Open this file in your favorite web browser.


Figure 2. Your second HTML file

In this document, we added two new tags:
  • <center> - text is centered
  • <h1> - headline, one of six

<center>

This tag tells the browser to "start centering everything" and overrides the default alignment of LEFT by the browser. As you change the width of the browser, you will notice that anything between the center tags will adjust accordingly, always positioning itself in the center of the browser window.

<h1>

The headline tag of h1 tag tells the browser to "put the text that follows in a large, bolded font". There are 6 variations of this tag; <h1> is the largest and <h6> is the smallest. Each browser (Internet Explorer, Netscape Navigator, Opera, Mozilla, etc.) each have their own definition as to the size of each headline setting. The only way to know what they are is to use all 6 in a web page and see what they look like.


5. Edit webpage2.htm, make it look like the one below and save it as webpage3.htm.

<html>
<head>
<title>Attributes for our HTML Document</title>
</head>
<body bgcolor=yellow>
<center>
<font face="Courier New" color=blue>
<h1> These are the colors of Sweden </h1>
</font>
Our tags needed some help from <b>Attributes</b>
</center>
</body>
</html>

6. Open this file in your favorite web browser.


Figure 3. Your third HTML file

In this document, we added a new tag and put a twist on an old one:
  • <font> - specifies characteristics of a particular font
  • <body bgcolor> - sets the background color of the entire page
  • Headline tags are <h1> through <h6> with 1 being the largest
In this example, we extended the capabilities of tags by using attributes within the opening or starting tag.

Attributes

Sometimes, using just a simple tag is not enough to give us what we want. For example, when you use the font tag, the browser will need detailed information about the font, such as its name, size, color, etc. These characteristics are specified using attributes in the starting tag.

The syntax for attributes is as follows:

<TAGNAME ATTRIBUTE=value>

Note that in the example above, sometimes the value was surrounded by quotes and sometimes it was not. The rule is that if the value contains anything other than letters, numbers, hyphens or periods, it must be contained within quotes.

<body bgcolor=yellow>

The body attribute of bgcolor tells the browser to use whatever is specified as the background color of the document. This value can be something as simple as the name of a color or you could have specified the RGB value in hexadecimal notation. For example, bgcolor=yellow would be the same as bgcolor=#FFFF00.

<font face="Courier New" color=blue>

The font tag is a good example of a tag that, by itself, is useless. This tag needs attributes in order to be effective. The attribute of face is used to identify the name of the font you wish to use. Because the name of tour font (Courier New) contains a space, we put the value within quotes. Also, be careful when using this attribuite. Even though your system has a particular font that you like, say Chiller - a creepy and ghoulish font that has blood dripping from it - the person viewing your document will not see the font unless they have the same font on their system as well. So when you specify a font, the browser will try to find it on the receipients machine. If it does not, then it will use its default font, typically Times New Roman.

The font tag has many attributes and color is one that is commonly-used. Like the bgcolor attribute of the body tag, the value can be something as simple as the name of a color or as complex as the RGB value in hexadecimal notation.


7. Edit webpage3.htm, make it look like the one below and save it as webpage4.htm.


<html>
<head>
<title>Links for our HTML Document</title>
</head>
<body bgcolor=beige>
<center>
<font face="Courier New" color=green>
<h1> How to create hyperlinks </h1>
</font>
Click <a href=webpage1.htm>here</a> to to back to your first page
<br>
Also be sure to visit <a href=http://www.cincom.com>Cincom's Home Page</a>
<br><br>
The <a href=http://www.google.com>Google</a> search engine is very useful
<br><br><br>
<a href=http://www.cincom.com>
<img src=images/cincomlogo.gif border=0 alt="Cincom Home Page">
</a>
</center>
</body>
</html>

8. Open this file in your favorite web browser.


Figure 4. Your fourth HTML file

In this document, we added 3 new tags:
  • <a href=xxxxxxx > - anchor tag - used to define a hypertext destination
  • <img src=xxxxxxx> - image tag - used to embied and image or other multimedia file
  • &br> - line break tag - used to skip a line in the document

<a href=webpage1.htm>here</a>

The anchor tag creates a hyperlink. The href attribute is used to specify where the browser will go when the user clicks on the link. The browser, when it sees an anchor tag, automatically underlines whatever is inbetween the beginning and ending tags thereby creating a hyperlink. The cursor will automatically change to a "hand" icon to indicate to the user that the underlined text is in fact a hyperlink.

<img src=images/cincomlogo.gif border=0 alt="Cincom Home Page">

This line is performing "double duty". First, because it is sandwiched between anchor tags, the image tag will use a gif file as a hyperlink. The src attribute is used to specify the location of the graphic (image) file, In this case, the file cincomlogo.gif should be found in a sub directory of images that is directly below the directory where this document is located. This is called "relative addressing" and is very common in HTML documents. The attribute of border tells the browser how thick the border or "box" should be around the image. A value of zero means no border.

This brings us to the final attribute of alt. This attribute is used to display floating text under the hand icon when the user moves the cursor over the image, or in this case hyperlink. This is considered good practice because in the event that the graphic file cannot be found, the text of the alt attribute will always be displayed telling the user what the image is supposed to be. But this tag also brings up another very important and agonizing topic - browser compatibility.

If you have 2 different types of browsers, say Internet Explorer and Mozilla, load this page into both and hover over the Cincom logo. You will find that Internet Explorer will display the alt text but Mozilla will not. This is not to say that Mozilla is a "bad" browser; it simply means that Mozilla is different, or more correctly, newer. The attribute of alt has been around for a long time and the people who oversee the specifications of HTML - the World Wide Web Consortium - started using the attribute of title for other tags that wanted to have floating text. So the people who developed Mozilla decided that eventually the attribute of alt for the img tag will be deprecated (dropped) and only the title attribute would be supported. This would make Internet Explorer "backward compatible" in that it would recognize the alt attribute and Mozilla not "backward compatible". If you want floating text in both browsers, change the alt attribute to title. This type of thing has plagued web masters since the advent of web pages. The good news is that it has gotten much better over the years but the bad news is that browser compatibility is still an issue.

If you haven't already noticed, the image and break tags are 2 tags that don't have/require an ending tag.


9. Finally, no primer on HTML would be complete without mentioning the tags for lists and tables. Edit webpage4.htm, make it look like the one below and save it as webpage5.htm.

<html>
<head>
<title>Lists and Tables for our HTML Document</title>
</head>
<body bgcolor=lemonchiffon>
<center>
<font face="Tahoma, Verdana, Arial" color=green>
<h1> Lists and Table </h1>
</font>
There are 2 types of lists:
<ol>
<li>Ordered lists - items are numbered sequentially</li>
<li>Unordered lists - items have bullets next to them</li>
</ol>
Alignment is a problem in an HTML document. If want something aligned properly:
<ul>
<li>Use graphics</li>
<li>Use Tables</li>
</ul>
<table width=90% cellpadding=1 cellspacing=1 border=1>
<tr>
<td align=left>1st Row : 1st column</td>
<td align=center>1st Row : 2nd column</td>
<td align=right>1st Row : 3rd column</td>
</tr>
<tr>
<td align=right>2nd Row : 1st column</td>
<td align=center>2nd Row : 2nd column</td>
<td align=left>2nd Row : 3rd column</td>
</tr>
<tr>
<td align=center colspan=3>
Sometimes you can put text all on 1 line
and break up the grid of columns
</td>
</tr>
</table>
</center>
</body>
</html>

10. Open this file in your favorite web browser.


Figure 5. Your fifth HTML file

In this document, we added 6 new tags:
  • <table> - table tag - used to create a table, a grid of rows and columns
  • <tr> - table row tag - used to create a row in a table
  • <td> - table data tag - used to create a column in a table
  • <ol> - ordered list tag - used to create an indexed list of items
  • <ul> - unordered list tag - used to create a bulleted list of items
  • <li> - list item tag - used to list an item, typically nested between ol or ul tags

<ol>

The ordered list tag renders lines of text that have <ol> tags as an ordered (numbered) list. This tag is useful if listing items sequentially is important.

<ul>

The ordered list tag renders lines of text that have <ol> tags as a bulleted (un-numbered) list. This tag is useful if listing items sequentially is not necessary or important.

<li>

This tag denotes one item within an ordered or unordered list.

<table width=90% cellpadding=1 cellspacing=1 border=1>

The table tag creates a grid of rows and columns. There are many attributes for the table tag but the ones shown on this line are the most common. If these attributes are not self-explanatory, it is advised that you "play" with the values and see what happens with the table when you change them to different values.

<tr>

The tr tag specifies the start of a new row within the table.

<td align=right>

The td tag specifies the start of a new column within the table. Most people think this tag should be called tc instead of td because you are creating a new column, cell or content within the table, however td (table data) won out - don't aks me why - consult the consortium! The align attribute controls the position of the content within the cell.

<td align=center colspan=3>

The colspan attribute comes in very handy. It specifies the number of columns in the table that the cell will span. It's important to use the correct value for this attribute - some browsers are very unforgiving when the numbers don't quite match up.


Summary

This primer was designed to introduce you to the world of HTML, the underlying language of web pages on the Internet. As you can see, using HTML isn't all that difficult. HTML documents are a combination of text along with tags that tell the browser how to treat or display that text.

In these 5 documents, over 17 different tags were used. Although there are over 120 different tags in HTML, you will find that the "90/10" rule applies - you will use 10% of the tags over 90% of the time.

Should you desire to learn more about HTML, a good book resource would be
Instant HTML Programmer's Reference
by Steve Wright , Wrox Press
ISBN 1-861001-56-8

Although this book has been around for quite some time and is somewhat "out of date", it is still an excellent reference and 95% of the content still applies today. Also, because it is an older book, you can get it at a really good price at Amazon.com.