This tutorial acquaints you with the basics of using HomeSite for HTML authoring. Completing the tutorial produces a Web page that looks like the one below. This page combines text, color, layout, formatting, and links in a functional design. The techniques you learn here apply to building Web content in general.
Before you create the Web page, you need to know a few basic concepts about HTML. Then we can start the hands-on tutorial, and learn about the HTML tags that we use in our sample Web page.
If you are new to HTML (Hypertext Markup Language), take heart. The rapid acceptance of HTML is based on its simple, logical syntax and plain language.
An HTML document is just like an unformatted text document in that it primarily contains words-and some pictures if you are lucky. However, an HTML document can also have links to other Web pages, media content such as audio and video clips, forms to get user input, programs to retrieve data from a database, programs to make calculations, and so on.
The other big difference between an HTML document and a plain text document is that an HTML document is "marked up" with tags. The next section explains this.
An tag, also called an element, contains instructions for a Web browser such as Netscape or Internet Explorer; it explains how the browser should display or otherwise handle a part of the document. For example, the Comment tag instructs the browser to ignore its content; the browser does not display or process anything between <!--
and -->
. As another example, the Bold tag instructs the browser to bold all text between <b>
and </b>
.
Tags also indicate the basic structure of the document: its header, title, body, and, within the document body, any number of structural elements.
Tags are enclosed in angular brackets made of the less-than and greater-than signs on your keyboard (< >
).
There are two types of tags: container tags and empty tags.
<I>
to be italicized</I>
. The end tag is identified by a forward slash (/) before the tag name (with the exception of the Comment end tag, -->
). Container tags enclose the actual page content.
<IMG>
inserts an image, <HR>
inserts a horizontal line, and <BR>
inserts a a line break. Empty tags do not have an end tag.
Most HTML tags have one or more attributes. Tag attributes provide additional information about a tag. For example, the Image tag has a required Source (SRC
) attribute and an optional Border attribute. The Source attribute specifies where the image file is located, and the Border attribute specifies how wide of a line to display around the image. (Image has other attributes too, as we will see later in this tutorial.)
An attribute belongs in the start tag: <TAG_NAME ATTRIBUTE="value">.
One example of this is: <P ALIGN="CENTER">
. Attributes are separated from one another by a single space; for example, <IMG SRC="images\Banner.gif" BORDER="0" ALT="Banner">
. There should be no spaces after the left bracket (<
) or before the right bracket (>
). Tag and attribute names are not case-sensitive, so you can use either <HTML>
or <html>
. However, some attributes values, particularly file names, are case-sensitive.
Many tags can be nested (placed inside other tags), but tags should never overlap:
<P><STRONG>
text</STRONG></P>
<P><STRONG>
text</P></STRONG>
Note Many browsers can display |
Here's a brief HTML sample. Note that the only text that actually displays in a Web browser is My Home Page. The rest is invisible because it is enclosed in tag brackets.
<P ALIGN="Center">
<FONT SIZE="+3"><B>My Home Page</B></FONT> </P>
In this sample, the <P>
and <FONT>
tags contain attributes specifying how the text should appear. The attribute ALIGN="Center"
tells the browser to center the text on the page, and SIZE="+3"
tells it to display the text three sizes larger than normal.
When you open a new document in HomeSite, you start with more than a blank page-the default template contains the tags required for any valid HTML document. These tags, also called elements, are shown below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD> <TITLE>Untitled</TITLE> </HEAD> <BODY> </BODY> </HTML>
These tags must be included in every HTML page. The following table briefly describes each of these required elements.
This tutorial introduces you to HTML and provides an opportunity for you to create a simple HTML page. To master HTML, you may want to take a course or learn from the ample HTML source code that is readily available on the Internet.
And, of course, practice makes perfect!
There are many HTML courses available, including Macromedia's Fast Track to HTML course. There are also many online tutorials and references whose scope exceeds this tutorial. You can search the Web and choose your favorites. You could begin with the NCSA Beginner's Guide to HTML and, after creating Web pages for a while, reference the most recent HTML specification from the World-Wide Web Consortium (W3C) to answer your advanced questions. See also "Developer Resources".
For a hands-on learner, surf the Web. When you find something you like, view its source (for example, in Internet Explorer, right-click the area of the page you like and select View Source). The source opens in a word processing program. If you like what you see, save the file to your local machine and use it to create your own Web page. After doing this for a while, you may become so proficient that you can also identify and add scripts to your Web pages, to add interactive content.
Note Not every site has useful HTML source. Many Web sites now use minimal HTML pages as a basic framework from which to execute server-side code; this code is not visible in the source. Other Web pages have exceedingly complex and unreadable source. Finally, while HTML source is free domain, the actual text, images, and other content may not be. Please respect all copyright notices. |
Before beginning this tutorial, you should become familiar with the HomeSite workspace. The material presented here assumes a working knowledge of user interface elements such as the toolbars, QuickBar, Files tab, and the Editor. These components are described in "Exploring the Workspace".
HomeSite's drag-and-drop feature and tag editors automatically add the correct syntax-such as quotes, brackets, and the equal sign-when you insert code. If you edit the code manually, be sure to maintain the correct syntax.
By default, HomeSite closes tags for you. For example, when you type <H1>
, HomeSite automatically inserts </H1>
after the cursor. This is a great convenience once you are used to it, but until then, make sure you do not have two end tags anywhere, for example <H1>My Heading</H1></H1>
.
When you first open HomeSite, it displays a new, untitled document. You can also choose to open a new document at any time.
The new document contains the tags required for any valid HTML document.
All the files you need to complete this sample page are in a single directory. If you accepted the defaults when installing HomeSite, the working directory is C:\Program Files\Macromedia\HomeSite 5.0\Help\Using HomeSite\tutorial files. If you select this directory in the Files tab, you can open and save files for the tutorial without needing to find this directory again.
We're using a single directory to make the tutorial easier, but once you develop Web content on your own, it's a good practice, organizationally, to keep your supporting files (images, media, scripts) in separate folders from your document files.
To create a new Web page in HomeSite, you just need to open a new document, give it a title, and save it. We will add the content in the next section.
You can preview the finished sample page at any time by opening the tour_html.htm file located in the tutorial files directory.
For help, see "Opening a new document".
For help, see "Setting the working directory".
<TITLE></TITLE>
tags and enter Archaeology Tours. Saving the new Web page ensures that HomeSite adds the correct file path to links that you create by dragging and dropping images and other files into the editor.
Now we're ready to get to work on our page.
Web browsers ignore line breaks, tabs, and spaces in HTML documents. As you build the page, you can add line breaks and indent to make your code more readable.
The following procedures contain pictures of the toolbuttons they reference. They also list menu commands and shortcut keys, where applicable.
You can insert comments that do not display in the browser for a variety of purposes, such as to remind yourself to do something, to hide a section that is not yet ready for public viewing, and to make the code easier for you and others to review and edit later. You are encouraged to insert comments liberally as you work, for example to introduce or explain the purpose of a code block.
By default, the Comment button does not appear in any of HomeSite's toolbars or QuickBars. But you can add it to the HomeSite workspace. For instructions, see "To add a button to a toolbar:". If you are using the default HomeSite workspace, you may want to add the Comment button (pencil icon) to the View toolbar, so the button appears in the top center of your workspace.
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 will start by adding an attractive page background and then selecting a complementary color for the text.
<BODY>
tag and select Tag > Edit Current Tag from the menu to open the Tag Editor - BODY dialog box.
The file name is inserted in the Background Image box. Images are graphics files (usually with a 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.
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>
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.
<BODY>
tag line. Click the Paragraph button on the Common QuickBar (not the vertical toolbar) or press Shift+Ctrl+P to insert a paragraph tag.
Tip The |
<P>
tag, enter: This page was created with HomeSite, which you can download from Macromedia's Web site. Let's make HomeSite stand out a bit in that sentence.
With the <B>
tag, you can highlight a single character, word, or text block on the page.
That's better!
Next, you'll create a link from this paragraph to Macromedia's company Web site.
Links, or hyperlinks, are the heart of the World Wide Web. They let you 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 tag, <A></A>
, and require the HREF
attribute. HREF
specifies the page to display when the link is selected. Links are usually identified on a page by special link text formatting, such as a distinct color or underlining. Many sites also use images coded with the Anchor tag, so users can click an image instead of a text link to go to a new page.
HREF
box. The text selected in step 1 displays in the Description box. The line should now look like this:
<P>This page was created with <strong>HomeSite</strong>, which you can download from <A HREF="http:/ /www.macromedia.com">Macromedia's Web site</A>.</P>
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 file path where the image is located. The <IMG>
tag does not have an end tag (<.../>).
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 remains 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 an HTML document. |
<P>
tag line. Click the Image button on the Common QuickBar or press Shift+Ctrl+I to open the Image dialog box.
The greekcolumn.gif file name is entered in the Source box.
This text description of the image appears on the page if the image cannot be displayed for any reason. This text is also available to visually impaired users.
This attribute forces the text to the left of the image.
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">
The next text in the page is a heading. HTML allows six levels of headings-from <H1>
, the largest font, to <H6>
, the smallest font. Heading tags can contain formatting attributes, but we will just accept the browser default for this tutorial.
<IMG>
tag.
<H1>
and </H1>
tags, enter Archaeology Tours. Let's center it.
The tag should look like this:
<H1 ALIGN="CENTER">Archaeology Tours</H1>
Let us add a visual element to separate the heading from the next section. We will accomplish this by adding a horizontal rule.
<HR>
editor.
The code looks like this:
<HR WIDTH="80%" COLOR="Navy" NOSHADE>
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. The ALIGN
attribute allows you to set the horizontal alignment of the text on the page (left, center, right, or justify).
<HR>
tag.
<P>
tag. <P>
tag, enter: Travel Back in Time The tag should look like this:
<P>Travel Back in Time</P>
Let's use the <P>
editor to complete this tag.
<P>
tag and select Tag > Edit Current Tag from the menu. The ALIGN
attribute is added to the tag.
<FONT>
editor.
<P ALIGN="Center"><FONT FACE="Arial" SIZE="+3" COLOR="Maroon"> Travel Back in Time</FONT> </P>
Web browsers ignore line breaks, tabs, and extra spaces in documents. HTML elements such as paragraphs, lists, and headings set their own spacing, so if additional spacing is needed, it must be coded. An easy way to set spacing is by adding a
<BR>
tag. This can be done to break a line or to separate page content.
<BR>
tags to get the right spacing. The rest of the Archaeology Tours page is laid out as a table, which you'll create next.
HTML tables allow for more interesting page compositions. Tables are relatively complex compared to the other tags covered so far, so it's worth spending some time discussing tables in general before looking at the specific table code in the Archaeology Tours page.
HTML tables are built in table tags, <TABLE></TABLE>
. The table's basic structure is defined by table row tags, <TR></TR>
. Inside table rows are table cells, marked with table data tags, <TD></TD>
. You can also use table header tags, <TH></TH>
, which are identical to table data tags except that their text is bold and centered horizontally in the data cell by default.
You can cause table data or table headers to span rows or columns by using the ROWSPAN
and COLSPAN
attributes, which produce effects similar to merging cells in a spreadsheet or word processor table.
If you plan to support multiple browsers, you must test the table code in those browsers. For help, see the list of browser testing sites at http://builder.cnet.com/webbuilding/0-7255-8-5801921-1.html.
There are a number of other attributes that can be used within the <TABLE>
tag. The following table lists the most important table attributes.
The Table Wizard opens with the default table layout of two columns by two rows.
Color-coding shows the cell now fills the entire left column.
The code should look like this:
<TABLE CELLSPACING="0" CELLPADDING="3" BORDER="0"> <TR> <TD ROWSPAN="2"></TD> <TD ALIGN="center"></TD> </TR> <TR> <TD ALIGN="center"></TD> </TR> </TABLE>
Notice how HomeSite indents the <TD>
blocks in the code above. This coding convention makes it easier to see the table structure. This hierarchical display of table elements is coded by nesting the row and cell tags within the table tag.
In the following procedures, you'll add text and formatting to the table cells.
Content for HTML tables is entered in the table cells using the table data <TD>
and table header <TH>
tags.
Table text is formatted in the same way as paragraph text, by coding the <FONT>
tag.
<TD></TD>
tags in the line that contains the ROWSPAN="2"
attribute.
<TD ROWSPAN="2"><P></P></TD>
The text is inserted in the paragraph. The code now looks like this:
<TD ROWSPAN="3"><P>Welcome to Archaeology Tours, the first choice of travelers and adventurers. Our Mediterranean Cruise features luxury accommodations, with stops in the following ancient cities:</P></TD>
The rest of the content of this cell consists of a bulleted list, which we'll get to a bit later. First, let's format the cells in the right column, beginning in the top cell.
After you create a table with the Table Wizard, you can refine the layout by editing the properties of its individual elements. To change these properties, use the <TR>
and <TD>
tag editors.
<TD>
tag that follows the <TD>
containing the Welcome text and select Tag > Edit Current Tag from the menu. The alignment value you set in the Table Wizard is displayed in the Tag Editor.
The code for the entire table should look like this:
<TABLE CELLSPACING="0" CELLPADDING="3" BORDER="1"> <TR> <TD ROWSPAN="2"><P>Welcome to Archaeology Tours, the first choice of travelers and adventurers. Our Mediterranean Cruise features luxury accommodations, with stops in the following ancient cities:</P></TD> <TD ALIGN="center" BGCOLOR="LightGreen"></TD> </TR> <TR> <TD ALIGN="center" BGCOLOR="LightBlue"></TD> </TR> </TABLE>
If those colored cells in the left column look a bit small, do not worry. We will size them by putting text in them.
Unlike the Macromedia link you coded earlier, these next links are to documents in the file system and do not require the http://www
prefix.
In this section, you will learn two ways to add links.
<TD></TD>
tags for the top right cell (the cell with the light green background) and enter: Purchase Cruise Tickets.
The selected text appears in the Description box.
The table cell tag looks like this:
<TD ALIGN="CENTER" BGCOLOR="LightGreen"> <A HREF="tickets.htm"><strong>Purchase Cruise Tickets</strong></A> </TD>
map.htm
file from the tutorial files folder and release the mouse button between the <TD></TD>
tags for the bottom right cell (the cell with the light blue background). The link text is filled in for you. The text between the anchor tags (<A>...</A>
) is from map.htm, in the <TITLE>
tag.
The code looks like this:
<TD ALIGN="CENTER" BGCOLOR="LightBlue"> <A HREF="map.htm"><strong>Interactive Tour Map</strong></A> </TD>
In the next section, you complete the table text by creating a list.
The remainder of the large data cell on the left is filled by an unordered list. Lists are one of the most frequently used organizational elements in Web authoring, just as they are in printed documents.
They are fairly easy to implement and offer several useful ways to structure information in HTML documents, so we will present a brief overview of list elements before resuming the tutorial.
HTML includes several list tags. Numbered lists are called ordered lists and use the <OL></OL>
tag. Bulleted lists are called unordered lists, and use the <UL></UL>
tag. Individual list items for either type of list are specified by the <LI>
tag, which does not require an end tag.
</P>
and </TD>
tags.
The code looks like this:
<UL> <LI> <LI> <LI> </UL>
The list is complete, containing a link for each city.
We will finish the table cell by inserting a paragraph after the list.
</UL>
and </TD>
tags and click the Paragraph button. The following text is entered between the <P></P>
tags:
Follow our guides back in time as you cruise the beautiful waters of antiquity and visit important archeological digs.
You have now completed the HTML tags tutorial. Congratulations!
Next, see the "Cascading Style Sheets Tutorial" to explore a different method of designing Web pages. Style sheets are optimal when creating more than one Web page for a site, because they standardize the look of every page in your site.
Here is the entire Archaeology Tours page code. Code comments are between the <!--
and -->
comment tags, and serve to document the page for future review.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>
<TITLE>Archeology Tours</TITLE> </HEAD> <!-- add background image --> <!-- set text color --> <BODY BACKGROUND="image1.jpg" TEXT="Navy"> <!-- link to Macromedia --> <P>This page was created with <B>HomeSite</B>, which you can find at <A HREF="http://www.macromedia.com">Macromedia's Web site</A>.</P> <!-- insert image --> <IMG SRC="greekcolumn.gif" WIDTH=111 HEIGHT=187 BORDER=0 ALIGN="RIGHT" ALT="Greek Column"> <!-- add header 1 --> <H1 ALIGN="CENTER">Archeology Tours</H1> <!-- add horizontal rule --> <HR WIDTH="80%" COLOR="Navy" NOSHADE> <!-- add line breaks --> <BR><BR><BR><BR> <!-- set red (maroon) paragraph text --> <P ALIGN="CENTER"><FONT FACE="Arial" SIZE="+3" COLOR="Maroon">Travel Back in Time</FONT></P> <!-- begin table --> <TABLE CELLSPACING="0" CELLPADDING="3" BORDER="0"> <!-- first column spans two rows --> <TR> <!-- begin left table cell --> <TD ROWSPAN="2"><P>Welcome to Archaeology Tours, the first choice of travelers and adventurers. Our Mediterranean Cruise features luxury accommodations, with stops in the following ancient cities:</P> <UL> <LI><A HREF="crete.htm">Crete</A> <LI><A HREF="istanbul.htm">Istanbul</A> <LI><A HREF="alexandria.htm">Alexandria</A> </UL> <P>Follow our guides back in time as you cruise the beautiful waters of antiquity and visit important archaeological digs.</P> </TD> <!-- begin top right cell --> <TD ALIGN="center" BGCOLOR="LightGreen"><A HREF="tickets.htm">Purchase Cruise Tickets</A></TD> </TR> <!-- begin second row --> <TR> <!-- begin bottom right cell --> <TD ALIGN="center" BGCOLOR="LightBlue"><A HREF="map.htm">Interactive Tour Map</A></TD> </TR> </TABLE>
</BODY> </HTML>