Gif & Jpg Files, Animated Gifs, & Copyright Issues

007.03 TEACHER 2GIF & JPG FILES, ANIMATED GIFS, & COPYRIGHT ISSUESBefore beginning this section, it is important that students have an understanding of some of the features that will be used in creating the web pages in this competency.IMAGES IN A WEB PAGEWhere can I get images for my web page?  Scanned pictures  Digital pictures  Graphic packages  Internet (Be careful of copyright issues.)Graphic/picture format  Must be a .GIF or .JPG format to display in a browser.  If you have a picture in another format, you will need a graphics program that can convert pictures. While there are many such programs, some examples include: 1. Graphics Workshop 2. PhotoEditor 3. PhotoShop Plus 4. Search the Internet for a free graphics editorWHAT IS A GIF FILE? Type of graphics file format  GIF is short for Graphics Interchange Format  Transfer quickly over the Web  Created and owned by CompuServe  Because of some recent copyright issues, many people have begun to use .JPG files instead of GIF files.WHAT IS A JPG (JPG) FILE? Type of graphics file format  JPG is short for Joint Photographic Expert Group Format  This format is a public standard established by an international committee  Can be read by any quality browser. Integrating Technology and Internet Use—217 Computer Applications II—BE 6412 Summer 2000 007.03 TEACHER 2 CONTINUEDGIF & JPG FILES, ANIMATED GIFS, & COPYRIGHT ISSUESGIF or JPGCommon Images and Formats Best Suited for ThemIMAGE TYPE GIF JPG Line drawing/clipart   Cartoons & cartoon-like images   Most photo-realistic images   Images with a small number of distinct colors or shades of gray   Photo-realistic color images   Photo-realistic grayscale images   Images intended to have greater than 256 colors or shades of gray  COPYRIGHT ISSUES There are two kinds of graphics on the Internet 1. Free graphics you can copy and use on your web page 2. Copyrighted graphics you cannot use on your web page Just because you can right click and copy a picture to your computer does not give you permission or the right to use that picture. Examples: Disney, Coke, ESPN all have copyrights to their pictures. The same copyright laws that apply to books, magazines, newspapers and other types of communication protect graphics/pictures on the Internet. If you wish to use graphics from the Internet, search for "free" graphics and use these pages. Even then you may have to acknowledge the sites where you got the graphic.Integrating Technology and Internet Use—218 Computer Applications II—BE 6412 Summer 2000 007.03 TEACHER 2 CONTINUEDGIF & JPG FILES, ANIMATED GIFS, & COPYRIGHT ISSUESANIMATED GIFSWHAT ARE ANIMATED GIFS? A moving graphic used to show animation in web pages. It makes the page "come alive."HOW DO THEY WORK?Several drawings are shown quickly, one right after another. If placed correctly and consecutively, the images create an illusion of movement.HOW DO YOU GET ANIMATED GIFS?1. Animated GIF files can be downloaded from the Internet.  Be careful that the file is not copyrighted  Search for free animated GIFs. 2. Animated GIF files may come with some software  Microsoft Office 2000 has animated GIF files with its package  Some graphic packages also have animated GIF files. 3. There are other software packages available for creating animated GIF files.  These are a little more difficult to use than your regular graphic packages and can be very costly.  At the present time, creating animated GIF files is very time consuming.Integrating Technology and Internet Use—219 Computer Applications II—BE 6412 Summer 2000 007.03 HO 13 RGB COLOR CODESNUMERIC COLOR CODES Aquamarine 70DB93 Gray C0C0C0 Black 000000 Gray (Dark Slate) 2F4F4F Blue 0000FF Gray (Light) A8A8A8 Blue (Cadet) 5F9F9F Khaki 9F9F5F Blue (Corn Flower) 42426F Magenta FF00FF Blue (Dark Slate) 6B238E Maroon 8E236B Blue (Light) C0D9D9 Olive 4F4F2F Blue (Med) 3232CD Orange FF7F00 Blue (Midnight) 2F24F4 Orchid DB70DB Blue (Navy) 23238E Pink 8C8F8F Blue (Neon) 4D4DFF Plum EAADEA Blue (Sky) 3299CC Purple 871F78 Brass B5A642 Red FF0000 Bronze 8C7853 Rose 856363 Brown A62A2A Salmon 6F4242 Brown (Dark) 5C4033 Scarlet 8C1717 Brown (Faded) F5CCB0 Silver E6E8FA Chocolate (Baker HO 4 Sky (Summer) 38B0DE Copper B87333 Tan DB9370 Coral FF7F00 Tan (Dark) 97694F Cyan 00FFFF Turquoise (Dark) 7093DB Firebrick 8E2323 Turquoise ADEAEA Gold CD7F32 Violet 4F2F4F Gold (Bright) D9D919 Violet (Blue) 9F5F9F Gold (Old) CFB53B Violet (Red) CC3299 Goldenrod DBDB70 Wheat D8D8BF Green 00FF00 White FFFFFF Green (Dark) 2F4F2F Wood (Dark) 855E42 Green (Pale) 8FBC8F Wood (Light) E9C2A6 Green (Yellow) 99CC32 Yellow FFFF00SIXTEEN PREDEFINED COLORS (These names may be used instead of the numeric code) Silver Gray Maroon Green Navy Purple Olive Teal Cyan White Black Red Lime Blue Magenta Yellow*Search the Internet or reference materials for a complete list of color codes.Integrating Technology and Internet Use—220 Computer Applications II—BE 6412 Summer 2000 007.03 HO 14 ADDING COLOR TEXT AND BACKGROUNDS TO A WEB PAGETags for Adding Color to a Web Page Color Codes  See 007.03 HO 13 for a  For some basic colors you list of codes. may use the color name  Search the Internet for a instead of the color code more complete list. number  For the color red you may use either "Red" or "FF0000"  Before you begin using the color codes, please remember that colors on a web page should compliment each other and be easy to read.  Check your pages carefully when adding color.  If you are unsure about color combinations, it is probably best to change them.  Remember, color often sets the tone for your page. Using Color Codes with Text and Background Adding Background Color Place this code after the word BODY in the opening <BODY> BGCOLOR="Color Code" tag. A color background will cover the entire page.<BODY BGCOLOR="COCOCO">The background will be gray. Adding Text Color Place this code after the word BODY in the opening <BODY> TEXT="Color Code" tag. All text will be this color Be sure to use a unless a tag is color which can be used. read on the background color. <BODY TEXT="0000FF">All text will be blue. Add Font Color Changes all text within the beginning and closing tag. Code"> Today The word today would be green.Integrating Technology and Internet Use—221 Computer Applications II—BE 6412 Summer 2000 007.03 HO 14 CONTINUEDADDING COLOR TEXT AND BACKGROUNDS TO A WEB PAGEStep 1  Open WEBPAGE1.HTM in WordPad.Step 2  Make the background blue and all text <HTML> white. <HEAD><TITLE>Sara Rider’s Web Page</TITLE></HEAD><BODY BGCOLOR="2F24F4F" TEXT="FFFFFF"> <CENTER> <H1>Hello! My name is  Change Sara Rider to red. Sara Rider. </CENTER> </H1> <H3>I was born in Germany. I am a student at Raleigh High School. </H3> <HR> <BOLD> I  Change the color of the headings for like to:</BOLD> the ordered and unordered lists to Sky <UL> (Summer). <LI>Swim <LI>Ski <LI>Travel </UL> <HR> <BOLD>Things I do not like to do:</BOLD> <OL> <LI>Clean my room <LI>Homework on weekends <LI>Go straight home after school </OL> This web page is created by (your name). </BODY></HTML>Integrating Technology and Internet Use—222 Computer Applications II—BE 6412 Summer 2000 007.03 HO 14 CONTINUED ADDING COLOR TEXT AND BACKGROUNDS TO A WEB PAGEStep 3  Resave the file. Make sure to save as a File name is WEBPAGE1.HTML text file with a .HTM extension. If possible view in both Netscape and  View in a browser to check colors. Internet Explorer to see if there are any differences.  Print the source document for the following reasons: 1. If the web page created by the student has errors, it will be helpful to print their source document to correct errors and then make the corrections on the computer. 2. As the teacher, you may require a copy of their source document for assessment at certain steps.Change the background to another color and then change the text in the document to an appropriate color. Try several combinations until you find a CHALLENGE design that would be appealing to a reader.Resave the file as a HO14WEBPAGE.HTM —remember to save as a text file. View in a browser.Integrating Technology and Internet Use—223 Computer Applications II—BE 6412 Summer 2000 007.03 HO 15PUTTING IMAGES INTO A WEB PAGEAttributes for Graphic Tags in a Web Page Image <IMG SRC="Filename.ext "> Searches an image on your computer or Search on the Web are called Image Search (IMG SRC).Align MARGIN ALIGNMENTS  Aligns pictures with text Attribute ALIGN="RIGHT" or  Aligns the picture at the right margin, ALIGN="LEFT" or center, or left margin ALIGN="CENTER"  The default alignment is left unless otherwise specifiedALIGNMENT RELATIVE  Will align text with the top, bottom, TO TEXT or middle of the image. ALIGN="TOP"  Example of Code: ALIGN="BOTTOM" <IMG SRC="MYPIC.JPG" ALIGN= ALIGN="MIDDLE" "RIGHT">Note: the ALIGN attribute should be contained in the Image Search tag.Height HEIGHT=50 Determines the height of a graphic Attribute Width WIDTH=35 Determines the width of a graphic AttributeThe larger the image, the longer it will take the page to load.Be very careful when using the height/width attributes to keep the graphic in proportion so it does not appear to be distorted. Align Top Align Middle Align BottomMan With Many HatsMan With Many HatsMan With Many Hats Integrating Technology and Internet Use—224 Computer Applications II—BE 6412 Summer 2000 007.03 HO 15 CONTINUED PUTTING IMAGES INTO A WEB PAGEStep 1  Open WEBPAGE1.HTM in WordPad.Step 2  You will need a graphic of yourself  Scan a picture saved as a .GIF or .JPG file. Or  Take a picture with a digital camera. In these directions, I will refer to the graphics file as MYPICTURE.GIF  Save the picture as a .GIF or .JPG file  Place the file of the picture into your MYWEBPAGE folder with your other web page files. Step 3  Move the cursor just before the <LI>Go straight home after school opening tag. </OL>  Add the following code. <IMG SRC="MYPICTURE.GIF" <IMG SRC="MYPICTURE.GIF" HEIGHT=50 WIDTH=50 HEIGHT=50 WIDTH=50 ALIGN="CENTER"> ALIGN="CENTER"> This web page is created by (your name). SQUARE PICTURE HEIGHT=50 WIDTH=50 PORTRAIT PICTURE HEIGHT=75 WIDTH=50 LANDSCAPE PICTURE HEIGHT=50 WIDTH=75 Step 4  Resave the file as WEBPAGE1.HTM (Make sure to save as a text file with a .HTM extension.) Open in a browser to the view the graphics. Print the source document if needed.  Change the alignment of the image. CHALLENGE  Change the size of the graphic.  Try inserting another graphic into the web page. Save as Integrating Technology and Internet Use—225 Computer Applications II—BE 6412 Summer 2000 HO15WEBPAGE.HTMIntegrating Technology and Internet Use—226 Computer Applications II—BE 6412 Summer 2000 007.03 HO 16 LINKING YOUR WEB PAGEStep 1  Open WEBPAGE1.HTM in WordPad. Step 2 Code for Hyperlinks and Link Colors (These are called anchor tags.) Adding a Hyperlink <A HREF=http://www.wral- <A HREF=URL Address>Words shown on web tv.com>Link to WRAL-TV</A> page on which the user will click on to go to the link</A> Changing a Link Color If your default link tag color is difficult to read <IMG SRC="MYPICTURE.GIF" with your background color, you can change the HEIGHT=50 WIDTH=50 link color by placing a LINK=COLOR CODE ALIGN="CENTER"> in the beginning BODY tag. This web page is created by (your Example: name). <BODY BGCOLOR="2F24F4F" TEXT="FFFFFF" LINK="3232CD"> </BODY>  Add a link to http://www.wral-tv.com </HTML> before the graphic. Step 3 Add an ordered list of favorite links to your <HR> page. Simply place your hyperlink code between the <BOLD> My ordered list tags. Favorite Web Sites:</BOLD> Example: <OL> <LI> <OL> <A HREF=http://www.disney.com>Disney <LI><A Page</A> HREF=http://www.disney.com>Disney <LI><A Page</A> HREF=http://www.cbs.com>CBS</A> <LI><A HREF=http://www.cbs.com>CBS</A> <LI><A <LI><A HREF=http://www.hotmail.com>Free HREF=http://www.hotmail.com>Free E- E-mail</A> mail</A> </OL> </OL>  Add the list above the WRAL-TV link. <A HREF=http://www.wral-tv.com>Link to  Place a horizontal rule before the list. WRAL-TV</A>  Use the same font color as you did for the other list titles. <IMG SRC="MYPICTURE.GIF" HEIGHT=50 WIDTH=50  Use the tag to separate from the image. ALIGN="CENTER">  Resave the file as WEBPAGE1.HTM This web page is created by (your name). (y</BODY>  View in a browser. </HTML>  Print your source document if needed.Integrating Technology and Internet Use—227 Computer Applications II—BE 6412 Summer 2000 007.03 HO 17 DAZZLING YOUR PAGE WITH ANIMATED GIFSLocating a GIF File Step 1  Search the Internet for free animated GIF files. In the directions, the name of the GIF used will be WORLD.GIF.  Locate an appropriate file for your web page.  Copy the file to your MYWEBPAGE directory. Make sure you do not copy a copyrighted GIF file. Adding the Animated GIF to the Web Page.Integrating Technology and Internet Use—228 Computer Applications II—BE 6412 Summer 2000 Step 2 An animated GIF is added to a web page using the <HEAD><TITLE>Sara Rider's Web same attributes for adding a graphic. P<BODY BGCOLOR="2F24F4F" TEXT="FFFFFF" > <IMG SRC="MYPICTURE.GIF"> <CENTER> <H1>Hello! My name is Sara  Add the animated GIF you located and copied Rider.</CENTER> </H1> to the MYWEBPAGE directory after the name Sara Rider. <CENTER> <IMG SRC="WORLD.GIF">  Add the centering tag before and after the GIF </CENTER> tag. <H3>I was born in Germany. age</TITLE></HEAD> Step 3  Resave the file as WEBPAGE1.HTM (Make sure to save as a text file with a .HTM extension.) Open in a browser to the view the graphics. Print the source document if needed. Locate another GIF file on the Internet and save in your web page directory.  Place the animated GIF near the CHALLENGE bottom of your web page.  Save with a different file name. Remember to save as a text file with an HTM extension. Suggestion: HO17WEBPAGE.HTM  View in a browser.Integrating Technology and Internet Use—229 Computer Applications II—BE 6412 Summer 2000 007.03 HO 18 IMAGES IN THE WEB PAGEDIRECTIONS: Create a web page using one of the following scenarios. Use the rubric as a guide to the features that should be included in your web page. REMEMBER!! 1. Plan your page on paper first. 2. Collect your information. 3. Locate your GIF or JPG files. 4. Begin writing your paper.SCENARIO 1 SCENARIO 2 Create a page about one of your student Create a page about your life at your high organizations such as FBLA, DECA, etc. school.HINT: You can link to the National web page HINT: Use a picture(s) you have taken at your for this organization. favorite spot around school. Link to your school’s web page or the web pages of teachers.SCENARIO 3 SCENARIO 4 Choose a singer, musical group, or favorite star Create a web page for a community activity in and create a web page about this person or which you are involved. Examples may be group. your church, 4H, Boy/Girl Scouts, Choir, Etc.HINT: Search the Internet for information. Use the list tag to list songs or movies by this person or group.SCENARIO 5 SCENARIO 6 Create a web page as a help tool for students in Submit to your teacher a plan for your web high school. page other than the ones listed above.  Create links to web pages with free gifs, Be creative web tools, web tutorial sites, etc.  Provide information about sites that offer free e-mail, web pages space, etc.  Include any other information that would be useful to a high school student using the Internet. Integrating Technology and Internet Use—230 Computer Applications II—BE 6412 Summer 2000 007.03 HO 18 RUBRICIMAGES IN THE WEB PAGE_____Web page displays in the browser without HTML errors...... 10 points_____Title in the browser line...... 5 points_____Centered headline for the page...... 5 points_____Multiple-sized fonts (at least two) ...... 5 points_____Underlined, italicized, or bold text displayed...... 5 points_____At least one unordered list/unordered list...... 5 points_____At least one horizontal rule...... 5 points_____Use an appropriate graphic...... 10 points_____Use an appropriate animated GIF...... 10 points_____Include background color...... 10 points_____At least two different color fonts...... 10 points_____Link to two pages on the Internet...... 10 points_____Overall impression...... 10 points (Good use of white space, no typographical or grammatical errors, appropriate use of features.)_____Total Points out of 100 pointsIntegrating Technology and Internet Use—231 Computer Applications II—BE 6412 Summer 2000 007.03 HO 19CREATING A WEB PAGE FOR A BUSINESSMany businesses now have their own web page online for advertising purposes.DIRECTIONS: 1. Choose a business from the list below. 2. Search the Internet for sample web pages for this type of business. 3. Create a web page for your business. 4. Use the rubric as a guide for the features to include in your web page.Home Town Bank Pizza On the Go Dazzling Jewelry Boards of All Types-Snow, Ski, Knee, Etc. All Year Sports The New You Makeup Shop Picture It (Submit suggestions of a business for approval by your teacher.)Integrating Technology and Internet Use—232 Computer Applications II—BE 6412 Summer 2000 007.03 HO 19 RUBRICCREATING A WEB PAGE FOR A BUSINESS_____Web page displays in the browser without HTML errors...... 10 points_____Title in the browser line...... 8 points_____Headline for the page...... 8 points_____Multiple-sized fonts ...... 8 points_____Multi-colored fonts...... 8 points_____Unordered list/unordered list...... 8 points_____Horizontal rules...... 8 points_____Appropriate graphic...... 8 points_____Appropriate animated GIF...... 8 points_____Background color...... 8 points_____Link the Internet...... 8 points_____Overall impression...... 10 points (Good use of white space, no typographical or grammatical errors, appropriate use of features.)_____Total Points out of 100 pointsIntegrating Technology and Internet Use—233 Computer Applications II—BE 6412 Summer 2000

Gif & Jpg Files, Animated Gifs, & Copyright Issues

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support