Griffin | Web Design
 
Resume Table of Contents  

Web Design
HTML

Chapter 3
Using Links on a Web Page

 
State Standards
 
  • WD 2.3 Content Standard: Students utilize graphics and multimedia in a HTML/XHTML document. (A1.9.1)(A1.9.6)
  • WD 2.3.1 Insert and align graphics using the <img src=…>
  • WD 2.3.2 Resize a graphic image using the HEIGHT and WIDTH attributes
  • WD 2.3.3 Realign images that will affect the text layout of a document

  • WD 2.4 Content Standard: Students create links within a HTML/XHTML document.
  • WD 2.4.1 Differentiate between absolute and relative linking to other documents (LA11.1.3)(LA12.1.3)
  • WD 2.4.2 Link to other web sites utilizing the <a href=”http:…>, </a> tag
  • WD 2.4.3 Link to other HTML documents utilizing the <a href=”file:…>,</a>
  • WD 2.4.4 Create a target/anchor that links to another section of the same document <a name=….>,<a href=#...>,</a>
  • WD 2.4.5 Link one web page to another page by clicking a graphic image utilizing a combination of the <a href=”file:…>,</a> with <img src=…>
  • WD 2.4.6 Create email links
Chapter Objectives
 
  • Describe linking terms and definitions
  • Create a home page
  • Enhance a Web page using images
    • Add a background image
    • Add an image with wrapped text
    • Add an image link to a Web page in the same Web site
  • Enhance a Web page using font tags with text (Align and add bold, italics, and color to text)
  • Change the bullet type used in an unordered list
  • Enhance a Web page using Links
    • Add a text link to a Web page in the same Web site
    • Add an e-mail link
    • Add a text link to a Web page on another Web site
    • Add links to targets within a Web page
    • Add an image link to a Web page in the same Web site
  • View the HTML file and test the links
  • Open an HTML file
  • Copy and paste HTML code
1. HTML Assignment
Duration: 1 Period
 

Read/Skim Chapter 3/CH3 PowerPoint

Print, staple, and complete the Chapter 3 Questions.

Grading:
1. Questions

 ___ 15 points

Total  
 ___ 15 points
p. 89 -146
2.

Lecture CH3

  • Project - Getting Greener Web Site (90)
  • Uusing Links on a Web Page (93)
  • link, vlink, alink (94)
  • linking within a web page (95)
  • linking to a web page in another site (96)
  • linking to an email address (98)
3.

HTML Project 3 Assignment
Duration: 1 Period

Begin the Web page starting on page 100.

  • <div> tags (103)
  • inline style with an unordered list (105 - 106)
  • text links within same site(108)
  • email links (109)
  • external links (111)
  • absolute and relative paths (111 - 112)
  • styles (114 - 115)
  • precedence (116)
  • embeded (117 - 118)

Make sure to type your name, Period, date, and class at the end of the Web page.

Save in the Chapter3/ChapterFiles Folder folder in your H:\ drive as gettinggreener.html. ( i.e. My Documents\WEB1\HTML\StudentDataDisk1-12\Chapter03\ChapterFiles\gettinggreener.html

(Note: There are no spaces in the file name.)

small

p. 100 - 127
4. HTML Assignment
Duration: 1 Period
p. 96 - 110
 

Read/Skim/Lecture

  • classes in style statements (130 - 131)
  • Image with wrapped text (132 - 133)
  • using thumbnail images (135)
  • target links (139 - 142)
  • Adding a link to another web site (108)

  • greenhome Sample
 
5.

HTML Project 3 Assignment, con' t.
Duration: 1 Period

p. 127 - 146
 

Continue and complete grettinggreener.html & greenhome.html.

Note: Change margins on images 10 on greenhome.

Make sure to type your name, Period, date, and class at the end of the Web page. Print and hand into the instructor.

Thumbnail Samples

Visibone Color Wheel
Hex Color Code Generator

 Grading:
 gettinggreener.html
 1. logo  
 2. inline styles  
 3. h2 color  
 4. bulleted list  
 5. external link  
 6. page link  
 7. email link  
 greenhome.html
 8. image margins = 10  
 9. images aligned  
 10. image linked  
 11. targets linked  
 12. top links  
 13. home links  
 14. text formatted  
 15. name, period, date, class  
Total  
15 pts  
6.

HTML Apply Your Knowledge Assignment (Dorm)
Duration: 1 Period

p. 147
 

Open apply3-1.htm. Complete the Web page outlined on page 147. Save as apply3-1solution.html. Note: Set image margins to 10.

Notes:

  • Use the DIV tag to change the alignment and margins on the image. It is the same syntax as the embedded img style on Page 133.

dorm

Grading:
1. First paragraph large  
2. Yes = red, sanity = blue  
3. Heading blue  
4. email red, bolder  
5. html title  
6. image margins = 10  
7. name, period, date, class  
Total  
 ___ 10 points
7. HTML Extend Your Knowledge Assignment (Cactus)
Duration: 1 Period
p. 148
 

Review aligning images with imbedded styles vs inline styles.

Style Hints:

Embedded Style
     <!-- Embedded alignment Pages 132 (style), 134 
     (img tag - Use class -->

     <title>Extend Your Knowledge - 3-1</title>
     <style type="text/css">
     <!--
     img.Period4  {float: left;
                margin-left: 20px;
                margin-right: 20px}
     -->
     </style>
     </head>

     <img class="Period4" src="flower1.jpg" width="320"      height="240" alt="First flower" />

Inline Style
     <!-- Inline alignment Pages 133 - Use style="float: -->

     <img style="float: right; margin-left: 20px; margin-right:      20px" src="flower2.jpg" width="320" height="240"      alt="Second flower" />

Open extend3-1.html. Complete the Web page outlined on page 148. Save as extend3-1solution.html.

cactus

Grading:
1. text formatted  
2. image margins = 10  
3. working links  
4. html title  
5. name, period, date, class  
Total  
 ___ 10 points
 
8. HTML In the Lab Assignment (Recycle)
Duration: 1 Period
p. 150 - 151
 

Start a new HTML file with the title, lab3-1solution.htm. Complete the Web page outlined on page 150 - 151.

Notes:

  1. The targets should be placed ABOVE the headings.
  2. Use the text from the book. (You do not need to research the topic.)
  3. Make your window small to test your anchor links.

lab3-1

Grading:
1. heading style 1  
2. bulleted list with target links  
3. email link  
4. top link  
5. image aligned  
6. html title  
7. image margins = 10  
8. name, period, date, class  
Total  
 ___ 10 points
9. HTML Assignment Case 3-2 (Sample Formatting)
Duration: 1 Period
p. 155
 

Complete the case as outlined in Case 3-2. Check out the webpage on Page 116 as an example and pages 115 & 117 for help. Save file as case3-2solution.html.

Note: The numbers in your ordered list should match the rubric below.

<ol>
     <p><li>This is normal text with no formatting.</li></p>
     <p><li><b>This is bold text.</b></li></p>
</ol>

Case 3-2

 Grading: case3-2solution.html
1. normal text  
2. bold  
3. strong  
4. big  
5. blockquote  
6. emphasized  
7. italicized  
8. subscript and superscript  
9. teletype  
10. underline  
11. font color  
12. size (not a heading)  
13. title  
14. heading  
15. name, period, date, class  
Total  
 ___ 15 points
 
10. HTML Assignment Lab 3-2 (Backyard)
Duration: 1 Period
p. 152 - 153
 

Start a new HTML file with the title, lab3-2solution.htm.Complete the Web page outlined on page 152 - 153.

Note: My example is slightly different than the book. Change the headings. Also make sure to include 3 'To Top's and the rollovers are right.

lab3-2 Small

 Grading:
1. title  
2. green H1  
3. square bullets  
4. correctly aligned text  
5. top link  
6. email link  
7. name, period, date, class  
Total  
 ___ 10 points

 
11. Optional – Complete the Online Practice Test  
12.

CH3 Quiz

 Grading:
1. Appropriate title  
2. Two headings (any size)  
3. text copied  
4. Bold Font  
5. Italicized Font  
6. One heading another color  
7. 1 unordered list  
8. Same external links as above  
9. 2nd list should be ordered with items of your choice  
10. link to Getting Greener  
11. Inserted image, aligned left, Size 226 x 150 with margins = 10  
12. The image should link to the picture  
13. name, period, date, class  
14. Extra Credit "if you can change the font to Arial, Size "small".  
Total  
 ___ 20 points

 

 

Additional Resources

A.

Online Textbook Resource
http://oc.course.com/sc/html6e/index.cfm?action=learn


top