CS107 Lab #1: Elementary HTML Tags

HTML tags are instructions telling browsers how to format text and images on screen. For example, in the HTML source of this document, the word "tags" in the previous sentence is surrounded by the tags and . The tag tells the browser to start using italics, and the tag tells it to stop.

All HTML tags begin with < and end with > (a.k.a. angle brackets), with the name of the tag in between. Most tags come in pairs--an opening tag such as , and a closing tag such as . Closing tags' names always begin with a slash ("/").

Use the steps from Lab #0 to get your own copy of this lab. Open the source code in Notepad, and display your copy in Mozilla.
Change the and around "tags" to and . What happens?
What happens if you accidentally leave the / out of the closing tag? Try it.
Try nesting boldface (B) and italics (I) tags around some text. Do you get boldfaced italics?

Tag names are not case-sensitive, but it's conventional to use all capital letters for tags to make the source code easier to read.

HTML Document Structure

At the top of the source of this web page, you'll see the four tags used as the skeleton of virtually all pages:

<HTML> <HEAD> <TITLE> <BODY>

Nesting tags is natural and necessary:

<HEAD><TITLE>This is my title</TITLE></HEAD>

...But make sure to close nested tags in the the opposite order in which they were opened. Don't do this:

<H4><A HREF="http://www.google.com">www.google.com</H4></A>

So let's get down to it. The <HTML> tag tells the server to interpret the code as HTML, as opposed to straight text or some other Internet language. <HEAD> marks off the header of the page, which generally includes information that is relevant to the entire page (notably the document title--see below). Similarily, <BODY> marks off the body of the page, where all the fun stuff takes place.

In Notepad, create a new page containing the following skeleton of code.
<HTML> <HEAD> <TITLE> the title goes here </TITLE> other header information goes here </HEAD> <BODY> type in something here. </BODY> </HTML>

Save this source as a .html file in your S: drive folder, and view the results in Mozilla.
Where does "the title goes here" appear in the Mozilla display?
Where does "type in something here" appear?
Where does the text "other header information goes here" appear? (It's bad style to put text like this in the HEAD section. The HEAD section is best reserved for tags that give the browser instructions that apply to the entire document. But it's good to know what happens when you use this bad style.)

Paragraphs, the tag, and tag attributes

There are a lot more tags floating around this page! One common pair are the paragraph tags and tag. Though a browser could be configured to use single-spacing and indentation to mark the beginnings of paragraphs, most browsers separate adjacent paragraphs with a blank line, and do not indent the first line. Watch this:

See? Between the tag at the end of the previous paragraph and the tag of this one, the browser displays a paragraph break.

The paragraph tags have a dirty secret that you need to know about. Many web pages do not use the tag at all, and you can't tell the difference when viewing such pages in a browser. For a long time, HTML users viewed the tag as a separator between paragraphs rather than viewing and as tags that surround each paragraph. So modern browsers have been designed to adapt sensibly to this older conception of the role of the tag. Even so, you should always use both tags.

There is, however, a better reason to use both and than "the teacher says so." Many tags, included, have optional attributes. An attribute allows you to provide the browser with additional information inside the opening tag itself. For example, you can use the "ALIGN" attribute of the tag to center a paragraph on the display by opening the paragraph like this: . If you center a paragraph in this way, you need to use the tag to make sure the centering stops when you want it to.

One last note about paragraph formatting: neither extra blank lines nor extra spaces in the source code show up when you display a paragraph. In order to insert a new line, or line break, insert the tag. The tag is one of the few tags that has no corresponding closing tag.

Discard your skeleton page, and start working instead on a copy of this page.
Choose some paragraph on this page and add ALIGN=CENTER to its tag.
Try ALIGN=RIGHT.
Insert a few tags into a page. What happens if you do one break? Two breaks in a row? Three?

Headings

Yay! We finally get to format text. For now, we'll stick to changing the font size of a line or paragraph through heading tags. Later we will change colors and styles and maybe even use Mozilla's evil blinking text.

There are six different levels of heading tags, ranging from the largest, <H1>, to the smallest <H6>. Here is an H1 heading for what would undoubtedly be an enormously engaging and informative page:

The Secret Lives of Emus

Add H2 through H6 headings next to the secret lives of emus above so you can compare how the various heading sizes appear on Mozilla.

Boldface, italics, and their friends

As you have seen, you can boldface text by using the and tags. To italicize text, use and . For example:

I really liked the book Pride and Prejudice.

I really liked the book Pride and Prejudice.

HTML includes several character styles besides boldface and italics.

Follow the link in the previous paragraph to discover more character styles. Experiment with thes styles you find there.

Special characters

While you look through the source code, you'll notice that, when an angle bracket appears on the page, the source code has the funny < and > notations. Since < and > have special meanings in HTML, you need a way to tell the browser to print those characters rather than treating them as special. That's what the "&something;" notation is for--telling the browser to print special characters. Look towards the bottom of this page for a section called "Special Characters."