admin editor help & html basics
Did you know that your website is made up of code and that code is called XHTML? This code is what displays the content of your website, everything from the text and paragraphs, to the images and Flash. There are other elements of code used in your website, like ASP and PHP and CSS but we're going to concentrate on basic XHTML right now.
This page is designed to help you become familiar with the basics of your admin editor and XHTML so when you are editing content in your website's Admin Area, it will be much easier to identify any problems with formatting and show you the means of fixing it. This page will show you the correct appearance of the code within a text area as well as what different pieces of code look like and what function they serve.
- When editing it is wise to have two windows open, one showing the client-side and one showing the admin-side, this makes it easy to view changes as they are made. (Remember to refresh the client-side after changes have been made, to clear cache memory).
- The text editor has similar icons to Microsoft Word, e.g. for bold, left align, centre align etc. But there are 3 very important icons to remember if you are cutting and pasting text from Word into the Editor and they are “Cleanup Formatting”, “Cleanup Font Tags” and “Cleanup Word”. After pasting text into the editor just click each of these three icons and any Word code that is superfluous will be deleted.
- Use SHIFT-ENTER instead of just ENTER when creating line feeds in the Editor.
- Only JPG, JPEG, GIF, PNG and BMP image types can be uploaded to the server, any other file type will result in an error message.
- Please be aware … If “delete” is selected on the add / edit / delete pages and you click “yes” to delete the page … the page is gone. There is no “undo” for deleted pages in the editor.
- Remember, the VISUAL is EVERYTHING with a website, so try to keep to the colour scheme, font size etc. in tone with the rest of the site. Even though you might want to have 16pt purple text it might not work with what is already in place.
- Styles (see the image above) can be used to apply colours and font sizes to text … this will have been explained in detail in your training session. Highlight the text then select the style to apply a style.
- STATUS: A lot of elements like text and images have the field “status” in their forms. This is an on / off switch. If you wanted a page or image removed from public viewing, e.g. a gallery image … you don't have to delete the image, you can just uncheck the “status” box and the image won't be displayed.
Clean Code Example
A problem some users have come across recently is content being updated on their website that was not what they wanted. This is mainly due to either users copying text directly from a Word document onto their website, or by clicking formatting buttons multiple times creating multiple entries of text or format. Below are two examples of XHTML, one with bad code, one with clean code. These are here so that if content does not appear how you want it to; you will have a basic understanding of what the code should look like.
The first example is a section of code from a Microsoft Word document. What this example will demonstrate is the massive amounts of useless code usually included when copying like this, something that could cause problems when updated on your website. The image at the bottom is the same code, just cleaned up and much more useable.
 |
An example of bad code -The unnecessary areas have been highlighted in blue |
 |
An example of good code - The repaired sections have been highlighted in green |
XHTML Basics
XHTML is made up of tags and those tags are put into triangular brackets looking much like this: <html></html>. Most tags have a start and an end tag like the previous example but some will just have a start tag, like a page break - <br />.
Let's look at the basics...
We'll use Microsoft Word as an example. If you're in Word and you want to bold something, you would highlight the text and press CTRL + b or click the "b" icon in the text tools menu. Well, if you want to bold something in XHTML you do something similar; you enter the tags <strong></strong> around the text you wish to bold. For example: <strong>this is bold</strong> will look like this: this is bold. So you've just learnt your first XHTML tag <strong> is the bold tag.
Some other basics XHTML tags that you will come across include:
| <em></em> | emphasise: much the same as Word, these tags will italicise text |
| <strong></strong> | bold: much the same as Word, these tags will embolden text |
| <u></u> | underline: the same as Word, these tags underline text |
| <br /> | line break: this will drop text down a single line (ie. single line spacing). This is done when pressing shift + enter. To put this in code, you would type <br /> at the end of some text to start a new line. |
| <p></p> | paragraph: these tags around a section of text will create a new paragraph. This is typically done when pressing enter after typing in some text. An example of code would look like this: |
| <ul><li></li></ul> | unordered list: much the same as Word, these tags will create an unordered list for bullet pointing text, e.g.
<ul> <li>Point One</li> <li>Point Two</li> <li>Point Three</li> </ul> |
If you would like to test these skill out, click here.
Click on the Admin Area Editing tab to learn more.
City of Swan - HBB Self Assessment
website link: City of Swan - Home Based Business
This is a small website application that allows home based businesses based within the City of Swan to answer a series of questions and to then find out automatically based on their answers if they require council approval for their home based business. This application is designed to reduce council administration whilst allowing all home based businesses easy access to license information.
Client Service Usage Guide:
