Creating a Web Page with GoLive 6
- Understanding the Fundamentals of HTML
- Making a New Page
- The Document Window and Its Tabs
- Viewing the Source Code
- Using the HEAD Pane
- Setting the Width of Your Page
- Setting the link, alink, and vlink Colors
- Setting the Page Background Color
- Previewing Your Page
- Summary
- Q&A
- Quiz
- Exercises
- Quiz Answers
This chapter is from the book
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.
Type the tags for the head of the page between the opening and closing HTML tags.
Type the opening and closing body tags after the head tag but still inside of the HTML tag.
Inside the body tag type the following:
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.
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.
Test this by refreshing the file in your browser. A yellow background will appear.
<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.
<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.
<html>
<head>
</head>
<body>
</body>
</html>
The <body> of an HTML document contains the items and text that are visible to the viewer.
"This is my FIRST web Page."
You should see only your text. If you see tags, go back and double-check your typing.
Enter a space and type the attribute bgcolor. Now, enter the value by typing = and type the color "yellow".
<body bgcolor="yellow">
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.