Trellian Webpage

Introduction to HTML



A web site is a collection of web pages that are linked together. A web page (HTML file) is a plain text file that uses HTML code tags to instruct web browsers to display text and objects in specific ways. They can be prepared using any plain text editor (such as Notepad) or by using a visual editor such as WebPage.

The HTML code for any page can be viewed in a web browser by clicking on the Edit menu and selecting View source (Internet Explorer) or clicking on the View menu and selecting Page source (Firefox).

To create a web site using Webpage, you need to create multiple web pages and link them together. See the link section on this page for more information.


Required HTML tags

HTML files have some required elements.
Every HTML file must begin with:

<html>
<head>
<title>TITLE OF WINDOW</title>
</head>
<body>
where "TITLE OF WINDOW" is the text that you want to appear in the title bar of the browser window.
The title text is also displayed by search engines when listing your site in the search results. Every HTML file must end with
</body>
</html>


The page content (text, images etc.) is located between the <body> and the </body> tags.
To enter the page title and other tags in the WebPage Editor tab, click on the Tools menu and select Meta Tag Editor.



Page text

Plain text content can be entered directly into the WebPage Editor tab and source tab, however it is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words in the source tab. For example, the following text:
It is important to realize that browsers will 
ignore 
all of the formatting and even the carriage 
returns,
 tabs, and       multiple       spaces       between       words.
will be appear on a Web page like this:

It is important to realize that browsers will ignore all of the formatting and even the carriage returns, tabs, and multiple spaces between words.

In order to force a line break, you must insert a <br> into the text, and to create a paragraph separation (white space between paragraphs) you must insert a <p> between the paragraphs.
This is not a concern when using the WebPage Editor tab, as WebPage automatically converts spaces into the relevant HTML code.



Text Formatting with HTML code

Text formatting options are controlled by pairs of tags which surround the effected text, such as:
EffectHTML tagsWhat it looks like
boldface<b>example</b>example
Italic<i>example</i>example
bold italic <b><i>example</i></b>example
larger font<font size="+1">example</font>example
larger font<font size="+2">example</font>example
smaller font<font size="-1">example</font>example
Large letter<font size="+3">E</font>exampleEexample
Color text<font color="#ff0000">example</font>example
Centering<center>example</center>
example
subscriptH<sub>2</sub>OH2O
superscriptcm<sup>2</sup>cm2
Symbol font<font face="symbol">abcde</font>abcde




Images

Images should be in gif or jpg format to ensure cross browser compatibility. png and bmp formats are not supported by all web browsers, whereas jpg and gif formats are supported by all browsers.

To insert an image in the Webpage Editor tab, click on the Insert menu and select Image. The HTML tags for images specify the image source (path and filename), alt tags and other aligning and size attributes, if required. Alt tags are displayed when image display is disabled, and the alt text is used for vision impaired viewers (e.g.. narrated by text readers etc). To edit image settings in the Editor tab, right click on the image and select Properties.

Note:To avoid issues with the image path, the image files should ideally be located in the same folder/directory as the HTML file itself. WebPage can export the images and HTML files in one folder to allow for easy uploading and will automatically convert the image paths to match the exported folder. See the Exporting a webpage section of the manual.


HTML code examples for images:

<img src="trellian.gif"> will display the GIF file "trellian.gif", if that file is in the same directory as the HTML file.

If the image file is in a subdirectory/folder, then the subdirectory name must be specified. For example, if the file "trellian.gif" is in a subdirectory called "img", then the image tag would be:
<img src="img/trellian.gif">

Ensure the file and subdirectory/folder names are exact, as some web servers are case sensitive and consider IMAGE.GIF to be a different file from image.gif




Links

Links are text or images that specify, or link, to another page, image or other element. Text links usually appear as underlined text on web pages.

To insert links using the WebPage Editor, click on the Insert menu and select Hyperlink. Enter the filename and path (if required - see below for an explanation).

HTML code examples for links:

To create a link to the HTML page "faq.html" which is stored in the same directory/folder as the current page, the code link tag would be:
Click Here to go to <a href="faq.html">FAQ page</a>.

Would would appear on the page like this:
Click Here to go to FAQ page.

If the faq.html page is in a subdirectory/folder eg. the support folder, then the folder name must be specified. <a href="support/faq.html">

If faq.html is stored in a higher level folder (one level up from the current folder), then folder name would be prefixed with .. eg.
<a href="../faq.html">


To link to another website (URL) enter the entire URL, for example:
<a href="http://partner.vendercom.com/form.php">Click here to join now!</a>.


Images can also be links. To create a linked image in the WebPage Editor tab, first insert the image, then select the image, click on the Insert menu and select Hyperlink.

To link a small image (thumbnail) to a larger version, a standard link is used.

Small images should be used to reduce the loading time for pages. By linking the small image to a larger version, users can decide for themselves whether to access the larger, slower to load, full-size image.
To do this in the WebPage Editor tab, first insert the image, then select the image, click on the Insert menu and select Hyperlink. Enter the file name and/or path to the larger image.


Sound and video links

Sound and video links are constructed as per normal links. For example:
<a href="sound1.au">[Click here to hear a sound bite]</a>

When the user clicks on the link, the browser downloads the file, looks at the file extension (".au"), determines which application to launch to run the file..

Video links work exactly the same way, except that the file name would be a .mov, .mpeg, .avi etc. type file

Alternatively, other elements, such as Flash, music players, video players etc. can be added to a page by embedding the element: To do this in the WebPage editor, click on the Insert menu and select Embedded plugin.


Headings

Headings can be used to create titles in various sizes.
Headings are available in 6 sizes (Note: the smallest heading size number is the largest, eg. H6 is the smallest heading size):
To select a heading in the WebPage Editor tab, select a heading size from the drop down menu on the toolbar. This menu displays "Normal" for non-heading text.