Sinhala HTML Editor Basic Help (View and Save)

Port – View content

The html code in the textarea can be viewed via the web browser by clicking button. The rendered content should appear just above the menu buttons. If styles properties are undefined the web browsers will use its default property values to display the content. It is also a reflection of the webpage that would be produced if the content were exported to new window and saved as a html document.

Page Settings

ASHE feature allows you to define page settings that would be applied to the ported content as well as that of the exported window.

• To specify page settings
  1. Click button to open the form.
  2. Enter the detail in the fields. Each input is optional. Undefined values will retain its default (inherit value from browser or a preceding declaration) settings and will be rendered as such.
     • Page background colour – Background colour of the whole page. Area containing textual and graphical content can be assigned a different colour. Accepted forms for specifying values of the colour property is detailed in Font tab. The default colour is typically white (#ffffff).
     • Width – The width of the container that encloses the textual and graphical content. If undefined contents will span the width of the screen.
     • Height – The height of the container that encloses the textual and graphical content. If undefined the height will be the vertical length required to contain all of the content.
     • Background colour (of contents container) – The background colour of the container that encloses the textual and graphical content of the page. The input value is entered as per standard (Font tab). If the page width is undefined, the contents container will envelop the whole screen. The default colour is typically white (#ffffff).
     • Margin (of contents container) – Margins (left, right, top and bottom) of the contents container from the default position. There could be small margin (top:10px and left:10px in the PC screen) inherently set by your browser. Input required for a margin property is a numerical value and an accepted unit of length (e.g. 20px).
     • Border – If desired a border to surround the contents container can be selected. The default border value (1px black solid) can also be altered (details in Links & Divs tab).
     • Contents centered on screen - Tick the checkbox to have the content container to occupy the center of the display screen. The feature is effective only if the defined width (of the contents container) is smaller than screen width.
     • Hyperlink style effect - In HTML documents links to websites and files are placed between anchor tags (<a> content </a>). Browsers generally have default style properties for anchored content (text or graphical), often blue underlined text or blue border around images. Tick the checkbox to have a variation to default style properties. Link text will appear in black and will be underlined when the cursor hovers over the text. Images with links will only have the default cursor pointer effect.
  3. Click button in the form to apply settings. Consequently, contents in the textarea will be transferred to the allotted area (just above menu) with the new page settings.

The html code for page settings do not appear in ASHEs textarea, thus cannot be altered outside page settings form. However, certain properties can be overwritten by specifying style properties to elements that appear (or created) in the textarea itself. They generally have precedence over style properties specified via page settings. For instance, if you manually enter style properties directly to an anchor tag (E.g. <a style="color:maroon"> content </a>) and activate ASHEs hyperlink effect, the text and the underline will appear in maroon instead of black.

Export to new window and save

The content in the textarea can be transferred to a browser window and saved via the browser. It is recommended that Page Settings are defined prior to exporting content.

• To save content as a new HTML document
  1. Click button to open the form.
  2. Input the title of the webpage. It is generally displayed by the web browser in the title bar of the window.
  3. Select where the content is to be transmited to:
     • New Window - Presents the contents in a new window where it can be saved via the browser. The content in ASHEs textarea remains as is. Chrome may not permit the saving of new window frames. If you are using Chrome, consider exporting contents to the current window to save.
     • Current Window - Replaces content of the ASHEs application window with the content (rendered) from ASHEs textarea. The content in ASHEs textarea is cleared in the process (ASHE application file itself remains intact). The window with the new content can be saved via the browser.
  4. Click button to transmit content to the selected window. The exported content should reflect the html code in the textarea with defined page settings. It is also a replication of the rendered content in the port section.
  5. To save the window as a html document in your PC, select file saving option in the web browsers menu:
     • Chrome – save as in the context menu (accessible if you click the right mouse button) or save page as in the menu.
     • Firefox – page save as (context menu or in file tab in top menu).
     • IE – save as (in file tab in top menu).
     • The option may differ slightly with others browsers and versions.
  6. Once the popup box to save the file appears, enter a name for the file and from the save file type drop down menu select “webpage complete (Chrome/Firefox) or “webpage html only” (IE). Recommended file type could differ with other versions and browsers. Select a location to save the file. Then press or button in the popup to save the file.

If you have image and other types of files linked to the webpage, save the page in the same folder as the ASHE program file. Variation in relative paths breaks link to external files and won’t be functional when the page is opened via a web browser. If the relative paths (as detailed in Links & Div tab) are maintained, the webpage and linked files can be moved/copied to other locations and produce equivalent results.

ASHE doesn’t allow you to edit contents in the <head> element. There are pre-designed style blocks and doctype declaration that are inserted into the head element when exporting contents to a window. It was designed as such to simplify the webpage creation process and to reduce the potential for erroneous entries. If the source code of the saved webpage is viewed, the head element should contain the relevant content. To add and edit contents (i.e. meta tags, links to attachments, JavaScript code,... etc.) in the <head> element, a plain text editor such as MS Notepad is appropriate.

Importing content to ASHE

ASHE doesn't feature a means to open web documents directly for editing. However, it is possible to copy the source code of a webpage and paste to ASHEs textarea, where it can be edited using ASHEs features.

• To import content to ASHE
  1. Access the source code of the web page
     • Via a web browser - Generally available via the context menu. E.g. view source (IE) / view page source (Firefox, Chrome). Option to view the source code could also be offered under tools or view menus of the web browser.
     • Via Plain text editor - Open the web document from a program such as MS Notepad.
  2. Copy the content between the <body> tags (excluding the tags themselves) and paste in ASHE textarea. Webpages created by ASHE do not have a great amount of content above the <body> start tag, thus can be viewed within first screen of the source code. More complex web pages could contain CSS style properties, JavaScript code, links to attachments, doctype declaration and meta tags in the <head> element. As such you may need to scroll down significantly to locate the <body> start tag.
  3. Once inserted into the textarea, the content can be edited using features available in ASHE. Subsequently, it can be viewed via and/or to new window and saved as a new web document.

If imported webpage originally had CSS or JavaScript (js) files attached, it is likely that imported content to ASHE will not be presented in the same manner as the original webpage. To replicate the original, you can copy the content of the attached files (CSS or JavaScript) and place them in the body of the webpage. Ensure that contents are nested between the appropriate tags/blocks.

• CSS - <style type="text/css"> CSS file content </style>
• JavaScript - <script type="text/JavaScript"> JavaScript file content </script>

If the style or script blocks appear in the <head> element of the original document, they can be relocated to the body of the webpage. It is usual to have the style and script content as attached files or as CSS/JavaScript blocks in the <head> element of a webpage but placing them in body of the webpage should produce equivalent results.