HTML 4_01 Weekend Crash Course - G. Perry

S E S S I O N

2

HTML for Web Page Creation

Session Checklist

Create your first Web page

Learn the minimum HTML code to produce a Web page

Understand basic HTML formatting command tags

Understand that browsers do not support the same HTML code

You begin this session by creating your very first Web page from scratch (actually, from HTML!) using an editor such as the Windows 98 Notepad editor. Although the page will be extremely simple, the experience will teach

you much more about the nature of HTML programming than several chapters of text could do. HTML defines the styles of your Web pages. You’ll begin the example in this session by exploring the simplest job of HTML, text formatting, and you’ll learn the bare-bones HTML code required by Web pages.

Creating a Web Page

As you learned in the first session, HTML is a language that defines how your Web page will look. In one sense, HTML is a text-formatting language. Although HTML

does more than format text, when the first version of HTML appeared, text formatting was its primary job, second only to providing hyperlinks as cross-references to other HTML documents.

When you first learn HTML, perhaps the best place to begin is by formatting some simple text. Therefore, consider the following poem:

Roses are red,

The Web is sure growing.

You use HTML,

To keep your page flowing.

If you want to put this poem on a Web page, completely unformatted, you could not do so without using some HTML. In other words, every Web page requires a minimum amount of HTML code. Without the minimum HTML tags, the file would be no different from an ordinary text file, such as a text file that might end with the txt filename extension. Given that HTML is a language comprised of command tags, as you learned in the previous session, you must insert more advanced formatting tags around this poem before the poem can ever appear formatted on a Web page.

Minimum HTML

This section teaches you the minimal HTML code needed to produce a Web page and how the code should be set up. Keep in mind that the minimum code lets you create only an unformatted Web page. Formatting command tags will be covered later in this session.

Filename Extension

A Web page, defined in an HTML file, always has the filename extension html (or htm if you want to be compatible with Windows 3x users, although fewer and fewer of them exist). The html extension separates the file type from ordinary, unformatted text files whose extensions might be txt.

Many browsers, such as Internet Explorer, will refuse to open your file with an extension such as txt, except by starting another program such as Notepad and loading the text file into that secondary program for your viewing and editing work. Some browsers will open a file whose name does not end with the html extension, but will refuse to interpret any HTML command tags. In such a case, the file will appear inside the browser window displaying the nitty-gritty command tags themselves instead of performing the formatting actions that the command tags request.

It is common to nest tag pairs inside other tag pairs. By doing so, you can boldface words inside a Web page’s italicized body of text. Therefore, don’t be surprised to see many command tags begin before you see the first end tag.

Lowercase Versus Uppercase in Tags

It is common to use lowercase for all HTML tags. Most browsers and computers do not care if the tag is uppercase, as you saw in the previous session’s example. Uppercase tags can help you keep the tags more easily separated from the sur-

rounding text that the tags format. Nevertheless, a move is underway to standardize using lowercase tags because some computers, most notably UNIX-based machines, often distinguish too literally between uppercase and lowercase in command names. To be safe, develop a good habit and write lowercase tags.

Spaces in Code

You may not use spaces between a tag’s opening angled bracket, its forward slash (if it is an end tag), or before the command itself. Many commands, however, include spaces both in the command as well as in the command’s attribute, which is an optional value that some tags support. For example, here is a valid <a> command tag with a space that separates the tag name from its attribute:

<a href=”http://www.abc.org/image.jpg”>

The following is illegal in many browsers because of the location of the first space:

< a href=”http://www.abc.org/image.jpg”>

The reason the spacing around the command tag’s angled brackets and the command itself is so critical is that you do not want your browser mistaking normal text for a tag. If angled brackets appear in your Web page’s text that is to be displayed, those angled brackets will not be interpreted as possible HTML command tags unless they follow an exact format required by HTML. Also, many times you will see quotation marks around attributes, as shown in the previous example. The quotes are often optional.

Viewing your page

If you want to view the Web page with the poem, do the following:

1.Start Notepad.

2.Type the poem in the previous section with the <html> and </html> tags.

3.Save your text file with the html extension so your Internet browser can display the file properly.

Adding Formatting Command Tags

Congratulations, you have created your first Web page. Obviously, you have a ways to go before you create the next dot.com Web-based company, but you’ve taken your first step. You can see that a simple Web page requires little more than typing text surrounded by <html> and </html> command tags.

Head and title tags

One optional but crucial item you must add to every Web page that you create from this point forward is a title for the browser window in which your Web page appears. You are probably used to seeing the title at the top of almost every Web site you visit. The title defines the page and sometimes displays needed information such as a filename reference.

Never let the Web browser pick a window title for you. By

default, the HTML filename appears in the title bar, if you don’t

assign a title name. For example, the title shown in Figure 2-1 Never is the same as the HTML filename displayed to the left of the browser name. You owe it to your Web audience to describe as

much as you can about the page they are viewing. Users who view multiple Web sites on their screens at the same time can read the tiled windows’ titles to determine what each window contains.

The title command tag must appear inside a special section of your Web page called the header section. Before adding the title’s tags, you must first create the

Figure 2-2 shows the resulting browser window. The browser window displays the poem’s title, “Poem to make you feel good.”

The window's title

Figure 2-2

The title describes the file to your Web audience.

Finally, most HTML programmers place the body of the Web page in its own section, the body section. As you see from the successful display of the Web page in Figure 2-2, a body section is not required for simple Web pages such as the one being created so far. Nevertheless, the body section helps you organize more advanced Web pages, and most HTML programmers agree that a bare-bones Web page should include the <body> and </body> command tags. The body section is the page’s meat-and-potatoes section that contains the bulk of information on that page.

The body section follows the header. The sample HTML-based poem now looks like this:

<html>

<head>

<title>Poem to make you feel good</title> </head>

<body>

Roses are red,

Figure 2-3 shows the final Web page creation. The poem is now formatted and includes a title and a body.

<body>

<title>

</body>

<br> breaks lines here

Figure 2-3

You’ve now seen the complete creation of a simple Web page.

A more complete example

To help initiate you into HTML, Listing 2-1 contains the code for a more complete HTML example with a graphic image. Although the example is not extremely complex or advanced, by studying the code and the corresponding Web page in Figure 2-4 you will gain insight into what’s ahead in the late Friday evening and early Saturday sessions of this course. Think of this example as whetting your appetite for more advanced HTML commands.