HTML TUTORIAL |
Hello, potential website builder, and welcome to my HTML tutorial, here to help you learn the basics of programming for a web page.
All of the tags included in this page are colour-coded, as explained in the below key.
I recommend that you view, copy and paste the source to avoid running up a huge bill. For more information you can mail me, but I may not be able to answer very complicated queries. I'd also appreciate any comments, corrections or additions to the tutorial. I hope my efforts help you build a page to rival all.
|
|
HyperText Markup Language (HTML) is based on a large selection of 'tags', with each tag performing a unique function. Most tags contain attributes, which customise the tag to do what you want it to do. Below are all the tags needed to start a simple document. Type them exactly as they are written, with < and > always surrounding each tag.
| <html> | Begins the document | </html> | Ends the document |
| <head> | Begins the document head | </head> | Ends the document head |
| <title> | Begins your page title | </title> | Ends your page title |
| <body> | Begins the body of the document | </body> | Ends the body of the document |
Here is a typical page layout, using all the above tags:
<html>
<head>
<title>Page Title</title>
</head>
<body>
......................
</body>
</html>
The <body> tag has these attributes. To use them, type the attribute(s) between the <body and the >.
| <body background="..."> | Insert an image to form your page's background image. |
| <body bgcolor="..."> | Insert a colour to form your page's background colour. |
| <body bgsound="..."> | Insert a sound to form your page's background sound. |
| <body bgproperties="..."> | Insert 'fixed' to prevent the background from scrolling. |
| <body leftmargin="..."> | Insert a value to determine the left margin of the page. |
| <body topmargin="..."> | Insert a value to determine the top margin of the page. |
| <body text="..."> | Insert a colour to determine the page's main font colour. |
| <body link="..."> | Insert a colour to determine the page's link colour. |
| <body vlink="..."> | Insert a colour to determine the page's visited link colour. |
| <body alink="..."> | Insert a colour to determine the page's active link colour. |
Tips
If a visitor to your page has chosen not to view images, they will not see your background image, so I recommend putting a colour in as well to safeguard. The last four attributes are to customise what things look like on your page - the default link colour is blue etc. These will not take effect outside of your page.
Obviously there is not enough information in this section to make anything much, so you'll have to refer to the other sections of this page for more detail.
Writing
You can write all the code in any basic text editor, for example Notepad, and when your page is finished and you want to save it, do so as *.html, *.htm or if you want a secure channel *.shtml or *.shtm.
Uploading
When you have finished your entire website you'll need to upload it onto your server - first make sure that they offer you free webspace. If they do, check how much it is - I've got 25mb, for example. If they don't, contact them - you might have to pay for the privilege. Then get a decent FTP program - I use WS_FTP - get it here. When you access it, connect to your server's FTP (File Transfer Protocol - contact them for details as the location varies from server to server) and in the left window open the folder with all your pages, images and sounds in. Click -> to send it to your server, and that's it - you're on the Web.
To make material move onto the next line, indent etc. another set of tags are needed:
| <pre> | Allows pre-formatted material (needs no tags). | </pre> | Ends pre-formatted material. |
| <p> | Moves any material down two lines. | </p> | Ends paragraphing. |
| <br> | Moves any material down one line. | </br> | Not essential. |
| <nobr> | Prevents material from moving down a line. | </nobr> | Ends paragraphing. |
The <p> tag also has optional attributes:
| <p align="..."> | Insert left/right/center to align the paragraphed material. |
| <p style="..."> | Insert a font style/size etc. for the material. [See Inserting text] |
| <p title="..."> | Insert text to pop up when you pass the mouse over . |
If you are not using a set of <pre> tags, only the first press of the Space Bar makes any difference - after that the space remains the same. To insert extra spaces, type (Non Breaking SPace - see Characters) as many times as you need. Also, numerous <p> tags have no effect, though you can have as many <br> tags as you want.
If you're unclear as to exactly what the <pre> tag does, then read on. If, in a document, you need a huge amount of paragraphing tags to make the layout look right, but want to save on script volume and time, just put the whole area of material after the <pre> tag and you can use the Space Bar, Tab and Enter effectively multiple times until you close the function with </pre>.
To insert text into a document there are three different tags, one for use to format the whole document, one for the majority of the text and the third for use when using small, unusual sections of text.
| <basefont> | Insert at the beginning of a document to define the default format. | </font> | Insert at end of a document to end the default format. |
| <font> | Inserts the majority of text. | </font> | Ends text formatting. |
| <span> | Inserts the minority of text. | </span> | Ends text formatting. |
The <span> tag should be used in the minority because the <font> tag is much simpler to write and also because Netscape cancels out the <span> tag each time you paragraph the text; although you cannot avoid its use altogether because size 1 and size 8 with the <font> tag are equal to size 8pt and size 30pt with the <span> tag, so text smaller than 8pt or larger than 30pt is only possible with the <span> tag.
The <font> and <span> tags have these attributes:
| <font face="..."> | Insert a font to determine the font of the text. |
| <font color="..."> | Insert a colour to determine the text colour. |
| <font size="..."> | Insert a number from 1 to 8 for the font size. |
| <span style="font-family: ...;"> | Insert a font to determine the font of the text. |
| <span style="font-size: ...pt;"> | Insert a point size to determine the font size. |
| <span style="color: ..."> | Insert a colour to determine the text colour. |
Netscape
Netscape doesn't recognise the <basefont> tag, so for each document place a normal <font> tag, identical except for the subtraction of the word 'base', underneath the <basefont> tag at the beginning of the document.
Font or Span?
Here's a comparison in tag simplicity between <font> and <span> for the same word. Both:
<font size="2" face="arial" color="green">HTML</font> and
<span style="font-family: arial; font-size: 10pt; color: green">HTML</span>
will give the same result of HTML - <font> is clearly quicker and easier to use.
Hexadecimals
Another way of using colours within text tags is to use Hexadecimal values. All of these values are in the form RRGGBB, or Red Red Green Green Blue Blue, so if you can mix colours it's not difficult to make your own values. 'Hexadecimal' replaces the usual 10 digit range with a 16 digit range, from 0 - 9 then A - F. The higher the value, the greater the colour intensity. Here are the most basic colour combinations:
| 1 | #000000 | 1 | #800000 | 1 | #008000 | 1 | #808000 | 1 | #000080 | 1 | #800080 | 1 | #008080 | 1 | #808080 |
| 1 | #C0C0C0 | 1 | #FF0000 | 1 | #00FF00 | 1 | #FFFF00 | 1 | #0000FF | 1 | #FF00FF | 1 | #00FFFF | 1 | #FFFFFF |
There are also a range of 'wrap' tags that you simply <>wrap<> around a word or phrase to change its style:
| <strong> | Change the following text to strong. | </strong> | End text formatting. |
| <b> | Change the following text to bold. | </b> | End text formatting. |
| <i> | Change the following text to italic. | </i> | End text formatting. |
| <em> | Change the following text to emphasised. | </em> | End text formatting. |
| <u> | Change the following text to underline. | </u> | End text formatting. |
| <sup> | Change the following text to supertext. | </sup> | End text formatting. |
| <sub> | Change the following text to subtext. | </sub> | End text formatting. |
Cascading Style Sheets
Another method of text formatting is by collecting all of your information in one paragraph of script, called a "Cascading Style Sheet" or CSS. For more information on this topic click here.
Images can be inserted into webpages to add colour or interest, to make the site appear more professional or simply to act as pictures to portray something that cannot be described by text alone. They require this tag:
| <img> | With the right attributes inserts an image. | </img> | Not essential. |
The <img> tag has these attributes:
| <img src="..."> | Insert the full name or location of the image. |
| <img lowsrc="..."> | Insert a temporary image for during loading (Netscape only). |
| <img width="..."> | Insert a value for the horizontal width of the image. |
| <img height="..."> | Insert a value for the vertical height of the image. |
| <img hspace="..."> | Insert a value for the horizontal space to the sides of the image. |
| <img vspace="..."> | Insert a value for the vertical space above/below the image. |
| <img border="..."> | Insert a value for the width of the border around it. |
| <img alt="..."> | Insert a message to come up when the mouse is held over. |
| <img align="..."> | Insert left/right/middle/top/bottom etc. to align the image. |
| <img ismap> | Defines an image as an image map. |
| <img usemap="#..."> | Insert a reference to link the image to an image map. |
| <img loop="infinite"> | Places an animation on an infinite loop (keeps repeating) |
| <img loopdelay="..."> | Insert a value for the delay between animation repetitions. |
Images on other sites
To save on your webspace, if you see an image you like on someone else's site you can use the same image without putting it on your server - in the 'src' (source) attribute type the exact location of it, with a prefix of http://... etc. To find the name of the image, right-click on it and select 'Properties'. However, although most images on the Net are freely distributed and may be used by everyone I strongly recommend asking the owner of the site before using their images - if the webmaster spent many hours making an image he/she could well object.
When you want to link material to other material, e.g. a line of text or image to someone else's site, another of your own pages or an item of media you need another tag:
| <a> | With the right attributes anchors material. | </a> | Ends anchored material. |
The <a> tag has these attributes:
| <a href="..."> | Insert the name and location of the material to link to. |
| <a title="..."> | Insert a message to come up when the mouse is held over a link. |
| <a href="mailto:..."> | Insert someone's e-mail address for the link to send mail to. |
| <a href="javascript:..."> | Insert any Javascript expression to be executed when the link is used. |
| <a href="...#..."> | Insert a page and a 'named' item on that page to link to. |
| <a name="..."> | Wrap a shortcut item and 'name' it with this attribute. |
| <a target="..."> | Insert a location in which to open the page, e.g. a frame. |
| <a target="_top"> | If the link is in a frame, makes the location full screen (no frames). |
| <a onMouseover="..."> | Insert what happens when you pass the mouse over the link. |
| <a onMouseout="..."> | Insert what happens when you remove the mouse from the link. |
Messages in the Status Bar
An example of <a onMouseover="..."> is <a onMouseover="window.status="..."> which makes a message appear in the Status Bar of your browser when you pass the mouse over. This is a Javascript command - you can put any other relavant command in as well.
Linking to areas on a page
If you're unclear as to exactly how the <a name="..."> and <a href="...#..."> tags work, then read on. If you want to be specific in what you link to, e.g. link to a certain word or image on a page rather than just the page itself, you use these tags. Wrap the image, word or sentence that is linked to with the <a name="..."> tag, giving it any reference, e.g. 1. You then make the link by wrapping with the <a href="...#..."> tag, filling in the name of the page and the reference respectively.
Image maps
If you want to link different areas of one image to different locations you can make an image map. This involves the use of several tags in conjunction with each other, each with attributes.
| <img> | With the right attribute defines an image as a map. | </img> | Not essential. |
| <map> | Defines the contents of the image map. | </map> | Ends the map contents. |
| <area> | With the right attributes defines a map region. | </area> | Not essential. |
The <img>, <map> and <area> tags have these attributes:
| <img ismap> | Defines an image as an image map. |
| <img usemap="#..."> | Insert a reference to the 'map' tag to tell the image which map to use. |
| <map name="#..."> | Insert a name for the map, making it the same as the 'usemap' name. |
| <area shape="..."> | Insert rect, circle or poly to define the shape of the anchored region. |
| <area coords="..."> | Insert the coordinates of the region (see below for details). |
| <area href="..."> | Insert the location for the region to be linked to as per normal. |
| <area nohref> | Makes an un-anchored region in the image map (add coords). |
| <area alt="..."> | Insert a message to come up as plain text if the image can't be seen. |
If you're still not sure how to make an image map, I don't blame you - read on. Begin with the 'usemapped' <img> tag, then add anywhere on the page the 'named' <map> tag, with as many <area> tags as are necessary between it and the </map> tag. Below is a basic example of this, with the three <area> tags displaying the necessary attributes for a rectangle, a circle and a variably sided polygon.
<map name="#...">
<area shape="rect" coords="left-x, top-y, right-x, bottom-y">
<area shape="circle" coords="center-x, center-y, radius-x">
<area shape="poly" coords="x1,y1, x2,y2 x3,y3, ...">
</map>
Defining areas
The 'coords' attributes are recorded where x and y are measured in pixels from the top left of the associated image. Also, if the x and y values are given with a percent sign as a suffix, the values should be interpreted as percentages of the image's width and height, respectively.
Tips
If two or more regions overlap the region defined first in the map definition takes precedence over subsequent regions. This means that 'area' elements with 'nohref' should generally be placed before ones with the 'href' attribute.
When you want to type something that the script uses but you don't want displayed you need to put it in 'comment' tags, which hides it.
| <!-- | Begins information to be hidden. | --> | Ends information to be hidden. |
Scripts included in 'comment' tags can be anything from telling the viewer how you created the page to Javascript or VBScript expressions.
Frames are used for splitting up the screen into separately scrolling sections, each an individual HTML document. Here are the necessary tags:
| <frameset> | Begins the frame settings. | </frameset> | Ends the frame settings. |
| <frame> | Customises individual frames. | </frame> | Not essential. |
| <noframes> | If the visitor can't view frames. | </noframes> | Ends the no frames settings. |
The <frameset> and <frame> tags have these attributes:
| <frameset rows="...%"> | Insert the percentage of the page for each row to use. |
| <...cols="...%,*"> | Insert the percentage of the page for each column to use. |
| <...frameborder="..."> | Insert the width of the border between frames. |
| <...framespacing="..."> | Insert the distance between all the frames. |
| <frame name="..."> | Insert a name for the frame to be referred to as, e.g. frame_1. |
| <frame src="..."> | Insert an existing webpage to fill the frame. |
| <frame scrolling="..."> | Insert yes, no or auto to determine how the frame is scrolled. |
Here is a typical frame layout, using all the tags and attributes:
<frameset rows="...%" cols="...%,*" frameborder="..." framespacing="...">
<frame name="frame_1" src="..." scrolling="...">
<frame name="frame_2" src="..." scrolling="...">
<frame name="frame_3" src="..." scrolling="...">
<frame name="frame_4" src="..." scrolling="...">
</frameset>
The frameset
You need to make a separate document to house the frameset, and you must also have all the pages it places in the frames already built and on the same server.
If a visitor doesn't have frames
In the <noframes> section, type whatever you want to come up if the visitor has no frames support and cannot view them, for example:
<noframes>
Sorry, this site uses frames which your browser doesn't support.
</noframes>
Tips
If you want, you could also add a link to the most important frame of the frame set, suggesting that if they want to go there instead they can. Any tags included in the <noframes> section will work, so you could create a whole <html> document with a background etc. instead of just a boring line of text.
Forms can be used for site visitors to send information via 'inputs' to the site owner and they can involve cgi, so your server must support cgi forms on your pages. You can also use them for more basic functions, so you could have a button purely for linking to another of your pages or to play a sound etc. To insert forms you need these tags:
| <form> | Begins a form definition. | </form> | Ends a form definition. |
| <input> | Defines the form inputs. | </input> | Not essential. |
| <textarea> | Defines a textarea. | </textarea> | Ends textarea definition. |
| <select> | Defines a selecter. | </select> | Ends selecter definition. |
| <option> | Defines a selecter menu item. | </option> | Not essential. |
The <form>, <input>, <textarea> and <select> tags have these attributes:
| <form name="..."> | Insert a reference term for the form. |
| <form method="..."> | Insert a method for the form to use, e.g. 'post'. |
| <form action="..."> | Insert the location of an action used for a method. |
| <input type="..."> | Insert a form definition, e.g. button; checkbox. |
| <input name="..."> | Insert a reference term for the input. |
| <input value="..."> | Insert the purpose of the input or what it displays. |
| <input onClick="..."> | Insert what the input does when clicked (Javascript). |
| <input onSubmit="..."> | Insert what the input does when submitted (Javascript). |
| <input size="..."> | Insert the length required for the input. |
| <input maxlength="..."> | Insert the maximum length allowed for the input. |
| <textarea rows="..."> | Insert the number of rows for the textarea. |
| <select name="..."> | Insert a reference term for the selecter. |
Here are some basic examples for a selection of forms:
Search Engine Form
Here's an example of a form. It searches for the text typed in the input with the specified search engine.
<form method="get" action="http://search.yahoo.com/bin/search">
<input type="text" size="60" name="...">
<input type="submit" value="Search">
</form>
CGI Feedback Form
Here's an example of a more advanced cgi form. It sends an e-mail containing the content of all inputs contained within the form to the mail address given.
<form method="post" action="http://home.clara.net/cgi-bin/formmail">
<input type="hidden" name="recipient" value="njc@clara.net">
<input type="hidden" name="subject" value="Feedback">
<input type="hidden" name="redirect" value="http://...">
<input type="hidden" name="sort" value="alphabetic">
......................
</form>
Hidden inputs define a function for the form to carry out without actually being visible on the page. To make this form work, replace my e-mail address with your own, replace "Feedback" with the subject you want the mail returned under and replace the ...... with suitable inputs to gather the information you want. You can also add an optional address of a page to send the information to. The replies will be sorted into alphabetical order. Below is a complicated example of this sort of form:
Forms in Netscape
Netscape will only recognise forms if they are wrapped in <form> tags - otherwise nothing will show up. This can be used to your advantage if you wish to include something like a PopUp menu button which will only work with Internet Explorer - simply type the <input> tag without wrapping it and it'll only show up in MSIE.
Tables have two uses - making information tables and framing material. Here are the necessary tags:
| <table> | Begins the table. | </table> | Ends the table. |
| <tr> | Begins a table row. | </tr> | Ends a table row. |
| <td> | Begins a table data. | </td> | Ends a table data. |
| <th> | Begins a table header. | </th> | Ends a table header. |
The <table> tag has these attributes:
| <table border="..."> | Insert the width of the border around your frame. |
| <table width="..."> | Insert the width of the table on the page. |
| <table height="..."> | Insert the height of the table on the page. |
| <table bgcolor="..."> | Insert a background colour for your frame. |
| <table background="..."> | Insert a background image for your frame. |
| <table bordercolor="..."> | Insert a colour for the border around your frame. |
| <table colspan="..."> | Insert the distance for the columns to span. |
| <table rowspan="..."> | Insert the distance for the rows to span. |
| <table cellspacing="..."> | Insert the spacing for in between the cells. |
| <table cellpadding="..."> | Insert the distance between the data and the cells. |
| <table align="..."> | Insert left, right or center to align the table. |
| <table valign="..."> | Insert top, middle, bottom or baseline to align the table. |
Some of these attributes can be used by the other tags as well, as follows:
| <tr> | align; valign; bgcolor | </tr> |
| <td> | width; height; align; valign; bgcolor; background; colspan; rowspan | </td> |
| <th> | width; height; align; valign; bgcolor; background; colspan; rowspan | </th> |
Here is quite an advanced table, using 6 attributes. See beneath for how to write it:
| Data 01 | Data 02 | Data 03 | Data 04 | Data 05 | Data 06 | Data 07 | Data 08 |
| Data 09 | Data 10 | Data 11 | Data 12 | Data 13 | Data 14 | Data 15 | Data 16 |
| Data 17 | Data 18 | Data 19 | Data 20 | Data 21 | Data 22 | Data 23 | Data 24 |
| Data 25 | Data 26 | Data 27 | Data 28 | Data 29 | Data 30 | Data 31 | Data 32 |
<table border="2" bgcolor="white" cellspacing="3"
cellpadding="3" bordercolor="blue" colspan="5">
<tr>
<td>Data 01</td><td>Data 02</td><td>Data 03</td><td>Data 04</td>
<td>Data 05</td><td>Data 06</td><td>Data 07</td><td>Data 08</td>
</tr><tr>
<td>Data 09</td><td>Data 10</td><td>Data 11</td><td>Data 12</td>
<td>Data 13</td><td>Data 14</td><td>Data 15</td><td>Data 16</td>
</tr><tr>
<td>Data 17</td><td>Data 18</td><td>Data 19</td><td>Data 20</td>
<td>Data 21</td><td>Data 22</td><td>Data 23</td><td>Data 24</td>
</tr><tr>
<td>Data 25</td><td>Data 26</td><td>Data 27</td><td>Data 28</td>
<td>Data 29</td><td>Data 30</td><td>Data 31</td><td>Data 32</td>
</tr>
</table>
| To table images or sentences to make them look more professional type: |
<table><tr><td>......</td></tr></table>
You can wrap anything with these three tags, and several tables wrapped around the same image in complementary colours can create a striking effect.
As HTML relies on certain characters such as greater/less than symbols, quotes and ampersands in the code browsers dislike them being typed directly into the text. Because of this, characters may be represented by an ASCII decimal entity in the code, which will appear on the webpage as if you had simply typed the character. Here is a selection of the most popular:
| < | < | Less Than symbol | > | > | Greater Than symbol | | Non Breaking SPace | |
| & | & | AMPersand | " | " | QUOTation mark | ¶ | ¶ | PARAgraph symbol |
| ® | ® | REGistered trademark | ™ | ™ | Trademark symbol | © | © | COPYright symbol |
| ¹ | ¹ | SUPerText 1 | ² | ² | SUPerText 2 | ³ | ³ | SUPerText 3 |
| £ | £ | POUND sign | « | « | Open angle brackets | » | » | Close angle brackets |
| ¼ | ¼ | Quarter symbol | ½ | ½ | Half symbol | ¾ | ¾ | Three quarters symbol |