"Materials used in this course are the property of the author. These lessons may be used only by course participants for self-study purposes. Application for permission to use these materials for other educational purposes such as for teaching or as a basis for teaching should be directly submitted to the author."
This lesson deals with simple HTML coding. The same material is covered in Chapter 10 of the textbook.
There are many places on the Internet offering similar tutorials. Search the Net for "HTML" and "learning", and you will find lots of relevant home pages, e.g. Yahoo: Tutorials.
Lesson published 02.04.97
This lesson will teach you to make:
The lesson ends up with an Exercise
HTML is a language which has gone through incredible development - just as all technology dealing with the WWW has. Up to now, most HTML code has been written according to 2.0 specifications. Since May 1995, HTML 3.0 has existed as a so-called "Internet Draft". The 3.0 version of HTML was never approved - as the development went faster than the standardization process. In the spring of 1996, World Wide Web Consortium - W3C and the most important participants in the market agreed to launch a proposal for HTML 3.2. The proposal came on 9 September and exists now as HTML 3.2 Reference Specification - Internet Draft. On 14 January, W3C named HTML 3.2 a W3C Recommendation. This means that it is regarded as stable from W3C's point-of-view and that is is expected to become an approved Internet standard (Internet RFC) within a short time.
Tip for Modem Users:
It's a good idea to have the HTML specification available when you are working with HTML coding. If you use a modem, you should download the specification and save it on your own harddrive. It's saved as one file with internal links. After saving it, open the local file and create a bookmark. Now you can use the specification without being connected to the Internet.
HTML is a language used to mark the desired display of text and other information. The language is simple so that it is possible to learn the most important elements over a short period of time, and one does not require a special tool (program) to create HTML code. Programs developed for writing HTML code - HTML editors -, are written because the code can be produced more efficiently.
HTML is intended for display of information on different types of equipment. Therefore, HTML does not specify the exact presentation form of the information, but provides criteria for presentation.
Example:
A HTML page may contain a picture with high resolution. This picture ought to be presented with full resolution when the client runs on equipment capable of handling it. If the client has limited resolution on the screen, or for example, the screen is black-and-white, the client will adjust the resolution or graytone scale.
In the same way, some clients use different fonts, screen sizes, etc. Therefore, the presentation of the same HTML code can vary from one machine to another. HTML is designed with the intention of displaying information on both graphics supported screens as well as text screens, and for that matter, on special equipment (braille).
HTML defines the structure and criteria for presentation -- while the client program makes the most out of this definition on the existing presentation medium.
The following passage is based upon HTML 3.2 specification and is partially a copy of it. I will not go into details here -- use the textbook, Internet or HTML 3.2 Reference Specification to find the details. The mechanisms described below are those most useful for completing the lesson's exercise.
HTML uses so-called "tags" or markers to mark the desired presentation of the information. The tags are written with greater and less than signs on either side:
<TITLE>Cake Recipes</TITLE>
The actual tags will not show when the clients display a HTML document, but they do provide the client with criteria for the presentation. If you choose the View/Source... menu on your client (for example, Netscape), you will see the HTML code for the page you have up at the moment. Try this!
Often, the tags appear in pairs such as in the example above. The start tag <TITLE> says that a title begins here. The end tag </TITLE> marks the end of the title. Note that the end tag differs from the start tag only by a slash ("/") before the text.
The tags may be written in either upper or lowercase.
Some tags may appear alone, that is with just the start tag. An example would be to mark the separation between two paragraphs:
<P>A new paragraph begins here. The character "P" is an abbreviation for paragraph. <P>This is the beginning of the next paragraph.
HTML documents have the following basic structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN"> <HTML> <HEAD> .... .... </HEAD> <BODY> ... ... </BODY> </HTML>
The <!DOCTYPE> declaration must come first in order to distinguish HTML 3.2 from earlier versions of HTML.
The HEAD tags with code in between define what we call the HEAD element. Information about the entire document is provided here. The TITLE element is obligatory and shall be placed here. Other tags which can also be added here provide information on linking of standard headers, use of tools, use of standard templates, etc.
The BODY element contains the code for presentation. Both the HEAD and BODY elements are surrounded by the tags <HTML>...</HTML>.
The start tags can have attributes:
<IMG SRC="pictures/landscape.gif">
This is a tag which states that an image shall be shown here. The attribute "SRC=" describes where the image file is located.
Comments in HTML are written with a start tag beginning with <!-- and ending with -->, example:
<HEAD> <TITLE>Mother's Meatballs</TITLE> <!-- file:meatballs.html, Date: 5.5.95, Per Borgesen --> </HEAD>
All good programming is peppered with comments about how the program functions!
Here we will go over the most rudimentary elements of a HTML page. If HTML is new for you, I recommend that you read and try out the functions at the same time.
In the exercises section you will find a description on creating HTML code.
The TITLE tag is used in this document as follows:
<HEAD> <TITLE>PPI - Lesson 4</TITLE> </HEAD>
This tag contains the title of the page, which is displayed by the client at either the top of the window or at the top of the page if you send the page to print. This tag is obligatory, and must be placed inside the head element.
There are six heading levels, H1 to H6. The client displays the headings using larger fonts than regular text; H1 is the largest heading and H6 the smallest. Point 4.2 in this text is written in H3 format, while H4 is used for Point 4.2.2. Try this yourself!
Example:
<H1>Meatballs</H1> <H2>Ingredients:</H2>
In HTML code, paragraphs are marked by <P>. NB! A carriage return in HTML code will be ignored by the client. Using <P> will result in a new line plus a little vertical distance from the previous paragraph (whitespace). You may use the ending tag </P>, but it isn't necessary.
If you wish to start a new line without doublespacing, use the break tag <BR>. These can also be used in pairs -- <BR> </BR>.
Normally, text is left justified and the client breaks the lines so that the text fits the current window. It is possible to override this by using the ALIGN attribute in the heading and paragraph tags:
<P ALIGN=center>This is centered text.</P> <H1 ALIGN=right>This is a right justified heading.</H1> <NOBREAK>This text will not be broken even though the line may be longer than the window's width.</NOBREAK>
The web client will normally ignore multiple spaces and tab characters.
Sometimes keeping the format of a text is desirable. This can be used, for example, when presenting program code or ASCII tables and can be achieved by using <PRE> and </PRE>.
Example:
<PRE> Name -telephone- ----- ----------- Per 7337 3456 Kari 7374 7576 Ola 7335 4556 </PRE>
This table will maintain its columns when displayed by the client. HTML 3.2 has special functions for tables in addition to <PRE>. (All code examples in this lesson are pre-formatted.)
Text can be formatted with the following tags:
<B>This text is written in bold.</B> <EM>This text is written in italics.</EM>
Example:
This text is written in bold.
This text is written in italics.
Blank spaces in HTML are only seen as word separators. Several spaces in a row will be ignored. You cannot use blank spaces to make whitespace. Tabs will not work either.
If you need whitespace on the page, tables ought to be used (see next lesson).
There are 3 types of lists in HTML:
Unordered lists with start and end tags <UL> ...</UL>: Each element in the list begins with the tag <LI>. This is a list which places bullets at the beginning of each line. These can be suppressed or exchanged for other symbols by using attributes -- see the HTML specification.
| Example, HTML code: | Result: |
<H4>Pancakes</H4> <UL> <LI>egg <LI>flour <LI>milk </UL> |
Pancakes
|
Ordered lists with start and end tags <OL> ...</OL>: This is a list which automatically numbers the lines starting with the number 1.
| Example, HTML code: | Result: |
<H4>Pancakes</H4> <OL> <LI>eggs <LI>flour <LI>milk </OL> |
Pancakes
|
Attributes can assign alternative types of numbering or other start values. In the example below, the TYPE attribute with the value "I" means that roman numbers shall be used. The START attribute says that the numbering shall begin with 5.
| Eksempel, HTML-koden: | Gir resultatet: |
<H4>Pancakes</H4> <OL TYPE="I" START="5"> <LI>eggs <LI>flour <LI>milk </OL> |
Pancakes
|
Definition lists with start and end tags <DL> ...</DL>: This is a list which has a left justified term and which is followed by the definition which is, preferably, indented.
| Example, HTML code: | Result: |
<H4>Pancakes</H4> <DL> <DT>eggs <DD>2 eggs per 1 liter of milk <DT>flour <DD>all-purpose or a blend of different types <DT>milk <DD>ca. 1 liter per 4 people </DL> |
Pannekaker
|
All the lists can be equiped with a list header by using the following tags: <LH>...</LH>.
This is one of the central characteristics of HTML, which makes it possible to create hypertext. You have already used links many times, so you know how they work: when you click (your end of) the link, you will receive the information on the other end of the link.
In order for a link to function, we must "anchor" it. The tags for an anchor is the start tag <A> and end tag </A>.
The start tag has an attribute which contains the link itself:
<A HREF="link">anchor text</A>
Example:
A link in HTML looks like this:
If you want to read about <A HREF = "http://www.idb.hist.no/mecpol/"> the MECPOL program</A> you can...
The actual link (or pointer) is:
HREF = "http://www.idb.hist.no/mecpol/"
The text between the tags <A> and </A> is used to mark the text the user can click upon in order to use the link.
On a client, a link looks like this:
If you want to read about the MECPOL program you can...
A link can either be a absolute URL or a relative URL.
This URL starts with the protocol name, continues with the name of the server and then the directory and filename:
| Protocol | Server | Path | File |
| http | www.idb.hist.no | fu/mecpol/poi | index.html |
Written with the proper delimiters, the absolute URL looks:
http://www.idb.hist.no/fu/mecpol/poi/index.html
This address is a complete identification of the information object.
A relative URL begins with the name of the object from the point at which it is named. The resulting URL is: The current server and directory + the relative URL.
In order to refer to files in the same directory it is enough to just give the filename.
Relative URLs make it simple to move sets of information objects (HTML files).
We can also make links to information objects which are not HTML code.
Example:
If you want to distribute information in the form of text, but do not want the recipient to be able to edit it, you can publish it using postscript code.
Here is a <A HREF = "http://www.idb.hist.no/mecpol/program.ps">postscript version of the MECPOL program</A> in case you would like to print it out.
Here the HTTP will send over a postscript file to the client. Normally, the web clients cannot display postscript code, so it will ask the user if she will save the file to disk. The file can then be sent to a postscript printer which will print the text (and any pictures included with the text) in the format the author has created.
(For those who are not familiar with the concept of "postscript", it is information coded in a special format. The print codes cannot easily be translated with wordprocessor.)
The tag <HR> (Horizontal Ruler) can be used to separate the displayed information. The default attribute is a single line which spans the window's width, but it is possible to use attributes to create other variations of separators, among others to set up a link til a graphic. An example of a separator follows:
Images in HTML code can be of types .gif or .jpeg (.jpg). In the simplest form, an IMAGE tag is used to define where the image shall be placed in the text and where the image data (gif-file) is saved.
Example:
<IMG ALIGN=MIDDLE WIDTH=350 HEIGHT=103 SRC="uninett.gif" ALT="UNINETT">
The example shows the <IMG> tag with the following attributes:
Images which can be clicked can be made by putting the image between a set of anchor-tags, like this:
<a href=....><img src=....></img></a>
If you want to make clickable images where different parts of the picture links to different places you will have to use attributes such as usemap og ismap. We will come back to this in Lesson 5.
A little advice in connection with images: Avoid creating a large image on the opening page. Large images take a long time to download over a modem and can be very irritating for the recipient. It uses up her time and, in addition, she has to pay the telephone line hookup. Evaluate the information value of the image before using large images.
The exercise for this lesson is to produce HTML code in order to present a three-day festival.
Create the HTML code in an editor. You can use Wordpad/Notepad, but for those who would rather try a simple HTML tool, many can be found at Strouds:
Windows95 editors
Windows 3.x editors
After you have written a little with code, you ought to:
NB! So that steps 1, 2 and 3 above shall be efficient, you ought to teach yourself the following:
You shall create HTML code to advertise for a three-day festival. The festival shall have a program with at least 3 arrangements each day. The events shall be a blend of concerts, exhibits and seminars.
Make:
Make a point of creating easy to understand navigation possibilities for the user. Use a few simple images:
|
|
|
|
| theater | dinner | concert | seminar |
In addition to HTML code, you shall turn in a text file which briefly documents the pages' contents and reciprocal connections.
Due date: 15.04.97
If you have completed the last exercise, that is, you have a running web-server, you ought to try reading your HTML files via http. We will configure the server in Lesson 6, but you can try placing the festival home page on:
| C:\httpd\htdocs | if you run Windows 3.x and win-httpd |
| ...\website\htdocs | if you run Windows95 and WebSite |