This chapter is from the book

This chapter is from the book

Web sites are made up of a series of interconnected documents (pages) that a
visitor can surf through using something called hyperlinks. Hyperlinks
are pieces of text or images that, when you click them, take you to another page
or another area on the current page. The pages themselves are simply text
documents that utilize Hypertext Markup Language (HTML) to create the links.

There was a time when you needed to write HTML by hand to create even the
simplest of Web pages. With the advent of applications such as Adobe GoLive, you
no longer need to write all the syntax yourself. You put together the page the
way you want it to look, and GoLive will write the HTML for you in the
background.

In this hour, you'll learn about

The fundamentals of HTML

Creating a new Web page in GoLive

The Document window and editing modes

How to view the HTML that GoLive generates

The HEAD section

Using a preset page width as a guide for designing

Setting basic page attributes

Previewing your page in GoLive and in a browser

Understanding the Fundamentals of HTML

HTML (Hypertext Markup Language) is a page description language. HTML files
describe the layout and contents of a Web page, or pages, through the use of
elements called tags. If, for example, you wanted to create bold type on a Web
page you would enclose the text in a tag that specifies bold, for example:

<b>Bold Type Here</b>.

Before you can use any Web editor you should have a grasp of how an HTML page
is created and the important parts to it. We will teach you enough about tags,
attributes, and values in this section to get you started, but it also helps you
to understand the GoLive user interface as well.

For this section you will need to open a copy of Simple Text (Mac) or Notepad
(Windows). You are probably thinking, "why did I invest in a Web-editing
program and this book if I am going to code by hand?" Hang in there and it
will come to light.

HTML Tags

HTML tags are commands written between less than (<) and greater
than (>) signs. Both the opening and closing tags use the same
command word but the closing tag carries a forward slash (/) symbol.
For example, in the following code, b represents a bold tag.

<b>American Graphics, Incorporated</b>

Every HTML document starts with the <html> tag and ends with the
</html> tag.

Attributes

Many tags have special attributes that offer other options for the tag.
Attributes are added after the opening tag separated by a space. Often, you can
use a series of attributes in a single tag, each separated with a space.

For example, in the following code, the word border is an attribute
of the tag table.

<table border>table information here</table>

Values

Attributes also have values. In some cases only a few options (values) are
available. Some values only accept integers. Follow the attribute with an
= sign and enter a value. For example, in the following code, the
10 represents the pixel width of the table border.

<table border="10">table information here</table>

Note

Not getting it yet? Think of tags, attributes, and values in everyday life.
Let's say that you are wearing pants. Think of pants as being the tag. The
pants have a color. Color is the attribute. The color is blue, for example. Blue
is the value.

To Do: Writing Your Own HTML

In this lesson you will create a simple page to help bring to light what
GoLive as a Web editor is doing in the background.

Launch either Simple Text (Mac) or Notepad (Windows).

Type the initial tags to let the Web browser know that it is reading a
Web page.

<html>

</html>

Keep in mind that to be compliant with today's Web standards we
would need to put more information about HTML version and so forth. on this
page, but we are going to keep this basic.

Type the tags for the head of the page between the opening and closing
HTML tags.

<html>

<head>

</head>

</html>

The head is the section of a page that contains items, other than the
title, that are not visible to the viewer. This can include keywords and
descriptions of a page, as well as scripts for interactivity.

We will not be entering anything into our head section at this
point.

Type the opening and closing body tags after the head tag but still
inside of the HTML tag.

<html>

<head>

</head>

<body>

</body>

</html>

The <body> of an HTML document contains the items and
text that are visible to the viewer.

Inside the body tag type the following:

"This is my FIRST web Page."

We will preview the page you have created and edit it some more. Save the
file at a logical place in your hard drive as first.html.

Open the browser of your choice and choose File, Open. Browse to the
location on your hard drive that contains your HTML document and open
it.

You should see only your text. If you see tags, go back and
double-check your typing.

Now let's go back to your HTML document and apply an attribute and
value to an existing tag. Place your cursor after the word body in the
start body tag.

Enter a space and type the attribute bgcolor. Now, enter the
value by typing = and type the color
"yellow".

<body bgcolor="yellow">

Test this by refreshing the file in your browser. A yellow background
will appear.

Tip

Many people who do code by hand type both the beginning and end tags first
and then fill in the information between the tags. This helps to avoid missing
end tags.

You have successfully applied tags, attributes, and values. With that
experience in mind, understand that each tag has its own collection of
attributes and values. As we use GoLive the Inspector serves the purpose of
knowing the attributes that you can apply to selected items and letting you
change the values in Simple Text input boxes, thereby saving you the time and
effort of knowing the correct tags and which attributes work with them.