Laboratory: Basics of HTML

CSC 105 - The Digital Age

Summary: This laboratory exercise introduces a general framework for documents which you routinely find on the World-Wide Web. In addition to the general structure of html documents, the lab reviews various html tags, including simple formatting, links, and images.

Preparation

For this lab, it will be convenient for you to be able to move easily between viewing two different web pages: this one, and one you will modify. This can be done by opening multiple "tabs" in your browser as follows:

From the File menu of your web browser, select New Tab
Return to this page to continue reading.

If all went well, this should have opened a second "tab" in your browser. (Near the top of the window, there should be icons that look like index-tabs. You can click on either of them to switch between viewing multiple pages you have open.)

For this lab, you will use and modify a copy of the document found here: www.cs.grinnell.edu/~walker/fluency-book/labs/sample-html-page.html

To get started, follow these steps (but you may want to read all the steps before you begin):

Copy the URL given above, so that you can paste it again momentarily.
Move to the new tab you just created in your browser.
Go to the url you just copied.
As you will see, this page contains the first two paragraphs of Chapter 1 of Walker, Henry M., The Tao of Computing: A Down-to-earth Approach to Computer Fluency, Jones and Bartlett, 2005.

HTML Format

Once you can view the sample document in your browser, select Page Source from the View menu (or select View Page Source from the menu obtained by right-clicking anywhere on the web page). This will show you the original document sample-html-page.html, as sent by the server to your browser (and before the browser has done its formatting).

As you will see in the new source window, a typical html Web page has the following basic format:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    ...
    </head>

    <body>
    ...
    </body>
    </html>

According to the standards of the World Wide Web Consortium (W3C), the first line of the document must indicate the type of document and the specific version of html being used. In this case the document type (DOCTYPE) and the version follows the international standard for HTML 4.01 Transitional. This opening line informs your browser how to interpret the rest of the page.

In the lines that follow, formatting commands (also called tags) are given in angle brackets: < > . For example, <head> marks the beginning of header information for the document, and </head> indicates the end of the same section. Similarly, <body> marks the beginning of the main body of the page, continuing through </body> near the end of the file. Some tags are for markup that has no beginning and end, such as drawing a horizontal line, <hr />.

The following table gives some common formatting commands, some of which are illustrated in this example:

Command Meaning

<html> begin an HTML document

<head> begin the header section

<title> begin a title

<body> begin the body of the document

<h1> begin a header1 section (headers can be h1, h1, h2, h4)

<center> center the material that follows

<p> begin a new paragraph

<br /> break a line (begin a new line)

<b> begin bold type face

<i> begin italics type face

<u> begin underlining text

<hr /> draw a horizontal line

<blockquote> indent the section, as in a quotation

Command	Meaning
<html>	begin an HTML document
<head>	begin the header section
<title>	begin a title
<body>	begin the body of the document
<h1>	begin a header1 section (headers can be h1, h1, h2, h4)
<center>	center the material that follows
<p>	begin a new paragraph
<br />	break a line (begin a new line)
<b>	begin bold type face
<i>	begin italics type face
<u>	begin underlining text
<hr />	draw a horizontal line
<blockquote>	indent the section, as in a quotation

While these formatting directives explain many of the elements in sample-html-page.html, the fourth line in the sample file requires some additional comment. In html, a meta instruction is used to supply information about the page itself to the browser. In this case, this full line indicates that characters on this page are encoded according to the ISO-8859-1 or "Latin-1" character set that is suitable for most Western European languages. (In contrast, "ISO-8859-5" would indicate a Cyrillic alphabet, "SHIFT_JIS" would specify a Japanese encoding, and "EUC-JP" another Japanese encoding. Other choices also are possible.)

[For more information about HTML, you might try the primer A Beginner's guide to HTML, a very old but still accurate guide written by Marc Andreessen, co-author of the first web browser and founder of Netscape. There are also more in-depth tutorials]

Review again the html source for sample-html-page.html, to find the title tag. When viewing the sample web page through your browser, can you find where the page's "title" appears?
Again, return to the html source for the sample web page. Can you explain how each tag within the body of the source leads to formatting you see when the page is loaded into the browser?

Establishing an HTML Document That Is Accessible over the Web

The process for "publishing" an HTML document (i.e., making it available for others to view on the World Wide Web) includes three basic components:

creating/editing the document,
placing that document in a directory that can be found by a Web server, and
setting access permissions to allow Web users to view the document.

Unfortunately, the details for each of these steps vary considerably from one computer system to another. The directions below will help you through the process on the MathLAN. These instructions are typical of computer systems using the Linux operating system.

Web Directories and Necessary Permissions Settings

For Web access, a Linux Web server looks for files within a directory called public_html, located in a user's home directory. To be accessible by anyone over the World Wide Web, you must give everyone permission to navigate through both your home directory and the public_html directory, in order to access your html files.

In the Linux world, the relevant permissions (for these directories) are encoded as the number 755, or the permisions string

  drwxr-xr-x

The number can be interpreted as follows.

The first digit (7) asserts that the "user" (i.e., the person who created the file) has full permissions: to read, write, and "execute" the directory. (The "execute" permission, when applied to a directory, allows someone to navigate through the directory.) Remember the decimal number 7 is the binary number 111, which corresponds to the permissions rwx.
The second digit (5) gives others in the user's group permission to read and execute the directory, but not to modify it. This is the binary number 101, which is why the permissions appear as r-x.
The third digit (5) specifies that everyone else in the world has the same permissions as those in the user's group.

The following steps establish the needed directory and permissions.

First, create a subdirectory within your home directory called public_html with the following command (except you should replace username with your own username). Note that the character between "public" and "html" must be an underscore.
```
  mkdir /home/username/public_html
```
Next, you must allow Web users to access (i.e., read and execute) both your home directory and its public_html subdirectory. Since Web users may be anywhere in the world, this means that you must allow everyone this access. You can use the two commands that follow to do this:
```
      chmod 711 /home/username
      chmod 755 /home/username/public_html
    
```

HTML Source Files and Necessary Permission Settings

While you could create a file for Web viewing in many ways, a simple way is to begin with an existing Web document and then to edit it. Follow these steps to copy the sample page to your account and make it accessible to the World-Wide Web.

To copy the sample page to your public_html directory:
1. Issue the following command in your terminal window:
```
  cp ~walker/public_html/fluency-book/labs/sample-html-page.html public_html/
```
2. From your home directory, move to the public_html directory with the command:
```
  cd public_html
```
3. Next make your copy of the file publicly readable: (Here, the permissions setting 644 indicates that the owner of the file can read and modify it, while everyone else can only read it. We are not giving anyone permission to "execute" the file.)
```
  chmod 644 sample-html-page.html
```
If you still have the sample web page displayed in one of the tabs of your browser, now would be a good time to close that tab and re-open a new one. This will help avoid confusion in the next step, where you will view the copy of the same page that is now located in your own directory.
Now, to check that the sample web page can be viewed from your directory, load it into your Web browser using the URL given below. (Again, you should replace username with your MathLAN username. In addition, the tilde character is necessary; however, since the file is on a Linux system, the Web server automatically looks in your public_html directory, so you do not need to include that directory name in the URL.)
```
http://www.cs.grinnell.edu/~username/sample-html-page.html
```
If you have any trouble viewing the sample web page at this point, please ask for help.

Editing an HTML File

Once the file is present with appropriate permissions, you can edit its content with any text editor. (You should not edit it in a word processor, however, since word processors will not store the file as a text file without special effort on your part.) On our Linux system, a simple editor is gedit.

To open the sample file in gedit use the following command:
```
  gedit sample-html-page.html & 
```
(The ampersand at the end of the command means that the terminal window will still be available for you to type further commands in, should you need to.)
Modify some text in the file (e.g., add or delete a sentence or two), and then save the file. Then view the page in your web browser to see your changes. (To ensure that you are viewing the most recent changes, select Reload from the View menu of the browser, type Ctrl-R in the browser window, or click the Reload button, which looks like a circular blue arrow near the top-left of the browser window.)
In this step you will make some additional changes to the web page by adding the appropriate tags. After each modification, reload the page in your browser to see the revised version. (Note that, even if you do this correctly, sometimes the change may not be available on the web server immediately. If it appears that your page has not changed even though you saved and refreshed, wait a few seconds and refresh again.)
1. Divide the first paragraph in two by adding a paragraph tag: <p />.
2. Make a sentence bold by adding the appropriate open and close tags: <b> and </b>.
3. Make the same sentence italic as well by adding the open and close tags for italics around the tags for bold: <i> and </i>.
  (Note that when you use multiple tags like this, they should not be interleaved. In other words, it is wrong to say <i><b> followed by </i></b>. Even if the web page displays correctly for you when you do this, it might not display correctly for someone using a different browser.)
4. Choose a different sentence and underline it with: <u> and </u>.
Next you will experiment with "headers" in html. In the sample Web page, the heading "Chapter 1" is a "level-one header". Find it in the html source file, noting that it is set off by the tags: <h1> and </h1>.
1. Add another header line below it: <h1> This is my new title </h1>. Reload the page to see what happens.
2. Change the <h1> header near the top of the page to <h1>, <h2>, or <h4>. In each case, describe what happens.
3. Do you see a progression in style or format from <h1> to <h1> to <h2> to <h4> ?
Draw a horizontal line at the bottom of the web page. To do this, you will want to place the <hr /> tag (for "horizontal rule") just before the end of the "body" of the web page. There is no closing tag that goes with <hr />.

Links to Other Web Pages

Within Web pages, it is common to include links to other documents. Indeed, this is what "hypertext" is all about. The simplest way to specify a link is through the use of an anchor tag.

To clarify how anchors work, add the following line within the body of your document sample-html-page.html :
```
<a href="http://www.grinnell.edu">a link to the Grinnell College web page</a>
```
Don't forget to save your file and reload it into your browser.
In your browser, follow the link you just created. (Of course, you know the back button will return you to the page you are working on. Did you know that the keystroke combination alt-leftArrow will do the same thing?)

To review how an anchor works, the opening tag begins with the letter a, and the end of the anchor has the standard format </a>. Within the opening tag, the reference href specifies the URL that will be linked to. The words between the open and close tags (in this case "a link to the Grinnell College web page") become the label for the link.

Replace the suggested text for the link label to see this in action. Next alter the URL itself. What happens if the URL contains a typographical error? (Give it a try, please.)
Add another link in your sample web page, this time to page of your own choice.

Images within Web Pages

Just as an anchor tag allows links to other Web pages, an image tag allows pictures to be embedded within a Web document.

To understand some basics of images, include the following lines within the body of your sample-html-page.html
```
<img src="http://www.cs.grinnell.edu/~weinman/gfx/weinman-photo.jpg" alt="Jerod Weinman" />
```
Upon reloading the page in the browser, you will encounter a picture of your instructor.

Note that this image tag does not have a corresponding closing tag. Within the img tag. This is indicated by the / before the closing bracket. The src attribute identifies the file name and location for the source of the image; the alt attribute specifies what text the browser should display if the image is unavailable. Depending on the browser you are using, if you move the mouse over the image, the alternate text may also be displayed. It is good to always provide alternate text: some users may have set their browsers to not display images; other users may have special software that reads web pages to them, and it will read the alternate text if any is provided.

Remember that it is appropriate to resize images that you intend to display on your web page, so that they are not too large (and so that they do not take too long to download when others view your page).
You can also specify the exact dimensions at which the image will be displayed using html tags, as shown below. Just be aware that this approach, used alone, does nothing to speed up the download. It only changes what the viewer sees, not the size of the actual image file.
1. Add the attribute
```
 height=100
```
  anywhere within the img tag, and review what happens in the browser.
2. Change the height from 100 to 200, and review what happens.
3. Remove the height specification and insert instead
```
 width=150
```
  Again, review what happens in the browser.
4. Now, without removing the width attribute, insert the following and review what happens.
```
 height=200
```
5. Describe what the height and width attributes do, alone and in combination.
Next you will replace the author's picture with another image.
1. You should have some jpeg images from a previous laboratory in a directory called 105. Check to see that you do with the command:
```
  ls -l ~/105
```
2. Copy the images to your public_html directory with the following command. (Note that the asterisk indicates that all files in the 105 directory that end with ".jpg" should be copied.)
```
  cp ~/105/*.jpg ~/public_html/ 
```
3. Set the file permissions on these images such that they can be viewed in a browser (i.e., such that anyone in the world can "read" them) with the command:
```
chmod 644 ~/public_html/*.jpg 
```
4. Now modify the image src attribute by replacing the address of the current image with that of the new image. For example:
```
<img src="http://www.cs.grinnell.edu/~username/water-lilies.jpg">
```
  You will also want to modify the alt attribute of the image tag appropriately. (Also, don't forget to change username to your own user name.)

Lists and Tables

If you have gotten this far and have additional time, surf to the demo web page that we created in class. View its html source code to review how lists are created in html, and then create a list on your sample web page.
The list you have made, if you followed the example on the demo Web page from class, is called an "un-ordered" list. To modify your list to become an "ordered" list, change the <ul> and </ul> tags that delimit the list to: <ol> and </ol>. Try this to see how it affects the appearance of your list.
Now do a similar exercise with tables. Use the html source from the demo web page to review how tables are made on the web, and then create a table in your sample web page.
- See if you can add rows to the table. You will find the tag pair <tr> and </tr> useful for this.
- Now see if you can add columns. The tags you need are <td> and </td>.

Created: Henry Walker, December 16, 2003
Revised: Henry Walker, November 28, 2006
Marge Coahran, February 23, 2007
Marge Coahran, February 19, 2008
Jerod Weinman, January 2, 2009
Adopted from HTML Basics