Sinhala HTML Editor Basic Help (Links and Div)

Link page

The link page feature allows you to create hyperlinks to webpages in the World Wide Web.

• To insert hyperlinks to internet webpages
  1. Click button to open the link page form.
  2. Enter the url (excluding http:// ) - e.g. www.website.com
  3. Select the textual or graphical content that contains the link (NB: Closing the form does not erase entered content).
  4. Click the button in the link page form.
     • Example html code: <a href ='http://www.website.com'> text or graphic content </a>

NB: If required, it is possible to modify the code in the textarea, including contents within the <a> tag. For instance, if the linked page is a secure page, modify the url to https:// from the default value. Similarly, non-featured attributes in ASHE (e.g. target, style etc...) could also be inserted into the <a> element. If the path to the linked webpage is not absolute and is located locally, use the link file feature in ASHE.

Link file

Link file enables you to create a link to a locally located file.

• To create a link to a file
  1. Click button to open the link file form.
  2. Click 'Choose File' (Chrome) /'Browse ' (Firefox, IE), navigate to the location of the desired file and select the file (i.e. click ‘open’ in Windows 7). The name of the selected file (possibly its path within the local computer) should appear in the textbox.
  3. Select the textual or graphical content that contains the link.
  4. Press button in the link page form
     • Example html code: <a href='example.pdf'>text or graphical content</a>

The file could be another html document, image file, MS office document, pdf file or even a media file (mp3, video etc...). Once the link is clicked, the file will open via a default program (i.e. html document via web browser , PDF via acrobat, video file via media player act...).

Path to file

If the location of the linked file differ from the default path (i.e. the folder of ASHE application file), its path relative to the directory of the current webpage must be manually entered to the href attribute.

• Examples
  • href='example.pdf' - Cases where the file is located in the folder of the current file. Thus html code should appear as:
    • <a href='example.pdf' >text or graphical content</a>.
  • href='files/example.pdf' - Linked file located in a subdirectory (named files) within the folder of the current file. Example html code:
    • <a href='files/example.pdf'>text or graphical content</a>.
  • href='../example.pdf' - Linked file located in a directory just outside the directory of the current file.
  • href='../files/example.pdf' – Linked file located within a directory (named files) just outside the directory of the file.

If the relative path between the linked file and the current webpage file remains constant, the files can be moved to any location within a local PC or server.

Alternatively, you could insert the absolute path of the linked file within the PC. Example href='C:\webpages\files\example.pdf'. The current webpage could be moved to any location within the pc without breaking the link. However, if the linked file or a directory in the path is moved or renamed the link breaks. Furthermore, absolute paths are generally lengthy and cumbersome, hence is a less preferred option.

Insert Image

• To insert an image within the contents of the webpage
  1. Click button to open up the form.
  2. Click 'Choose File' (Chrome) / 'Browse' (Firefox, IE), navigate to the location of the image file and select (i.e. click 'open ' in Windows 7). The name of the selected file should appear in the textbox. (NB: If the image file is located in a folder of the current file, its path is the default value produced by ASHE).
  3. If desired, enter the values for the remaining inputs.
     • alt – A textual description of the image. If the image fails to load by the web browser the description is shown instead.
     • width – Width of the image that the browser would display. E.g. Input of 100 results in the image being displayed at a width of 100 pixels. Inherit value is the actual width of the image file.
     • height – Height of the image that the browser would display.
  4. Select the location where the image should be inserted. Location must be a selection of at least a single space (placing the cursor at a specific position is ineffective). The image will be inserted at the beginning of the selection.
  5. Click button in the insert image form. Example of resultant html code:
     • <img alt='image1' src='sample image.jpg' width=’100' height='100'/>

Browsers accept gif, jpg, and png image files. Certain browsers accept other formats. If the file is not located in the folder of the current webpage, the path of the image file must be manually entered into the src attribute. The process of modifying the path for the src attribute is done in the same manner as it is for the href attribute (see details).

HTML Tags

The feature enables you to insert several tags that are used when creating webpages. Table lists the tags and briefly details its function and characteristics.

• To insert tags
  1. Select a range of content that should be nested within the tags.
  2. Make the selection from the drop down menu, Tags div p span h1 h2 h3 h4 ul ol li comment .
     • Example html code: <h1>content</h1>
  3. If you desire, click to view the rendered content.

There are conventions to the placements of html tags within the body of a webpage. It is inadvisable to have <div> nested within <p>. You could have other tags nested within <div> tags. Do not have <p> tags nested within other <p> tags. Similarly, <span> and headings tags shouldn’t be nested within their equivalents. Recommend:

• Have <p> and heading tags in series with each other.
• If required, use <span> tags to create style effect within certain sections of <p> and heading elements.
• Use division (<div>) tags to nest other tags within it. Also it is usual have <div> tag nested within other <div> tags.

Html tags which are not featured in ASHE, e.g. <label>, <table>, <marquee> etc... could be manually entered into the textarea.

Division

The button feature allows you to sectionalise content and assign various style properties (width, height, border, background colour) to the created section (i.e. division element). Style properties apply to all content (including other elements) nested within the element. However, style property values specified within a nested element takes precedence over the values of the parent element.

• To create a division and apply style properties to the contents contained within it
  1. Click button to open the form (opening and closing the form does not clear entered content).
  2. Enter the details as needed. Inserting a value to each input is optional. Unaltered input (i.e. default values) equates to an undefined property. Thus it retains the inherit value from browser or from another applicable declaration:
     • Width – width of the element.
     • Height – height of the element.
     • Border - Tick the selection box if you require border to surround the content within the element. Each component of the border value is editable (see details).
     • Background colour – The background colour of the element (Colour value rules detailed in Font tab).
     • Margin - The margin from the outermost layer in the <div> element. Input required is a value/s with an acceptable unit of length.
     • Padding - Padding is the blank space inserted between the content of the element and its boundary. Requires a value/s and an acceptable unit of length.
  3. Select the range of textual and graphical content (within the textarea). The selection may contain number of <div>, <span> and other tags contained within it. It is important that selection contains both start and end tags of all nested elements.
  4. Click button in the division form.
  5. If desired, click to display the content via the web browser.

It possible to manually edit properties and values within the created <div> tag. Ensure that punctuations are not deleted in the process. If the required punctuations are absent, the browser will not render the content in the desired manner. Manually editing values and viewing (click ) how changes are rendered could be a useful method to experiment with the presentation of the webpage.

Border

• The border property can be inserted in the style attribute of numerous tags. E.g. <div>, <p>, <span>, <img />. Border is placed in the outer boundary of the element.
• The shorthand value of the border property consists of the line thickness, colour and the line type. E.g. 1px black solid. Values for individual components may appear in any order.
  • Line thickness (border-width): Consists of a numerical value followed by an accepted unit of length (e.g. px, em, cm, in,... etc.) or a English keyword, namely, thin, medium and thick.
  • Line colour (border-color): Accepted colour value (e.g. English keyword, hexadecimal value, ...etc.)
  • Line type (border-style): Values include: solid, dashed, dotted, double, groove, …etc.
• If desired, values for an individual side can be defined. It adheres to the same shorthand convention as for a complete border. E.g. border-left: 1px black solid; The right, top and bottom sides can also be defined separately. Furthermore, it is possible to assign a value to a particular side's individual component on its own. E.g. border-top-width: 1px;.

Margin

A value of the margin property is determined from the outermost layer in the element (If the element contains a border, the value is calculated from outer boundary of the border that encompasses the element). Margins could be set for the four sides, top, right, bottom and left. The value for the margin property can be specified collectively as a single value or separately for each side, followed by an acceptable unit of length (px, em,...etc.).

• Example
  • 10px – Sets a margin of 10px for all four sides. Html code – margin:20px;)
  • 10px 20px 30px 40px - Set values for each side (starting from top counterclockwise as you progress through the list). 10px (top margin), 20px (right margin), 30px (bottom margin) and 40px (top margin). Html code – margin: 10px 20px 30px 40px.
  • 10px 20px - Sets margin to 10px (top and bottom) and 20px (right and left).
  • 10px 20px 30px – Set margins to 10px (top), 20px (right and left) and 30px (bottom).

If desired margins for individual sides can be defined separately. E.g. margin-top:10px. Similarly for margin-bottom, margin-right and margin-left. In ASHE an individual margin property must be manually entered into the tag element.

Padding

Padding is the blank space inserted between the content of an element and its boundary. The element's background (e.g. colour) can be seen through the padding. Borders surrounds the padded area. Similar to the margin property, padding can be set for the four sides, top, right, bottom and left. The value for the padding property can be set collectively as a single value or separately for each side followed by an acceptable unit of length (px, em,...etc.). A value of 5px sets padding to 5px for all sides (html code – padding:5px;). The process of specifying values for padding is the same as it is for the margin property.

Position (positioning elements)

Positioning allows you to place elements to desired locations within a webpage. Default behavior of a web browser is to place content in the order they are in the html code. Values of the position (type) property are:

• Static – Normal or default flow. Elements are in the order of their appearance in html code.
• Relative – Position relative to the default. Allows the user to define how much an element is displaced from the normal flow.
• Absolute – Positions the element relative to its parent element. E.g. If element 2 (child) is nested within element 1 (parent). Absolute positioning allows you to position element 2 relative to element 1.
• Fixed – Essentially positions an element to location on the display screen. When the webpage is scrolled up or down the element remain fixed in the defined position.

Once the position type is defined, directional properties can be specified. Directional properties available are:

• Left: - Amount left from the inherit position (the actual inherit position vary based on the positioning type).
• Right – Amount right from the inherit position.
• Top – Amount below the inherit position.
• Bottom – Amount above the inherit position.

The property consists of a direction followed by a numerical value and unit of length (px, em, cm,.. etc). Eg. Left: 200px. (shifts the element 200px left of the inherit position).

• To reposition elements:
  1. Click button to open the positioning form.
  2. Select the positioning type.
  3. Enter amount of displacement required for a particular direction/s (Unit of length is px. Alternate unit can be manually entered into the textarea after the use of the feature). Unspecified values will retain their default settings and the web browser will render the content as such.
  4. Select the textual and graphical content (within the textarea) that require repositioning. The selection may contain number of <div>, <span> and other tags. It is important that selection contains both start and end tags of all elements contained within it. Partially selected elements are likely to produce undesired results.
  5. Click button in the form.