1. HTML Lesson 2 TBE 540 Farah Fisher

2. Prerequisites Access web pages and navigate Use search engines to locate specific information Download graphics from web pages Match basic HTML tags to corresponding web page display View the source of any web page

3. Objectives Edit and create a web page using a text editor Demonstrate the use of at least three text sizes Demonstrate the use of color tags for background, text, links Demonstrate the placement and resizing of graphics on a web page Describe three ways to obtain graphics for web pages

4. “Warm Up” See the warm up activity at http://www.csudh.edu/fisher/tbe540/HW 2.htm http://www.csudh.edu/fisher/tbe540/HW 2.htm You will need to use a text editor (like NotePad or SimpleText). You can also use a word processing program, if you “save as text”.

5. Colors in HTML When you specify colors in HTML, you can either enter a color by name (for simple colors) OR… You can put in codes that specify the amount of red, green and blue to include in the color (which gives you millions of combinations).

6. Colors in HTML Here is an example of the use of color in a tag. The text will print in red. The text. Here is another way to say “red”: The text. (weird, huh?) green red blue

7. Colors in HTML What’s all this “#FF” stuff? If you want more than simple colors, you must specify the amount of red, green, and blue in the color. This is done with six hexadecimal (base 16) numbers (that’s what # means) - two each for red, green and blue. Each pair of numbers ranges from 00 to FF (yes, FF is a number) 00 = none, FF = highest

8. Colors in HTML Here are some sample color numbers: RED #FF0000 (high red, no green, no blue) GREEN #00FF00 (no red, high green, no blue) BLUE #0000FF (no red, no green, high blue) BLACK#000000 (no red, no green, no blue) WHITE #FFFFFF (high red, high green, high blue) YELLOW#FFFF00 (high red, high green, no blue) CYAN#00FFFF (no red, high green, high blue) MAGENTA#FF00FF (high red, no green, high blue) See http://www.csudh.edu/fisher/tbe540/HHO2.htm for lots more examples.http://www.csudh.edu/fisher/tbe540/HHO2.htm

9. Colors in HTML Another place to use color is for a background. Background color is specified in the tag. For example, to set the background of a page to light blue, use

10. Colors in HTML You can also set the link color and text color for the whole page in the tag. Here is a tag that sets the background to yellow, the text to red, the links to blue, and the visited links (the ones you have already been to) to purple:

11. More about Text Size In the last lesson, you saw “header” tags that made large text (like ) You can also specify text size with a tag. Here is an example of very small text: Write this.

12. More about Images Web page images are displayed on the left side of a page and in their actual stored size unless otherwise instructed. The HEIGHT and WIDTH of an image can be specified in the IMG tag. HEIGHT and WIDTH are measured in pixels.

13. More about Images Example: The example above displays the graphic file MyPicture.gif with a height of 100 pixels and a width of 50 pixels. NOTE: If you do not specify HEIGHT and WIDTH, the image will appear the size at whch it was stored.

14. More about Images To align an image at the center or the right of the screen, it is easiest to use one of the following tag pairs: The IMG tag is placed between the alignment tags: –NOTE: If you place several IMG tags in a row (one for each picture), they will appear next to each other when the page is displayed.

15. More about Images If you want a border (like a frame) around the image, you can put BORDER=thickness in pixels in the IMG tag. Example: Here is an example of an image called BOG.gif which is centered, displayed 200 x 200, with a 4- pixel border.

16. More about Images Be sure to visit the class website to see more information about the use of graphics in web pages. http://www.csudh.edu/fisher/tbe540/graphics.htm http://www.csudh.edu/fisher/tbe540/graphichints. htmhttp://www.csudh.edu/fisher/tbe540/graphichints. htm

17. Downloading Graphics In several class exercises, you will be asked to download graphics from web pages to use in your own projects. Before you begin, take time to review the copyright links posted on the class website. Be sure to see the “fair use” information at http://fairuse.stanford.edu/Copyright_and_Fai r_Use_Overview/chapter7/7-b.html#1

18. Downloading Graphics In general, you may download graphics to be used in your class projects, because they are not posted on the web (they are just files on a disk). If you decide to post a web site on the Internet or assist your students in doing so, you will want to examine the copyright issues very carefully.

19. Downloading Graphics To download graphics from a web page… –Locate the page containing the graphics You may want to use http://www.google.com and choose to search for images instead of pageshttp://www.google.com –If you are using a Windows computer… Right-Click on the image –If you are using a Macintosh computer… Control-Click on the image –Choose Download to Disk or Save Image As… –Notice where the image is stored

20. Downloading Graphics Graphics that are downloaded from the web are already in.GIF or.JPG format, so they are ready to be used in other pages. The size as images are stored may not be the same as displayed. You should not download graphics from a web page that prohibits copying.

21. Other Sources of Web Graphics You can use any graphics program to create images…even Word or PowerPoint. However, graphics must be converted to.GIF or.JPG before they can become part of a web page.

22. Other Sources of Web Graphics If you have a graphics program (like PhotoShop), you may be able to “save as”.GIF or.JPG. You can also search for freeware or shareware programs that convert images to.GIF or.JPG.

23. Other Sources of Web Graphics If you have MS Word, you may be able to save clip art and other graphics as web graphics (depending on the version you have). Try creating a simple document in Word that includes clip art and choosing Save as a Web Page. Look for a folder with the.htm file and the images as.gif files.

24. Self Check - HTML Lesson 2 When specifying colors in HTML using hexadecimal code, which of the following is blue? #FF0000 #00FF00 #0000FF

25. Self Check - HTML Lesson 2 When specifying colors in HTML using hexadecimal code, which of the following is blue? #FF0000 {highest red, no green, no blue} #00FF00 {no red, highest green, no blue} #0000FF {no red, no green, highest blue}

26. Self Check - HTML Lesson 2 To set the background color of a web page to white…

27. Self Check - HTML Lesson 2 To set the background color of a web page to white… {white is a common color, so either the word or the hex code will work}

28. Self Check - HTML Lesson 2 Which of the following places a graphic called “dog.jpg” on a web page?

29. Self Check - HTML Lesson 2 Which of the following places a graphic called “dog.jpg” on a web page? {case must match file name}

30. Self Check - HTML Lesson 2 Which of the following sets the size of dog.jpg to 100 x 100 pixels?

31. Self Check - HTML Lesson 2 Which of the following sets the size of dog.jpg to 100 x 100 pixels?

32. Self Check - HTML Lesson 2 Which of the following COULD NOT be used in a web page without conversion? kitty.jpg puppy.gif octopus.png bunny.bmp

33. Self Check - HTML Lesson 2 Which of the following COULD NOT be used in a web page without conversion? kitty.jpg puppy.gif octopus.png {.png is a valid web graphic format} bunny.bmp

34. Activities Complete the hands-on exercise at http://www.csudh.edu/fisher/tbe540/HE X2.htm http://www.csudh.edu/fisher/tbe540/HE X2.htm