You are here:

Content Tools

HTML
If you don't understand how html works here is a very brief introduction. To create a web page all content must be placed within different kinds of labels called tags. The scripting language HTML prescribes what tags you must use. (It is possible to use other scripting languages e.g. JavaScript.)

An example of an HTML tag is: <TITLE> …</TITLE>

This is the title tag. Information placed within this tag appears in the brower’s title bar and is used by the site index system to display results. Note the difference between the begin title tag <TITLE>, and the end title tag </TITLE>.

Here is a simple outline of a basic HTML document:

<html>
<head>
<title>My first web page</title>
</head>
<body>
TEXT OF FILE GOES HERE

</BODY>
</HTML>
Title banners
These tags are compulsory and must contain succinct information about the page to which they refer. This information contained in the <TITLE> banner is crucial to the user who searches our web site as this will display the result of the search.

Meta tags
All the Meta Tags should be used and if you are using Dreamweaver for example, then all the correct information can be entered with ease. If you are using a text editor then you will ned to isnert them all yourself. To highlight the most immportant ones are the keywords and the description tags. These must be included as search engines use this information to select our pages, and often display the information in the decription tag on a search result. Don't 'spam the meta' by repeating your keywords in the KEYWORDS tag, as some search engines will ignore your site for this and it may even get banned. This behaviour doesn't take you to the top of the search list! The two most important tags that you should enter follow and they must be placed between the <HEAD> </HEAD> tags in order to work.

Meta description
These tags allow a more luxuriant depiction of your web pages aims and objectives than plain old TITLE tags (this doesn't mean you should not include TITLE tags because they are crucial to the indexing on our server). Keep your description between 50 to 100 words as most robots stop looking after this length. Try and make it very enticing for the user so they will want to visit your page as their top priority!

Example
<META NAME= "DESCRIPTION" CONTENT= "Careers Advice Services covering the whole UK with international contacts. Help and advice is provided for all our students and we have staff members who speak several foreign languages to help those who wish to move and work abroad"

Meta keywords
These tags allow you to list single words that are relevant to your web pages, try and keep your list to between 10 and 25 words.

Example
<META NAME= "KEYWORDS" CONTENT= " higher education, degrees, undergraduate, postgraduate, South London, student, teaching, technology "

If you don't want a Robot to search a particular page enter the following syntax :-

<META NAME="ROBOTS" CONTENT="NOINDEX">

Bold
Use physical highlighting <strong>for bold</strong> and not logical as many browsers cannot interpret these commands.

Javascript
If you use scripts ie Javascript make sure you have text-only alternatives for those who do not enable Javascript on their browsers.
Style sheets and body text
Style sheets define how your web pages will be handled by a browser and will allow a users to overide with their own options if necessary. Please use style sheets is this is now the preferred choice in compliance with SENDA .If you are not familiar try this Style Sheet Quick Tutorial to get started.

Please always define the colour of body text even if the default of black is used, the syntax would be <body text="#000000"> The reason you are asked to do this is :- A) there are still many browsers who cannot load text unless it has been specifically identified and B) if your design uses colours the user's browser will be forced to accept your colours and not their own preferences settings for colours. You may also cause problems for disabled users.

The LSBU prefered font to use is Arial. Please see section on 'Accessibility'

Make sure that your site is flexible and allows for colour and text size to be altered by the user.

Select your colours carefully to provide the best colour contrast and only use approved web safe colours. See full range of colours available.
Absolute URL
Absolute addressing should be used for links to other servers on the internet or other servers at LSBU. Good practice is open a new web page.

Example
<a href="http://bbc.co.uk" >
<a href="http://www.lisa.lsbu.ac.uk" >
Site relative URL
Relative addressing MUST be used for all LSBU web links. This is required for a number of reasons and of course if your site has to be moved or any other re-organizing has to be done then (eg changing directory structure, becoming a virtual host) this will be very easy and avoid a huge amount of editing.

Example
<a href="/ict/news.shtml">
or
<a href="../email.shtml">
Links to external sites
Some authors like to help users by putting a pointer to available software such as Adobe Reader, FileZilla, HTML Editors etc.

PLEASE DO NOT link to the USA sites which causes greater band width problems for everyone. We are charged for all international traffic incoming from the States, so please don't use us links without very good reason!

Some LSBU sites might want to link Public Folders in Outlook, such as linking to a calendar or file storage. Here is an example to access Public Folders, ASPAW section and Live Well Calendar:-

https://mail.lsbu.ac.uk/public/ASPAW/LiveWell%20Calendar/
Images [graphics]
To prevent a proliferation of University logos which are contrary to the the corporate image of the University, the LSBU Library of Images are provided by the Communications Department, available for your use. No other LSBU logos are allowed. Please email Marketing Department. Members of staff can also visit the Corporate Identity Web Site for advice.

When using images/graphics you must ALWAYS include the ALT statement even if your entry is blank, so that text browsers and those users who turn off graphics can read the information. Use a short meaningful sentence to describe the link which is not out of context with the remainder of the page. Convention for graphics which have no meaning (ie pretty picture, space users) use ALT=" " - for bullet points/numbers use ALT="#" and for meaningful text use ALT="How to use email"

If you use image maps, please ensure you have text links available.

Do not use an over amount of images, it is very wasteful on resources especially if a user is using a commercial link or a modem. A good solution to this is to provide a small version (thumb nail) of an image which a user can choose to click on to see the enlarged version.

No graphics file should contain more than 256 colours and where possible less so as to reduce the size and should not exceed 20K.

All graphics should be tested on PCs and MACs as experience has shown that the same graphic viewed on these two systems can look quite different.
Forms for email
You have several options, to either use the

If you select the first or second options NOTE you must email me with the username@site.name (ie the one you have used in your script file) and the full URL where the form is placed, otherwise you won't be authorized to do this facility.

You are welcome to use the Sample Form which gets emailed to your mail box using a perl script. Simply substitute your own details where appropriate. If you modify either the form or the script to make it more sofisticated (ie compulsory fields) please send me a copy to make available to other users.

CGI scriptiing
No server specific options should be included in your design. (the existing WEB server runs on a Linux platform). The following CGI scripting languages are currently available:-
Bourne Shell, C Shell, Perl version 5.004, TCL Version 8
and Programming Languages C and C++ more information at Linux Web Servers
(details on the use of CGI scripting for advanced users)

CGIWRAP
No CGI script will be installed directly under the server as all scripts are generated and owned by the account for which they have been designed. All scripts are set up via cgiwrap and should be uploaded to the cgi-bin directory in either .public_html or web depending what web site you are creating. Most acocunts will find the cgi-bin directory already created but if not you can simply create yur own.

For testing purposes we suggest you use cgiwrapd which will display all the errors and make corrections to script much easier for you. You simply remove the d when it all works OK.
An example using forms is:-
<FORM ACTION="/cgiwrap/~mousem/dpa/quest" METHOD="POST">
or in debug mode
<FORM ACTION="/cgiwrapd/~mousem/dpa/quest" METHOD="POST">
or those using php an example is
/php4-cgiwrap/~mousem/index.php
(for more information on using PHP see info in the msyql area of this web site)

Remember to set the file privileges before trying to run the script as otherwise you most likely will get an error along the lines of " Execution of (starting/test.php) is not permitted for the following reason: Script is not executable. Issue 'chmod 755 filename'. Please run the command webset (corporate pages) or wwwset (personal pages) or websslset (secure site pages)

The use of cgiwrap will allow any data files needed by the script to be placed in the same directory as the scripts. The data files will only be visible to the account in which the cgi script has been developed. If you require access from users on the internet to your cgi scripts you need special authorization for this. Please email the exact url for the script with a brief description of what is does.

Further information is available for CGI Users

Email links
If you wish to use email links use the href mailto syntax ie :-
<a href="mailto:mousem@lsbu.ac.uk> "> Minnie Mouse</A> in your files which doesn't need any special design and is very easy to place in your documents. You can also specify the subject field which could identify which page the user is mailing you from. For example from your Index (Home) page
<a href="mailto:mousem@lsbu.ac.uk?Subject=Enquiry from my Home Page"> Minnie Mouse</A>
which will always give Enquiry from my Home Page as the subject matter and highlight Sally Justice as the point for users to invoke the mailform.

Sample forms together with a 'ready to go' script file for collecting information can be found at Resources and Facilities for Web Authors
Footers
If you are not using Server Side Incldues [SSI] and therefore one single footer.shtml file the you need to design a footer for your single page. All pages should end with a link to the LSBU Home Page and to the home page of the current level using the standard format, but inserting the appropriate links to suits your pages.

EXAMPLE

<center>
<table border="0" cellpadding="0" cellspacing="0"width="100%">
<td width="100%" valign="middle" align="center">
<font face="Arial">
<a href="/index.shtml">Home</a> | |
<<a href="/authoring/">Web Authoring</a> |
<a href="../ict/services/">Web Services |
<a href="/search/">Search
</td>
</tr>
</center>
</table>

Home | Web Authoring | Web Services | Search

All home pages, (ie those called index.html at each directory level) should end with with Authors Name and Date of Last Update to the standard format. All dates if hand entered are required to use the format <dd month year>. Further information is available at Server Side Includes web pages to enable users to automate various tasks. Standard format is:

<P>
<center><small><font face="Arial">
This page was last updated by
<a href="mailto:mousem@lsbu.ac.uk?Subject=Enquiry from
on line guides">Minnie Mouse</a><br>
on <strong>


</strong></font></small>
</center>
(where Subject=reference to the web page and email id is relevant to the your web author and filename.shtml is the name of your file.) and this looks like this:-

This page was last updated by Minnie Mouse
01 April 2008