WebRes - Using The HTML Editor

WebRes - Using The HTML Editor

 

Prerequisite 1: Your Webres CMS must be updated to version 4.3.0 - please contact us if your Webres is not up to date.

Prerequisite 2: Login to the CMS (admin) section of WebRes with your login details provided by Roeville staff. If you have any problems logging in then please contact the WebRes support team.

You can use the HTML editor to modify code inside HTML Modules on your sites tabs. If you already have a HTML module that you would like to modify, then go to the web page where the module is located and click the "Edit" button just above the module - you'll then be taken to the new and improved HTML editor.

The main feature of the HTML editor is the main textbox where the HTML is contained. At first glance this will look just like the HTML editor that you've used in Webres previously but this is considerably more powerful than previous iterations of the editor. New features include code highlighting, code completion and error checking - features commonly found in advanced desktop editors such as Notepad++, SublimeText and Adobe Dreamweaver.

Code Highlighting

Instead of showing all of the text inside the editor as the same colour, this editor uses a technology called "Syntax Highlighting" which shows different parts of the code in different colours. For example, HTML tags are green, attributes are blue and strings are red. This helps to identify different parts of the code.

Code Completion

Whenever you begin writing a HTML element, the editor will help speed up the process by creating the rest of the element for you. When you type in the opening HTML tag (i.e. "<p>") the editor will then automatically create the closing tag (i.e. "</p>") for you.

Error Checking

Since it's so easy to create errors when writing HTML we've made sure that this editor includes the functionality to find them for you. If you have an error in your HTML syntax then you will see an icon in the left "gutter" which identifies the line which has the error. If you hover over this error a popup will give you more detailed information about what the problem is.

 If you have any errors in your code then you will be notified when you click "Save":

You can also run a validator by clicking the "Validate Code" button - this will tell you whether there are any errors in your code.

 Code Generators

The blue bar above the HTML editor box is the code generator bar. This contains buttons that simplify the process of writing HTML by generating the HTML code for you. Simply click inside the editor where you want the new HTML code to be added, then click the code generator button that you want to use. If you hover over a button a tooltip will tell you a little bit about the element.

Most HTML elements will be entered straight into the editor when you click them. Some others, such as <a> and <img/> will require more information in order to work. For elements that require more information you'll be presented with a popup box to enter more information into. For elements which require a reference to a file you'll be able to use the file manager to locate the file using the "Find File..." button.

When you hover your mouse over a textbox, a tooltip will appear on the right of the box to tell you a little about what should be added into there. All of the fields are optional (i.e. you can create the element without any attributes) but you may find that the displayed HTML is incorrect without some vital attributes (such as "src" for an image or "href" for a hyperlink).

Note: If you are given the option of adding a width and a height for an image it's usually best to only add one or the other - adding both could change the aspect ratio of the image and cause stretching. If you only add one of the two, the browser will automatically figure out the other one.

Tables

Table creation uses a unique system to easily create a data table - it takes seconds! Simply click the table code generator button and you'll be presented with a popup box with a grid. Hovering your mouse over the grid blocks will highlight part of the grid in blue - this shows the number of rows and columns that are selected. You can also see how many rows and columns you've highlighted at the bottom of the popup box.

When you've highlighted the correct number of rows and columns, click your mouse to add these to the editor. If you want to add headings to the top or left of the table, just check the relevant box above the selector - you can have both!

As you can see the created table has some HTML comments next to each row (<tr>), cell (<td>) and heading cell (<th>). Since HTML tables can be hard to make sense of, we've included these comments to help you. Don't worry, these comments won't be shown on the page.

Settings and Features

Below the HTML editor you'll find some extra settings and features to help you out.

Word Wrap

Word wrap forces a line of code to "wrap" onto the next line(s) if it's too long to fit onto a single line. This is enabled by default, but you can switch it off if you prefer. If you are using a HTML5 enabled browser (such as Firefox 3.5+, Chrome 4+ or Internet Explorer 8+) then your setting will be saved in your browser as soon as you click the box.

Word Wrap On:

Word Wrap Off:

 With word wrap turned off you may need to scroll horizontally to see all of the HTML.

Find

If you need to find a word in the HTML, but you don't know where it is, you can use the "Find" feature. Type what you're looking for into the "Find..." textbox and click the "Find" button. This will then highlight all occurances of that word in the HTML.

Replace

To quickly replace some text in the editor you can use the Replace function. To use this, type the text to be replaced into the "Find..." box, then type the replacement text into the "Replace With..." box.

To replace just one (the next) occurance, click the "Replace" button.

To replace ALL occurances of this text throughout the document, click the "Replace All" button.

Hint: Compare this screenshot with the "Find" screenshot see the difference.

Scroll back to top

Article Feedback

Did you find this article helpful?



Share this article

Print article