What is HTML?

BSJP
Gemini 1606

What is HTML?

(Hyper Text Markup Language)

All the information contained within was obtained from www.freenetname.co.uk

What is HTML	HTML code	Your First Page

Changing background colour	Links to another page	Bold text

Inserting a horizontal rule	Text alignment	Font styling

Underlining/Italic text	How do colours work?	Mixing a colour

Inserting Images	Using background image	Inserting an Image

Relative paths	Links to other pages	Form HTML

Submit/Reset Button	Web Page Hit Counters	Text Box

How to create Forms	Form Fields	Field: e-mail

File paths explained	A table of colours	Text Area

Radio Buttons	Checkbox	Field: env_report

Necessary Form Fields	Field: recipient	Optional Form Fields

Field: realname	Field: redirect	Field: required

Field: sort	Field: print_config	Field: title

Field: return_link_title	Field: background	Field: bgcolor

Field: alink_color	Field: return_link_url	Field: text_color

Field: link_color	Field: vlink_color	Freenetname Contact Info

What is HTML
HTML is an acronym for Hyper Text Markup Language and is used to create all the pages that exist on the Internet. Put in very simple terms HTML is a way of generating a page of a book electronically. It is interpreted by a web browser so that words and pictures can be displayed on your computer screen. In fact a website could almost be described as an online book.

HTML code
There are two main parts to HTML. Text that is held within angle brackets and text that is not held within angle brackets. Just in case you are wondering what an angle bracket is they are the < and > brackets.
Any text incorporating these angle brackets is called an HTML TAG, this means it is part of the HTML language. Anything else is the text that is going to be displayed by the browser.
HTML commands normally have an opening and closing tag. For example.
<HTML> is the opening tag, where as,
</HTML> is the closing tag.
The only way to distinguish between the two is that the closing tag contains a forward slash, ie /. Anything that is held within an open and a close HTML tag is affected by that tag. This will become more apparent later in this guide. In this case the tags tell the browser that everything between them is part of a web page.

Your First Page
Your first page must be saved as "index.htm", this is the page that will be displayed whenever anybody visits your domain name. If you fail to have such a page all visitors will get is an error message.
There are a number of tags that must be included in every HTML page, these are the basic foundations without which the page won't work. These are:

<HTML> & </HTML>
This tells your browser that all information between these tags is HTML code, without these your page will not work.

<HEAD> & </HEAD>
Between these tags you will enter the <TITLE> tag for your web page and at a later stage tags called meta tags.

<TITLE> & </TITLE>
The text between these tags is the title of the page, this will appear in top bar of your browser. For example this page's title is "freenetname - Free domain name and ....."

<BODY> & </BODY>
This tag tells the browser that what follows is all the text and pictures that are to be displayed by the web browser. It also allows you to tell the browser what background colour to display. This is achieved by using the bgcolor="" command. As you will see in our following example the background colour is set to white. bgcolor="#ffffff"

On the right is
the order in which
the above tags
must be placed.

<P> & </P>
Any text that is entered between these tags will be treated as one paragraph, which means that there will be a lines space between the end of one paragraph and the beginning of the next.

Changing the background colour

<body bgcolor="#FFC300">
As explained previously, the <BODY> tag can be used to specify the background colour of the webpage. By changing the hexadecimal value contained within the bgcolor="" command to #FFC300 we are telling the browser to display an orange colour. If you do not include a background colour in your body tag the page will default to grey. For more information about colours including a table of colours and their hexadecimal number please see the "Colours" section.

Inserting a horizontal rule

<HR>
The <HR> tag tells the browser to display a horizontal line. This will simply draw a line across the webpage and is a way to split up sections of a page

Text alignment

align=
Align is an additional command that is added to the opening paragraph tag, <p>. It tells the browser where to align the text in relation to the browser window.

<p align="left"> - this is the default

Note: When you close the paragraph with </P> all text will then return to being displayed down the left hand side of the screen by default.

Font styling

<FONT> & </FONT>
This is the font tag. This tag allows you to specify the type of font you use, the size of the font and the colour of the font. This is achieved by adding additional command within the opening <FONT> tag. The additional commands are:
color=""
This will contain a hexadecimal value that specifies the colour that is to be used to display the text.
face=""
This will contain the font information. The names of the fonts that are to be used to display the text. You can have more than one type face, each seperated by a commar. The browser will then look for the first on the on the users system, if it is not there try the 2nd and so on.
size=""
This will contain the value that specifies the size that the text is to be displayed at. The size range is from 1 to 7, 2 is a good size for main body text.
Note: If you do not specify a font tag, the default font, size and colour will be used.

Bold text

<B> & </B>
This is the bold tag. Any text that is entered between these tags will be displayed in bold.
Example.
<B>Hello Everyone</B> - this will display Hello Everyone within your web browser.

Underlining text

<U> & </U>
This is the underline tag. Any text that is entered between these tags will be underlined.
Example.
<U>Hello Everyone</U> - This will display Hello Everyone within your web browser.

Italic text

<I> & </I>
This will make any text between the tags displaed in italics.
Example.
<I>Hello Everyone</I> - This will display Hello Everyone within your web browser.

html>
<head>
<title>My Home Page</title>
</head>
<body bgcolor="#FFC300">
<p align="center"><font size="4"><b><u><font color="#000000">My Website</font></u></b></font></p>
<hr>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="3">Hello,</font>
</p>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="3">Welcome
to my website. I hope you like it.</font></p>
<p align="right"><font color="#000000" face="Arial, Helvetica, sans-serif" size="7"><i>Rob</i></font></p>
</body>
</html>

Copy this code into Notepad, making any alterations you wish, and try it out for yourself. Once you are happy you understand move on to the next section.

<html>
<head>
<title>My Home Page</title>
</head>
<body bgcolor="#FFFFFF">
<p>My Website</p>
<p>Hello,</p>
<p>Welcome to my website. I hope you like it.</p>
<p>Rob</p>
</body>
</html>

That's all there is to it. Before you carry on try playing around with these elements to ensure you understand them. Remember to save your first page as "index.htm".

Colours - So how do they work?
Colours are made in much the same way as you would mix a colour using paint. You take the primary colours of Red, Green and Blue and mix various amounts of those colours together to create a new colour. Only instead of using your paint brush to select the amount of paint you use a hexadecimal number instead.
For those who are not familiar with Hexadecimal it uses all of our standard numbers ie 0,1,2,3,4,5,6,7,8 & 9, but also includes A,B,C,D,E & F to allow for more numbers to be created. Effectively the numbering system goes.

Decimal Value	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Hexadecimal Value	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Mixing a colour
In HTML we represent a colour using a six digit hexadecimal number. Please note you must always use the American spelling of colour, "color".
For example. color="#22AA33"
This 6 digit number can be further broken into the primary colours.
? The First two digits relate to how much RED is to be used in the colour.
? The middle two digits relate to how much GREEN is to be used in the colour.
? The Last two digits relate to how much BLUE is to be used in the colour.
The final colour depends on the amount of each of the primary colours you use. FF will use a lot of the colour, 00 uses none. This is probably best shown by looking at the colours black and white.
White = #ffffff
This means use all the red, green and blue possible. This will make a very very light colour, which appears white.

Black = #000000
This means use NO red, NO green and NO blue. This will make a very very dark colour, which appears black.
A table of colours and their Hexadecimal number.

Inserting Images.

Our webpage that we are building is a little bland. To brighten it up we will add some images to the page. Firstly will we change the background and then add an image to illustrate the text.

Using an image as the background

background=""
The background="" command allows us to specify an image we want to use as the background for the page instead of a single colour. After the command and within the quotes you need to specify the path to the image file and the name of the image file. This image is then tiled across the background of the webpage. This means that the browser will take one image and tile it to create a larger background image.
Note: If you are unsure about file paths this is explained later.

Inserting an Image

<img>
The <IMG> tag tells the browser that we want to display an image. To tell the browser what image to display you must add in an additional command to the <IMG> tag.
src=""
The src="" (source) command tells the browser the path to the file and the name of the file. The path to the file and the file name MUST be held within the quotes.
width="" & height=""
The width and height commands tell the browser how large the image is. The browser will then display the image at that exact size. These command are not necessary for displaying images and should only be used if you know the correct proportions for your image. They can be used to set the image to a size other than its actual size but this will result in a loss of quality.
border=""
You can have a border around your image set to a specific number of pixels. The default is 1 pixel but 0 is often prefferable.
<img src="images/fnn_linkbanner.gif" width="468" height="72" border="0>
This is the full tag for displaying an image. It tells the browser to display the image images/fnn_linkbanner.gif within the browser.

<html>
<head>
<title>My Home Page</title>
</head>
<body bgcolor="#FFFFFF" background="images/background.gif">
<p align="center"><font size="5"><b><u><font color="#3333FF">My Website</font></u></b></font></p>
<hr>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="3">Hello,</font>
</p>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="3">Welcome to my website. I hope you like it.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="3" color="#000000">Below is
Lovely banner.</font></p>
<p><img src="images/fnn_linkbanner.gif" width="468" height="72" border="0"></p>
<p align="right"><font color="#000000" face="Arial, Helvetica, sans-serif" size="7"><i>Rob</i></font></p>
</body>
</html>

Copy this code into Notepad, making any alterations you wish, and try it out for yourself. Once you are happy you understand move on to the next section.

File paths explained

Below is an image that represents a webserver. All your HTML files are stored in a file called "Public_html". Within this is another directory "images".

Say your webpage is to display the image "picture1.gif". Then the path to picture1.gif from the index.htm is as follows:
images/picture1.gif

This tells the browser to look within the directory "images" for the file "picture1.gif".

Relative paths

In our example image above you can see the various folders. Below is a table showing relative file paths.

Method	Folder that you are currently in.	File you want to reference	Path
1	Public_html	picture1.gif	images/picture1.gif
2	images	picture2.gif	picture2.gif
3	images	index.htm	../index.htm

Method 1.
images/picture1.gif - This tells the computer to move from the Public_html directory into the images directory then look for picture1.gif

Method 2.
picture2.gif - This tells the computer to look for picture2.gif in the current directory.

Method 3.
../index.htm - This tells the computer to move from the present directory to the one it is within ie from the images directory to the Public_html directory. Then look for the file index.htm.

Links to other pages.

As we saw earlier in this guide, you can have multiple pages on a website and you can link all these pages together. This will then allow visitors to your website to be able to browse or navigate their way around your site.

Adding a link to another web page

Firstly you need to have a page to link to. We have generated a simple page called page2.htm.

<html>
<head>
<title>My Home Page</title>
</head> <body bgcolor="##FFC300" background="images/background.gif">
<p align="center"><font size="4"><b><u><font color="#000000">Hello and welcome to my second page.</font></u></b></font></p>
</body>
</html>

When you have your page to link to you need to insert the Anchor tag within your HTML to tell the browser where to find that new HTML file.

<A> & </A>
The anchor tag has many uses, but we are only interested in using it to link to another HTML page. To do this you need to use an additional command with the tag, the HREF command.
HREF
Lets look at the HTML we will insert into our index.htm page.
<a href="page2.htm">Click here to see my second page.</a>
The <a href=""> part contains the name and path of the file you want to link to. In this example it's page2.htm.

Between the opening and closing anchor tags you insert the text that will appear as the link, which above is "Click here to see my second page." This is what the visitor to you webpage will click on.
Note: As you can see in our original HTML you can change the font and font size before inserting the anchor tag.

<html>
<head>
<title>My Home Page</title>
</head>
<body bgcolor="#FFC300" background="images/background.gif">
<p align="center"><font size="5"><b><u><font color="#3333FF">My Website</font></u></b></font></p>
<hr>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="3">Hello,</font>
</p>
<p><font color="#000000" face="Arial, Helvetica, sans-serif" size="3">Welcome to my website. I hope you like it.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="3" color="#000000">Below is a picture of where I live.</font></p>
<p><img src="images/fnn_linkbanner.gif" width="468" height="72" border="0">
</p>
<p><b><font size="5"><a href="page2.htm">Click here to see my second page.</a></font></b>
</p>
<p align="right"><font color="#000000" face="Arial, Helvetica, sans-serif" size="7"><i>Rob</i></font></p>
</body>
</html>

Copy this code into Notepad, making any alterations you wish, and try it out for yourself.

You now know the basics of creating a webpage, there is much more you could learn and will probably want to, such as using tables and frames. But for now you have enough to get you started.

How to create Forms

A popular feature of the World Wide Web are 'on-line forms'. These give your web site more user interactivity, by letting the people visiting your site fill in a form that will be sent to you in e-mail format. This process can be achieved using a CGI (Common Gateway Interface) script called FormMail, which is a located on our server.

The Feedback form above will allow users to enter their details within the various sections of the form, then send the contents of the form to you. The contents of the form will be sent to your e-mail address. Below you will see the actual HTML code that is used to generate the form.

FORM HTML

<form method="POST" action="http://www.users.freenetname.co.uk/cgi-bin/FormMail.pl" name="FeedBack_Form">
<input type="hidden" name="recipient" value="support@freenetname.co.uk">
<input type="hidden" name="sort" value="order:FirstName,Surname,emailaddress,Comments">
<div align="center"><center>
<table border="0" width="44%" bgcolor="#C0C0C0">
<tr>
<td width="41%" align="center"><strong>First Name</strong></td>
<td width="59%" align="center"><input type="text" name="FirstName" size="24"></td>
</tr><tr>
<td width="41%" align="center"><strong>Surname</strong></td>
<td width="59%" align="center"><input type="text" name="Surname" size="24"></td>
</tr><tr>
<td width="41%" align="center"><strong>E-mail Address</strong></td>
<td width="59%" align="center"><input type="text" name="emailaddress" size="24"></td>
</tr><tr>
<td width="41%" align="center" valign="top"><strong>Comments on my webpage</strong></td>
<td width="59%" align="center"><textarea rows="3" name="Comments" cols="24"></textarea></td>
</tr><tr>
<td width="41%"><div align="center"><center><p><input type="submit" value="Send Form" name="SendForm"></td>
<td width="59%" align="center"><div align="center"><center><p><input type="reset" value="Clear Form" name="ClearForm"></td>
</tr>
</table>
</center></div>
</form>

If you want to add a feedback form to your website

1. Highlight all the HTML code listed above.
2. Click Edit and Copy.
3. Click Start, Programs, Accessories then Notepad.
4. Select Edit and Paste.
5. Find the line; <input type="hidden" name="recipient"

value="support@freenetname.co.uk"> and replace the e-mail address held in the value= section with your own e-mail address.

Example: value="jbloggs@freenetname.co.uk"

6. Click File and Save As, then within the "File Name" box enter in the name you want to call the file and follow it by .HTM

Example: feedback.htm

7. Click Save.
8. Upload the page to your website using an FTP package.

Web Page Hit Counters
A page hit counter provides an easy and effective way of keeping track of the number of people visiting your site. A small image will appear on your page and increment each time somebody visits your page.

If you want a counter on your page.

1. Highlight the HTML shown below and click Edit and Copy. (there should be no spaces)

2. Click Start, Programs, Accessories, then NotePad.
3. Click File and Open and select the HTML page that you want to add the counter to.
4. Select where you want the counter to be displayed on the page, then click Edit and Paste.
5. Within the line of HTML you have just inserted find "df=count.dat" and replace the count part with your username.
E.G. If your username is jbloggs@freenetname.co.uk, then the text will read df=jbloggs.dat
6. Click File and Save.

Upload the file to your website. The counter will be displayed starting from Zero

Text Box
The text box can be set to any length along one line. The syntax for the above text box would be as follows:
Please Enter Your Name: <INPUT TYPE="TEXT" NAME="yourname" SIZE=10>

Text Area
The text area element is basically a larger version of the text box, text area's allow you to have scrolling rows and columns therefore allowing the user to enter more information.

The text area can be set to any amount of rows and columns. The syntax for the above text area would be as follows:
Please tell us any more relevant information:
<TEXTAREA NAME="info" ROWS=5 COLS=100></TEXTAREA>

Radio Buttons
Radio buttons are commonly used as option buttons i.e. to choose one option or another.
The syntax for the above radio buttons would be as follows:
Please Choose Yes or No:
Yes<INPUT TYPE="RADIO">
No <INPUT TYPE="RADIO">

Checkbox
The syntax for the above checkbox would be as follows:
Please Choose Red or Green:
Red<INPUT TYPE="CHECKBOX">
Green<INPUT TYPE="CHECKBOX">

Submit/Reset Button
The submit button is always necessary when designing a form, as without it the form will not be sent to anyone. The reset button clears all the fields and allows the user to start again. An example of these buttons is shown below.

The syntax for the above buttons would be:
<INPUT NAME="submit" TYPE="SUBMIT" VALUE="Submit This Form">
<INPUT NAME="reset" TYPE="RESET" VALUE="Reset">

FORM FIELDS
As well as the form elements it is important to have various form fields, these specify what to do with the form when it is submitted. The different form fields are listed below.

Necessary Form Fields
There is only one form field that you must have in your form, for FormMail to work correctly. This is the recipient field.

Field: recipient
Description: This form field allows you to specify to whom you wish for your form results to be mailed. Most likely you will want to configure this option as a hidden form field with a value equal to that of your e-mail address.
Syntax:
<input type=hidden name="recipient" value="e-mail@your.host.xxx">

Optional Form Fields
Field: subject
Description: The subject field will allow you to specify the subject that you wish to appear in the e-mail that is sent to you after this form has been filled out. If you do not have this option turned on, then the script will default to a message subject: WWW Form Submission

Syntax:
If you wish to choose what the subject is:
<input type=hidden name="subject" value="Your Subject">

To allow the user to choose a subject:
<input type=text name="subject">

Field: e-mail
Description: This form field will allow the user to specify their return e-mail address. If you want to be able to return e-mail to your user, I strongly suggest that you include this form field and allow them to fill it in. This will be put into the From: field of the message you receive.

Syntax:

Field: realname
Description: The realname form field will allow the user to input their real name. This field is useful for identification purposes and will also be put into the From: line of your message header.
Syntax:
<input type=text name="realname">

Field: redirect
Description: If you wish to redirect the user to a different URL, rather than having them see the default response to the fill-out form, you can use this hidden variable to send them to a pre-made HTML page.

Syntax:

To choose the URL they will end up at:
<input type=hidden name="redirect" value="http://your.address/to/file.html">

To allow them to specify a URL they wish to travel to once the form is filled out:
<input type=text name="redirect">

Field: required
Version Added: 1.3
Description: You can now require for certain fields in your form to be filled in before the user can successfully submit the form. Simply place all field names that you want to be mandatory into this field. If the required fields are not filled in, the user will be notified of what they need to fill in, and a link back to the form they just submitted will be provided.

Syntax:

If you want to require that they fill in the e-mail and phone fields in your form, so that you can reach them once you have received the mail, use a syntax like:
<input type=hidden name="required" value="e-mail,phone">

Field: env_report
Version Added: 1.3
Description: Allows you to have Environment variables included in the e-mail message you receive after a user has filled out your form. Useful if you wish to know what browser they were using, what domain they were coming from or any other attributes associated with environment variables. The following is a short list of valid environment variables that might be useful:
REMOTE_HOST - Sends the hostname making a request.
REMOTE_ADDR - Sends the IP address of the remote host making the request.
REMOTE_USER - If server supports authentication and script is protected, this is the username they have authenticated as. *This is not usually set.*
REMOTE_IDENT - If HTTP server supports RFC 931 identification, then this variable will be set to the remote user name retrieved from the server. *This is not usually set.*
HTTP_USER_AGENT - The browser the client is using to send the request. General format: software/version library/version
There are others, but these are a few of the most useful.

Syntax:
If you wanted to find the remote host and browser sending the request, you would put the following into your form:
<input type=hidden name="env_report" value="REMOTE_HOST,HTTP_USER_AGENT">

Field: sort
Version Added: 1.4
Description: This field allows you to choose the order in which you wish for your variables to appear in the e-mail that FormMail generates. You can choose to have the field sorted alphabetically or specify a set order in which you want the fields to appear in your mail message. By leaving this field out, the order will simply default to the order in which the browsers sends the information to the script (which isn't always the exact same order they appeared in the form.) When sorting by a set order of fields, you should include the phrase "order:" as the first part of your value for the sort field, and then follow that with the field names you want to be listed in the e-mail message, separated by commas.

Syntax:
To sort alphabetically:
<input type=hidden name="sort" value="alphabetic">

To sort by a set field order:
<input type=hidden name="sort" value="order:name1,name2,etc...">

Field: print_config
Version Added: 1.5
Description: print_config allows you to specify which of the config variables you would like to have printed in your e-mail message. By deafult, no config fields are printed to your e-mail. This is because the important form fields, like e-mail, subject, etc... are included in the header of the message. However some users have asked for this option so they can have these fields printed in the body of the message. The config fields that you wish to have printed should be in the value attribute of your input tag separated by commas.

Syntax:
If you want to print the e-mail and subject fields in the body of your message, you would place the following form tag:
<input type=hidden name="print_config" value="e-mail,subject">

Field: title
Version Added: 1.3
Description: This form field allows you to specify the title and header that will appear on the resulting page if you do not specify a redirect URL.

Syntax:
If you wanted a title of 'Feedback Form Results':
<input type=hidden name="title" value="Feedback Form Results">

Field: return_link_url
Version Added: 1.3
Description: This field allows you to specify a URL that will appear, as return_link_title, on the following report page. This field will not be used if you have the redirect field set, but it is useful if you allow the user to receive the report on the following page, but want to offer them a way to get back to your main page.
Syntax:
<input type=hidden name="return_link_url"
value="http://your.host.xxx/main.html">

Field: return_link_title
Version Added: 1.3
Description: This is the title that will be used to link the user back to the page you specify with return_link_url. The two fields will be shown on the resulting form page as:
<ul>
<li><a href="return_link_url">return_link_title</a>
</ul>

Syntax:
<input type=hidden name="return_link_title" value="Back to Main Page">

Field: background
Version Added: 1.3
Description: This form field allow you to specify a background image that will appear if you do not have the redirect field set. This image will appear as the background to the form results page.

Syntax:
<input type=hidden name="background" value="http://your.host.xxx/image.gif">

Field: bgcolor
Version Added: 1.3

Description: This form field allow you to specify a bgcolour for the form results page in much the way you specify a background image. This field should not be set if the redirect field is.
Syntax:
For a background colour of White:
<input type=hidden name="bgcolor" value="#FFFFFF">

Field: text_color
Version Added: 1.3

Description: This field works in the same way as bgcolor, except that it will change the colour of your text.
Syntax:
For a text colour of Black:
<input type=hidden name="text_color" value="#000000">

Field: link_color
Version Added: 1.3

Description: Changes the colour of links on the resulting page. Works in the same way as text_color. Should not be defined if redirect is.
Syntax:
For a link colour of Red:
<input type=hidden name="link_color" value="#FF0000">

Field: vlink_color
Version Added: 1.3

Description: Changes the colour of visited links on the resulting page. Works exactly the same as link_color. Should not be set if redirect is.
Syntax:
For a visited link colour of Blue:
<input type=hidden name="vlink_color" value="#0000FF">

Field: alink_color
Version Added: 1.4

Description: Changes the colour of active links on the resulting page. Works exactly the same as link_color. Should not be set if redirect is.
Syntax:
For a visited link colour of Blue:
<input type=hidden name="alink_color" value="#0000FF">
Any other form fields that appear in your script will be mailed back to you and displayed on the resulting page if you do not have the redirect field set. There is no limit as to how many other form fields you can use with this form, except the limits imposed by browsers and your server.

Some of the possible uses of this script are:

1) You want to have a form that will be mailed to you, but aren't sure how to write the scripting for it.
2) You are the webmaster of your site and want to allow users to use forms, but not to have their own cgi-bin directories, which can cause security risks to your system. You can set this script up and then allow all users to run off of it.
3) Want to have one script to parse all of your html forms and mail them to you

This document is provided for informational purposes only. Information provided in this document is provided 'as is' without warranty of any kind, either express or implied. The user assumes the entire risk as to the accuracy and the use of this document and as such freenetname cannot be held responsible for any loss resulting from the use of this instruction set. We recommend all-important data be backed up before completing any instructions, in-part or fully, held within this document.

freenetname
www.freenetname.co.uk
Customer Service: 0800 376 6910
Technical Support: 0800 376 6920