Narrative webpages have a regular layout similar to common printed matter, having a presentation format that may suit webpages with much textual content. Web articles and blogs have this kind of layout.

The table utility of the KompoZer HTML editor is a very versatile tool with features (not usually available in many good softwares used for making HTML webpage files) that can be used to easily create narrative webpages with layouts that can be quite sophisticated if need be.

 (The NVu HTML  editor,  a very successful software  though older version  of KompoZer, has the
  same versatile table utility tool.)



Tables and table delimiters, notes

The "Table" utility tool/"Insert" option  at  the "Main Menu Toolbar"  may be used at either the KompoZer work space or else at an existing table on the work space to create new tables  (up to an indefinite number of serial insertions or levels of insertions) that can contain texts, images, links or other objects needed for a webpage.

Names may be specified if desired for tables upon creation that are automatically included in the underlying HTML code for the concerned table. The "Advanced Edit...'' button (on the lower left corner of the "Table  Propertries" screen) may be used to open the "Advanced Property Editor" screen where the "Attribute" labelled "id" may be specified with the "Value" for table name.

Table names facilitate locating other HTML codes for objects (texts, images, links, etc.)  contained by specific tables if needed, as well as for documentation purposes.

To compensate for variously sized screens as well as for other aesthetic considerations, at least two table delimiters may be created, one within the other to set dimension limits and as development guide for upper level tables containing the principal contents of the webpage and related data.


The KompoZer editor's blank work space shall contain the first to be created table delimiter which, to set convention may be classified as "level-0" table (level numbers are incremented by 1 above that of the containing table. For narrative webpages, the work space should only contain one (1) level-0 table.

Table delimiters may be used, besides background uses,  to make sure that the webpage is centered on the screen window it is displayed on if the webpage is of smaller width than the window. To center, two specifications are entered at the "Table properties"  screen during creation of the two lowest level tables, described as follows...
"level-0" delimiter:    100% of window
"level-1" delimiter:    Tabel Alignment = Center

As convention here level number may be included as third character of a table's name. The two table delimiters above shall be called "td0-pageArea" and'td1-Base1"

Narrative webpage display structure

The whole webpage display comprised of the  principal content including other data may be imagined divided into a number of horizontal rows, with different height for each row that fit content (the software used to build a website may automatically adjust short row height with content height).

One or more vertical columns may also subdivide  a group  of  one or  more  rows  for a given  depth of  the webpage display,  with different width for  each column  depending  on content (the software used to build a website  may automatically  adjust short column width with content width), to form  on that depth the imaginary structure  of a table with separate cells defined by the  columns and rows  ("depth" here is used as top relative reference number, with "Depth-0" referring to the first group of rows on top).

More broadly the webpage may be imagined divided horizontally into one or more depths having different height for each depth, and each depth containing a fitting table or tables and its cells (generally, narrative webpages may only have 2 or 3 normal columns, if not just 1, at any height in its principal content).

Narrative webpage entry/edit

Contents for entry at a narrative webpage may have the three general classifications of  (1) Principal content, (2) Header data, and (3) Promotional displays.

Heading data is in 'Depth-0' of the webpage layout while the principal content is entered at tables created in succeeding depths. Promotional displays may be contained in remaining depths after the principal content though some or else most may also be mixed with contents of preceeding tables containing the two other classes of webpageconyent

The level-1 table delimiter  'td1-Base1' may be used to cover all depths specific to all three classes of webpage content by specifying three rows for it at creation time, or by revising its number of rows through the 'Table Properties' specification screen. Alternately, for aesthetic or whatever reason two rows may be specified for 'td-Base1' and another level-1 table delimiter (to be called "td1-Base2" can be created below for promotional displays. 

Entry and/or edit for webpages may be done, besides through main menu utilities, by use of four toolbars displayed
below the main menu above the workspace  and also below the workspace when the editor is opened. 

Facility to display or hide the toolbars is provided through the main menu utility labelled "View", option"Show/Hide". The four toolbars are called "Composition Toolbar", "Format Toolbar 1",
"Format Toolbar 2", and "Edit Mode Toolbar".

Text content entry/edit

Text contents written in table cells may have properties specified through the "Format Toolbar 2" of the KompoZer editor.

The first tool in the toolbar is a dropdown list for setting font which is defaulted to "VariableWidth". The font is set with a paricular default size which is best checked before proceeding with development (font for text already entered may be changed as needed to other fonts with default size whose apparent size may be bigger or smaller than the previously used font).

Object modules and ways to setup (create/edit)

Image display, site text link, including site image link are three of the more commonly displayed kinds of objects in narrative webpages. Object setup for them may be done either through specification screens accessible by clicking tools at the 'Composition Toolbar' or else by manual direct coding for the object's underlying HTML code through the"Insert" utility/"HTML" option at the 'Main Menu'.

The HTML coding that automatically  is outputted also by specification screens may be longer though than manual coding, because the automatic codes include default specifications that are usually left out in manual codes.

The 'Insert' utility/'HTML' option may be preferred often in the setup of objects with simple coding. It may be needed also in objects that are done by copying a similar object from some source then pasting it into a part of the webpage, adapting the object's HTML when pasted by use of the said option.

The object may be copied by clicking or highlighting its source then selecting the "copy" option from the "Edit" utility of the 'Main Menu', pasting the copied object by clicking the target position and selecting "Paste" from the same utility. Its HTML coding at the the target may then be revised.

Another way is to copy the HTML code of the clicked/highlighted object from the screen opened by the 'Insert' utility/'HTML' option by highlighting  the code with the mouse then pressing "Control-C".
The copied HTML code can then be pasted to the screen opened at the target position (through the 'Insert' utility/'HTML' option) by pressing "Control-V", then revised.

Setup for 'Image display' object

Image file uploaded at a folder of the host's server computer may be displayed at selected table cell positions in the webpage through use of the 'Composition Toolbar' icon labelled 'Image'. Clicking the position and the icon opens a screen named "Image Properties" where 3 of its 4 tabs at the top labelled "Image Location", "Dimensions", and "Appearance" may be used for image display specification.

Alternatively, the image file's expected or adapted HTML coding for display may also be inserted at the said position using the 'Insert' utility/'HTML' option of the 'Main Menu'. Its coding format may be simple enough to easily get used to. The part of an image HTML coding that may often look very different in form is its specification for image file name with folder address.

The simplest coding possible is for image file that is uploaded on the same folder that contains the webpage file, because the folder's address do not need to be included in the code. Often though, for reasons like better organization, the image file may also be placed in other locations, like a subfolder of the webpage file container, or else another folder in the same directory root folder. Images located in other hosting servers may also be used, requiring its full web address in the HTML coding.

One of two other usual specifications that may (or may not) be included in image HTML coding sets a different dimension (width and height in pixels) for the image to be displayed on the webpage, while another sets its border (in pixels). Dimensions need not be specified if display size is the same as the original size, unless the image is not yet uploaded during specification.

Three sample HTML codings are given below for an image file named "sampleImage.jpg" in three possible locations: (1) at the same folder as the webpage file named "sampleWebpage.htm", (2) at "reference" which is a subfolder for the folder containing "sampleWebpage.htm", and (3) at the folder with web address "". ('sampleWebpage.htm' is in "").



<img src="sampleImage.jpg" width="300" height="225" border="0">

<img src="reference/sampleImage.jpg" width="300" height="225" >

<img src="../folder2/images/sampleImage.jpg" >
       (note the double period ".." sets the root folder
        of  webpage conbtainer "folder1" which is also
        the root of "folder2".)

Note: the image file  "sampleImage.jpg" has the actual dimensions of 400 px width by 300 px height, and when displayed at "sampleWebpage.htm", in samples no.1 & no.2 is reduced by 75% (width = 300 px, height = 225 px) while at sample no.3 it is displayed full scale. The displayed image is not given border though coding is specified in sample no.1 for illustration purposes."

Setup for 'Site text link' object

Text links to open online sites may be setup by highlighting with mouse descriptive text in a table cell then clicking a tool icon labelled "Link" at the 'Composition Toolbar', which opens a specification screen named "Link Properties".

An input box labelled "Link Location" of the screen is for specifying web address of the site to be opened, while the selection box labelled "Target" provides option (if the checkbox labelled "Link is to opened" is checked) to display the site at a new window or to use the  same window (for 4 options with or without framesets).

Setup of 'Site text link' objects may also be done if preferred  by coding HTML directly through the 'Insert' Utility/'HTML'" option of the 'Main Menu', with code formats  similar to that of the three samples provided below (the site displays in the same window at the first sample, and at a new window in the second and third samples).

         1.  <a href="">Sample Site</a>
2.  <a href="" target="_blank"
                   >Sample Site</a>
3.  <a href="" target="_blank"
                   > Sample Site</a> sample continuation line (not linked)

Setup for 'Site image link' object

Like images meant only for display, images that may be clicked to open online sites may be setup through the screen named "Image Properties" that open when the icon labelled "Image" isclicked at the'Composite Toolbar'.


The image is first setup thru the "Image Properties" screen using the same procedures as used to setup objects that only display image (in preceeding topic titled "Setup for 'Image display' object"), then the site to be linked is specified thru the tab labelled "Link" at the upper part of the same screen that resets it for enering "webpage location".

'Webpage location' entered at the 'Link' tab screen is the same as the 'Link location' entry  at the 'Link Properties' specification screen used for 'Site text link' objects, but a 'Target' selection box is not available to display the site at a new window nor at other preferential targets other than current window (when the image is clicked the site displays at the same window that previously displayed the narrative webpage).

To display the site at a new window (or at other  preferred 'Targets', the 'site image link' object may be setup by direct HTML  entry through the 'Insert' utility/'HTML' option.

For 'Site image link' objects that already exist though, the HTML coding specifications  for 'webpage location link' as well as 'Target' is not viewable nor editable through the utilty (only the image specification), so to setup, the object may first be deleted. Those proficient may also prefer the faster but even more direct way to setup by use of the "Source" tab at the "Edit Mode Toolbar" (since all specifications are accessible at the webpage source code, which is editable through the tab).

For direct HTML coding setup of 'Site image link' obects, HTML similar in format to the codings provided in the two samples below may be used at the 'Insert' utility/'HTML'  option of the 'Main Menu' (the site displays in the same window at the first sample, and at a new window in the second sample).

1.  <a href="">
<img src="reference/sampleImage.jpg"></a>

2.  <a href="" target="_blank">
<img src="reference/sampleImage.jpg"></a>

Setup for "Inset frame" object

An 'Inset frame  (or "Iframe") is a section of the narrative webpage that display (and is linked with) another online site.  Advertisers may use Iframes to promote their own sites at other webpages by providing webpage owners with needed codes to display their site as Iframe.

Sections of webpages that are also displayed in other webpages (same owner) or else expected to have frequent changes, may also be developed as separate webpage then incorporated again as Iframe for easier maintenance.

To display an Iframe in a section of narrative webpage, HTML coding similar in format or adapted from the sample provided below may be used at the 'Insert' utility/'HTML' section of the 'Main Menu' (the source webpage for the Iframe sample is in "reference" which is a subfolder of the folder containing the narrative webpage).

<iframe src="reference/sampleIframesource.html" width="300" height="500" scrolling="no" border="0" marginwidth="0 marginheight="0" style="border: medium none;" frameborder="0" ></iframe>

Page title, Description, Keywords

The three identifying attributes for a narrative webpage stated in the subtopic title above are for search engine use.  The first two may be entered through the "Page Properties" specification screen  which is accessible through the "Format" utility/"Page Title and Properties" option of the 'Main Menu'.

 The third may be inserted directly on the webpage source code as a line ofHTML coding just after the line generated by the entry of the second attribute ('Description'). Both lines have the following similar code formats so that HTML coding for the third attribute may be copied/pasted from the second then revised as necessary.

1. For the 'Description' attribute, the HTML coding format is...
    <meta name="description" content="....... ....... ....... ....."

2. For the 'Keywords' attribute, the HTML coding format is...
    <meta name="keywords" content=".......; .......; .......; ....."
    (semi-colon between "content" keyword)

The webpage source code  may be opened for manual modification by clicking on the tab labelled "Source" at the "Edit Mode Toolbar" (located at the bottom left of the KompoZer screen). The screen may then be scrolled up to locate the line generated for the 'Description' attribute (near the  top), which is identifiable by the 5-character <meta and the 18-charactersname="description".