CS 199	Willamette University	Spring, 2019

Programming in PHP, Databases with MySQL, and Web Applications

Laboratory Exercise on Some Basics of HTML, Part 2

Summary: This laboratory exercise continues an introduction to documents which you routinely find on the World-Wide Web. Topics covered include comments, characters, lists, links, and images.

Acknowledgment

This lab updates and expands a lab by the same name, developed to support the book, The Tao of Computing: A Down-to-earth Approach to Computer Fluency by Henry M. Walker, Jones and Bartlett Publishers, 2005—copyrighted by Henry M. Walker, 2004, 2005.

Preliminaries

This lab assumes that you have created your own copy of the abbreviated course syllabus for this course.

Quick Reference

The following table expands the list of common formatting commands, initially given in Part 1 of this lab series on HTML basics.

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, h2, h3, 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
<hr>	draw a horizontal line
<ol>	begin an ordered (or numbered) list
<ul>	begin an unordered (or bullet) list
<li>	specify the start of a new list item within an ordered or unordered list
<!-- ... -->	Start and end of an HTML comment
<a>	an "anchor" for specifying a link to another page
<img>	insert an image

Comments in HTML

Sometimes, in developing a Web page, an author may want to make notes about the history, structure, content, or details of a Web page. In such situations, it may be useful to include content in the Web-page file, but not have the content displayed to users (unless they "display page source"). In HTML, this is accomplished by placing such content within a comment:

An HTML comment begins with the four characters: <!--
The HTML comment ends with the three characters: -->

In practice, I use HTML comments frequently in several ways:

writing an initial outline for the page—not for public viewing, but for me to clarify the content and structure of what I need to write,
keeping track of where ideas, text, or links might have come from (e.g., comments containing bibliographic references to clarify citations),
removing (temporarily) content that does not seem necessary at the present time, but which I might want later on—perhaps on a different page.

The following steps provide some practice with HTML comments:

On a fresh copy of the course's abbreviated syllabus, start a comment before the third sentence of the introductory paragraph, and end the comment just after that paragraph.
The first paragraph concludes with </p> and the second paragraph starts with <p>. What happens if those lines are included in a comment:
```
  
```
In the listing of topics under "Programming with PHP", what happens if a comment is inserted around <li>Functions ?
In the listing of topics under "Programming with PHP", what happens if a comment is inserted around just <li> in the line <li>Functions ?

HTML Characters

HTML allows a wide range of characters and symbols, beyond what you might type on your keyboard. Also, some characters have special meanings in HTML (e.g., < marks the start of a tag), so cannot be used as a printed character. Special character strings, sometimes called HTML characters, specify many of useful symbols. Some that I use most often are shown in the following table:

Character	Name	HTML character
<	less than	<
≤	less than or equal	≤
>	greater than	>
≥	greater than or equal	≥
←	left arrow	←
⇐	left double arrow	⇐
→	right arrow	→
⇒	right double arrow	⇒
↑	up arrow	↑
⇑	up double arrow	&uArr;
↓	down arrow	↓
⇓	down double arrow	&dArr;
α	Greek letter alpha	α
θ	Greek letter theta	θ

As illustrated in this table, HTML characters start with an ampersand & and end with a semicolon ;. As you might expect, the number of special HTML symbols is vast; you are encouraged to perform a Web search on "html character symbols" to determine various available options.

On a Web page, create a paragraph with the text: 2 > 1
Create a paragraph with the text: A &rArr B
Create a third paragraph with the text: α and θ are Greek letters
Can you guess the HTML characters for the Greek letters beta, lambda, and omega? Check by writing the appropriate HTML and dsiplaying the revised page. (If you have trouble, try a Web search with the phrase, "html Greek letters".)
For the Greek letters, what happens if the first letter is capitalized (e.g., Α and Θ)?

Lists

Lists are often a convenient way of organizing information concisely, as illustrated on the list of topics and the Student Learning Objectives for the abbreviated syllabus. For such purposes, HTML provides two easily-used versions of lists:

An unnumbered list, with elements identified by bullets, begins with the tag <ul> and ends with the tag </ul>.
A numbered or ordered list, with elements numbered successively, begins with the tag <ol> and ends with the tag </ol>

Within either type of list, the tag <li> indicates the start of the next list item. For example, consider the HTML code:

     <ol>
     <li>One
     <ul>
     <li>Bullet one
     <li>Bullet two
     </ul>
     
     <li>Two
     <ol>
     <li>Two A
     <li>Two B
     </ol>
     
     <li>Three
     <ol>
     <li>Three, sublist 1
     <li>Three, sublist 2
     </ol>
     </ol>

When placed on a Web page, the following is displayed.

One
- Bullet one
- Bullet two
Two
1. Two A
2. Two B
Three
1. Three, sublist 1
2. Three, sublist 2

Normally, a numbered list starts numbering with 1. However, one can specify a different starting number with a start attribute:

     <ol start=7>

In a copy of the abbreviated syllabus, change the list of Student Learning Objectives from an unordered list to a numbered list. (Just change the first <ul> to <ol>, but be sure to change the closing tag as well as the beginning tag.) Describe what happens.
In the resulting numbered list for the Student Learning Objectives, change the numbering to start with 7.
What happens if the starting number is negative (e.g., -7)?

Links and References

Within Web pages, it is common to include links to other documents. The simplest approach is to specify a link 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.walker.cs.grinnell.edu/courses/199.sp19-willamette/labs/html-basics-2.php">a link to this lab</a>

Save your edited copy of sample-html-page.html and reload it into your browser.
In the browser page, find the words a link to this lab, and click on this phrase. The browser should jump to this new page. (Use the back button to return to your sample-html-page.html.)

To review how this 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 indicates that you will specify a URL. The words between the tags (in this case a link to this lab) identify the material where the user will click in the browser.

Replace the suggested text or URL with something else, and check how the browser response. What happens if the URL contains a typographical error? What happens if the URL is the same as your sample-html-page.html document?

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.walker.cs.grinnell.edu/Walker-photo.gif"
   alt="Henry Walker">
```
Upon reloading the page in the browser, you will encounter a picture of this author.

Note that this image tag does not have a corresponding closing tag. Within the img tag, the src part identifies the file name and location for the source of the image; the alt part specifies what text the browser should display if the image is unavailable. If you move the mouse over this image, this alternate text may also be displayed by your browser.

Sometimes within a Web page, you may want to specify the size of an image. This can be done with a height or width designation within the img tag.
1. Add the phrase
```
   height=100
```
  to the img tag, and review what happens in the browser.
2. Change the height from 100 to 200, and describe what happens.
3. Remove the height specification and insert instead
```
   width=150
```
  Again, review what happens in the browser,
  Also try changing 150 to 100 or 250, and describe the result.
Replace the author's picture by another image. In case you are looking for interesting pictures, you can find a very large supply of images in the public domain by using a Web browser to search under "public domain images".

Work To Be Turned In

Commentary for steps 2-4.
An updated Web page for steps 5-8, with commentary for step 9.
Commentary for steps 10-12.
Commentary for step 16.
Commentary for step 18 and an updated Web page for step 19.

created 16 December 2003
revised 28 November 2006
updated and expanded 13-15 January 2019