HTML Coding Aids

Studio simplifies the process of writing an HTML and provides the following HTML coding aids:

Online validation of HTML 4.0 compliant programs

Tag, attribute, and value completion

Formatting HTML based on user defined rules

Writing HTML in SCRIPT element

Ampersands in URLs

Incorrect nesting of elements

Using a NAME attribute with IMG or FORM

Using lowercase for DOCTYPE

Validation of HTML code is necessary to eliminate any problems with the page as visually checking an HTML code may not be enough.

With HTML, it is possible to create documents inspite of many errors. For example, forgetting an end tag does not effect the look of an HTML page. HTML validation enables the author to check HTML syntax. One advantage of validation is that a validated HTML causes less problems with browsers as different browsers render the same HTML differently. Online validation eliminates the chances of generating erroneous HTML that will perform well on different versions of all browsers.

Studio helps to clean up a HTML code to remove all unnecessary tags, add the required tags, check for spelling, and eliminate other code errors.

Online validation of HTML 4.0 compliant code

Open a HTML in Editor. Studio uses JTidy parser to validate it during code generation. Errors are underlined by a red squiggly. For example, type an attribute `m' inside the FORM tag. As `m' is not a standard HTML attribute, Studio considers it to be a minor validation error and underlines it with a red squiggly. The error message is displayed at the tooltip when the pointer is placed on the underlined element or the highlight in the overview bar.

If Studio can provide any corrective action, it suggests to press Alt + Enter which displays the possible options. Select the appropriate suggestion and press Enter to include it in the HTML code. Set validation options as errors, warnings, and the ones to be ignored by selecting Html from IDE Options panel.

To format HTML in Studio, select File > IDE Options from the main menu. Click Code Layout > Html in the IDE Options panel.

Choose from the document type, character encoding, indentation, and correction options. Select Html node in the IDE Options panel to configure code completion and validation options.

Tag completion

Studio provides tag completion options and also indicates an empty tag. Tag completion is triggered on typing the < character. To view the complete list of HTML tags, place the cursor at a valid location in the open file and press Ctrl + Space.

Note: Some tags in the list may be invalid at the location of invocation and result in validation errors.

Select a suitable tag from the dropdown and press Enter to insert it in the code. Other available options are:

To replace a tag name with the one selected from the dropdown, press Tab. Select a tag name and press Space to insert the tag name and add a space. This also retains the dropdown so that you can select and insert other tags

To obtain the closing tag, select the tag name and press /. For example, typing <p and pressing forward slash completes the tag as <p></p>

Select a tag name and press > to insert it in the code and close the tag

Attribute completion

Attribute completion is triggered on pressing Space at a valid location. To view a list of all attributes for a tag, place the cursor within tag and press Space or Ctrl + Space. For example, the attributes displayed for a button tag are shown in the following figure:

Pressing Space or Ctrl + Space again, displays the attributes which are not already used in the tag. Select a suitable attribute; press Enter to include it in the code. To view a list of all allowed attributes in a tag, press Ctrl + Shift + Space or Ctrl + Alt + Space. Mandatory attributes are displayed in bold.

To replace an attribute name with a new attribute, select it from the dropdown and press Tab. Selecting an attribute and pressing Equal to inserts the attribute in the code followed by a equal to sign, start quote, end quote, and triggers value completion.

Value completion

If an attribute can have a value from a set of predefined values, Studio displays a list of all suitable values on typing the start quote character. To explicitly trigger value completion, press Ctrl + Space. F or example, the values for COLOR attribute are shown in the figure:

Select a suitable value from the dropdown and press Enter to insert. To replace the current value, press Ctrl + Space; select a new value from the dropdown; press Tab. Selecting a value and pressing Quote inserts the value and end quote.