Basic HTML Tags

All HTML documents should contain the following tags:

  • Document Type <HTML></HTML> (beginning and end of file)

  • Header <HEAD></HEAD> (after the HTML tag, but before the BODY tags, includes descriptive info, such as title)

  • Title <TITLE></TITLE> (must be in header, between </HEAD> tags)

  • Body <BODY></BODY> (after the HEAD tags, bulk of the page)

When you create a new HTML document with HTML Editor, it uses the default HTML template. You can change the attributes as you see fit.

Tag text is color coded to make the HTML easier to read. You can change the default colors in the HTML editor in Global Options. For example, the HTML code for that last sentence looks like this:

You can change the default colors in the HTML editor in Global Options.

To insert a paragraph

  1. Click in the document where you want to insert a paragraph, then type

  2. Type text between the paragraph tags. For example, type:

    <p>Welcome to my wonderful website!</p>

    It doesn't matter if you type the tag with lowercase or capital letters.

The HTML Editor toolbar allows you to insert basic HTML tags into your page, without any prior knowledge of HTML code.

To format text

  • Select the text you want to format, then do one of the following:

    • To make the text bold, click the Bold icon .

    • To italicize the text, click the Italic icon .

    • To underline the text, click the Underline icon .

    • To format the font face, size, and color, click the Font icon . In the Font tag dialog box, click the down arrow to specify the Font (e.g., Arial), Color (e.g., Red), and Size (e.g., 1). As a base font size for a document, 1em (or 100%) is equivalent to setting the font size to the user's preference. Avoid sizes in em smaller than 1em for text body, except for copyright statements or other "fine print." Do not specify the font size in pt, or other absolute length units. They do not appear the same on all computers and cannot be resized by the browser.

To insert a table

  • Click the Table icon then on the graphic that appears, use your cursor to highlight the number of rows and columns you want. When you click the selection, the table tags appear in your document. Type the content for each cell between the tags. (Tip: Click the Browser icon to preview how the table will look.) You can even insert images into the table.

To insert an image

  1. Click the Image icon . The Image tag dialog box appears.

  2. In the Source box, click the folder icon to browse for an image. Once you have specified at least one image, you can click the drop-down arrow to insert it again.

  3. The Width and Height boxes display the size of the graphic. It is better for page loading if you size the graphic properly in your graphics editor, rather than adjusting the size with Width and Height attributes in the image tag. Inserting a huge graphic and then downsizing it with the Width and Height attributes will cause your page to load very slowly.

  4. In the Path conversion area, you can specify how the path should be formatted in the document. For example, perhaps the path is C:/Users/Public/Pictures/Sample Pictures/ Chrysanthemum.jpg on your hard drive, but on the FTP server, perhaps the path to the images is <server>/<website>/images/Chrysanthemum.jpg. You can format the path to be relative to the directory in which the web page will reside by clicking Relative from location of HTML file. Other options are Filename only (if all images are in the same folder as the web page) and Relative from drive if the web page and images are on networked drives.

  5. The steps above are sufficient to insert an image. However, the Advanced tab provides additional settings.

    • Alt. text—Specify the text that will display in place of or over ("hover text") images. This text is used, for example, by reader software.

    • HSpace and Vspace—Specify how much horizontal and vertical space (in points) to place around the image.

    • Border—Specify whether to draw a black border around the picture, in points.

    • Align—Specify where in the paragraph to place the picture:

      • absbottom—Aligns the bottom of the image with the bottom of the current line

      • absmiddle—Aligns the middle of the current line with the middle of the image

      • baseline—Aligns the bottom of the image with the baseline of the current line

      • bottom—Aligns the bottom of the image with the baseline of the current line. (see also baseline)

      • left—Image is placed to the left margin, and subsequent text wraps around the right side of the image

      • middle—Aligns the baseline of the current line with the middle of the image (see also absmiddle)

      • right—Aligns the image with the right margin, and the text wraps around the left

      • texttop—Aligns the image with the top of the tallest text in the line (see also top).

      • top—Aligns itself with the top of the tallest item in the line.

  6. Click OK.

The steps above are sufficient to insert an image. However, you can experiment with the advanced settings when you are comfortable in HTML. Regarding the Width and Height boxes, it is better for page loading if you size the graphic itself properly in your graphics editor, rather than adjusting the size with Width and Height attributes. Inserting a huge graphic and then downsizing it with the Width and Height attributes will cause your page to load very slowly (and your viewers to leave your website!).

To insert a hyperlink

  1. Select the text that you want to make a link.

  2. Click the Hyperlink icon . The Hyperlink tag dialog box appears.

  3. In the HREF box, type the URL to which you want to link the highlighted text.

  4. In the Target box, click an attribute:

    • _blank - the target URL opens in a new window

    • _self - the target URL opens in the same window

    • _parent - the target URL opens in the parent frame

    • _top - the target URL opens in the full body of the window

  5. In the Name box, type a name for the tag (optional).

  6. Click OK to insert the tag.

To insert a comment

Comments are used to notate your code to remind yourself why you inserted a particular element, or for team members editing the same documents. Comments do not appear in the web page when displayed in your browser.

  • Click the Comment icon . The Comment tags are inserted into the document. Type your comment between <!-- and -->.