HTML

You will need a USB flash drive for this course. Any flash drive will do. You should be able to buy a 8GB drive for $10 or less. (Note: these drives do fail every once in a while, so back up your work periodically!)

Lab 1

If you don't have a USB flash drive, use a folder (directory) on your desktop instead. When you get a drive, repeat today's lab at home. (The second time will be easier than the first.)

Organize your thumbdrive

1. Create a directory (folder) named CIS228. (Note: capitalization and lack of spaces is important.)
2. In that directory, create two sub-directories: PROGECT and LABS.
3. In the LABS directory, create a sub-directory: LAB1.

Set up your blog

1. Click on blog.html.
2. Find the blog page in a new tab in your browser.
3. Save page as... blog.html in the CIS228 directory on your thumbdrive.
4. Open Windows Explorer. Unhide file extensions (see step 3, page 15). Go to your CIS228 directory.
5. Open the blog.html file with Notepad.
6. Change [Your Name Goes Here] to your name.
7. Save the file.
8. Open the file with your browser.

Create your first web page

1. Open Windows Explorer. Unhide file extensions (see step 3, page 15).
2. Open Notepad. Save As hello.html in your LAB1 directory.
3. Create an html element:
   • Create the opening tag. Type: < h t m l > .
   • Leave some blank lines.
   • Create the closing tag. Type: < / h t m l > .
4. Between these two tags, create head and body elements:
   • Type: < h e a d > , leave a blank line, type: < / h e a d > .
   • Type: < b o d y > , leave a blank line, type: < / b o d y > .
5. Inside the body element, create a paragraph element. Type: < p > H e l l o     W o r l d < / p > .
6. Inside the head element, create a title element. Type: < t i t l e > M y F i r s t W e b P a g e < / t i t l e > .
7. Save your file.
8. Open your file with Internet Explorer.
9. Open your file with Firefox.
10. Open your file with Chrome.

Add a JavaScript event handler

1. Edit hello.html with Notepad.
2. Inside the head element, after the title element, create a script element:
   • Create the opening tag. Type: < s c r i p t > .
   • Leave a blank line.
   • Create the closing tag. Type: < / s c r i p t > .
3. Between the opening and closing script tags, type:
   w i n d o w . o n l o a d = f u n c t i o n ( ) { a l e r t ( " H i " ) ; } ; .
4. Save your file.
5. Open your file with Internet Explorer.
6. Open your file with Firefox.
7. Open your file with Chrome.

Create the Starbuzz Web Page

1. In you LAB1 directory, create a starbuzz sub-directory.
2. Click on the this link index.html.
3. Find the new tab in your browser that has the content for the Starbuzz web page. (Don't worry that the structure of this content is not yet apparent.)
4. View the Source for this page in your browser.
5. Save Page As index.html in your starbuzz directory.
6. Follow the directions in the book (pages 20 through 23) to markup this content and complete the web page.
7. Add the indicated (pages 28 through 32) style to this page.
8. View the final product in your browser.
9. If there is time, show your work to the instructor.

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