Doncaster School Logo
Ecole Doncaster School
This window may have opened in front of the previous page. If it did you might want to minimize it so you can see both pages simultaneously.
 
Updating your class page
 
Simply type text into the text fields provided, when you are finished, click the submit button and then view your changes. If you have made an error just renenter the editor page and make the required modification. Don't worry about doing anything incorrectly, you can't hurt or mess anything up.
 
HTML on and off button
 
For most users the HTML button should be left on the default, which is off. The bulletin board page has been constructed to accommodate the cutting and pasting of text into it, it will retain the original format. Even with the HTML button set to off HTML can still be used. The tags explained below can all be used, since they are not positional formatting tags.
 
Turning HTML on
 
Turn the HTML button to on if you want to format your page completely with HTML. It should be turned on if you want to paste source code from a web page generated from word for instance.
 
Adding HTML
 
If just plain text is not enough for you and you want to make your page fancier... the text boxes on the updating page will accept more than just plain text. To add more formatting to your page HTML can be used. HTML stands for Hyper Text Markup Language. It is the scripting language that creates web pages. Listed below are a few tags which can be used to add formatting to your page.
 
HTML tags are always enclosed by the greater than and less than brackets < >
 
To make a word display in bold we precede it with the bold tag<b>
 
To shut the bold instruction off we use the second tag with the added forward slash </b>.
 
<b>this makes text bold</b> and this will be normal.
 
Below is how it will display in a browser. The tags are not printed and the text is bold.
 
this makes text bold and this will be normal.
 
Notice the forward slash before the b in the second tag, it shuts the bold instruction off.
 
To make a clickable email link we use a version of the link tag
 
<a href=mailto:ron@crockerwebdesign.com>Email Link</a>
 
Once again the link is turned off with the forward slash </a>. On the browser page the words "Email Link" when clicked by the web surfer will open up their email program with a message addressed to ron@crockerwebdesign.com
 
To make a clickable link to another web page we use a different version of the link tag.
 
<a href="http://www.crockerwebdesign.com" target=_blank>Link to CWD</a>
 
The target=_blank part makes the link open in a new browser window. If it was not there the new page would open within the frame of the existing page. The actual link you click on would be the words Link to CWD
 
To make text larger use a header tag
 
<h1> will make text very large <h2> <h3> <h4> are all valid header tags with <h4> being the smallest.
 
The header tag always puts a line space below it, which makes sense since it is for creating headers
 
For further information on HTML, do a search on the Internet where there are many sites addressing all different levels of knowledge.
 
A good book for learning or reference is "HTML For the World Wide Web" written by Elizabeth Castro. It is one of the Visual Quick Start Guide series published by Peach Pit Press.
 
Another way to learn html is to look at the source code of the page you are viewing. In Internet Explorer click on the word View to access the drop down menu and then choose source. Notepad will open and it will display the source code for the page you are viewing.
 
Feel free to experiment with your page. Using incorrect syntax will not hurt anything, if it does not display as planned simply re-enter the update area and make the required correction.
 
Images for the web
 
Images that are going to be used on the web should be optimized. They should be sized to the exact dimension to which they will display on the page. Large images constrained with html coding take longer to download, if there are multiple large file images you might find your page viewer clicking away before the page loads completely. We don't want that!
 
The most obvious way to optimize an image for the web is to crop it to the size you want. Then adjust the pixel dimension to the physical dimension you desire, being careful to adjust both the width and height the same amount to preserve the aspect ratio. The bulletin board window is about 500 pixels wide, so you probably do not want to be any wider than that. These settings alone will go along way to reducing the actual file size. Finally if your software permits, save it at a reduced quality level, depending on the image, somewhere between 5 and 7 is usually good. Experiment though, some images require less and some more.
 
If your software does not let you choose a quality setting hopefully it has an option to "save for email" this will produce an optimized version. Any images used on the web need to be of a certain type. The most popular is "jpg", great for photos and there is also "gif" which is used more for drawings and has the added benefit of transparency.
 
There are free programs available on the Internet for image manipulation. Picasa is a free program for archiving, printing, resizing and optimizing images for the web. Gimp is an open source solution if you desire something more powerful, it is similar to Adobe Photo Shop though the install is more difficult. There are many more try a Google search to find them.
 
Images that are sized properly for the Internet will keep your page quick loading and they will look better as well, no jaggies. Remember to always preserve the original image at its full resolution, and just use copies for the web. In case you want to print the image, it is best to have it at the original file size. Higher resolution images will produce sharper prints.
 
Ron Crocker