Gif & Jpg Files, Animated Gifs, & Copyright Issues
Total Page：16
File Type：pdf, Size：1020Kb
007.03 TEACHER 2
GIF & JPG FILES, ANIMATED GIFS, & COPYRIGHT ISSUES
Before 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 PAGE
Where 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 editor
WHAT 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 CONTINUED
GIF & JPG FILES, ANIMATED GIFS, & COPYRIGHT ISSUES
GIF or JPG
Common Images and Formats Best Suited for Them
IMAGE 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 CONTINUED
GIF & JPG FILES, ANIMATED GIFS, & COPYRIGHT ISSUES
ANIMATED GIFS
WHAT 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 CODES
NUMERIC 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 FFFF00
SIXTEEN 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 PAGE
Tags 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
BGCOLOR="Color Code" tag. A color background will cover the entire page.The background will be gray. Adding Text Color Place this code after the word BODY in the opening
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.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 CONTINUED
ADDING COLOR TEXT AND BACKGROUNDS TO A WEB PAGE
Step 1 Open WEBPAGE1.HTM in WordPad.
Step 2 Make the background blue and all text white.
Hello! My name is Change Sara Rider to red. Sara Rider.
I was born in Germany.
I am a student at Raleigh High School.
- (Summer).
- Swim
- Ski
- Travel
- Clean my room
- Homework on weekends
- Go straight home after school
This web page is created by (your name).
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 PAGE
Step 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 15
PUTTING IMAGES INTO A WEB PAGE
Attributes for Graphic Tags in a Web Page Image 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 specified
ALIGNMENT RELATIVE Will align text with the top, bottom, TO TEXT or middle of the image. ALIGN="TOP" Example of Code: ALIGN="BOTTOM" 
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 Attribute
The 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 Bottom
Man With Many Hats
Man With Many Hats
Man 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 PAGE
Step 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
Add the following code. 
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.HTM
Integrating Technology and Internet Use—226 Computer Applications II—BE 6412 Summer 2000 007.03 HO 16 LINKING YOUR WEB PAGE
Step 1 Open WEBPAGE1.HTM in WordPad. Step 2 Code for Hyperlinks and Link Colors
(These are called anchor tags.)
Adding a Hyperlink Words shown on web tv.com>Link to WRAL-TV page on which the user will click on to go to the
link Changing a Link Color If your default link tag color is difficult to read in the beginning BODY tag. This web page is created by (your Example: name).
page.
Simply place your hyperlink code between the
Add the list above the WRAL-TV link.
Link to Place a horizontal rule before the list. WRAL-TV Use the same font color as you did for the
other list titles. tag to separate from the image. ALIGN="CENTER"> Resave the file as WEBPAGE1.HTM This web page is created by (your name). (y View in a browser. 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 GIFS
Locating 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
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 PAGE
DIRECTIONS: 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 RUBRIC
IMAGES 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 points
Integrating Technology and Internet Use—231 Computer Applications II—BE 6412 Summer 2000 007.03 HO 19
CREATING A WEB PAGE FOR A BUSINESS
Many 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 RUBRIC
CREATING 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 points
Integrating Technology and Internet Use—233 Computer Applications II—BE 6412 Summer 2000