Week4
On the W3Schools -> HTML Tutorial read:
HTML Links
- Links
- Colors
- Bookmarks
Notes on absolute and relative links.
Notes on anchors and targets.
Notes on images and links.
Notes on link colors.
Graphics for in-class example
Lab4
Create a web page file named lab4a.html Notice that it is all lowercase, no spaces.
Specify a DOCTYPE as the very first line in the HTML document.
Create a html file that has the correct structure using the doctype, html, head, title, and body opening and closing tags.
Title the page "Your Name lab4a" where YourName is your real name.
1) Link1: Place this image 
on the page that links to lab4b.html.
2) Link2: Place a link on this page that says 'next' that links to lab4b.html.
3) Link3: Place a link on this page that links to the 'bottom' Anchor on page lab4b.html.
4) Link4: Place a link on this page that opens lab4b.html in a new window using the target="_blank" attribute.
You have now created a web page.Verify that your web page validates using the W3C online validator. You must submit a screenshot to the dropbox that the page validates without ANY errors.
Your result should be similar to what you see below.
Create a web page file named lab4b.html Notice that it is all lowercase, no spaces.
Specify a DOCTYPE as the very first line in the HTML document.
Create a html file that has the correct structure using the doctype, html, head, title, and body opening and closing tags.
Title the page "Your Name lab4b" where YourName is your real name.
1) Place an anchor called 'top' that is at the beginning of the page.
2) Link1: Place this image 
on the page that links to lab4a.html.
3) Link2: Place a link on this page that says 'previous' that links to lab4a.html.
3) Link3: Place a link on this page that links to the 'bottom' Anchor on this page.
4) Link4, Link5, Link6: Make an image map using the following image:
The "Google" part of the image links to "http://www.google.com",
The "Windows Live Search " part of the image links to "http://www.bing.com",
And the "Yahoo" part of the image links to "http://search.yahoo.com".
Find the pixel coordinates manually by using coordinates obtained from photo editing software of your choice.
5) Use your own filler text. I want you to use a lot of filler text. Enough so that you need to scroll up and down quite a ways. This is needed to demonstrate the 'top' and 'bottom' anchors effectively.
6) Link 7: Place a link at the bottom of the page that links to the 'top' anchor on this page.
7) Place an anchor called 'bottom' that is at the bottom of this page.
You need to turn in all these files zipped together into one zip file for credit:
lab4a.html
lab4b.html
handright.gif
handleft.gif
search.gif
You have now created a web page.
Verify that your web page validates using the W3C online validator. You must submit a screenshot to the dropbox that the page validates without ANY errors.
Your result should be similar to what you see below.
(top half of lab4b)
(bottom half of lab4b)
When validation is passed, you should see a message like below.
| Grading Criteria | Possible Points 25 |
Your Points 25 |
| (lab4a.html) Correct file name. Correct DOCTYPE, HTML, HEAD, TITLE, and BODY structure. | 1 | 1 |
| (lab4a.html) Link1 with image | 2 | 2 |
| (lab4a.html) Link2 | 1 | 1 |
| (lab4a.html) Link3 | 1 | 1 |
| (lab4a.html) Link4 | 1 | 1 |
| (lab4a.html) Document validated without any errors. | 3 | 3 |
| (lab4b.html) Correct file name. Correct HEAD and TITLE structure with student name in the title. Correct BODY structure. | 1 | 1 |
| (lab4b.html) 'top' anchor embedded at top of page. | 1 | 1 |
| (lab4b.html) Link1 with image | 2 | 2 |
| (lab4b.html) Link2 | 1 | 1 |
| (lab4b.html) Link3 | 1 | 1 |
| (lab4b.html) Link4. Link5. Link6. Image map. | 5 | 5 |
| (lab4b.htm) Filler text. | 1 | 1 |
| (lab4b.htm) Link7 | 1 | 1 |
| (lab4b.htm) 'bottom' anchor embedded at bottom of page. | 1 | 1 |
| (lab4b.html) Document validated without any errors. | 2 | 2 |