Ethan Frome - Quia



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.

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.

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.

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.

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 list of codes. |For some basic colors you may use the color name |

| |Search the Internet for a more complete |instead of the color code number |

| |list. |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|

| | | tag. A color background will cover the |

| |BGCOLOR="Color Code" |entire page. |

| | | |

| | | |

| | | |

| | |The background will be gray. |

|Adding Text Color | |Place this code after the word BODY in the opening|

| | | tag. All text will be this color unless a |

| |TEXT="Color Code" | tag is used. |

|Be sure to use a color which can be read on | | |

|the background color. | | |

| | | |

| | |All text will be blue. |

|Add Font Color | |Changes all text within the beginning and closing |

| | |tag. |

| | | |

| | | Today |

| | | |

| | |The word today would be green. |

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. | |

| | | |

| | |Sara Rider’s Web Page |

| | | |

| | | |

| | | Hello! My name is Sara |

| |Change Sara Rider to red. |Rider. |

| | |I was born in Germany. |

| | |I am a student at Raleigh High School. |

| | | |

| | | |

| | | |

| | | I like to: |

| |Change the color of the headings for the ordered and unordered| |

| |lists to Sky (Summer). |Swim |

| | |Ski |

| | |Travel |

| | | |

| | | |

| | | |

| | |Things I do not like to |

| | |do: |

| | | |

| | |Clean my room |

| | |Homework on weekends |

| | |Go straight home after school |

| | | |

| | | |

| | | |

| | | |

| | |This web page is created by (your name). |

| | | |

| | | |

| | | |

| | | |

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 text file with a .HTM|File name is WEBPAGE1.HTML |

| |extension. | |

| | | |

| |View in a browser to check colors. |If possible view in both Netscape and Internet Explorer to see|

| | |if there are any differences. |

| |Print the source document for the following reasons: | |

| |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. | |

| |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 design that would be|

| | |appealing to a reader. |

| |CHALLENGE | |

| | |Resave the file as a HO14WEBPAGE.HTM—remember to save as a |

| | |text file. |

| | | |

| | |View in a browser. |

007.03 HO 15

PUTTING IMAGES INTO A WEB PAGE

|Attributes for Graphic Tags in a Web Page |

|Image Search | |Searches an image on your computer or on the Web are called |

| | |Image Search (IMG SRC). |

|Align Attribute |MARGIN ALIGNMENTS |Aligns pictures with text |

| |ALIGN="RIGHT" or |Aligns the picture at the right margin, center, or left margin|

| |ALIGN="LEFT" or |The default alignment is left unless otherwise specified |

| |ALIGN="CENTER" | |

| | |Will align text with the top, bottom, or middle of the image. |

| | |Example of Code: |

| | | |

| |ALIGNMENT RELATIVE | |

| |TO TEXT | |

| |ALIGN="TOP" | |

| |ALIGN="BOTTOM" | |

| |ALIGN="MIDDLE" | |

| | | |

| |Note: the ALIGN attribute should be contained in the Image| |

| |Search tag. | |

|Height Attribute |HEIGHT=50 |Determines the height of a graphic |

|Width Attribute |WIDTH=35 |Determines the width of a graphic |

|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. |

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 saved as a .GIF or .JPG|Scan a picture |

| |file. |Or |

| | |Take a picture with a digital camera. |

| |In these directions, I will refer to the graphics file as |Save the picture as a .GIF or .JPG file |

| |MYPICTURE.GIF |Place the file of the picture into your MYWEBPAGE folder |

| | |with your other web page files. |

|Step 3 |Move the cursor just before the opening tag. |Go straight home after school |

| | | |

| |Add the following code. | |

| || |

| | | |

| |HEIGHT=50 WIDTH=50 | |

| | |This web page is created by (your name). |

| |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. |

| | |Change the size of the graphic. |

| |CHALLENGE |Try inserting another graphic into the web page. Save as |

| | |HO15WEBPAGE.HTM |

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 |Link to WRAL-TV |

| |Words shown on web page on which the user will| |

| |click on to go to the link | |

| |Changing a Link Color | |

| |background color, you can change the link color by placing a |This web page is created by (your name). |

| |LINK=COLOR CODE in the beginning BODY tag. | |

| |Example: | |

| | | |

| | | |

| |Add a link to before the graphic. | |

|Step 3 |Add an ordered list of favorite links to your page. | |

| | | |

| |Simply place your hyperlink code between the ordered list tags. | |

| | | My Favorite Web |

| |Example: |Sites: |

| | | |

| |Disney Page | |

| |CBS |Disney Page |

| |Free E-mail |CBS |

| | |Free E-mail |

| | | |

| |Add the list above the WRAL-TV link. | |

| |Place a horizontal rule before the list. | |

| |Use the same font color as you did for the other list titles. |Link to WRAL-TV |

| |Use the tag to separate from the image. | |

| |Resave the file as WEBPAGE1.HTM | |

| |Print your source document if needed. |This web page is created by (your name). (y |

| | | |

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|

| |Locate an appropriate file for your web page. |WORLD.GIF. |

| |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. |

|Step 2 |An animated GIF is added to a web page using the same attributes for |Sara Rider's Web P |

| | | Hello! My name is Sara Rider. |

| | | |

| |Add the animated GIF you located and copied to the MYWEBPAGE directory| |

| |after the name Sara Rider. | |

| |Add the centering tag before and after the GIF tag. | |

| | | |

| | |I was born in Germany. |

| | | |

| | |age |

|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 bottom of your web |

| | |page. |

| | |Save with a different file name. Remember to save |

| |CHALLENGE |as a text file with an HTM extension. Suggestion: |

| | |HO17WEBPAGE.HTM |

| | |View in a browser. |

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 organizations such as FBLA, |Create a page about your life at your high school. |

|DECA, etc. | |

| |HINT: Use a picture(s) you have taken at your favorite spot around |

|HINT: You can link to the National web page for this organization. |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 and create a web page|Create a web page for a community activity in which you are involved. |

|about this person or group. |Examples may be 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 high school. |Submit to your teacher a plan for your web page other than the ones |

|Create links to web pages with free gifs, web tools, web tutorial |listed above. |

|sites, etc. |Be creative |

|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. | |

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

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.)

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

-----------------------

[pic]

[pic]

[pic]

[pic]

[pic]

Align Top

Man With

Many Hats

[pic]

[pic]

Align Middle

Man With

Many Hats

[pic]

Align Bottom

Man With

Many Hats

[pic]

[pic]

[pic]

[pic]

[pic]

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download