Graphics caption here
Copyright © by Mark Baker 1996
Copyright waiver
Return to MarkChrisSoft home page
I was surprised how easy it was to create my own home page, finding all the information and software that I needed on the Internet, with good guidance from my service provider, RM Internet for Learning. However, it did take a certain amount of trial and error and hunting through various web sites, to find all the bits and pieces that I needed. This page is intended to distill the results of my initial research and provide budding web authors with a quick and easy "get you started" guide. It is certainly not a comprehensive HTML manual.
Web pages are written using HTML (HyperText Markup Language), which consists of plain text, with certain formatting and control commands embedded using LESS THAN and GREATER THAN symbols, eg. <hr> . A page can include text, links to graphics files in .gif or .jpeg format, links to other sections of the page, links to other web pages (your own or other people's) and links to other Internet resources, eg. e-mail. Therefore your text can be broken up with pictures and click-on links that take you automatically to other sections or pages, or load up the viewer's email software, with your email address automatically inserted.
Although HTML is an agreed standard, not all browser programs will behave in exactly the same way, when displaying your pages, so do expect some variation! For example, having bold and italic text is not included in the original standard. Some browsers will display the text as both bold and italic, whilst others will display one style and ignore the other. As new HTML standards appear, older browsers will not recognise all the enhanced features that are offered. This page is based on HTML 2 and is now somewhat out of date. However, I feel that it forms an excellent introduction to HTML coding and have decided to retain it. I think it offers useful background material, even for those of you who will be creating your pages using WYSIWYG editors, such as HotMetal, or using Save As... options in programs such as Microsoft Word
To create a page you need a text editor or HTML editor, an Internet browser such as Netscape, to test the page and see what it will look like, and an FTP (file transfer protocol) program to copy your page(s) onto your Internet service provider's computer.
A web page could be written using an ordinary text editor such as DOS Edit or Windows Notepad. A specialised HTML editor does make the task easier by helping you put in the formatting commands and linking with your browser to allow you to test your pages at the press of a button. WebEdit is perhaps the best know HTML editor and available as shareware, I use HTML Assistant which is available free of charge.
I use Netscape as my browser and there is a good chance that you are using it to view this page! It is the best known Internet browser program and can be used free of charge by anyone concerned with education (teachers, students, etc.) or charitable non-profit organisations. Netscape includes a View Source option which allows you to see your currently loaded page in its raw HTML text-only state and this is useful in seeing how certain effects are achieved.
You can write and test your pages on your own computer. If you develop your pages using a DOS based system, then your pages will have a .HTM filename extension. If your service provider uses a UNIX system (which is very common) you will have to change all your filename references to the four letter .HTML extension instead. Once you are happy with your pages, they must be copied onto your Internet Service Provider's server (computer). FTP (file transfer protocol) software is needed for this. I use WS_FTP which is available free of charge to non-commercial users, and is very easy to use.
The page is enclosed with html tags, with the head tags defining the headings and the body tags marking the rest of your page, something like this:
<html> <head> <title>My Home Page</title> </head> <body> *********************************** The rest of the page goes here *********************************** </body> </html>
I have created and viewed pages with Netscape Navigator, without using the html, head and body tags. However, some browsers require them to be present, so they should be included.
Your home page (the first page that is loaded when people visit your area) must be called index.html . This often acts as a menu, with a list of options linking to your other pages.
Here is an example of the beginning of a web page:
<head> <title>IT Lesson Ideas and Shareware for Teachers</title><p> </head> <body bgcolor=#FFFFF0> <h1>MarkChrisSoft - Teaching Material and Software</h1> <p> <hr>
The title tags enclose the page's title, but this does not appear on your page. It is displayed on the title bar of the viewer's browser and it is used by search programs and elsewhere, to determine what your page is about, so it should contain key words that are indicative of the contents.
The p command is one of the few that is used without a corresponding /p tag. It is used to mark the end of a paragraph. (Note: This may change in later versions of HTML, with each paragraph enclosed in a p , /p pair.) hr is another, it stands for horizontal rule and produces a line across the page, to rule off between sections.
Multiple spaces and normal line breaks are stripped out by Internet browsers, although they can be used when you write your HTML files, to make them more readable during the construction process. You can force a line break by using <br> .
The h1 tag specifies the type of heading. There are six levels of headings, h1 to h6. Headings are usually shown in bold with h1 having the largest font size and h6 the smallest.
I am not sure what else the head tags may enclose, but clearly they specify the page headings. The <body bgcolor=#FFFFF0> specifies the background colour as cream. The first 2 characters (FF) control the amount of red, the next 2 (FF) the amount of green and the last 2 (F0) the amount of blue.
The F represents 15 in hexadecimal, hexadecimal digits being 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E and F. (Hexadecimal a number system using base 16, where decimal is a number system using base 10 and binary is a number system using base 2.)
Alternatively, if you want to create your own background pattern, you can do this by creating a .gif file in the same directory as the page. Suppose you had a background design called myback.gif . You must then replace the line
<body bgcolor=#FFFFF0> with:
<body background=myback.gif>
Your design will then be tiled across the page. NB: This feature is not supported by all browsers.
The standard text styles can be switched on and off by surrounding the text with the appropriate <> and </> pair.
<b>This would be seen in bold</b> <i>This would be seen in italics</i> <u>This would be seen underlined</u>
Appearing like this:
Here is an example contents paragraph:
<h2>Contents</h2><p> <ul> <h3><a href="#dyk"><li>Did you know...?</a></h3> <h3><a href="#xword"><li>Subject Matter</a></h3> <ul> <h4><a href="#xword"><li>Crosswords, Wordsearches and Crossnumbers</a> (Any age)</h4> <h4><a href="#airbook"><li>Airline Booking</a> (Key Stage 3 or 4)</h4> </ul> <h3><a href="#mcs"><li>MarkChrisSoft</a></h3> <h3><a href="#bio"><li>Author's Background</a></h3> </ul><p> <hr>
The h2,h3 and h4 tags are specifying different levels of heading, to give different sizes of text. There are six headings, h1 to h6. The ul tags, as used above, set up two, nested, unordered lists. The inner list is indented, showing the structure of the page. The a tags (anchors) specify links to other net resources, in this case to other sections of the same page. The text between the li and /a tags appears in a highlight colour and the viewer's cursor will change as it passes over it, to show that it contains a link.
When a viewer clicks on the first item in the contents list, their browser will jump to the place in the text where the name dyk is embedded, as shown below:
<h3><a name="dyk">Did you know...?</a></h3> Did you know that the first man to sail around the world was...(more text)...The li tag, used within an unordered list, will produce a bullet character, to create a bulleted list.
The contents paragraph shown above would appear as:
<center> <img align=middle src="logo.gif" ALT="MarkChrisSoft Logo">Graphics caption here<p> </center>The src= section specifies the name of the graphics file to be inserted into the page. This file must be in .gif format and must be stored in the same directory as the page which refers to it.
The end result would look like this:
Graphics caption here
<a href="dummy.html">Click here to jump to a dummy page...</a>
Note the use of the four letter .HTML file name extension, even though I am developing in DOS. Once on an Internet server, it is likely that four letter extensions will be used, so it is best to use them from the beginning. To test the links on my own computer, I would have to temporarily change the extensions to .HTM instead.
This would appear as:
To link to other web pages, instead of just putting the file name, you must put the full web path name (better known as its URL, or Universal Resource Locator), e.g. the following URL is used in the Other References section to link to a very good introductory HTML guide.
<a href="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">
A Beginners Guide to HTML</a> (recommended)
The mailto anchor is used to call up the viewer's e-mail program and to insert the specified address. The enclosed text Mark Baker appears in a highlight colour and the viewer's cursor changes as it passes over this text, to indicate that it is a link. I use something similar to the following as part of my page headings.
This page was created by <a href="mailto:mbaker@rmplc.co.uk">Mark Baker</a>
Which would look like:
Sometimes you may want to retain basic formating, using spaces, line breaks and tabs. For example, you may want to show a fragment of a computer program or an algorithm, where the indenting of the text is important. The preformatted text pre tags will preserve the formatting of the enclosed text, and use a fixed space font, so that all the characters take up the same width across the page. An example is shown below:
<pre>
procedure SelectionSort ( d: DataArrayType; n: integer) {n is the number of elements}
for k = 1 to n-1 do
begin
small = k
for j = k+1 to n do
if d[ j ] < d[small] then small = j
{Swap elements k and small}
Swap(d, k, small)
end
</pre>
To produce a numbered list, you use the ordered list ol tags, together with the li tag for each numbered item, as below:
The course is delivered in four stages:<p> <ol> <li>Lesson One <li>Lesson Two <li>Assessment <li>Review </ol> <p>This would appear as:
The characters that are used to embed HTML commands (<,>,&, and ")cannot be used directly, to appear on screen along with the rest of your text. If you want to use them you must use special sets of characters, called escape sequences.
For < use the sequence: <
For > use the sequence: >
For & use the sequence: &
For " use the sequence: "
Don't forget to include the semi-colon at the end of each sequence.
So to produce this:
<center>
I must enter the following:
<center>
I have prepared a page template which you can save on your own computer, then load it into an editor and change it around to create a first page quickly and easily. Enjoy yourself!
A Beginners Guide to HTML (recommended)
An Intermediate Guide to HTML (more advanced)
Netscape's list of web authoring resources
Return to MarkChrisSoft home page
Author: Mark Baker, e-mail mbaker@rmplc.co.uk