HTML

Lab

Meet the (old) booksite

1. In a browser, go to headfirstlabs.com/books/hfhtml .
2. Download and extract the code for chapter 1. Investigate with Windows Explorer.
3. Find the index.html file in the Starbuzz Coffee subdirectory.
4. Open this file with a browser.
5. View the source for this web page. Hold down the Ctrl key and type the letter u.

Create your first web page

1. Open Windows Explorer. Unhide file extensions (see step 3, page 15).
2. Open Notepad. Save As hello.html.
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.

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 these two tags, type: 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.

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