Learn Standard HTML In A Day

Copyright © 1995 Martin Andresen and Martin W. Larsen


You are user 761.


Preface

This document is a part of a project that we are doing for our education at Roskilde Universitycenter in Denmark. So if you use this document we will be glad if you give us some feedback. At the bottom of this document we have included a fill-out form that we wish you will fill and submit your replies to us. The replies we get from the fill-out form will be used in our project to see how our document has worked out.

For this document we have developed an on-line HTML editor, so that you will be able to use the document along with the editor. To do this open a new window and open the following URL: http://knud.ruc.dk/basiswww/inter.htm.

HTML editor Select this link with the right mouse-button to open a new window with the HTML editor.
(If you are using the Netscape 2.0 Version do not use this link, as the editor will already be loaded and shown in the right window.)

Index

1. The Main Structure of A HTML Document
The HEAD structure
The BODY structure
Summary of HTML structure
Questions Chapter 1
2. Text Designing In HTML
Colours
Line Break
Horizontal Rule
Font Size
Physical Format Elements
Font Type Elements
Blink
List Elements
Questions Chapter 2
3. Expanding Your HTML Document (Links, Forms & Pictures)
Hyperlink Elements
Pictures In Your Document
Forms
Questions Chapter 3
4. Designing a Page

1. The Main Structure of A HTML Document

When you make your own page, there are several elements you need to include in your HTML code. The first element required is

<HTML>

which tells the browser that the following text is a HTML document. At the end of the document you will need to instruct the browser that the document ends. This is done by including the following element

</HTML>

A HTML document consists of a head and a body. The head structure is used to specify the title and other information about the document. Within the body, you can structure text into paragraphs and lists.


The HEAD structure

To define a head structure you must include the following elements in the document

<HEAD> ... </HEAD>

In a normal HTML document the only thing you will need to include in the head structure is the title of the document. This title is not shown on the WWW-window, but is shown on the top window bar. In order to include a title you will need to write the following elements

<TITLE>Place your title name between these elements</TITLE>


The BODY structure

The body structure actually contains the main component of a HTML document. You define the body structure by including the following elements

<BODY> ... </BODY>

All text, links, pictures and so on needed in the document are included between these elements.


Summary of the HTML structure

When writing your HTML document the elements described above are always required. If we put all the things together the final HTML document structure will look like this

<HTML>
<HEAD>
<TITLE>...Insert your title here...</TITLE>
</HEAD>
<BODY>
...Place your text, links, pictures and so on here...
</BODY>
</HTML>

Questions Chapter 1

1.1) Try to make a page with the title "Test 1.1" and a text which says "Hello World!!!".

Answer to Question 1.1.

2. Text Designing In HTML

In a HTML document all text which should be visible to the browser, must be included between the BODY elements. When you write your HTML document you can choose to only use plain text or make the document more interesting to read by including different kinds of fancy elements. In this chapter of the document we will explain the basic kinds of elements you can use in your HTML documents in order to shine up your text.


Colours

In HTML there are several commands available that make you able to change the colours in your documents. You are able to change the colour of the text, the background colour, and the colour of the links (see chapter 3 for information about links).

Text Colour
The colour of the text may only be set ONCE in your document, at the same location as your BODY-declaration. To change the text colour you must use the following syntax:

<BODY TEXT="#rrggbb">

The text colour is set using RGB hex-mode. This means that you have 256 (0-255) values available for red, green and blue.


Background Colour
The background colour of the document may only be set ONCE, at the same location as your BODY-declaration. To change the background colour you must use the following syntax:

<BODY BGCOLOR="#rrggbb">


Link Colour
The link colour of the document may only be set ONCE, at the same location as your BODY-declaration. To change the link colour you must use the following syntax:

<BODY LINK="#rrggbb">


Vlink Colour
The vlink colour, the colour the links changes to when you have already linked to the addressing page, of the document may only be set ONCE, at the same location as your BODY-declaration. To change the vlink colour you must use the following syntax:

<BODY VLINK="#rrggbb">


When you include one or more of the above colour settings they must be included right after the main BODY-declaration, like this:

<BODY>
<BODY TEXT="0000ff"> ; blue text colour.
<BODY BGCOLOR="000000"> ; black background colour.
<BODY LINK="ffff00"> ; yellow link colour.
<BODY VLINK="ffffff"> ; white text-colour.

The above code can also be programmed in a more compressed way:

<BODY>
<BODY TEXT="0000ff" BGCOLOR="000000" LINK="ffff00" VLINK="ffffff">


Line Break

When parsing the text the HTML-compiler does not see a return in the text as a line break. In order to make a line break in the document you should insert the element <BR>. This tells the compiler to force the text to be written at the start of the next line.


Horizontal Rule

When using a horizontal rule element <HR> in your document, a bar is used to split up the text. Alternatively, the SIZE command can be used along with the <HR> element to change the width of the bar:

<HR SIZE=10> ;This sets the size of the horizontal ruler to 10 Value between 0-100 are allowed.

The above code produces the following result:

Font sizes

HTML defines six different character sizes. When you want to change the character size, you will need to issue a starting element and a closing element. The text included between these elements are printed using the size given in the elements. The following list contains the six different character sizes you are allowed to use.

<H1>

Size H1

</H1>

<H2>

Size H2

</H2>

<H3>

Size H3

</H3>

<H4>

Size H4; Bold normal text

</H4>

<H5>
Size H5
</H5>

<H6>
Size H6
</H6>

When you issue the closing element of a font size HTML automatically forces a line break.


Physical Format Elements

There are three different physical format elements you can use when you write your document.

<B>Bold text</B>
<I>Italic text</B>
<TT>Teletype text</TT>


Font type elements

If you want to use different kinds of fonts, the following is a list of known font elements currently available to the HTML language.

<CITE>Citation</CITE>
<CODE>Code</Code>
<EM>Emphasis</EM>
<KBD>Keyboard</KBD>
<SAMP>Sample</SAMP>
<STRONG>Strong</STRONG>
<VAR>Variable</VAR>


Blink

If you want some of the text in your document to BLINK you need to include <BLINK> ... </BLINK> around the text you want to blink.


List Elements

HTML supports several type of lists. The different kinds of lists will be explained in this chapter.

Definition Lists
A definition list is a list of terms along with a set of definitions, e.g. explaining texts. The definition is printed on the next line using a tab. An example of a definition list is showed below.

Example 1
Term 1
Definition 1.1
Definition 1.2
Term 2
Definition 2.1
Definition 2.2
You may use as many terms and definitions as you wish. You will need <DL> ... </DL> elements around the entire list. <DT> is used to declare a term, whereas <DD> is used to specify a definition in the list. Below is the HTML-code used to make the list in example 1.

<DL>
<DT>Term 1
<DD>Definition 1.1
<DD>Definition 1.2
<DT>Term 2
<DD>Definition 2.1
<DD>Definition 2.2
</DL>


Unnumbered Lists
To define an unnumbered list you will need to include <UL> ... </UL> elements around the entire list. To specify an item in the list use the element <LI> and then enter the item description. An example of an unnumbered list is shown below:

This example is made by the following HTML-code.

<UL>
<LI>Item 1
<LI>Item 2
</UL>


Numbered Lists
To define a numbered list you will need to include <OL> ... </OL> elements around the entire list. To specify an item in the list use the element <LI> and then enter the item description. An example of a numbered list is shown below:

  1. Item 1
  2. Item 2
This example is made by the following HTML-code.

<OL>
<LI>Item 1
<LI>Item 2
</OL>


Nested Lists
When making lists it is possible include a list in a list. You can mix the different kinds of lists in any way you wish. This is shown in the following example:

This example is made by the following HTML-code.


<UL>
<LI>Menu Item 1

   <OL>

   <LI>Sub Item 1.1

   <LI>Sub Item 1.2

      <UL>

      <LI>Sub Item 1.2.1

      </UL>

   </OL>

<LI>Menu Item 2

</UL>


Questions Chapter 2

2.1) Make a page with the title "Test 2.1", change the text colour to yellow and the background colour to black. Next, make a centred headline using H1, which should say "Headline 2.1".

Answer to Question 2.1.

2.2) Add an unsorted list with three blinking menu items and two sub items in each menu item to the page you made in Q2.1.

Answer to Question 2.2.

2.3) Change the code in Q2.2 so that the first and the second sub items in the first menu item is replaced by a numbered list with two items.

Answer to Question 2.3.

3. Expanding Your HTML Document (Links, Forms & Pictures)

In this chapter we will explain how to expand your document, for example including links, forms and pictures.


Hyperlink Elements

When you wish to include a link in your document, you do this by specifying the following syntax.

<A HREF="Place the address of the link here">Write information about the link here</A>

The above syntax will look like this in a HTML browser (WARNING Do NOT press the link button).

Write information about the link here

When designing your document it is also possible to assign a variable name to some text in a document. This is used for addressing a particular section in a document, either from another document or from within the same document. The variable name is assigned by using the following syntax.

<A NAME="variable name">Some text</A>

This variable name is referenced by the following syntax.

<A HREF="document address#variable name">Description of link</A>

Example 2

<A HREF="doc.htm#docvar">Description of link</A>
...
Bla bla bla bla
...
<A NAME="docvar">Some text</A>

This produces the following result.

Description of link
...
Bla bla bla bla
...
Some text

Try pressing the 'Description of link' link to see the effect.

When writing the address of a link in the HREF statement you can also write an e-mail address instead of a http: address. This is done by the following syntax:

<A HREF="mailto:e-mail address"> Insert text here</A>

For example

Test e-mail to <A HREF="mailto:gr5a-131@emil.ruc.dk">the writers</A> of this document.

Which produces the following line

Test e-mail to the writers of this document.


Pictures In Your Document

If you want to include pictures (gif, tiff, jpg and mpg) in your document, you will need to convert your picture into one of the four picture standards. To show a picture the following syntax is required.

<IMG SRC="Insert filename of picture">

An example of how to set up a picture is shown below (note that the picture is placed at the address as our document).

<IMG SRC="ruc.gif">

This code will load the following picture.



Notice that it is not all browsers that are able to display graphics. If you include the ALT statement, like this

<IMG SRC="ruc.gif" ALT="Ruc-logo">

a browser which is not able to show graphics will print Ruc-logo instead.

Two statements, WIDTH and HEIGHT, can be used to alter the size of the picture. By setting the WIDTH and the HEIGHT statements to the sizes you want the picture to have, the browser will scale the picture to the size you have defined, either smaller or larger. Here is an example of how to set the width and height of Ruc-logo.

<IMG SRC="ruc.gif" WIDTH=90 HEIGHT=120>

Which will produce the following image.



If you wish to magnify or shrink the picture to a certain size, you only need to set the width, as the browser will scale the height to the same proportions.


If you wish to have some free space around the picture, HSpace (horizontal space) can be used to include space above and under the picture, and VSpace (vertical space) can be used to include space to the left and right of the picture. For example.

<IMG SRC="ruc.gif" WIDTH=90 HEIGHT=120 HSPACE=100 VSPACE=50>

Which will produce the following image.



If you wish to include text next to your picture you can use the statement ALIGN. If you set ALIGN to the right or left the picture will be positioned on the screen according to the ALIGN settings. If you select right the text will be placed to the left of the picture and vice versa.

Example of ALIGN=right.

<IMG SRC="ruc.gif" WIDTH=90 ALIGN=right>You can place your text, links and pictures here as you usually do, with line breaks etc.<BR>Bla bla bla bla bla bla bla bla...

Which will produce the following image.

You can place your text, links and pictures here as you usually do, with line breaks etc.
Bla bla bla bla bla bla bla bla...







ALIGN can also be used to specify where the text next to the picture should start; top, center or bottom. When you use one of these ALIGN settings only one line will be printed next to the picture. All further text will appear under the picture. When you IMG you can have two ALIGNs in the same sentence. The first specifies the location of the picture and the other specifies the location of the text according to the picture.

Example of ALIGN=center.

<IMG SRC="ruc.gif" WIDTH=90 ALIGN=center>You can place your text, links and pictures here as you usually do, with line breaks etc.<BR>This line appears under the picture

Which will produce the following image.

You can place your text, links and pictures here as you usually do, with line breaks etc.
This line appears under the picture

It is possible to include a picture in a link. This means that you can press the picture and then be linked to an address, just like normal text-links.

Example:

<A HREF="link.htm"><IMG SRC="ruc.gif" WIDTH=90 ALIGN=center> Press here</A> to view the text the link points to.

This code produces this link.

Press here to view the text the link points to.


Forms

To explain what forms are all about we have chosen to show you an example first.

Your name: 

Address:


Male
Female

Colour of eyes:


Hardware on your computer:
Keyboard
Soundcard
Joystick


DON'T press the Submit button, because the form points to an address that does not exist! (You are allowed to press the buttons and write in the fields)

In the following sections we will describe how to make the same stuff as in the form above.


Form
When making your own forms you have to decide which method of transmission (the data collected in the form) you will use. There are two different methods:

Get
When using this method the data is transmitted using the URL (the location window). When using this method the entire URI text string may not exceed 256 bytes.
Post
When using this method the data is transmitted onto a standard output port, which the receiving server can read. There is no documented limit of data-size when using this method.

If you want to read more about these methods of transmitting the data, use the links included at the end of this chapter.

To specify the address the data should be submitted to, you must include an ACTION statement in the form which should be given the address name.

The syntax for the creating the form structure is like this:

<FORM METHOD="method type" ACTION="address name">
... Insert the form elements here ...
</FORM>

Input
The input element is used for creating an input box (input field, radio-box and checkbox) with a variable attached to the event. In order to declare the variable you must include a NAME statement in the input element.

Input Field
In order to create an input field you will also need a SIZE statement that specifies the length of the input field (the name field in our example is created using an input field). The syntax of creating an input field looks like this:
<INPUT NAME="variable name" SIZE=length_of_input_field>
Checkbox
Checkboxes is a series of boxes that can be activated by clicking on the box. When using this method more than one checkbox can be activated at the same time (the hardware configurations in our example are created using checkboxes).
<INPUT NAME="variable name" TYPE=CHECKBOX VALUE="value">
Radio-box
A radio box is a list of checkboxes where only one can be activated at the same time (the male/female choices in our example are created using radio-boxes). When creating a radio-box you will need a TYPE statement initialised to Radio and a VALUE statement declaring the value the variable will be set to if this radio-box is selected.
<INPUT NAME="variable name" TYPE=RADIO VALUE="value">


Roll-down menus
The eyes menu in our example is an example of using roll-down menus. These are created by using the SELECT element. A select have a variable attached just like with the input element. Between the SELECT elements you can place OPTION elements which specifies different values you can select in the roll-down menu.

<SELECT NAME="variable name" >
<OPTION>Option 1
<OPTION>Option 2
<OPTION>Option 3
</SELECT>

Textarea
The address field in our example is an example of using textarea. The textarea element creates an input field with a specified width (COLS) and height (ROWS). A textarea elements must also have a variable attached just like with the input element.

<TEXTAREA NAME="variable name" COLS=width_of_textarea ROWS=height_of_textarea>
... If the textarea should contain text when loaded write it here ... </TEXTARE>

An example
To give you an example of how to combine these features we will print the code from our form example above.

<FORM METHOD="POST" ACTION="dumme svin!!!">
Your name: <INPUT NAME="name" SIZE=50>
Address: <TEXTAREA NAME="address" COLS=50 ROWS=4></TEXTAREA><BR><BR>
Male <INPUT NAME="sex" TYPE=RADIO VALUE="male"><BR>
Female <INPUT NAME="sex" TYPE=RADIO VALUE="female"><BR><BR>
Colour of eyes:<BR>
<SELECT NAME="eyes">
<OPTION>Blue
<OPTION>Brown
<OPTION>Green
</SELECT><BR><BR>
Hardware on your computer:<BR>
<INPUT NAME="hard" TYPE=CHECKBOX VALUE="keyboard"> Keyboard<BR>
<INPUT NAME="hard1" TYPE=CHECKBOX VALUE="sound"> Soundcard<BR>
<INPUT NAME="hard2" TYPE=CHECKBOX VALUE="joystick"> Joystick<BR><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
<INPUT TYPE=RESET VALUE="Clear">
</FORM>

When you submit data from a form, the data will be transmitted to the address specified in the ACTION statement. When submitting the data the browser encodes it and then transmits it to the receiving server. Then the receiving server will activate the program (this program is called a cgi program) specified by the ACTION statement. This program may not be a HTML document, but a server-executable program written for decoding and transforming the data received by the server. To write such a program we suggest that you use the UNIX version of the programming language PERL. Below we have some links that should help you learn programming cgi-scripts using PERL for UNIX if you are interested. Notice that it is not necessary to learn how to program cgi scripts in order to make a page, but forms CANNOT be used without using cgi-scripts.


Questions Chapter 3

3.1) Make a page with the title "Test 3.1", change the text colour to black, the background colour to red, the link colour to yellow and the vlink colour to blue. Next, make a centred headline using the font italic, which should say "Headline 3.1". Make a link to this page (http://emil.ruc.dk/~gr5a-131/doc.htm) with the description "Link to the best page on World Wide Web".

Answer to Question 3.1.

3.2) Add to Q3.1 a linked e-mail, using mailto (send it to your own e-mail address). Change the link in Q3.1 so that a picture is displayed to the right of the text, which should be placed to the left-middle of the picture (if you do not have a picture of your own make a reference to our picture of Ruc-logo; http://emil.ruc.dk/~gr5a-131/ruc.gif)

Answer to Question 3.2.

3.3) Make a new page as you wish, and then add a form looking like this:

Credit Card ID (This input field is size 20. Remember: Never send your ID to persons you do not know or do not trust!!!)
Expiration date (Size is 10)

Master Card
Visa

Select items to buy:
Keyboard
Soundcard
Joystick
Motherboard
Monitor
Cabinet

Colour of cabinet:



Answer to Question 3.3.

4. Designing a Page

When you want to make your own page it is always a good idea to make a sketch of what your document should include. If you do this every time you make a new page, it is much easier to program the page in HTML.

HTML-structure
In general, when you write your own page using HTML, the first thing you should do is write the standard HTML structure as described in Chapter 1. Remember to always give your document title in the HEAD-structure a meaningful name, so that other users always knows what your page contains.

BODY-structure
When you selects the colour settings for your document, it is very important that you choose colours that is easy to distinguish. Also notice, that even though some colours looks nice on your monitor, sometimes they will appear smeared on bad monitors or monitors with higher resolutions. In general, it is better to choose dark colours on light backgrounds than the opposite.

One of the most important things when creating documents is that the document should capture the viewer. This includes making a good looking and explaining headline. If the viewer is not captured right away by the page, they will almost always go on to another page very fast.

It is important that you make your page too crowded. This means that you should not have pictures thrown up all over the place but only where it is necessary.

Be sure to include your e-mail address so that people that use your page have the opportunity to comment your page.
If you have any comments about this great document, e-mail your comments to one of the authors.

Martin W. Larsen

Martin Andresen


The writers of this document hereby grant you the right to down-load this document for personal use only, but it is illegal to use any material (except the picture of the Ruc-logo, which does not belong to us), fully or parts of, contained in this document for use with public distribution, without proper written approval given by the authors of the document.

Fill-Out Form


How many hours a day do you spend on WWW:
0-1 1-5 5-

Have you programmed HTML before:
Not at all I know some commands I'm an expert

If you have programmed HTML before, please specify the things you knew before reading this document:


Do you feel that you are able to program your own HTML-documents after reading this document:
Yes No

If your answer is no please specify why


Do you think that it is convenient that you can try and see what the different kinds of elements do (for example the form example):


Would it have been as understanding on paper, than by using WWW hypertext?
Yes No



Did you solve the questions?
None Some All

If you solved any of the questions, have they helped you understand what we have explained in that chapter?
Yes A bit No

Did it help you that we included answers to all our questions?


Do you think that the on-line editor helped you in any way?

Do you think the language used in this document is well written? (Is it too technical):


If you have any other comments (good or bad) about the document, please write them here?

Please enter your e-mail address here, if you wish, so that we can contact you if we have any questions about your answers: