Element Editor

What is an element

A web page is formed by page elements. A web page may only contain page elements. All texts on a page belong to elements. A paragraph is an element; an image is an element; a music player is an element; a video is an element; etc.
Page elements are classified in types. For example, an image element is an "IMG" element; a paragraph is a "P" element; etc.
An element is completely defined by its properties. For example, among all properties of an image element there is a "src" indicating the image file path.
You learn web page authoring by learning different types of elements and element properties.
Since a web page is entirely formed by page elements and elements are defined by properties, by editing element properties directly and visually Limnor HTML Editor gives you unprecedented power of web page editing.

Editor UI

The properties of the element under the cursor will be displayed in a table for viewing and editing. For example, move the cursor inside the word World" which belongs to a SPAN element, the properties of the SPAN element are displayed.

Current element

While moving the cursor, the element under the cursor is called the current element. There is a red dot on the top-left corner of the current element. In the above example, the red dot is on the word "World" which belongs to a span element.

Element toolbar

Each element has its own toolbar containing editing commands specific for the element. Different elements may have different set of editing commands. Some common editing commands are explained below.
  Delete the element from the web page
  Remove formatting by removing current element but keeping the inner contents of the element
  Move the element out of its current parent
  Add new properties to the element

Parent elements

All elements must have one, and only one, parent element, except the root element which is an HTML element. Some elements may have one or more child elements.
The Editor lists all levels of parent elements of the element under the cursor. In this sample, the SPAN element's parent element is a P element with id p1.  A P element is a paragraph. The P element's parent element is the BODY element. Every web page has one and only one BODY element, representing the web page display area. The parent element of the BODY element is the HTML element. The HTML element does not have a parent element.

Property names and values

Select an element from the parent element list, the properties of the selected element will be displayed and can be edited.
Most elements have large number of properties. They are displayed in groups. Click   to hide a group; click   to show the group.
Move the mouse pointer over a property, or click the name of a property, the description of the property will be displayed at the bottom of the Editor.

Delete and Undelete

Select an element, if the element can be deleted then an icon  appears in the element toolbar. Click the icon will delete the element. After deleting an element, icon  in the main toolbar becomes  indicating that undo to the deletion is available. Note that only one level of deletion is available.
Because every 10 minutes your web editing is saved, you may click  to discard last few minutes of modifications and reload your web page into editing.
 

Web Page Attributes

HTML Element

Every web page has one and only one HTML element. The HTML element is the root element of a web page.

Page Properties

Limnor HTML Editor shows following HTML properties.

Enter Non-English Contents

Before entering non-English contents, "lang" property of the HTML element must be set to the language matching the contents you are going to enter.


Note that lang property must be set before entering the non-English contents. You cannot enter non-English contents first and set lang property to match the contents later.

Page Head

This part is for advanced users.

The HTML element includes all its properties in one, and only one, HEAD element. To edit the HEAD element, click [Show page head] button in the element toolbar.

The HEAD element may contain META elements, SCRIPT elements, and LINK elements.
The element toolbar of the HEAD element contains following commands:
M - Add a new META element
S - Add a new SCRIPT element
C - Add a new LINK element for including a CSS file. You may use it to share page styles among pages.
L - Add a new LINK element
While you are editing your web page, most of your editing will be saved in CSS classes. You will see these CSS classes under property group [page classes]. You may click  to remove unwanted classes.



Note that the effects of deletion of a CSS class will not be shown in the page. You need to save the page and reload the page to see the effects. This is because these CSS classes might be from the page CSS file. To show the effects of deletion they must be removed from the page CSS file.