Working with HTML and CSS

Editing HTML and CSS files is fundamental part of creating web pages and Webbo provides a number of features to help you do this quickly and effectively.

File templates

You can create new files instantly using the file templates feature: select the type of file you want from the 'New From Template' option in the 'File' menu. The new file will open in the editor with a temporary filename; save the file with the name of your choice. Select 'Manage Templates' to access the actual template files. You can edit, copy or rename these to match your needs and use sub-folders to group the them into sub-menus according to you preferences. Edit the '_default' template file to change the content created when you click the 'New' toolbar button or select 'New' from the File menu. Change the file extension if you work mainly with other file types. For example, rename it to '_default.php' to create new PHP file.

Syntax highlighting and Code Assist

Webbo provides color syntax highlighting and Code Assist for HTML and CSS files. To access Code Assist press ctrl+space while editing the code; assistance will be provided according to the editing context. In a HTML file type '<' and press ctrl+space to see the tags available. Press enter to insert the currently selected tag or escape to cancel. When the tag is entered the editing position remains within the tag; this allows Code Assist to be invoked for tag attributes. To do this type a space after the tag name (but before the '>') and press ctrl+space again. A list of the attributes associated with the selected tag will appear. As before, press enter to insert the selected attribute.

HTML Code Assist

For CSS files press ctrl+space within the braces of a style rule to see the list of available properties and after the ':' to get a list of corresponding values.

CSS Code Assist

Code Assist for HTML files supports tags from the HTML5 or XHTML 1.0/HTML4 Strict standards. If a HTML5 doctype is detected at the start of the page, HTML5 tags and attributes are presented, otherwise the XHTML 1.0 and HTML 4.0 Strict standards are assumed. CSS Code Assist is based on CSS version 3 standards but as these are subject to change the list may not be definitive.

Snippets

Snippets are fragments of text which can be inserted into the current file when selected from the 'Edit' menu. Select the snippet from the list to insert the text at the current editing position. Select 'Manage Snippets' to access the actual snippet files. As with templates these can be edited, renamed, copied and organised into folders to create the snippets collection you need to support your work.

The name of each snippet file provides the title of the corresponding menu entry. By adding a simple prefix a short-cut key combination can be assigned to the snippet making it easier to insert into the editor. Short-cut keys can be any letter or number key accompanied by at least two of the three modifier keys 'C', 'A' and 'S' (for ctrl, alt and shift). To create a prefix use the chosen key combination followed by '#' at the start of the snippet file name. For example, to add a short-cut to the 'Lorem Ipsum' snippet rename the file 'CSI#Lorem Ipsum.txt'. This will now respond to the short-cut key combination ctrl+shift+I. Note the keys will not become active until the snippet menu is displayed so always check the menu to see that the correct key combination has been assigned to your snippet.

HTML toolbar

When editing HTML files you can use the HTML toolbar to quickly format HTML elements.

HTML toolbar

From left to right the toolbar provides buttons for div, span, p, pre, em, strong, h1-h6, a, img, ul, ol and table elements. Clicking a button on the toolbar will insert the corresponding tags at either the current editing position or around any text selected within the editor. The toolbar can be used to quickly markup plain text by selecting sections of the text and clicking the appropriate toolbar button. The a, img, ul, ol and table buttons support 'smart' formatting; line breaks and '|' characters in the text selection allow Webbo to format the text according to the rules of the particular tag. For example to create a hyperlink separate the link URL and title with '|' and apply the 'a' toolbar button to the selected text, like this:

HTML toolbar link formatting

Similarly for images, lists and tables:

HTML toolbar image formatting

HTML toolbar list formatting

HTML toolbar table formatting

The HTML toolbar is activated for any document recognised as HTML or HTML compatible. These are files with extensions included in the list maintained within the HTML Editor settings page:

HTML toolbar file types