Adding Code and Content

Now we're ready to get to work on our page.

A picture of the toolbutton used for each procedure is shown below the procedure step. Menu commands and shortcut keys are listed for many of the procedures, as well.

Body tag

Our sample page is for a travel Web site. We want the site to be pleasing to the eye and easy to navigate, so we'll start by adding an attractive page background and then select a complementary color for the text.

Note To add Body content:
  1. Right-click inside the <BODY> tag and choose Edit Tag from the menu to open the Body dialog box.

  2. Click the Browse button to the right of the Background Image text box.

  3. In the Open dialog box, select the image1.jpg file from the tutorial files folder and click Open.

    The file's name is inserted in the Background Image text box. Images are separate graphics files (usually with the gif or jpg extension) inserted into HTML documents. They can fill an entire page or be sized to fit just a portion of a page.

  4. Open the Text Color drop-down list and choose Navy.
  5. Click OK to apply your changes and close the Body dialog box.

    The resulting HTML code looks like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <HTML>
    HEAD>
        <TITLE>Archaeology Tours</TITLE>
    </HEAD>
    
    <BODY BACKGROUND="image1.jpg" TEXT="Navy">
    
    </BODY>
    </HTML>
    

Paragraph tag

The paragraph <P></P> tag is the most basic text container. Paragraphs appear in the browser with a blank line before them. Text inside paragraphs can be aligned to the left, center, or right. You set can specify

Note To add a paragraph and enter text:
  1. Place the cursor on a line after the <BODY> tag line.

    Click the Paragraph button on the Common QuickBar or press SHIFT+CTRL+P to insert a paragraph tag. The <P> tag does not require a closing tag, but you can check the Include closing </P> tag option in the Settings > HTML pane (F8) if you want one inserted.

  2. Type This page was created with ColdFusion Studio, which you can find at Allaire's Web site after the <P> tag.
  3. Click the Browse tab or press F12 to view your page.

  4. Click the Edit tab (F12) to return to the HTML code.

Let's make ColdFusion Studio stand out a bit in that sentence.

Bold tag

You can wrap a single character, a word, or a text block in the <B> tag to highlight it on the page.

Note To add bold formatting:
  1. Select the phrase ColdFusion Studio in the paragraph you just typed.
  2. Click the Bold button on the Common toolbar.

  3. Check it in Browse mode.

    That's better!

  4. Click the Save button on the Standard toolbar or choose File > Save (CTRL+S).

Next, you'll create a link from this paragraph to the Allaire Corporation's Web site.

Anchor tag

Hyperlinks, or links, are the heart of the World Wide Web. They enable you to move from page to page with the click of a mouse and they provide the connections between Web pages and other resources.

Links are created with the Anchor <A></A> tag and require the HREF attribute, which specifies the target page to which you are linking. Links are usually identified on a page by special link text formatting, such as a distinct color or underlining. Many sites also use images that are coded with the Anchor tag.

Note To insert a hyperlink:
  1. At the end of the line you just typed, select the text Allaire's Web site.
  2. Click the Anchor button on the Common QuickBar or press SHIFT+CTRL+A to open the Anchor dialog box.

  3. Type http://www.allaire.com in the HREF box. The text you selected in step 1 displays in the Description box.
  4. Click OK to insert the link in your document.

    The line should now look like this:

    <P>This page was created with <B>ColdFusion Studio</B>, which you can 
    find at <A HREF="http://www.allaire.com">Allaire's Web site</A>.</P>
    

Image tag

We used an image file for the page background, now we will place an image on the page by coding the <IMG> tag. Several attributes are available for the <IMG> tag, but only one is required, SRC, which specifies the image file path. The <IMG> tag doesn't require an end tag.

<IMG SRC="images/myimage.gif">

By default an image is treated as an inline image, that is, the browser renders it as if it were a character in the line of text. The bottom of the image is aligned with the base of the line, and the image's position within the text will remain the same regardless of how the browser wraps the lines. You can set images off by themselves by placing them in separate paragraphs or table cells.

Note The image's source file is unaffected by changes made to an image's attributes in Studio.

Note To insert the Greek Column image:
  1. Place the cursor below the first paragraph and click the Image button on the Common QuickBar or press SHIFT+CTRL+I to open the Image dialog box.

  2. Click the Browse button next to the Source text box.
  3. Select greekcolumn.gif from the tutorial files folder and click Open.

    greekcolumn.gif is entered in the Source text box.

  4. Enter Greek Column in the Alt. Text box.

    This ensures that a text description of the image appears on the page if the image cannot be rendered.

  5. Choose RIGHT from the Align drop-down list.

    This attribute forces the text to the left of the image.

  6. Click OK.

    The tag should look like this, although the WIDTH and HEIGHT values may differ:

        <IMG SRC="greekcolumn.gif" WIDTH=111 HEIGHT=187 BORDER=0
        ALIGN="RIGHT" ALT="Greek Column">
    

Heading tags

The next text in the page is a heading. HTML allows six levels of headings, ranging from <H1>, which produces the largest font, to <H6>, the smallest. Heading tags can contain formatting attributes, but we'll just accept the browser default for this one.

Note To insert the Archaeology Tours heading:
  1. Place the cursor on a line below the <IMG> tag.
  2. Click the H1 button on the Fonts QuickBar or choose Tags > Heading 1.

  3. With the cursor between the <H1> and </H1> tags, type Archaeology Tours.

    The tag should look like this:

        <H1>Archaeology Tours</H1>
    

Horizontal Rule tag

Let's add a visual element to separate the heading from the next section. We'll accomplish this by adding a horizontal rule.

Note To add a horizontal rule:
  1. Place the cursor on a line below the heading.
  2. Click the Horizontal Rule button on the Common QuickBar or choose Tags > Horizontal Rule to open the <HR> editor.

  3. Leave the Align option set to the default value, Center.
  4. Check the No Shading option.
  5. Enter 80% in the Width box (note that you can specify widths in percentages of the page width or in pixels)
  6. Click the Browser-specific tab and choose Black from the Color drop-down list.
  7. Click Apply.

    The code looks like this:

        <HR WIDTH="80%" COLOR="Black" NOSHADE>
    

Font and Align tags

We want the next line of text to stand out on the page, so we will add some special formatting that applies to just that line.

The <FONT> tag allows you to specify the font face, the size in relative or absolute pixel values, and the text color. You use the ALIGN attribute to set the horizontal alignment of the text on the page.

Note To create the Travel back in time paragraph:
  1. Place the cursor on a line below the <HR> tag.
  2. Insert a <P> tag.
  3. Type Travel back in time! after the <P> tag.

    The tag should look like this:

        <P>Travel back in time!</P>
    

    Let's use the <P> editor to complete this tag.

  4. Right-click in the <P> tag and select Edit Tag from the menu.
  5. Select center from the Align box and click Apply to close the editor.

    The ALIGN attribute is added to the tag.

  6. Select the "Travel Back In Time!" text.
  7. Click the Font button on the Fonts QuickBar to open the <FONT> editor.

  8. Choose Red from the Color drop-down list.
  9. Choose +3 from the Relative + drop-down list.
  10. Click the HTML 4.0 tab.
  11. Choose Arial from the top Font Face drop-down list.
  12. Click Apply.

    The tag now looks like this:

        <P ALIGN="Center"><FONT FACE="Arial" SIZE="+3" COLOR="Red">
        Travel back in time!</FONT>
        </P>
    

Break tag

As mentioned, Web browsers ignore line breaks, tabs, and extra spaces in documents. HTML elements such as paragraphs, lists, and headings each set their own spacing, so if additional spacing is needed, it must be coded.

One way to easily set spacing is by entering a <BR> tag. This can be done to break a line or to separate page content.

Note To insert a line break:
  1. Place the cursor above the "Travel back in time!" line.
  2. Click the Break button on the Common QuickBar.

  3. Add three more <BR> tags to get the right spacing.
  4. Check the spacing in the browser and adjust it if needed.

The rest of the Archaeology Tours page is laid out as a table, which you'll create in the next set of procedures.