Computer Science Illuminated, Third Edition

eLearning

Animated Flashcards
Live Wire
Cryptic Crossword Puzzles
Ethical Issues
Biographical Sketches
Did You Know
Goin Live
Google Code Digital Lab Manual
Online Glossary
The Learning Store
Language Library
Download PEP/7
Instructor Resources
Student Resources

eLearning Home

Lab #2

Introduction to HTML



2.1 Developing Your Own Web Site

In Chapter 16 of your textbook, you were introduced to the basics of web site technology, including HTML. These labs are designed to take you further in your understanding of these issues. In conjunction with working through each of the labs, you are going to build your own web site (about you!) from scratch. We will be covering nearly every HTML feature, showing examples of how they are used, and pointing out a few neat tricks along the way.

The examples presented in the labs will be based around building a series of web pages for an e-commerce web site we call Pete's Pet Store. We will be demonstrating the features of HTML via example pages of the products we would put in our e-store. Our store will feature a variety of products related to pets, all of which can be ordered via the Internet. Of course, this is not a real electronic store. We won't be accepting orders or taking credit card information because stores of that nature are far more complex than what we will cover in these labs. Generally speaking, e-stores involve the use of encryption, databases, and many other complex parts.

While we are showing examples based-around our fictional store, we'll be providing lab activities where you will build your own web site which provides information about you. For example, your web site is likely to contain information about contacting you, what hobbies you have, where you have traveled etc. The differences between the site that you will be building (your web-presence) and the example pages we will use (Pete's Pets Store) are really not substantial. That is, both our example site and your site are designed to present information to people browsing the web. Once we explain a particular concept or task in HTML, a lab activity will ask you to integrate the concept or task into your web site. In this fashion, the example site and your site will evolve together.

So, let's get started! Before you build a web site or web pages, you need to have some type of a plan. A good design for your site is essential so that you know what information to present and how you wish to present it. Figure 1 (which is borrowed from Section 16 of the textbook) shows a marked-up document. You may want to begin with a general idea of the information you want to convey through a web page, then mark it up to indicate how you might want to present it.

A marked-up document

Figure 1: A marked-up document.

For the Pete's Pet Store web site, we will start with a single web page that describes a single item we wish to sell. Eventually, we will add other similar web pages with different sale items on it, but for now, we will start with just this page. After thinking about our store (and comparing others on the web), we have determined that our page must contain the following information about each item:
  • the product's name,
  • the product's number,
  • a product description,
  • the product's price (in U.S. dollars and British pounds, since we ship to Britain), and
  • a picture of the product.
If we were to create a marked-up version of this page (also sometimes known as a mock-up), it might look something like Figure 2.

A mock-up of our e-store web page for a single item.
Figure 2: A mock-up of our e-store web page for a single item.

We won't be able to make our initial web pages look like this mock-up right away. As we progress through the labs, however, we'll continually add formatting and other features that will eventually lead us to a great looking site. The mock-up is our first step.

Lab Activity #1:
Create a mock-up on paper of your first web page. Granted, you will eventually end up with several pages, but for now we will start with just one - a page that provides information about yourself.

Create a mock-up of a page that includes the following information about you:
  • your name,
  • a paragraph discussing where you grew up and what that area is like,
  • a paragraph of where you attend school and what your major is,
  • provide a link to your email address and links to three of your favorite web sites,
  • a section of a page talking about where you have traveled to (include links to related web sites)
  • a paragraph discussing your future goals after graduation,
  • and a paragraph about your favorite class and teacher.

2.2 Tags

HTML tags, as Chapter 16 points out, indicate "...the general nature of a piece of information". HTML tags tell your web browser how to format the information that it encloses. All HTML tags are surrounded with a less-than symbol (<) and a greater-than symbol (>). Generally, tags have two pieces to them, an opening tag and a closing tag. Closing tags have a forward slash inside of them to denote they are the closing tag for a particular tag.

The body of an HTML document is defined by surrounding the text and formatting of the body with the opening and closing body HTML tags. For example:
<body>

Item: 23445-555
Name: Cat Window Lounger
Description: Does your house cat like to lie in the window and

day dream of being outside?  Is your feline prone to napping in

the window?  The Cat Window Lounger is the perfect present for your

special friend.



The frame attaches to your window sill and is covered by a plush

cotton bed.  One size fits all, available in beige (shown) and black.

Image of cat using lounger goes here.
Price: $22.95

</body>
But wait...there's more! body tags must be enclosed within the html tag, which is used to describe the entire displayed page. There are two more tags we would like to introduce to make this sub-section complete, the head and title tags. The head tag must occur following the html tag, but before the body tag. The head tag separates information about the web page from the actually contents of the web page (which is inside the body tag). Many pieces of information can be placed in the head tag, including information which is used by search engines to categorize the web page. However, we will use the head tag to include the title tag, specifying the title of the web page. The text we place in the title will be displayed by a web browser when the page is displayed.

To use the title tag, nest the title tag inside of the head tag, like this:
<head>

<title>Pete's Pet Store</title>

</head>

So, our example of the cat window lounger now really should look like the following example.
<html>

<head>

<title>Pete's Pet Store</title>

</head>

<body>

Item: 23445-555
Name: Cat Window Lounger

Description: Does your house cat like to lie in the window and

day dream of being outside?  Is your feline prone to napping in

the window?  The Cat Window Lounger is the perfect present for your

special friend.



The frame attaches to your window sill and is covered by a plush

cotton bed.  One size fits all, available in beige (shown) and black.



Image of cat using lounger goes here.
Price: $22.95

</body>

</html>

Note the presence of each opening and closing tag. When entering HTML tags, you want to be careful that you nest the tags correctly. In the above example, the opening and closing body tags were enclosed by the html tags. If we reversed the last two tags to be:
</html>

</body>
some web browsers might not display the page correctly. The expected order of HTML tags is that they are closed in reverse order that they are opened (the most recent opening tag must be closed first!).

If the above HTML code is placed in a file and then opened in a web browser, the displayed page would look something like what is shown in Figure 3. Note that the title tag placed the web page's title in the browser's title bar (followed by the name of the browser).

A first look at a web page from the Pete's Pet Store web site.

Figure 3: A first look at a web page from our e-store.

While you might be saying to yourself "That's not quite what I wanted", you must realize that this is the result of the HTML that you specified. The body of our web page contains no line breaks or other vertical spacing tags, so all of the text runs together. In subsection 2.3 we address these issues, and result is more representative of our desired page.

Lab Activity #2:
Build a web page based upon the mock-up of your personal page. Only use the html, head, title, and body tags for now. Save the file to your computer and then use a web browser to open and view it. Describe your results.

2.3 Line Breaks, Paragraphs, and Horizontal Rules

Ok, now it is time to enhance your formatting and add a few vertical spaces to the body of the document. To do this, we'll use the break tag (<br>). The break tag does not need a closing tag, as it occurs at the point you wish to insert a vertical space between text. Alternatively, you can surround a paragraph of text with the paragraph tag (<p>), (</p>). Browsers will add vertical space prior to displaying the enclosed paragraph text.

You may be wondering what the difference is between using a break tag and using a paragraph tag. Actually, tags not only tell the browser how to format your document, but to a small extent they reveal what the contents of the document are as well. Complex software applications can be created that analyze web pages (such as search engines). Such an application might be interested in knowing how many paragraphs are in your page. If you were to replace all use of the paragraph tags with break tags, it might be difficult to correctly calculate this value.

Another tag we will use to clean up the web page is the horizontal rule tag (<hr>). This tag draws a line across the width of the browser window like this:


We apply the break, paragraph, and horizontal rule tags to our web page to help add the desired vertical spacing. Now the contents of our HTML file are:
<html>

<head>

<title>Pete's Pet Store</title>

</head>

<body>

Item: 23445-555<br><br>
Name: Cat Window Lounger<hr>

<p>Description: Does your house cat like to lie in the window and

day dream of being outside?  Is your feline prone to napping in

the window?  The Cat Window Lounger is the perfect present for your

special friend.</p>



<p>The frame attaches to your window sill and is covered by a plush

cotton bed.  One size fits all, available in beige (shown) and black.</p>



<p>Image of cat using lounger goes here.</p>
Price: $22.95

</body>

</html>

Our web page with the addition of the break, paragraph, and horizonal rule tags.

Figure 4: Our web page with the addition of the break, paragraph, and horizontal rule tags.

In Figure 4, we've applied the break and horizontal rule tags to key areas of our web page. It is now quite a bit easier to read. One break tag was added following the item number, resulting in the next text (the name of the item) appearing on the next line. However, we used two break tags consecutively (<br><br>) to add additional vertical space following the product's description (prior to the image placeholder).

Lab Activity #3:
Add the break, paragraph, and horizontal rule tags to your web page to help enhance its appearance.

2.4 Tag Attributes

HTML tags can be modified with additional information known as attributes. Attributes are used to provide even more guidance as to how a particular item should be displayed in a browser. A tag's attributes are located within an opening tag, following the tag name. More formally, a tag and its attributes appear as:
<tagname attribute1="some_value" attribute2="another value">
We can use a tag attribute to specify the width of a horizontal rule tag to tell it how large to draw the line (in either the number of pixels or a percentage of the screen size). For example, to make a horizontal rule that is 75% of the width of the screen size you would write the tag as: <hr width="75%">. Note that we used the width attribute, followed by an equals sign and the value 75% in double quotes. We can also replace the 75% with a whole number value (integer) such as 50, to make the width of the rule that size in pixels.

The horizontal rule tag also contains an alignment attribute (align) which is used to specify where to place the rule. There are three possible values for the align attribute: left, center, and right; each corresponds to the position of the rule on the web page (left is aligned with the left margin of the browser, center places the rule in the center of page, equidistant from the left and right margins, and right aligns the rule with the right margin of the browser).

By modifying our example web page, we can make use of the width and align attributes.
<html>

<head>

<title>Pete's Pet Store</title>

</head>

<body>

Item: 23445-555<br><br>
Name: Cat Window Lounger<hr>

<p>Description: Does your house cat like to lie in the window and

day dream of being outside?  Is your feline prone to napping in

the window?  The Cat Window Lounger is the perfect present for your

special friend.</p>



<p>The frame attaches to your window sill and is covered by a plush

cotton bed.  One size fits all, available in beige (shown) and black.</p>



<p>Image of cat using lounger goes here.</p>
<hr width="30%" align="left">

Price: $22.95

</body>

</html>
Figure 5 shows the web page after we have made our modifications.

Adding a horizontal rule with a 30% width and left alignment

Figure 5: Adding a horizontal rule with a 30% width and left alignment.

Lab Activity #4:
Add a horizontal rule to your web page that has right alignment and is 50% of the width of the web page.

2.5 Special Characters

When first starting to build web pages, many developers think that only the characters on the keyboard can be used as text in a web page. This however, is not the case. HTML includes support for a variety of special characters including special language symbols, financial symbols, and business symbols. The table below shows just a few of these special characters and their HTML encodings. Note that these are not tags per se, but rather special combinations of characters which will allow us to use the special characters on our pages.

Selected Special Character Encodings in HTML
Special Character
HTML Encoding
Copyright: ©
&copy;
Pound: £
&pound;
Small o with tilde: õ
&otilde;
Registered trademark: ®
&reg;
Greater-than and less-than: < >
&gt; and &lt;

For each of these special characters, be sure to use the semicolon that follows the encoding, it's very important. Also, note that we included the greater-than and less-than symbols. If you plan to display these symbols in your web pages, you need to use their encodings, otherwise a browser might be confused and think that you are referring to the start of a tag!

The registered trademark should be added to the Cat Window Lounger product, since another company holds the trademark on the item. Thus, we'll change the text of the product name line to:
Name: Cat Window Lounger &reg;<hr>
Additionally, we will add the following HTML to the bottom of our web page, to indicate the copyright of our website. These lines will be placed after the product price and before the body tag, so that it appears at the bottom of the web page.
<hr>

Pete's Pet Store

&copy; 2002
Figure 6 shows our web page with the added special characters.

The web page with the added special characters.

Figure 6: The web page with the added special characters.

Lab Activity #5:
Include at least two of the special characters listed above in your personal web page.

Also, search the web using a search engine to find a listing of all of the special characters in HTML. Once you have found a list, add an additional two special characters to your page from this list. (The World Wide Web Consortium maintains the specification of the language, but you will need to carefully navigate their site to find the list!)




About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
ISBN: 0-7637-1760-6
Lab content developed by Pete DePasquale and John Lewis
 
Educators: More Information About This Text Other Computer Science Titles at Jones and Bartlett
Copyright 2019 Jones and Bartlett PublishersContact webmaster