CTEC 122 Lab 1

Lab 1 Tasks

Add the Document Type Definition (DTD) and meta element as shown in Basic HTML Document and template.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
</head>

Add a title element using the text "Concert Sound Bites" (without the quotes).
Add the additional opening and closing tags required for a complete and valid XHTML document: closing head tag, opening and closing body tags in the correct position, and closing html tag.

If you are using Windows Notepad, your lab1.html source should look something like this:
Lab 1 first screen shot

Open lab1.html in your Web browser (recall that we are using Firefox in CTEC 122) and answer the following questions:
- What text appears in the browser title bar?
- How is content in the browser window formatted as compared to how the source text is formated with regard to paragraphs, line breaks, etc.?
- Briefly describe in your own words how you think the Web browser displays "white space" (blank spaces, line breaks, paragraph breaks, etc) that it finds in the HTML source document.
Create a level-1 heading (h1 element) using the same text you used for the title ("Concert Sound Bites", without the quotes).
Create 3 level-2 headings (h2 element) using the names of the 3 composers (Dmitri Shostakovich, Jean Sibelius, and Edvard Grieg).
Open lab1.html in your Web browser and briefly describe how the page is displayed after making the 2 changes since the previous display.
Do we have a complete, valid XHTML Web page? Let's find out:
- Open the W3C Markup Validation Service page at http://validator.w3.org
- Click on the "Validate by File Upload" tab
- Click on the Browse button, navigate to your lab1.html source file, and click on "Open". You should see the complete path to lab1.html in the "File: " text box.
- Click on the "Check" button
Briefly describe the first error message. (only discuss the first error message; if you have followed the instructions you will have at least 3 errors, the first 3 of which are all the same)
Add markup to structure the 3 paragraphs of text (the text between each composer's name) as HTML paragraphs using opening and closing paragraph tags <p> ... </p>.
Open lab1.html in your Web browser. Does the browser display the page any differently than before you structured the paragraphs as HTML paragraph elements?
Validate lab1.html again, and describe the results.
Add a div element with an id name of header that encloses the level-1 heading (see Lloyd, p. 51-52):
```
<div id="header">
  <h1>Concert Sound Bites</h1>
</div>
```
Add a div element with an id name of footer after the last paragraph (but inside the body element). Inside the div element Add a copyright notice with your name and the current year (2008) using the character entity for the copyright symbol (see Lloyd, p. 39):
```
<div id="footer">
  &copy; your_name 2008
</div>
```
Add a div element with an id name of main-content that encloses all the content between the level-1 heading and the footer div (see Lloyd, p. 53 where he uses an id named "bodycontent").
Use the <cite> element to structure the names of each musical composition as a citation ("The Symphony No. 1" in the first paragraph; "Valse Triste" in the second paragraph; and "Piano Concerto in A Minor" in the third paragraph (see Lloyd, p. 65).
Add a "comment block" in the <head> element that includes a minimum of the following information (see Lloyd, pages 35-38):
- Name of file (what)
- Brief description of page (why)
- Author's name (who)
- Date of most recent revision (when)

Submission Instructions

Answer items 4 (all 3 sub-items), 7, 8, 10, and 11 in a computer-generated and printed document (text editor OK; word-processor also OK if you prefer) and submit at beginning of class with your name, the date, and Lab 1 on each page.
Print the HTML source file for your final page (the version as it appears in the text editor). Take time to adjust the font size and margins as well as the line breaks and blank lines between elements such that source markup is neat, readable, and generally reflects the structure of the page. Select a fixed-width (mono space) font for the printed output. Examples of mono space fonts commonly available in text editors and word processors are Courier, Courier New, Lucida Console, and Fixedsys.
Bring a copy of your completed lab1.html to class on removable media compatible with the classroom computers such as a USB Flash memory device or floppy disk. Lab 1 will be completed in class as an exercise when we upload it to the Clark Web server.

If you are unable to attend class then read the Using WinSCP handout (http://www.mhuffman.com/ctec122/lecture/winscp.doc) and upload lab1.html as instructed in the handout.

[ TOP ]