Introduction to HTML
2.1 Developing Your Own Web SiteIn 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.
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:
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.
2.2 TagsHTML 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:
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.<body> Item: 23445-555Name: Cat Window LoungerDescription: 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>
To use the title tag, nest the title tag inside of the head tag, like this:
So, our example of the cat window lounger now really should look like the following example.<head> <title>Pete's Pet Store</title> </head>
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> <head> <title>Pete's Pet Store</title> </head> <body> Item: 23445-555Name: Cat Window LoungerDescription: 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>
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!).</html> </body>
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).
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.
2.3 Line Breaks, Paragraphs, and Horizontal RulesOk, 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>
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).
2.4 Tag AttributesHTML 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.
Figure 5 shows the web page after we have made our modifications.<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>
2.5 Special CharactersWhen 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.
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:
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.Name: Cat Window Lounger ®<hr>
Figure 6 shows our web page with the added special characters.<hr> Pete's Pet Store © 2002
About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
Lab content developed by Pete DePasquale and John Lewis