View

Hypertext Extenditor

Write code, see life

4umi View Hypertext Extenditor is a browser based, Javascript powered web application, providing sophisticated tools for viewing, testing and editing html, Javascript and css source code. It is light-weight at less than 30kb, and runs in all current and common browsers, although some advanced features, such as auto-selection, require Internet Explorer for Windows. This is also the fastest browser. If you wish to load remote content, an Internet connection is indispensable, otherwise it will work offline just as fine, because if you can read this, all script files have been downloaded and cached by your browser and no information is ever sent back to our server.

Loading url's

Enter an url in the address field and the script will request it from the server and write it in editing area as well as in the live frame. This depends on xmlhttp technology which is available in ie for Windows, Konqueror and Safari for Mac-OS and Mozilla for all platforms.

Internet Explorer can access remote content, ie. pages from domains other than the current one (4umi.com), but only if the site running the script (the current site) is in the list of ‘Trusted Sites’ in the Security settings. To add this site to that list, pop up the Security Tab (also available through Tools → Internet Options…) by double-clicking the icon or word 'Internet' in the statusbar (on the right) and look for the green ‘Trusted Sites’ symbol. Alternatively, copy this page and included script files to a site you trust :~)

Some sites publish documents with wrong encodings or illegal characters that browsers are able to display anyway but the xmlhttp object cannot handle. This may result in illegible characters in the editor and viewer. We are working on a solution.

When the code of an existing page is loaded and a <head> opening tag is found, a <base> tag will automatically be inserted directly after it, with its href attribute set to the requested url. This is the only change that View makes to the downloaded file.

Editing

Type or paste your code in the text editing area. Selected text can be wrapped in arbitrary tags by clicking 'Edit' or hitting the Ctrl+T shortcut key. You will be prompted for the tag name. Attributes can be added after a space.

Tag	Attribute
a	href
area	alt
applet	width, height
form	action, id, method
img	src, alt, width, height
input	type, name, value
label	for
link	rel, href
meta	name, content
map	name
option	value
param	name, value
script	type="text/javascript"
style	type="text/css"
textarea	cols, rows

When entering the name of an element that has no end tag, any selected text will be suggested as src or alt attribute. The predefined so-called empty elements are: <area>, <base>, <br>, <col>, <frame>, <hr>, <img>, <input>, <link>, <meta>, <param>. If you have another empty tag, end it with a slash (/) as usual.

Some elements will have required or common attributes automatically set. These are listed on the right.

Special characters which need to be escaped in HTML and are not all easily entered from the keyboard, can be found via Alt+Q which will pop up a window with the following characters:

Updating

Update the live version with your code as you type by clicking on its titlebar below the frame or pressing either the Ctrl+Return or Alt+X shortcut key combinations. When "Every new line" is checked, pressing the Return key to enter a new line will write the current code to the bottom frame to display what you have have written sofar. In addition, it is possible to simply set an interval by selecting a number of seconds. In any case, the frame will only be rewritten if the code has changed since last time.

A problem with dynamic rewritings of a page is the loss of the window's Undo-history or the abilty to reverse to what was written earlier (with the indispensable Ctrl+Z). The 'Back' button and 'View Source' give access to recorded history only. This is why the interval is not set by default, and why alert and pop-up dialog windows are used rather than convenient inline divisions such as this Help box to communicate intermediate information. Most pop-ups are equiped with a script to vanish onkeypress of the same Esc key that cancels alert and prompt boxes.

Highlighting

Click 'Hilite' for a syntax-coloured version of your code. It is assumed to be HTML unless a url has been entered with a .css or .js extension, in which case style resp. script highlighting schemes will be used. To have your code evaluated differently without corresponding url, choose from the 'Hilite' submenu. When highlighting HTML the content in <style> and <script> elements is ignored by default, such in contrast to the backlit values of the style and script attributes of other elements.