1. HTML Lesson 3 TBE 540 Farah Fisher

2. Prerequisites Use a search engine to locate information. Download graphics from the web. Define GIF, JPG and "animated GIF". Use simple graphics tools to create/manipulate graphics. Control the size and placement of graphics. Demonstrate appropriate use of the following HTML tag categories: required tags, images, lists, colors, text sizes, lines

3. Objectives Create linked web pages. Use a list (text) of links. Use graphics as background and links. Place text next to images in at least two alignments. Use a graphic as an alternate to. Locate and use web page evaluation rubrics.

4. More about Links Virtually every web page has links…it’s the basic idea of the web and HTML (HyperText refers to links). Link tags look like this: what to click on The address can be a file name (like home.htm) or a web address (like http://www.csudh.edu/fisher/) http://www.csudh.edu/fisher/

5. More about Links The “what to click on” is quite often text. Whatever is placed between the tags is displayed on the screen and usually underlined (though you can change it in your browser settings). You can also place an tag between the tags, making the image into a link. A handout on links is available at http://www.csudh.edu/fisher/tbe540/HHO3.htm http://www.csudh.edu/fisher/tbe540/HHO3.htm

6. More about Links The example below shows an image called TOY.JPG as a link to a page called TOYSTORY.HTM : The tag may also contain HEIGHT, WIDTH, and BORDER information. This way, however, the user will not know that the image is a link. See the next slide for a better idea.

7. More about Links In the example below, both the image TOY.JPG and the words “GO TO TOY STORY” are part of the link to TOYSTORY.HTM. GO TO TOY STORY The words in the link can come before or after the tag. Placement of text next to images will be discussed later in this lesson.

8. More about Links Sometimes it is convenient to have a list of links. See the example below: CSUDH ” College of Education Dr. Fisher’s Classes

9. More about Graphics When placing text next to graphics, you may be surprised by the placement of the text. If you put in no “alignment” information, the text will appear at the bottom of the graphic: Text appears here

10. More about Graphics Using ALIGN=TOP or ALIGN=CENTER may be more useful. Text appears here Text appears here

11. More about Graphics Graphics can be used a web page backgrounds. The tag is used. A graphic used in the background of a page should be lightened so that it does not interfere with the information on the page.

12. More about Graphics When an image is smaller than the web page, it is “tiled” (repeated) to fill up all the space. A single graphic like this: would look like this as a background:

13. More about Graphics To lighten a graphic, you will need a program like PhotoShop or Word (or a freeware or shareware program). If you bring down the contrast and raise the brightness, the graphic will appear “washed out” - just right for a background. An example:

14. More about Graphics Another use for graphics is as a replacement for. You can search for web graphic lines (“dividers”) at websites like http://www.nzwwa.com/mirror/clipart/graphics /dividers/dividers1/index.html (part of Clip Art Universe) http://www.nzwwa.com/mirror/clipart/graphics /dividers/dividers1/index.html Use a regular tag to display the graphic line. You might want to adjust the width ( )

15. Self Check - HTML Lesson 3 Which of the following creates a link to HOME.HTM by clicking GO HOME? HOME.HTM GO HOME HOME.HTM

16. Self Check - HTML Lesson 3 Which of the following creates a link to HOME.HTM by clicking GO HOME? HOME.HTM GO HOME HOME.HTM

17. Self Check - HTML Lesson 3 Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? GO HOME

18. Self Check - HTML Lesson 3 Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? GO HOME {Either graphics first or words first}

19. Self Check - HTML Lesson 3 Which of the lists below will results from these tags? See Me GO AWAY! 1.See Me 2.GO AWAY! 1.See Me 2.GO AWAY! 1.See Me 2.GO AWAY!

20. Self Check - HTML Lesson 3 Which of the lists below will results from these tags? See Me GO AWAY! 1.See Me 2.GO AWAY! 1.See Me 2.GO AWAY! 1.See Me 2.GO AWAY!

21. Self Check - HTML Lesson 3 Which is the correct text placement if this tag is used? SINK! SINK!

22. Self Check - HTML Lesson 3 Which is the correct text placement if this tag is used? SINK! SINK!

23. Self Check - HTML Lesson 3 To use a graphic (back1.gif) as a page background, use… You cannot use a graphic as a background.

24. Self Check - HTML Lesson 3 To use a graphic (back1.gif) as a page background, use… You cannot use a graphic as a background.

25. Self Check - HTML Lesson 3 If a background graphic is smaller than the page display… The image is displayed larger to fill the window. The image is centered on the page window. The image is tiled (repeated).

26. Self Check - HTML Lesson 3 If a background graphic is smaller than the page display… The image is displayed larger to fill the window. The image is centered on the page window. The image is tiled (repeated).

27. Self Check - HTML Lesson 3 To use an image (lineup.gif) as a line, use the following tag(s)… lineup.gif

28. Self Check - HTML Lesson 3 To use an image (lineup.gif) as a line, use the following tag(s)… lineup.gif

29. Evaluation Rubrics One of the requirements for the HTML project is that you use a rubric to evaluate your own website when it is complete. Looking at rubrics now will alert you to what is important in web design. Check out the Web Evaluation Links on the class web site (HTML pages). NOTE: The CyberBee forms are very nice.

30. Activities Complete the web page activity found at http://www.csudh.edu/fisher/tbe540/HEX3.htm http://www.csudh.edu/fisher/tbe540/HEX3.htm This activity includes the development of several linked pages, much like your final project will be.