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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- student name teacher date test 9 12 business and it
- standard dimensions for digital images
- image resolution versus image size what resolution should
- loading and displaying images in matlab
- reducing images to 2mb max file size
- how to georeference an image using arcgis
- modifying pictures with microsoft office picture
- sugi 28 the power of pictures and paint using image
- jpeg file interchange format w3
- project 4 photo gallery
Related searches
- quia synonyms and antonyms
- quia antonyms rags to riches
- quia synonyms rags to riches
- quia rags to riches math
- quia rags to riches science
- quia rags to riches vocabulary
- the hunt ethan suplee
- one community health ethan way
- one community health ethan way arden
- quia rags to riches reading
- quia jeopardy rags to riches
- ethan frome