HTML HTML Lesson Lesson 22 TBE 540 Farah Fisher 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 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 Warm Up See the warm up activity at 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 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 Colors in HTML Here is an example of the use of color in a FONT tag The text will print in red FONT color red The text FONT Here is another way to say red FONT color FF0000 The text FONT weird huh red green blue 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 Colors in HTML Here are some sample color numbers RED GREEN BLUE BLACK WHITE YELLOW CYAN MAGENTA FF0000 high red no green no blue 00FF00 no red high green no blue 0000FF no red no green high blue 000000 no red no green no blue FFFFFF high red high green high blue FFFF00 high red high green no blue 00FFFF no red high green high blue FF00FF high red no green high blue See http www csudh edu fisher tbe540 HHO2 htm for lots more examples Colors in HTML Another place to use color is for a background Background color is specified in the BODY tag For example to set the background of a page to light blue use BODY BGCOLOR C0D9D9 Colors in HTML You can also set the link color and text color for the whole page in the BODY 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 BODY BGCOLOR FFFF00 TEXT FF0000 LINK 0000FF VLINK 871F78 More about Text Size In the last lesson you saw header tags that made large text like H1 H1 You can also specify text size with a FONT tag Here is an example of very small text FONT SIZE 1 Write this FONT 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 More about Images Example IMG SRC MyPicture gif HEIGHT 100 WIDTH 50 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 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 CENTER CENTER RIGHT RIGHT The IMG tag is placed between the alignment tags CENTER IMG SRC picture jpg CENTER 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 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 IMG SRC kitty jpg BORDER 3 Here is an example of an image called BOG gif which is centered displayed 200 x 200 with a 4pixel border CENTER IMG SRC BOG gif HEIGHT 200 WIDTH 200 BORDER 4 CENTER 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 htm 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 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 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 pages 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 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 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 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 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 Self Check HTML Lesson 2 When specifying colors in HTML using hexadecimal code which of the following is blue FF0000 00FF00 0000FF Self Check HTML Lesson 2 When specifying …