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.
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
same versatile table utility tool.)
Tables and table delimiters, notes
"Table" utility tool/"Insert"
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.
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.
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
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
window. To center, two specifications are entered at the "Table
properties" screen during creation of the two lowest level
tables, described as follows...
100% of window
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
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).
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
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).
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".
contents written in table cells may have properties specified through
the "Format Toolbar 2" of the KompoZer editor.
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).
modules and ways to setup (create/edit)
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'.
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.
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.
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
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
the image file's expected or adapted HTML coding for display may also
inserted at the said position using the 'Insert' utility/'HTML' option
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.
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.
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
Dimensions need not be specified if display size is the same as the
original size, unless the image is not yet uploaded during
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 "http://www.sampleSite.com/folder2/images/". ('sampleWebpage.htm' is in "http://www.sampleSite.com/folder1/").
width="300" height="225" border="0">
src="reference/sampleImage.jpg" width="300" height="225" >
the double period ".." sets the root folder
of webpage conbtainer "folder1" which is
the root of "folder2".)
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
Setup for 'Site text link' object
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".
input box labelled "Link Location" of the screen is for specifying web
address of the site to be opened, while the selection box labelled
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).
of 'Site text
link' objects may also be done if preferred by coding HTML
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).
> Sample Site</a> sample continuation
line (not linked)
|Setup for 'Site
image link' object
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
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' 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
the site at a new window (or at other preferred 'Targets', the
image link' object may be setup by direct HTML entry through the
'Insert' utility/'HTML' option.
'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).
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).
"Inset frame" object
'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
by providing webpage owners with needed codes to display their site as
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
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).
src="reference/sampleIframesource.html" width="300" height="500"
scrolling="no" border="0" marginwidth="0 marginheight="0"
style="border: medium none;" frameborder="0" ></iframe>
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.
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
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".