#
menu

Sinhala HTML Editor Basic Help (General)

Contents


Introduction

Sinhala HTML Editor (ASHE) is a single file browser-based application that enables you to create webpages (i.e. HTML documents). Integration of Sinhala on-screen keyboard renders it especially useful in creating webpages that require Sinhala script content. It contain features that allow to you format text (e.g. font size, colour, type, styles), vary background colour, create borders, insert hyperlinks, images and links to files. The app operates off-line thus an internet connection is not needed. Requirements for satisfactory operation of the application is listed in subsequent sections.


System Requirements
  • Given that the application runs via an internet browser, a functioning browser program is essential (internet connection is not required). The functionality and the appearance of the program will vary with the browser and version. Internet Explorer 8+ and comparable browsers should enable the application to function as intended. Earlier versions may produce none or partial functionality.
  • System requirements in terms of the speed, memory etc. for the application itself is insignificant compared to the requirement of the browser program and Sinhala language support.
  • The layout of the keyboard was arranged with a minimum screen resolution of 1024 x 768. Display settings of a lower resolution is likely to produce irregular results. In such cases consider an adjustment of the browser window zoom feature and workspace setup in the Sinhala HTML Editor.
Sinhala Language Support

In order to view Sinhala script on the on-screen keyboard and textarea, the computer must have Sinhala language support. MS Windows Vista and subsequent releases of Windows have Sinhala language support. However, Xp and older version of windows require Sinhala language support (Sinhala Unicode) to be installed from an external source. Sinhala Unicode support kits are available to download from sources such as:

http://www.siyabas.lk/sinhala_how_to_install.html

HTML (Hypertext Markup Language) In Brief

HTML files are text files that contain additional formatting markup (i.e. code telling web browsers what parts of text should be bold, where the headings, tables and images are located etc.). HTML is the markup language used in most of the pages in the World Wide Web. HTML documents have the file extension html/htm.

HTML documents are composed entirely of HTML elements that in their general form consists of a pair of tags, a "start tag" and an "end tag", each enclosed in angle brackets. The browser does not display the HTML tags but utilises the tags to interpret the contents of the page. HTML document begins with a <html> tag and ends with its counterpart, the </html> tag. Nested within the <html></html> tags are two main pairs of tags, <head></head> and <body></body>.

  • <html>
    • <head>
    • </head>
    • <body>
      • webpage textual and graphical content
    • </body>
  • </html>

Within the body element (i.e. pair of body tags), text and graphical content is contained within other elements, e.g. paragraph tags (<p> some content </p>) or unpaired elements such as <img />. Elements in the body can be in series or nested within elements.

  • <body>
    • <div>
      • <p>
        • paragraph 1
      • </p>
      • <p>
        • <span>
          • paragraph 2 section A
        • </span>
        • <span>
          • paragraph 2 section B
        • </span>
      • </p>
    • <div>
    • <div>
      • <img /> image 1
      • <img /> image 2
    • <div>
  • </body>

In the example above, the parent elements (<div>) contain two child elements, paragraph and image elements respectively. Furthermore, the second <p> element itself has two child (<span>) elements nested within it. Elements generally contain attributes within the start tag, thus the general form of an HTML element is:

<tag attribute1="value1" attribute2="value2"> Content </tag>

The attribute could be an identifier for an element (id, class) or a style attribute, which is used assign presentational properties to a particular element. The latter attribute is of particular importance to ASHE as the presentation properties will be primarily be provided by the inline method. Style properties produced by linked or embedded method are not featured in ASHE, thus must be entered manually with a physical keyboard.

Style Attribute (inline method)

The properties of the style attribute is nested between a pair of “ or ‘. It has the general form:

<tag style="property1:value1; property2:value2;"> Content </tag>

Assigned styles properties will be applied to all the content (including child elements) between the tags. Properties include text formatting (font-size, font colours, font typeface, background colour), borders, dimensions and positioning of elements. Values of a particular property could vary from several options to hundreds of thousands (e.g. potential valves of colour). ASHE features several frequently used properties and respective values in its menu. Nevertheless, users still have the option of manually entering and editing properties if desired.

In webpages where properties and elements are numerous, the source code can appear quite complex and confusing to those unfamiliar with it. Web browsers generally have a feature which allows you to view the source code of a webpage (Click right mouse button over webpage and select “view page source” in Chrome/Firefox or “view source” in IE). Acquiring knowledge and experimenting with creating html documents yourself you can begin to deciphers the contents of the even the most complex of webpages. An example html code:

  • <div style="width:600px; border: 5px black double; padding:13px; background-color:#ffffef">
    • <p style="font-size:28pt; color:purple; text-align:center">Heading</p>
    • <p>
      • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ornare ipsum at erat. Quisque elementum tempus urna. Donec ornare fringilla erat. Phasellus gravida lectus vel dui. Fusce eget justo at odio posuere dignissim. Sed porta, turpis sit amet viverra rhoncus, mauris urna interdum erat, nec semper dui diam ut libero.
    • </p>
    • <p style="font-size:18pt; color:orange"><em>Sub Heading</em></p>
    • <p>
      • Donec adipiscing placerat metus. Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. In hendrerit turpis sed ligula. Integer vulputate nibh congue magna. Duis commodo leo sit amet quam. Nunc commodo sodales nunc. Donec est nunc, porttitor et, accumsan nec, pretium quis, mauris.
    • </p>
  • </div>
  • Examine:
    1. Cut and paste the above html code into the textarea in ASHE.
    2. Click button. It renders the content and presents it just above the menu buttons.
    3. You can modify some of the properties and values in the textarea (ensure that the required punctuations are intact) and see how the changes effect the presentation of the content.

Information in the above sections hopefully provided some insight to those that are unfamiliar with creating webpages. It is recommended that you engage in further reading on the subject. Reading material is available in various sources, in particular the internet (e.g. World Wide Web Consortium, w3school). It should not only assist you to use the available features in ASHE, but more importantly provide you with the knowledge to modify and add properties to further enhance the appearance of your html documents.

Sinhala HTML Editor (ASHE)

  • ASHE consist of four components:
    1. Menu buttons located in top of the app.
    2. Textarea (work area where the generated script characters and html code are contained).
    3. Sinhala on-screen keyboard located at the bottom of the app.
    4. Area where rendered content can be viewed is located just above the menu.

Basic Operation

  • Type content to the textarea using the on-screen keyboard (detailed in Typing tab) or physical keyboard.
  • Create elements and assign properties to a selection of textual content using menu buttons and drop down menus. Similarly insert images, hyperlinks and file links to desired locations within content in the textarea (details provided in Font and Links & Div tabs).
  • Click to view the content via the web browser (View & Save).
  • Click to transfer the content to new webpage which can be saved via your web browser (View & Save).