HTML Lesson 2PrerequisitesObjectives“Warm Up”Colors in HTMLSlide 6Slide 7Slide 8Slide 9Slide 10More about Text SizeMore about ImagesSlide 13Slide 14Slide 15Slide 16Downloading GraphicsSlide 18Slide 19Slide 20Other Sources of Web GraphicsSlide 22Slide 23Self Check - HTML Lesson 2Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30Slide 31Slide 32Slide 33ActivitiesHTML Lesson 2HTML Lesson 2HTML Lesson 2HTML Lesson 2TBE 540TBE 540Farah FisherFarah FisherPrerequisites•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 pageObjectives•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/HW2.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?)gr eenredblueColors 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 = highestColors 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.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 4-pixel 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.htmDownloading 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_Fair_Use_Overview/chapter7/7-b.html#1Downloading 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 storedDownloading 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
View Full Document
Unlocking...