HTML Lab

CPSC 101: Introduction to HTML

HTML is the HyperText Markup Language, the language used to build Web pages. It is used to describe how text, images, and multimedia are displayed by Web browsers. In this lab you will learn the basics of HTML and create a web page containing headings, paragraphs, lists, images, and links. Section 16.2 of the textbook (pages 510-516 discusses HTML.) The process of creating and publishing a web page involves several steps:

Creating the HTML page - that is, creating the content and "marking it up" with HTML tags. A text editor is used for this. We will use the text editor Notepad that comes with the Windows operating system.
Viewing the page using a Web browser (we will use Netscape for now - Internet Explorer and Firefox are other options).
Making additions and corrections (back to the text editor to do this).
"Publishing" the page when it is the way you want it. This is when you save it on a Web server (we'll use the Web server for student pages at Roanoke - we won't publish anything today!).

Getting Started

Log onto the Roanoke College network and open Netscape (you should see an icon for it on the desktop). In the location box at the top type in the URL for our course:

     http://cs.roanoke.edu/Spring2009/CPSC101A

Click on the link to this lab. You will see an electronic version of this handout. Follow the handout (either online or on paper) for today's lab work. At a few points in lab you will need to use the electronic version to click on a link to see what some of the HTML tags produce.

A Brief Introduction to HTML

HTML uses tags to describe the layout of a document; the browser then uses these tags to figure out how to display the document. Tags are enclosed in angle brackets and are not case sensitive. For example, <title> is a tag that indicates that this section contains the title of the document, and could also be written <TITLE> or <Title>. Many tags, including <title>, come in pairs; that is, they have corresponding end tags that indicate where the section ends. The end tags look just like the start tags except that they start with the character /, e.g., </title>. So the following text means that the title of the document is HTML Lab:

        <title>HTML Lab</title>

There are a few tags that almost every document will have: <html>, <head>, <title>, <body>, and <p>. Here is an example of a simple HTML document:

<html>
  <head>
    <title>HTML Lab</title>
  </head>

  <body>
  <p>
  In this lab you will learn about HTML, a markup language
  for Web pages. The HTML document is nothing but text -
  words and tags.  The tags "mark up" the text - they give
  the browser information about how to display the text.
  The part of the document between the <body> and
  </body> is what is displayed in the browser window.
  The <p> tag indicates a paragraph.
  </p>
  <p>
  Here is another paragraph. The browser will display a
  blank line between paragraphs. The <title> tag
  is used to specify the text that appears on the title bar
  of the browser window when the page is displayed. 
  </p>
  </body>
</html>

Click here to see what this looks like in the browser. Change the size of the browser window (click and drag any corner) and see how the text is reformatted as the window changes. Note that the title appears on the title bar of the window, not as part of the document.

The head of a document (everything between <head> and </head>) contains the introduction to the document. The title goes in the head, but for now we won't use the head for anything else (later we will put our JavaScript programs there). The body of a document (everything between <body> and </body>) contains everything that will be displayed as part of the document. Both the head and the body are enclosed by the HTML tags, which begin and end the document.

This document contains only plain text, but an HTML document can have much more structure: headings, paragraphs, lists, bold and italic text, images, links, tables, and so on. Here is a version that contains a heading and two paragraphs. Note that the tag pair for a heading is <h1 align="center"> ... <h1> (that is a one not an el).

<html>
  <head>
    <title>HTML Lab</title>
  </head>

  <body>
  <h1 align="center">Dr. Ingram's Web Page</h1>
  <p>
  This is the first paragraph of Dr. Ingram's page.  Pretty boring, huh?
  You could come up with something much more interesting!
  </p>
  <p>
  Here is another paragraph.
  When you go on to a new topic, you can start a new paragraph.  
  You don't
  have to worry about indenting or otherwise formatting the paragraph -- the
  browser will decide that for you.  Usually it leaves a blank line.
  If you just want to go to a new line, without
  any vertical space, you <br> can <br>do <br> that <br> too. 
  </p>
  </body>
  </html>

Click here to see what this looks like in the browser.

In this document the <h1> tag creates a level 1 heading. This is the biggest heading; it might be used at the beginning of the document or the start of a new chapter. The align attribute was used in the tag to tell the browser to center the heading. If that were left out the heading would be left aligned. Level 2 through level 6 headings are also available with the <h2> through <h6> tags.

The <p> tag creates a new paragraph. Most browsers leave a blank line between paragraphs. The end tag </p> for a paragraph is optional - the browser knows one paragraph ended when it encounters another one. The <br> tag (line break tag) causes the following text to be displayed on the next line, without leaving a blank line.

Note that line breaks and blank lines in the HTML document do not matter -- the browser will format paragraphs to fit the window. If it weren't for the <P> tag, the blank line between the paragraphs in this document would not show up in the displayed document.

Creating a Basic HTML Document

Now it's your turn. To start you need to open Notepad. To do this click on the Start button, then choose Programs, then Accessories, then Notepad. Once Notepad is loaded you can just type your HTML document. Generally it is recommended that you start by typing in the general structure for the document (the basic tags), then go back and add content. Your document should have the following structure - the HTML tags should be as shown but you put your own content (for now your own title to show up on the title bar of the browser window and your own heading to show up on your page). Your page is going to be about yourself (a brief bio and discussion of something you are passionate about) so you can make up an appropriate title and heading.


<html>
  <head>
    <title> ... put your own title in here ... </title>
  </head>

  <body>
  <h1> ... heading for your page here ... </h1>

        ... the content of your page will go in here later
            that will include your words and HTML tags ...
        ... For now leave this part blank ...

  </body>
  </html>

When you have typed in the basic skeleton above (without any content in the body of the document), save your page as follows:

Choose File then Save As from the menu bar.
In the "Save In" box, use the down arrow to find the Z drive (your personal space on the Roanoke College file server).
Create a folder named "CPSC101" (see the folder icon) and open that folder.
Type in the name default.htm in the "Filename" box.
Make sure that "Save As Type" is set to "All Files" and the encoding is set to "ANSI" (click on the down arrow and you will see that Unicode is another option - ANSI is ASCII).
Click on Save.

Viewing the File: We use the browser to see what the page looks like. Leave Notepad open because you'll be coming back to it to add your content (and maybe corrections). In Netscape click on File then Open File. You will get the usual Windows Open window. Go to the Look In box and select the Z drive (use the down arrow to find it) and your CPSC101 folder. You should see default.htm in the list of files. Click on it then click open. If all your tags are correct you should see your page (of course all you'll see now is your heading on the page and your title on the title bar of the window). If you don't see the heading and title OR if you see stray tags you probably have a typo in a tag. Generally, the browser ignores tags it doesn't understand! You will need to go back to Notepad to fix it.

Notes on Correcting Mistakes and Making Changes

When developing a Web page you will want to keep your text editor (Notepad) and Web browser (Netscape) open. You make changes in Notepad and save the changes (choose File, Save). Then view the changes in Netscape. The fastest way to view the changes if the page is already open is to click on the Reload (also called Refresh) button. If the page looks the same it may mean that Netscape is still using the old version (it is using what is called a "cached" copy). To make Netscape load the new version you can either press the SHIFT key while clicking the reload button or you can change your browser preferences. To change the preferences so Netscape never uses a cached copy of a web page, click on Edit on the menu bar, then Preferences. Under category, click the icon to the left of Advanced then click Cache, then where it says "Compare the page in the cache to the page on the network: " select "Every time I view the page." Now click OK. Now every time you choose to reload a page you will get the latest version.

Adding Content to Your Page Now go back to Notepad and add content to your page. The content should be at least two paragraphs (more is ok!). At least one paragraph should be a brief biography of yourself. And another should be about something you are passionate about. Remember to start each paragraph with a <p> paragraph tag. It is a good idea to end each with a </p> "end paragraph" tag but that isn't required by most browsers.

Note: If your typing seems to be going off the page you need to turn on word wrap. To do that go to the format option on the menu bar and select "word wrap." Of course you could also just get in the habit of hitting ENTER when you get to the end of a line.

After you have typed in your content save your HTML file, then view it in the browser. Make sure that you have two distinct paragraphs, the title and heading and no stray tags showing up!

Attributes of Tags

If you typed in the skeleton as above then you used the heading tag <h1> which creates a level 1 heading (displayed by the browser using somewhat large text that is bold-faced). The plain <h1> tag causes the heading to be left-aligned on the page but often we want a heading to be centered. To achieve centering we need to use the align attribute of the <h1> tag. Change the tag to look like this:

       <h1 align="center">

(Note: When you add an attribute you only change the beginning tag not the end tag.) This tells the browser to center the heading on the page. The word "center" is a value of the align attribute. Save your file, then reload it in the browser. You should see the heading is now centered.

The attributes of a tag are very specific - they are commands that the browser has been programmed to recognize. Similarly each attribute has only certain values that can be understood by the browser. The possible values for the align tage are "left", "center", "right", and "justify". If you enter a value the browser doesn't understand the browser will ignore it. To see this modify your <h1> tag as follows - for each, change the tag, save the file, then reload in Netscape. See what happens:

      <h1 align="cente">              (this one has an incorrect value)

      <h1 alig="center">              (this one has an incorrect attribute)

      <h1 align="center"              (this one has a bad tag - missing >)

Before continuing fix the tag so the heading is correctly centered.

More HTML

Lists We often want to add a list to a document. HTML provides two kinds of lists, ordered (e.g., 1, 2, 3) and unordered (e.g., bulleted). A list is introduced with the <ol> or <ul> tag, depending on whether it is an ordered list or an unordered list. Each list item is introduced with a <LI> tag and ended with the </LI> tag (which is optional). The entire list is then ended with </ol> or </ul>, as appropriate. The following is an ordered list of instructions for creating a list:

    <ol>
      <li>Type the tag <ol> (if you want an ordered list) or
           <ul> (if you want an unordered list)
      <li>For each item in your list, type the <li> tag followed
           by the text you want in the list.
      <li>To end the list type the tag </ol> or </ul> 
           (depending on the list type - match the beginning tag)
    </ol>

Click here to see what this looks like in the browser.

*** Exercise: Update your page! Add a list, either ordered or unordered, of at least three items to your document. Your list should have a heading (use a smaller heading tag - either an <h2> or <h3>). Make your list related to what is already on the page.

After typing your list in your document, reload the document in Netscape to make sure it displays correctly. If it doesn't, check your tags and make corrections!

More Tags There's lots you can do with HTML. You can make the page a pretty color, <u>underline</u> text, or put it in <i>italics</i> or <b>bold</b>. You can also make links and tables, but we'll get to those later. The <b> tag creates bold text, the <i> tag creates italic text, and the <u> tag creates underlined text. Note that each of these tags is closed with the corresponding end tag.

*** Exercise: Enhance Your Page Add bold, italics, and underlining to your page. Choose appropriate parts of your page for each (don't get carried away and make the whole page bold, for example). After adding the tags for bold, italics, and underline, save your page, then reload it in Netscape. Make sure things look right!

Links

Links connect one document to another. Links are created in HTML with the <a> tag (a stands for anchor). When creating a link you have to specify two things:

The URL (address) of the document to go to when the link is clicked. This is given as the HREF attribute of the A element.
How the link should be displayed (that is, what text or image to click on to go to the linked document). This appears between the <a> and </a> tags.

For example, the following HTML code ...

Visit <a HREF="http://cs.roanoke.edu/Spring2009/CPSC101A">my favorite course!</a>

creates a link to the CPSC 101 home page that link looks like this when the browser displays it:

Visit my favorite course!

When adding a link to a page it is important to get the URL exactly right - a small typo will cause a link to not work. One way to be sure to get the link right is to do the following: In Netscape go to the page you want to link your page to. Then, using your mouse, highlight the URL in the location box at the top of the page. Now right click on the highlighted URL then choose Copy. In Notepad, place your cursor in your anchor tag and choose Edit, Paste (or use CTRL-V). The correct URL will be there but you need to correctly type in the rest of the anchor tag (including the HREF= and the quotation marks, etc).

*** Exercise: Add Links to your page: Add at least two links to external Web sites that tie in to the material on your page. Don't link to the course home page as one of these links (it can be in addition to two others if you wish)! You can put your links in a paragraph some place (for example you can make a word in a sentence a link) or you can make a list of links. Be sure that you use meaningful words for your links! After adding the links reload your page and click on each link to make sure it is correct.

Images

You can add any picture to a web page with an <img> tag. The tag must specify the source file using the SRC attribute. For example,

       <img SRC="smiley.gif">

adds the picture in the smiley.gif file (note - this assumes that file is stored in the same directory as the Web page). You can scan pictures, use pictures taken from a digital camera, or get copies of pictures that are on the web (as long a they are not copyrighted!). The image files should be either .jpg or .gif since most browsers know how to display these formats (in other words they know the compression algorithms that can decode the image). If you don't have your own images you can find images on the Web to use. One way to use images you find on the Web is to put the Web address (URL) of the image in the SRC attribute of the IMG tag. The following tag would display the Roanoke College logo from the Roanoke College home page:


      <img SRC="http://web.roanoke.edu/images/logo_home.gif">

Another way is to save the image to your computer or network drive. To save an image, right click on it then choose the "Save Image As" option. Then save it to the same folder you have your Web page in (for today's lab that is your CPSC101 folder on the Z drive).

*** Exercise: Add an Image Add an image to your page. The image should be related to the page (it can be a picture of you, for example, or a picture of something you are passionate about). Placement of images can be tricky - they often don't show up where you want. For today don't worry about that. Using a table to help place them is a common trick. We'll learn about tables Friday!

Hand In:

When you have completed your Web page, print out a copy from Notepad (so I can see your HTML code) to hand in AND send me an email to ingram@roanoke.edu with HTML Lab in the Subject line and your HTML page attached.