Learn About HTML
HTML Tutorials
HTML is an acronym meaning HyperText Markup Language. It is a way of adding various attributes to plain text files which are published on the World Wide Web. HTML lets you mix graphics with text, change the appearance of text, and create hypertext documents which interact with the user.
HTML is based around the concept of “tags”. A tag looks like this: <B>. Most HTML functions have an opening and closing tag — the tag applies to all text in between. For example, <B> is the tag for “bold”. Any text between a <B> and a </B> will be displayed in bold type when the document is viewed by the appropriate browser. So <B>hello world</B> would be displayed as hello world.
You can type these tags directly into your document, or assign them to an editor macro. To put the text in the above example in italics, you could type <I>hello world</I> in your document.
The HTML language has a number of different “flavors”, or specifications. They are distinguished by numbers that follow the acronym, as in HTML 3.2. The first number is the version and the second is the sub-version. Most browsers today support the HTML 3.2 specification. The latest specification is HTML 4, supported by the last versions of the mainstream browsers like Mozilla, Firefox, and Internet Explorer.
There is also an extended version of HTML, XHTML, that is supposed to replace HTML, but this has not still happened as most Web developers still adhere to HTML 4. Moreover, version 5 of HTML is being prepared.
One of the key strengths of HTML is that a document conforming to the HTML standard can be understood no matter what sort of software or computer the reader has. For example, the same page can be interpreted by someone using Internet Explorer in Windows, someone using Netscape on Linux, or even a blind person using special software.
There is much debate on the Internet about what constitutes “good” HTML. The original intention of HTML was to create a universal way of storing and viewing information. The subscribers to this theory see HTML as a content-based language–what’s in the document is much more important than how it looks.
Current features in HTML allow authors to create fancy graphical effects. This has spawned a whole new class of Web designers, for whom creating aesthetically pleasing pages is the main concern. One of the tools used to achieve this is the Flash plug-in developed by the company Macromedia, which allows the display of animated graphics that can be very attractive. Unfortunately, the use of Flash conflicts with the need that the page be indexed by the search engines, thus allowing it to reach a greater public.
The first group maintain that content is more important than making pages look pretty. The second group believe that the appearance of the site is at least as important as content, and their objective is to provide the user a pleasant experience.
It is worth noting that the best HTML authors manage to create attractive and innovative Web sites that in addition can be well indexed by the search engines. This obviously takes more work; it’s up to you to decide if you’re prepared to put this effort in for the benefit of your potential users.
Creating an HTML Document
This tutorial will take you through creating your first HTML document. I will assume you are using your favorite text editor. Here we’ll create a simple personal home page.
1. Start your editor with a blank document. Type the following lines.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>My first page</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
|
2. The first thing I recommend is saving your work frequently. This will make it easier for you to recover from mistakes.
3. All HTML documents must have a title. You type this directly into your document, within the TITLE tag. I have used “My first page” as a title. The document title will appear in the caption bar of most browsers when your document is viewed; it will not otherwise be visible to users.
4. The content of your document must come after the <BODY> tag. Everything before the <BODY> is information that describes your document to Web Browser and Server software.
To enter information in your document that is visible to the user, position the cursor between the <BODY> opening tag and the </BODY> closing tag.
5. It often pays to give your document a heading that will be visible to the user. In most cases, this will be the same as or similar to the document title.
To create a heading for your document, just type the text you want for the heading, and surround it with the tags <H1></H1>. You can use from H1 for H6 for headings. H1 is the largest size heading, which you would normally use at the start of a document. H6 is very small.
6. We’ll divide our document into two sections: Who Am I?, and Hobbies and Interests. Each of these sections will need its own heading. Let’s do Who Am I first.
Type the text: Who Am I? into your document. This time, instead of using the H1 tag, we’ll use the next size down, H2.
7. Now we need to enter some information into the document. A paragraph about who you are and what you do is probably enough.
To create a Paragraph, insert a <P> tag. Next type the paragraph. It will probably make things clearer for you if you get in the habit of putting a </P> closing tag at the end of each paragraph, although this is not required.
8. At this stage, you should have a document containing two headings, and a paragraph of text. Now is probably a good time to take a look at how this will actually be displayed on the World Wide Web.
To preview your work, save your work with the extension “.htm”. Now start Windows Explorer, navigate to the folder where the file is stored, and double-click it.
Internet Explorer will start and will show the page you created. Notice the difference in size between the H1 and H2 text.
To return to your document, just minimize your browser and switch to your editor. You don’t have to start a new copy of your browser every time.
9. Follow steps 6-8 again to create another paragraph for your Hobbies and Interests.
10. By now, you should have a document containing two paragraphs of text, each with its own heading. Let’s provide a visual clue to the user to separate these two paragraphs further.
Position the cursor before the <H2> tag that starts the heading for the second paragraph. Insert an Horizontal Line tag, <HR>, at the cursor position.
Preview your document again. To do so, save your work and switch to Internet Explorer. Press F5 to refresh the display. There should be a recessed horizontal line dividing the two paragraphs.
11. Congratulations! You have created a basic HTML document!
Adding Hypertext Links
This tutorial will take you through creating several different types of Hypertext Link in your document. You should read before the concepts explained in the Creating an HTML Document tutorial.
Hypertext links make your documents “interactive”. When the user clicks on the link, something will happen. This tutorial will show you how to create links that:
· Take the user to another document in another website
· Take the user to another point within this document
· Let the user download a file
· Let the user send mail to you
· Take the user to another document in your own website
1. Start your editor and open a new document. You must create a Web page as was described in the “Creating an HTML Document” tutorial. If you’ve just completed this tutorial, keep working in that document.
2. The first link we’ll create is to an HTML document somewhere else on the Internet. The document we’ll use is the BBC home page at http://www.bbc.com.
Each hypertext link is composed of two parts: the URL of the document, and the description of the link. The tag used to create links is <A>. It must be closed with </A>. The format of an A tag is:
<A href="URL of the document">description of the link</A>
In this case the URL is
http://www.bbc.com
The description lets you specify the text that the user will click on to follow the link. We’ll use “BBC home page” here.
Your finished link will look something like:
<A href="http://www.bbc.com">BBC home page</A>
3. Preview the document to see the results of Step 2. If you’re connected to the Internet, when you click the text “BBC home page,” you will be taken to this page.
4. Next, we’ll create a hypertext link that will take the user to another place in the same document. This is a little more involved, because we have to create a destination for the link, as well as the link itself.
To create a destination target for a hypertext link, you’ll be using a variant of the <A> where the description is missing. Also, instead of the “href” attribute it uses the “name” attribute. This name should be something that makes sense if you want to refer to the link from another document.
Position the cursor at the point you want users to jump to, and type something like this:
<A NAME="a_target"></A>
Next, move to the place in your document where you want the users to click to go to the destination target. Type an <A> tag with the text you want the user to click on in its description. The “href” attribute should have the value: “#a_target”. The tag should look like this:
<A href="#a_target">Go to the test target</A>
Preview this again, to test the effects.
5. Now we’ll create a link that will let the user download a file. There are a number of ways to do this, but I’ll show you the way I think is easiest. As an example, we’ll create a link to download the latest version of the your text editor. We’ll suppose it is available at the following URL:
"ftp://www.goodedit.com/pub/editor/textedit.exe".
To create a link to this file, position the cursor at the point where you want to insert the link, and type the following tag:
<A href="ftp://www.goodedit.com/pub/editor/textedit.exe">
Download the text editor</A>
6. The next type of link we’ll create will let the reader send e-mail to you (or anyone else you like).
To create an e-mail link, position the cursor at the point where you want to insert the link. You will use as “href” your e-mail address, prefixed by “mailto:”, and as a description any text you like.
Once you have entered your e-mail address and the link description in the tag, it will look something like this:
<A href="mailto:myself@mydomain.com">Mail me</A>
7. The final type of link we’ll create is to a document on your web site.
To create a hypertext link to another document on your web site, you will proceed as you did to make an external link but omitting the “http://website-name/” portion of the “href” attribute. Suppose you made a page about gardens. To direct users to that page, you can use:
<A href="gardens.htm">See the garden page</A>
Note that this link uses a relative reference “gardens.htm”, rather than an absolute reference “http:/www.mydomain.com/gardens.htm”. This link will always jump to gardens.htm, no matter what web site it’s stored on (provided, of course, that a file called gardens.htm exists in the same directory).
Adding Pictures
This tutorial will take you through adding images to your document. You should be comfortable with the concepts explained in the “Creating an HTML Document” and “Adding Hypertext Links” tutorials.
This tutorial will assume that you have some .GIF or .JPG files in your system to use for images. For the sake of training, I’ll suppose the image is called “happy_duck.gif”.
1. Start your editor and create a new Web page.
2. The first type of picture we’ll create is called an in-line image. This is a picture that displays inside your document, but doesn’t do anything. If the reader clicks on it, nothing will happen.
To create an in-line image when the image file is stored in the same folder as the page you are creating, position the cursor at the point where you want to insert the image, and type:
<IMG src="happy_duck.gif">
Preview your document to see the effects of this. (NOTE: there must be an image called “happy_duck.gif” for this to work, or you will just be staring at a hollow square!).
3. If the image is stored in a remote server, so that its URL is, for example, “http://www.pictures.com/dick/happy_duck.gif”, your IMG tag will be:
<IMG src="http://www.pictures.com/dick/happy_duck.gif">
4. As well as these “static” in-line images, you can create an image that is also a hypertext link. When the reader clicks on it, they follow the link in the same way as if they clicked on a text link.
To create a hypertext image, position the cursor at the point where you want to insert the image, then type an <A> tag as you was instructed before. You must include in the “href” attribute the document the reader will be taken to when they follow the link. As with the image, this can be a file on the current system or an external link. In this case, you will not write a description of the link, but you will replace the description with an IMG tag.
Suppose that your happy duck picture is a big one (it has many pixels), resulting in an also big file that will make that your page load very slowly. You can make a thumbnail of the picture (a very reduced version of it), and let the user retrieve the original through a link. We’ll call “small_duck.gif” the thumbnail.
The link will look as follows:
<A href="happy_duck.gif"><IMG src="small_duck.gif"></A>
You can also add some text to describe the link. If you do, the image will have the text next to it, and the reader can also click on it to follow the link.
<A href="happy_duck.gif"><IMG src="small_duck.gif">
A picture of my duck </A>
Hypertext and HTML
This guide was prepared so that HTML beginners could get a quick-start at creating HTML documents. It is by no means a complete exposition of what can be done with HTML. If you need help on a subject that it is not covered here, please use my contact page.
World Wide Web browsers use hypertext to access and display information available on the World Wide Web. Hypertext is text that incorporates pointers to additional information. Microsoft Windows “Help” files are examples of hypertext documents. The hypertext documents used by World Wide Web browsers are ordinary text files that include special markings that tell the browser software something about how the text should appear to the user, as well as how to retrieve information when the user requests it. The language, or code, used for these special markings is “Hypertext Markup Language”, abbreviated as “HTML”.
A very simple HTML document would look like this when displayed in a text editor:
<html>
<head>
<title>An elementary HTML document</title>
</head>
<body>
<h1>The Main Heading for the Document<h1>
<P>This is the first paragraph.</P>
<P>This is the following paragraph.</P>
</body>
</html>
The intention of the creators of HTML was that the markings indicate only what was the function of the text (i.e., a heading, plain text, a link to a document, etc.), not how it would appear. Nowadays this has changed very much, and developers attempt to produce pages that appear in exactly the same way to every user. Nonetheless, due to the manner in which HTML was created, it may occur that the same HTML document look different when displayed by different browsers (or even the same browser as configured by another user).
HTML Tags
The markings used in HTML documents are called “tags.” An HTML tag consists of a left angle bracket (<), called a “less than” symbol, followed by some text, and ends with a right angle bracket (>), called a “greater than” symbol. Tags are most often used in pairs, i.e., <H3> and </H3>. In the example, the starting tag, “<H1>” tells the browser that a heading is about to begin. The end tag, “</H1>” lets the browser know that the end of the heading has been reached. It should be noted that HTML tags may displayed in either upper or lower case (or a mixture of the two). “<H1>” is equivalent to “<h1> “. HTML is not case sensitive.
The Document Title
Every HTML document needs a title. A title, delimited by its tag pair, looks like this:
<TITLE>This is the document title</TITLE>
The function of the title is to identify and describe the document (for use by searching programs, for example) rather than as a display element (heading tags are used for display purposes). There should only be one title in an HTML document.
Headings
Headings are used to separate and call attention to different parts of a document. HTML incorporates six levels of headings. They are numbered 1 through 6, with heading level 1 being the highest level and the most prominently displayed. Headings are displayed with larger, bolder typefaces than normal text. A heading is displayed on its own line and does not need a paragraph tag to separate it from the following text. Normally, the first heading in a document should be tagged as a level 1 heading, e.g.,
<h1>This is the First Heading</h1>.
If “n” represents the level, a properly tagged heading looks like this: <Hn>This is a heading<Hn> where “n” represents a number between 1 and 6.
Paragraphs and Text Formatting
Beginners are often confused by the way that HTML treats white space and carriage-returns (newlines) in the text. Browsers generally ignore carriage-returns and white space in your HTML documents. When your file is displayed, repeating spaces may be shown as a single space and line breaks can occur anywhere. That is why each paragraph in an HTML document must be enclosed by the “<p>” tag. Without paragraph tags, what looks like a well formatted text file will be displayed by a browser as a single continuous paragraph!
Preformatted Text
To display text so it is formatted the way it looks when viewed with an ordinary text editor, you need to use a special tag to indicate that the text is “preformatted”. The tag looks like this: <pre>. The closing tag is: </pre>. Use of this tag will cause the text to be displayed with spaces, new lines and (usually) tab characters as they have been entered., that is, as it has already been formatted. A fixed width font (i.e., Courier) is normally used.
Making lists
You can use HTML to display lines of text as a list. Text may be displayed as a numbered or an unnumbered list. A list is bounded by an opening and a closing tag. Numbered and unnumbered lists have different tags. Paragraph separators are not required to separate the individual list items. Each list item begins with its own tag which serves as a separator. This “list item” tag is the same for numbered and unnumbered lists. The HTML for an unnumbered list looks like this:
<UL>
<LI> List item one
<LI> List item two
<LI> List item three
</UL>
A browser might display the unnumbered list as follows:
- List item one
- List item two
- List item three
The HTML for a numbered list (also called an “ordered” list) looks like this:
<OL>
<LI> List item one
<LI> List item two
<LI> List item three
</OL>
A browser might display the numbered list as follows:
- List item one
- List item two
- List item three
Lists may be nested, i.e., lists within lists are permitted.
Text Formatting by Function
Using HTML, you can indicate formatting for several different kinds of text functions. The following are some text functions and the HTML tags used to display them:
· Extended quotation (usually several lines of quoted text):
<BLOCKQUOTE> </BLOCKQUOTE>
· Address (usually an E-mail address):
<ADDRESS> </ADDRESS>
· Citation (as in referring to another document):
<CITE> </CITE>
· Strong (indicates text is important):
<STRONG> </STRONG>
A browser might display this HTML text,
<ADDRESS>george@harrison.net</ADDRESS>
like this:
george@harrison.net
Text Formatting by Font Style
You can also indicate formatting by font style, as you would in a word processor. That is, text can be displayed as italic, bold, etc. Some of the styles you can use, along with their HTML tags are as follows:
· Bold:
<B>text is displayed in bold face type</B>
text is displayed in bold face type
· Italic:
<I>text is displayed in italic type</I>
text is displayed in italic type
· Underline:
<U>text is displayed as underlined</U>
text is displayed as underlined
· Fixed width:
<TT>text is displayed in a fixed width font</TT>
text is displayed in a fixed width font
Links to Other Documents
HTML documents are “hypertext” documents. This means that they contain text that permits browsers to access additional information when the user requests it. Browsers indicate that text is linked to more information by displaying it in a different color and underlining it. When a mouse is used to click on the highlighted text, the browser retrieves the information associated with the link.
HTML uses the “A” (or anchor) tag to indicate a hypertext link. The “HREF” attribute is used to give the URL or Internet address of the other document. For example, a link that would instruct a browser to fetch and display another HTML hypertext document looks like this:
<A href="http://www.widgets.com/faq.html">View the FAQ</a>
The browser would display the text between the first right-angle bracket and the “</A>” end tag. The user would see only the words, “View the FAQ”. They would be highlighted as shown below:
View the FAQ
The text within the quotes is a “Uniform Resource Locator” or URL, and is not displayed by the browser. Uniform Resource Locators are pointers to information. In this case the Uniform Resource Locator points to another hypertext document.
URLs
“URL” is an abbreviation for “Uniform Resource Locator”. URLs are the pointers to information to be retrieved when a hypertext link is activated by the user. They tell the browser how the information is to be obtained and where it is located. The general format of a URL is :
http://host-domain/path/filename
The “http” prefix indicates the protocol used to retrieve the document. In addition to “http”, other protocols can be used as, for example, FTP:
ftp://ftp.archives.com/lastversion.zip
retrieves a file from an FTP server.
An anchor like <A href=”mailto:…”> would not retrieve a document, but instead it would bring up the application associated with Internet mail, allowing the user to send mail messages to the address that follows the “mailto” attribute. Example:
<A href="mailto:george@harrison.net>Mail to George</A>
would give:
Mail to George
Linking to Anchors Within the Same Document
There is a type of anchor that can be used to permit text within an HTML document to be the destination of a link. This is useful for creating links that refer to text inside the current document. A “point and click” table of contents, for example, is created by using internal links.
In destination anchors, the attribute “NAME” is included in the anchor tag as shown below:
<A NAME="astro">Astronomy</a> is a very old branch of science.
This would give the word “Astronomy” the anchor name “astro”.
The following HTML code creates a link to the anchor referenced by that anchor name:
<A href="#astro">Click here to learn about astronomy</a>
Clicking on the displayed text, “Click here to learn about astronomy”, would move the browser’s viewing cursor to the place in the current document beginning with the word “Astronomy” because it has the anchor name “astro”.
The “#” sign is used to indicate that a link is a reference to a named anchor within a document. Using named anchors is useful for creating a table of contents. The table of contents would have “href” links to the appropriately named anchors that mark topics within the body of the document. The first word in the table of contents could itself be a named anchor. This would permit links further down in the text to return the user to the table of contents.
Displaying Inline Images
An important feature of World Wide Web browsers is their ability to display images. The “IMG” element is used to allow the display of “inline” images. Inline images are images displayed by the browser on the browser page itself. All browsers can display inline images stored in Graphic Interchange Format (referred to as “gif” files). Other image formats such as “png” and “jpeg” can also be displayed inline by browsers. An inline image may be included in a document by using the following code:
<IMG src="sailboat.gif">
Execution of the above HTML code by the browser would cause the file, “sailboat.gif” to be displayed as an inline image.
Note that the image element has no closing tag. Text that is adjacent to an image is by default aligned to the bottom of the image. The “align” attribute can be used to alter the placement of adjacent text. The HTML code,
<IMG ALIGN="top" src="sailboat.gif"> The good ship Freshwind
will cause the text, “The good ship Freshwind”, to be displayed aligned at the top of the image. Use of align=”middle” will result in text alignment at the image’s vertical center. The “alt” attribute is used for alternative text that will be displayed by browsers that are unable to display images or by special programs used by handicapped people. For example, the following HTML,
<IMG src="sailboat.gif" ALT="The ship Freshwind">,
will cause the words “The ship Freshwind” to be read aloud by software for blind people.
Using Inline Images as Links
A large image can be displayed when the user clicks on an inline, but smaller, version of the same picture, called a “thumbnail”. This is possible because inline images can be used in anchors, as follows:
<A href="big_image.jpg"><IMG src="small_pic.gif"></A>
The line above would cause the file, “small_pic.gif”, to be displayed as an inline image which is also an active link. When the user clicks on the thumbnail, the file “big_image.jpg” would be loaded on a page by its own. Similarly, the following code,
<A href="ftp://ftp.archives.com/ships.zip">
<IMG src="button.gif"></A>
would result in the retrieval of a file from an FTP site when the user clicked on the “button.gif” inline image.
Forms in HTML
When a Web page is used to enter data, as for example in an on-line business transaction, a form is normally used. HTML forms allow the Web page designer to create input screens that are used for such things as questionnaires, product ordering forms, and so on.
How are the special items on this form created? There are a number of different types of fields which can appear on forms, including text entry fields, lists, radio buttons, check boxes, and buttons. HTML tags are provided to define each of these field types in a document. Each form must be enclosed by <FORM…> … </FORM> tag pair. A number of attributes are required to specify how the data in the form is processed when it is submitted. For example, the form might use the following FORM tag:
<FORM method="POST" action="/cgi-bin/orders.cgi">
...
Remainder of form definition goes here.
...
</FORM>
When a user fills in a form and submits it for processing, the data is encoded in a special format called by a standard known as Common Gateway Interface (CGI) and sent to the server which then passes it onto the program or “CGI script” specified by the ACTION attribute. The use of CGI scripts is explained elsewhere in this site. Suffice it by now to say that the general function of these scripts is to decode the form data which they receive and based on the information they extract, determine what actions to take.
To further elaborate this example, suppose that this form has five main fields: a list, a text field, a set of radio buttons, and submit and reset buttons. A list such as the one in this form is created using the SELECT element of HTML. This particular example might look like this:
<FORM method="POST" action="/cgi-bin/orders.cgi">
<P>Color of the widget:<BR>
<SELECT name="p">
<OPTION>Red
<OPTION>Blue
<OPTION>Yellow
<OPTION>Purple
<OPTION>Green
<OPTION>Fuchsia
</SELECT>
...
Remainder of form definition goes here.
...
</FORM>
A <SELECT> … </SELECT> tag pair can contain multiple <OPTION> tags defining the elements which make up the list. The exact manner in which the form is rendered is determined by the browser. The MULTIPLE attribute if used further defines the behavior of the list. It allows the user to select more than one item from the list; if omitted, only a single item can be selected. The value specified with the NAME attribute is used during the encoding phase when the form data is submitted for processing.
The next field is called a TEXTAREA. Such fields allow multiple lines of text to be entered by the user. In this particular example, the following HTML code would be used to create the text field:
<P>Shipping Address:<BR>
<TEXTAREA name="address" rows="4" cols="35">
</TEXTAREA>
This creates a text field 35 characters wide by 4 lines high. The exact manner in which this field is rendered is determined by the browser. Often, horizontal and vertical scroll bars are included to allow the user to scroll the text as it is entered. If text is included between the <TEXTAREA> … </TEXTAREA> tags, it is used to set the initial contents of this field. As with the SELECT tag, the NAME attribute is used during the encoding phase.
Following the text field is a standard set of radio buttons. Only one of these can be on at any one time. The following code is used to create these buttons:
<P>Payment Method:
<INPUT name="pay" type="radio" value="visa">
VISA
<INPUT name="pay" type="radio" value="mc">
Master Card
<INPUT name="pay" type="radio" value="cod">
COD
The INPUT tag is used to create a number of different fields types, as specified by the TYPE attribute. The VALUE attribute is used for encoding purposes, as is the NAME attribute. This attribute is also used to define the grouping of the radio buttons; any RADIO type input field with the same value for NAME as another RADIO type field is considered to belong to the same group implying that only one of those radio buttons can be selected at one time.
The form ends with two standard looking buttons, one labelled “Send Order” and the other “Reset”. These buttons are defined using the following HTML code:
<P><INPUT value="Send Order" type="submit">
<INPUT type="reset" value="Reset">
A RESET type input field creates a button called “Reset”. If this button is clicked by the user, any values entered into any field of the form are cleared and the form’s initial state is restored. A SUBMIT type input field creates a button as well. By default, a submit button is called “Submit Query”, although in this case the VALUE attribute is used to provide the button with an alternative name. When the user clicks a submit button, the current data existing in the form is encoded into CGI format and submitted to the form’s specified CGI script for processing.
Creating HTML tables
This section gives an overview of how tables are created in HTML. The basic approach is to define a structure which provides information about each row of a table and each cell in that table. Tables can also have headers, both for the table itself (called the caption) as well as for the rows and columns. HTML tags are used to describe all this information.
As an example, take a look at this example that demonstrates a simple table listing products stored in two separate warehouses, along with the total number of products in each warehouse as well as the combined grand total.
All tables must be enclosed in <TABLE> … </TABLE> similar to forms. All other tags must appear inside these enclosing tags. The table has a title or “caption” associated with it. This is an optional element which can appear inside a table definition:
<TABLE BORDER>
<CAPTION>Product Inventory</CAPTION>
...
Remainder of table definition goes here.
...
</TABLE>
The BORDER attribute of the TABLE tag specifies whether borders should be drawn around the cells of the table. A value can also be supplied with BORDER to specify the width of the border when the table is rendered. The default is 1; to define a table without borders, specify BORDER=”0″.
The individual rows of a table are each enclosed inside <TR> … </TR> tags. There are options which control how the data in each cell of a row is aligned within the cell horizontally and vertically and how it is formatted, for example, whether or not the text can be wrapped in the cell over multiple lines. It is also possible to specify how many columns and rows an individual cell spans. Other options permit, for example, to specify the exact width of a cell in pixels.
The first row of the table consists entirely of table headers. It is defined with the following HTML code:
<TR>
<TH>Product</TH>
<TH>Warehouse 1</TH>
<TH>Warehouse 2</TH>
</TR>
Each header cell is defined with <TH> … </TH> tags. Each such tag pair appearing within a row definition represents a cell in that row. Text enclosed by this pair is automatically boldfaced and centered within the cell when the table is rendered.
Other table cells are created in a similar manner, using the table data <TD> tag instead of the <TH> tag. The second row of the table, for example, can be defined using the following HTML code:
<TR>
<TH>Red widget</TH>
<TD align="center">8</TD>
<TD align="center">12</TD>
</TR>
The <TD> tag can take optional attributes specifying characteristics about an individual cell. In this case, the ALIGN attribute is used to center the contents of the cell. Without this option, cell data is left aligned. This differs from header cells defined with <TH> tags which are centered by default. Each <TD> … </TD> appearing in a row definition represents a cell in that row. The total of table header tags and table data tags in a row definition represents the number of cells in that row.
The other rows in the table are defined in exactly the same way, with only the data changing as required. The exception is the last row, which contains just two cells instead of three. One of the attributes which can be specified with a cell definition is the number of columns it takes up. In this case, the second cell of the last row, containing the grand total value, has been defined to take up two columns of the table instead of the normal single column. This is done as follows:
<TR>
<TH>Grand Total</TH>
<TD align="center" colspan="2">99</TD>
</TR>
The COLSPAN attribute in the <TD> element above specifies that this cell should span two columns. A cell can also be modified with the ROWSPAN attribute to specify the number rows the cell spans, and both COLSPAN and ROWSPAN can be used at the same time.
| Product |
Warehouse 1 |
Warehouse 2 |
| Red widget |
8 |
12 |
| Grand Total |
99 |
HTML documents’ structure
The HTML specification requires that HTML documents be composed of structural elements that are bounded by special tags. The entire document must be bracketed by the “HTML” tag pair as follows:
<HTML>
Document contents
</HTML>
Within the HTML pair, three other pairs of tags are obligatory. First, the “head” pair. Within the head pair, a title with its tag pair must be used. The remainder of the document should be bracketed by the “body” pair.
The following is a template for a properly structured HTML document:
<HTML>
<HEAD>
<TITLE>Document Title goes here</TITLE>
</HEAD>
<BODY>
The actual content of the
document goes here.
</BODY>
</HTML>
To learn more about HTML
While the above is by no means an exhaustive tutorial, it includes sufficient information for a beginner to create useful, interesting and attractive HTML documents. Several books that can help you to learn more about HTML are available at most book shops that stock computer books. This tutorial is only a preliminary guide to the use of basic HTML tags. To learn more, check your local bookstore.
Use the Web to obtain additional information. Using the search engines to look for “HTML”, “Learning HTML”, “Creating WWW Documents” or similar subjects, you will find tutorials, information on specialized uses of HTML (i.e., forms, tables, image maps, etc.), along with guides to good HTML style.
An excellent way to learn how to use HTML effectively is to get the source code for documents that have features of interest to you. Most browsers will permit you to save the source code of the document you are viewing. You can then examine the document’s HTML code to see how particular kinds of displays have been created.
Character Data in HTML
When you write the text of your HTML page, the characters you use must belong to a known character set. This character set is specified by the “charset” parameter of the “text/html” media type, and it is usually “ISO-8859-1″, although it could also be the more restricted “US-ASCII”. The character set (charset) ISO-8859-1 is also known as Latin Alphabet No. 1, or simply Latin-1. To specify this charset you should include the following in the HEAD section of the page:
<META HTTP-EQUIV="content-type" CONTENT=
"text/html; charset=ISO-8859-1">
Latin-1 includes characters from most Western European languages, as well as a number of control characters. Control characters are non-printable characters that are typically used for communication and device control, as format markers, and as data delimiters.
Control characters
In HTML the use of control characters is limited in order to maximize the chance of successful interchange over heterogeneous networks and operating systems. Only three control characters are used: Horizontal Tab (HT, encoded as 9 decimal in US-ASCII and ISO-8859-1), Carriage Return, and Line Feed.
Horizontal Tab is interpreted as a space in all contexts except pre-formatted text. Within pre-formatted text, the tab should be interpreted to shift the horizontal column position to the next position which is a multiple of 8 on the same line.
Carriage Return and Line Feed are conventionally used to represent end of line. For media types defined as “text/*”, the sequence CR LF is used to represent an end of line. In practice, text/html documents are frequently represented and transmitted using an end of line convention that depends on the conventions of the source of the document; that representation may consist of CR only, LF only, or CR LF combination. Documents prepared in a computer running Microsoft’s operating systems have their ends of line marked with both characters, while those prepared in Unix systems use only LF, and those in Apple computers use only CR.
In HTML, end of line in any of its variations is interpreted as a space in all contexts except pre-formatted text. Within pre-formatted text, browsers are expected to treat any of the three common representations of end-of-line as starting a new line.
Special characters
Certain characters have special meaning in HTML documents. There are two printing characters which may be interpreted by an HTML application to have an effect on the format of the text:
Space
· Interpreted as a word space (place where a line can be broken) in all contexts except the Pre-formatted Text element.
· Interpreted as a non-breaking space within the Pre-formatted Text element.
Hyphen
· Interpreted as a hyphen symbol in all contexts
· Interpreted as a potential word space by when hyphenating the document
Certain characters are part of the HTML markup, and when used in the content’s text should be replaced by entity references, always prefaced with ampersand (&) and followed by a semicolon. These characters are as follows:
Symbol Entity Name Description
< lt Less than sign
> gt Greater than sign
& amp Ampersand
" quot Double quote sign
So that these characters will not be interpreted as markup, they must be represented by entity references. For example, this line of a program written in the C language,
if ( var > 125 && var < 250 ) {
when included in an HTML page, should be coded as:
if ( var > 125 && var < 250 ) {
Character Entities
Many of the Latin alphabet No. 1 set of printing characters may be represented within the text of an HTML document by a character entity. The reasons for using a character entity are:
· the keyboard does not provide a key for the character, such as on U.S. keyboards which do not provide European characters
· the character may be interpreted as markup, such as the ampersand (&), double quotes (”), the lesser (<) and greater (>) characters
The HTML DTD includes a character entity for each of the printing characters in the character set Latin-1, so that one may reference them by name if it is inconvenient to enter them directly. To ensure that a string of characters is not interpreted as markup, represent all occurrences of <, >, and &; by character or entity references.
The following entity names are used in HTML, always prefaced with ampersand (&) and followed by a semicolon.
| Name |
Symbol |
Description |
| Aacute |
á |
Capital A, acute accent |
| aacute |
á |
Small a, acute accent |
| Acirc |
â |
Capital A, circumflex accent |
| acirc |
â |
Small a, circumflex accent |
| AElig |
æ |
Capital AE diphthong (ligature) |
| aelig |
æ |
Small ae diphthong (ligature |
| Agrave |
à |
Capital A, grave accent |
| agrave |
à |
Small a, grave accent |
| Aring |
å |
Capital A, ring |
| aring |
å |
Small a, ring |
| Atilde |
ã |
Capital A, tilde |
| atilde |
ã |
Small a, tilde |
| Auml |
ä |
Capital A, dieresis or umlaut mark |
| auml |
ä |
Small a, dieresis or umlaut mark |
| Ccedil |
ç |
Capital C, cedilla |
| ccedil |
ç |
Small c, cedilla |
| copy |
© |
Copyright |
| Eacute |
é |
Capital E, acute accent |
| eacute |
é |
Small e, acute accent |
| Ecirc |
ê |
Capital E, circumflex accent |
| ecirc |
ê |
Small e, circumflex accent |
| Egrave |
è |
Capital E, grave accent |
| egrave |
è |
Small e, grave accent |
| ETH |
ð |
Capital Eth, Icelandic |
| eth |
ð |
Small eth, Icelandic |
| Euml |
ë |
Capital E, dieresis or umlaut mark |
| euml |
ë |
Small e, dieresis or umlaut mark |
| Iacute |
í |
Capital I, acute accent |
| iacute |
í |
Small i, acute accent |
| Icirc |
î |
Capital I, circumflex accent |
| icirc |
î |
Small i, circumflex accent |
| Igrave |
ì |
Capital I, grave accent |
| igrave |
ì |
Small i, grave accent |
| Iuml |
ï |
Capital I, dieresis or umlaut mark |
| iuml |
ï |
Small i, dieresis or umlaut mark |
| Ntilde |
ñ |
Capital N, tilde |
| ntilde |
ñ |
Small n, tilde |
| Oacute |
ó |
Capital O, acute accent |
| oacute |
ó |
Small o, acute accent |
| Ocirc |
ô |
Capital O, circumflex accent |
| ocirc |
ô |
Small o, circumflex accent |
| Ograve |
ò |
Capital O, grave accent |
| ograve |
ò |
Small o, grave accent |
| Oslash |
ø |
Capital O, slash |
| oslash |
ø |
Small o, slash |
| Otilde |
õ |
Capital O, tilde |
| otilde |
õ |
Small o, tilde |
| Ouml |
ö |
Capital O, dieresis or umlaut mark |
| ouml |
ö |
Small o, dieresis or umlaut mark |
| reg |
® |
Registered TradeMark |
| Szlig |
ß |
Small sharp s, German (sz ligature) |
| THORN |
þ |
Capital THORN, Icelandic |
| thorn |
þ |
Small thorn, Icelandic |
| trade |
™ |
TradeMark |
| Uacute |
ú |
Capital U, acute accent |
| uacute |
ú |
Small u, acute accent |
| Ucirc |
û |
Capital U, circumflex accent |
| ucirc |
û |
Small u, circumflex accent |
| Ugrave |
ù |
Capital U, grave accent |
| ugrave |
ù |
Small u, grave accent |
| Uuml |
ü |
Capital U, dieresis or umlaut mark; |
| uuml |
ü |
Small u, dieresis or umlaut mark |
| Yacute |
ý |
Capital Y, acute accent |
| yacute |
ý |
Small y, acute accent |
| yuml |
ÿ |
Small y, dieresis or umlaut mark |
Numeric Character Entities
Numeric character entities are represented in an HTML document as entities whose name is the number sign (#) followed by a numeral from 32-126 and 161-255. The HTML DTD includes a numeric character entity for each of the printing characters of the ISO-8859-1 encoding, so that one may reference them by number if it is inconvenient to enter them directly. The following entity names are used, in HTML, always prefaced with ampersand (&) and followed by a semicolon.
| Name |
Description |
Symbol |
| #00-#08 |
Unused |
N/A |
| #09 |
Horizontal tab |
N/A |
| #10 |
Line feed |
N/A |
| #11-#31 |
Unused |
N/A |
| #32 |
Space |
N/A |
| #33 |
Exclamation mark |
! |
| #34 |
Quotation mark |
“ |
| #35 |
Number sign |
# |
| #36 |
Dollar sign |
$ |
| #37 |
Percent sign |
% |
| #38 |
Ampersand |
& |
| #39 |
Apostrophe |
‘ |
| #40 |
Left parenthesis |
( |
| #41 |
Right parenthesis |
) |
| #42 |
Asterisk |
* |
| #43 |
Plus sign |
+ |
| #44 |
Comma |
, |
| #45 |
Hyphen |
- |
| #46 |
Period (full stop) |
. |
| #47 |
Solidus (slash) |
/ |
| #48-#57 |
Digits 0-9 |
0-9 |
| #58 |
Colon |
: |
| #59 |
Semi-colon |
; |
| #60 |
Less than |
< |
| #61 |
Equals sign |
= |
| #62 |
Greater than |
> |
| #63 |
Question mark |
? |
| #64 |
Commercial at |
@ |
| #91 |
Left square bracket |
[ |
| #92 |
Reverse solidus (backslash) |
\ |
| #93 |
Right square bracket |
] |
| #94 |
Caret |
^ |
| #95 |
Horizontal bar |
_ |
| #96 |
Acute accent |
` |
| #97-#122 |
Letters a-z |
a-z |
| #123 |
Left curly brace |
{ |
| #124 |
Vertical bar |
| |
| #125 |
Right curly brace |
} |
| #126 |
Tilde |
~ |
| #127-#160 |
Unused |
N/A |
| #161 |
Inverted exclamation |
¡ |
| #162 |
Cent sign |
¢ |
| #163 |
Pound sterling |
£ |
| #164 |
General currency sign |
¤ |
| #165 |
Yen sign |
¥ |
| #166 |
Broken vertical bar |
¦ |
| #167 |
Section sign |
§ |
| #168 |
Umlaut (dieresis) |
¨ |
| #169 |
Copyright |
© |
| #170 |
Feminine ordinal |
ª |
| #171 |
Left angle quote, guillemot left |
« |
| #172 |
Not sign |
¬ |
| #173 |
Soft hyphen |
N/A |
| #174 |
Registered trademark |
® |
| #175 |
Macron accent |
¯ |
| #176 |
Degree sign |
° |
| #177 |
Plus or minus |
± |
| #178 |
Superscript two |
² |
| #179 |
Superscript three |
³ |
| #180 |
Acute accent |
´ |
| #181 |
Micro sign |
µ |
| #182 |
Paragraph sign |
¶ |
| #183 |
Middle dot |
· |
| #184 |
Cedilla |
¸ |
| #185 |
Superscript one |
¹ |
| #186 |
Masculine ordinal |
º |
| #187 |
Right angle quote, guillemot right |
» |
| #188 |
Fraction one-fourth |
¼ |
| #189 |
Fraction one-half |
½ |
| #190 |
Fraction three-fourths |
¾ |
| #191 |
Inverted question mark |
¿ |
| #192 |
Capital A, acute accent |
À |
| #193 |
Capital A, grave accent |
Á |
| #194 |
Capital A, circumflex accent |
 |
| #195 |
Capital A, tilde |
à |
| #196 |
Capital A, ring |
Ä |
| #197 |
Capital A, dieresis or umlaut mark |
Å |
| #198 |
Capital AE diphthong (ligature) |
Æ |
| #199 |
Capital C, cedilla |
Ç |
| #200 |
Capital E, acute accent |
È |
| #201 |
Capital E, grave accent |
É |
| #202 |
Capital E, circumflex accent |
Ê |
| #203 |
Capital E, dieresis or umlaut mark |
Ë |
| #204 |
Capital I, acute accent |
Ì |
| #205 |
Capital I, grave accent |
Í |
| #206 |
Capital I, circumflex accent |
Î |
| #207 |
Capital I, dieresis or umlaut mark |
Ï |
| #208 |
Capital Eth, Icelandic |
Ð |
| #209 |
Capital N, tilde |
Ñ |
| #210 |
Capital O, acute accent |
Ò |
| #211 |
Capital O, grave accent |
Ó |
| #212 |
Capital O, circumflex accent |
Ô |
| #213 |
Capital O, tilde |
Õ |
| #214 |
Capital O, dieresis or umlaut mark |
Ö |
| #215 |
Multiply sign |
× |
| #216 |
Capital O, slash |
Ø |
| #217 |
Capital U, acute accent |
Ù |
| #218 |
Capital U, grave accent |
Ú |
| #219 |
Capital U, circumflex accent |
Û |
| #220 |
Capital U, dieresis or umlaut mark |
Ü |
| #221 |
Capital Y, acute accent |
Ý |
| #222 |
Capital THORN, Icelandic |
Þ |
| #223 |
Small sharp s, German (sz ligature) |
ß |
| #224 |
Small a, acute accent |
à |
| #225 |
Small a, grave accent |
á |
| #226 |
Small a, circumflex accent |
â |
| #227 |
Small a, tilde |
ã |
| #228 |
Small a, dieresis or umlaut mark |
ä |
| #229 |
Small a, ring |
å |
| #230 |
Small ae diphthong (ligature) |
æ |
| #231 |
Small c, cedilla |
ç |
| #232 |
Small e, acute accent |
è |
| #233 |
Small e, grave accent |
é |
| #234 |
Small e, circumflex accent |
ê |
| #235 |
Small e, dieresis or umlaut mark |
ë |
| #236 |
Small i, acute accent |
ì |
| #237 |
Small i, grave accent |
í |
| #238 |
Small i, circumflex accent |
î |
| #239 |
Small i, dieresis or umlaut mark |
ï |
| #240 |
Small eth, Icelandic |
ð |
| #241 |
Small n, tilde |
ñ |
| #242 |
Small o, acute accent |
ò |
| #243 |
Small o, grave accent |
ó |
| #244 |
Small o, circumflex accent |
ô |
| #245 |
Small o, tilde |
õ |
| #246 |
Small o, dieresis or umlaut mark |
ö |
| #247 |
Division sign |
÷ |
| #248 |
Small o, slash |
ø |
| #249 |
Small u, acute accent |
ù |
| #250 |
Small u, grave accent |
ú |
| #251 |
Small u, circumflex accent |
û |
| #252 |
Small u, dieresis or umlaut mark |
ü |
| #253 |
Small y, acute accent |
ý |
| #254 |
Small thorn, Icelandic |
þ |
| #255 |
Small y, dieresis or umlaut mark |
ÿ |
![[Slashdot]](http://slashdot.org/favicon.ico)
![[Digg]](http://digg.com/favicon.ico)
![[Reddit]](http://reddit.com/favicon.ico)
![[del.icio.us]](http://del.icio.us/favicon.ico)
![[Facebook]](http://www.facebook.com/favicon.ico)
![[Technorati]](http://technorati.com/favicon.ico)
![[Google]](http://www.google.com/favicon.ico)
![[StumbleUpon]](http://www.stumbleupon.com/favicon.ico)
