HyperText

Lab 2

Set up your thumbdrive

Note: if you do not yet have a USB thumbdrive, get one. Create the file structure below on the computer at your desk in class. Repeat the exercise at home, once you have a thumbdrive.

1. Create a directory (folder) on your thumbdrive called CIS228.
2. In that directory, create two new directories LABS and PROJECT.

About Me

1. Open Windows Explorer. Unhide file extensions (see step 3, page 15).
2. Open Notepad. Save As index.html in your PROJECT directory.
3. Create an html element containing head and body elements.
4. Inside the head element, create a title element. Type < t i t l e > A b o u t M e < / t i t l e > .
5. In the body, create a h2 heading element containing your name:
   • Your first name,
   • Your nickname in parentheses (if that is what you would rather be called), and
   • Your last name.
6. After this heading element, create paragraph elements (<p>) for each of the following;
   1. Your major (and minor if you have one).
   2. Your expected graduation date.
   3. The classes you are taking this term.
   4. Your previous computer experience.
7. Save your file.
8. Open your file with Chrome.
9. Open your file with Internet Explorer.
10. Open your file with Firefox.

Head First Lounge

1. In the LABS directory on your thumbdrive, create a LAB2 sub-directory.
2. Download lounge.zip to this directory.
3. Use Windows Explorer to Extract this zip file in place.
4. Your LAB2 directory should now have a lounge sub-directory with all the source files you need to complete the New and Improved Head First Lounge page as instructed in chapter 2 of the text.
5. Edit the lounge.html file in the lounge directory to link to the elixers.html and directions.html files (page 47).
6. Save this file and explore it with a browser.
7. Add a hyperlink to the elixers.html page labeled Back to the Lounge that points to lounge.html (page 54).
8. Reorganize the files in this directory into subdirectories as suggested in the text (pages 56 and 57).
9. Fix any broken hyperlinks (pages 58 through 65).
10. Fix the paths for the src attributes of the img elements in lounge.html, directions.html, and elixers.html (pages 66, 67, and 68).

More JavaScript

1. Copy hello.html from LAB1 to your LABS2 directory.
2. Edit this hello.html page with Notepad.
3. Replace the existing content of the script element by typing the following:
   
   w i n d o w . o n l o a d = i n i t ;

f u n c t i o n   i n i t ( ) {
        a l e r t ( " H e l l o " ) ;
}
   
   
4. Save your file and open it in some browser.

Organize Your LABS Directory

1. In your LABS directory, create a index.html page.
2. In the head element of this file, make a title element with content: My Labs.
3. Create paragraph elements (using the <p> tag) for LAB1 and LAB2.
4. In the first paragraph, include hyperlinks to hello.html and to index.html in the LAB1/starbuzz directory.
5. In the second, include hyperlinks to the lounge.html page you modified above and to your revised hello.html page.
6. Save the file and open it in a browser. Make sure you can follow all the links.
7. Show your work to your instructor.

Always turn off your computer and screen before leaving the room.