Computer Laboratory

Web editing programs and tools

It is recommended that if you are going to edit the Computer Lab website that you understand the basics of HTML editing, and where possible, edit the HTML itself.
You will find the W3C Schools tutorial useful for this purpose.


Which program to use

You can use various programs to edit your webpages, but the ones the Computer Lab recommend and support are:


NVU

NVU (pronounced N-view) is an easy-to-use web authoring system, similar to Microsoft's Frontpage and Adobe's Dreamweaver, except it writes efficient code which is useable in most popular web browsers.

It is available for Windows, Linux and Mac and is free, so you can install it on your computer at home.

It provides
  • A WYSIWYG (What You See Is What You Get) editing page
  • An HTML tags page so you can preview your page, but also see the HTML tags which make up the WYSIWYG display
  • An HTML source code page to view the raw HTML
  • A preview page, which allows you to view the final webpage
Note:
The preview page is not interactive but previews only.
It is recommended that you have your browser open at the same time so you can view your page properly, complete with links, etc.

NVU uses the W3C HTML validator to check HTML coding.

To install the program, navigate to the download page of the NVU website, and download the Windows version.


Adobe Go Live

Adobe Go Live is similar to NVU in its layout and ability, but is based more on Adobe Photoshop with the use of multiple windows to manage mulitple functionality.

You can install this program yourself, but you will need to email the windows support admins for a licence key before you start to install the program.

Once you have the key, to install the program, navigate to:
  • Start, Control Panel
  • Click on Run advertised programs
  • Select Adobe Go Live from the list
  • Select the default options to install the program, adding the key when requested

Adobe Go Live allows you to view your web page either with the basic HTML source code, or just as you would see the information on a webpage.

Go Live comes with its own syntax checker to validate your HTML.


jedit

If you feel comfortable using the HTML to code your pages, we recommend you use either the source code page of NVU or Go Live, or try the webpage editor jedit, whilst simultaniously viewing your page on an internet browser.

jedit is a basic text editor but with color line coding and line numbering.
It can be slow to start up, but is recommended by various HTML and script writers.
It does not include syntax checking. However, you can use the internet browser Firefox's local validator.


Validating your code

It is important as a Windows user to validate your code before you commit it to the repository.

Windows users do not have access to the ucampas program which converts the *-b.html pages into *.html page which appears on the website.

If your html code is not valid, ucampas won't be able to convert the page, and as you don't have access to ucampas you won't be able to easily see why the process failed other to the fact that your page will not appear live on the website.
(You can view the ucampas error message log, which might give you some idea of the problem).

For this reason, we strongly encourage you to use an HTML validator:
  • NVU
    Under Tools, select Validate HTML.
    This will upload your page into the online W3C HTML validator.
    After a few moments it will tell you if your page has passed or failed.
    Scroll down to view the line numbers and errors associated with them.
  • Adobe Go Live
    In this program under the program menu Edit, you will find a Syntax Checker. This will validate your HTML, tell you which tags have errors, and double clicking on the error will show you where the error is.
    Note:
    When you first click on Syntax Checker it shows a window with lots of option boxes. Leave these as they are and just click on OK. The checker will then validate your syntax and flag any errors if they exist.
  • W3C HTML validator
    This online facility allows you to validate both online and local HTML files. (It is the validator used by NVU above).
  • Firefox internet browser
    The internet browser,Mozilla Firefox, has a Web Developer toolbar add-on which, when installed, offers you access to the W3C HTML validator mentioned above.

HTML tutorial and codes

You may find the following links useful in finding and learning about HTML tags, special characters and colour codes:

Online HTML tutorial for beginners:

The best way to edit webpages is to learn the HTML. Beginners will find this tutorial of use:

HTML tag chart

For a list of all the main HTML tags needed for webauthoring:

HTML Character Codes:

You cannot use the character "<" or ">" in a webpage, as the browser will think this is an HTML tag and get confused. To find the code for this and other characters:

HTML color codes: