Albuquerque Zoo Biome Web Page Project - stem-lea
Albuquerque Zoo Biome
Web Page Project
Name _________________
Objective: Create a set of student web pages about a zoo with animal exhibits based around different biomes. The zoo will be located in Albuquerque, so the effects of Albuquerque’s climate, especially seasonal changes, must be considered for each biome.
Each student will create a web page with text, graphics, colors and a link.
Each student will choose a biome and an animal within the biome to research.
Each student will make a Noodle Tools Annotated Bibliography of the resources they use.
Each student will include information gathered on their web page.
Each student will be part of creating a diagram or model of an exhibit for a particular biome
Each student will insert graphics related to the exhibit diagram or model on the web page.
Each student will justify choices made concerning this exhibit on the web page.
Each student is responsible to get all teacher verifications initialed by the teacher as activities are completed.
------------------------------------------------------------------------------------------------------
Making Your Own Folder
Directions:
1) Double click on the “My Documents” icon.
2) Click on the File menu, select New, and the Folder.
3) A new folder will appear. Click once on its name, then click once again. The cursor
should appear at the end of the name.
4)Type WEB for the name for your folder.
5)Press ENTER.
From now on only use the documents in your WEB folder to run and work on your web page. Be sure to save all documents related to your web page, including
pictures, in this folder.
Saving to Your WEB Folder
Directions:
1) Click on the File menu, select SaveAs....
2) Click on the arrow beside the “Save in” window.
3) Click on “My Documents.”
4) Double-click on the folder called WEB.
5) If necessary, type a file name for what you are saving. With file names it is best to avoid
any punctuation.
6) Select Save.
Check the Size of your WEB Folder
Directions:
1) Right click on your WEB folder.
2) Select Properties.
3) Check the size. If you go over 1 mega byte (1.0 MB) it is too big and you will have to
eliminate one or more of your pictures. Pictures take up hugely more space than text
(typing), so eliminating text will not make a significant difference in the size of your
folder.
4) Show me what you have accomplished so you get credit.
Research biomes
Directions:
1) Decide on a biome for your web page to focus on.
_________ Ms. A
------------------------------------------------------------------------------------------------------
2) Find Internet and/or other sources that contain information to use for
your web page.
3) Use Noodle Tools (www.noodletools.com/login.php) to begin an annotated
bibliography of the resources you use in this assignment. Your science textbook (p.
494-501) is one possible resource. Before including a resource, make sure it is
from a credible source.
4) Show me what you have accomplished so you get credit.
_________ Ms. A
------------------------------------------------------------------------------------------------------
Beginning Your Web Page
You will create a one sentence web page and open it on the web. Your web
page will not actually reside on the web until it is completed, approved by
Ms. Abresch, and placed there by Mr. Pelzman.
HTML - HyperText Markup Language
- the language of the WEB
- tells a computer how to display a website
HTML Documents have two parts -
1) Head - has information which will not be displayed on the screen
2) Body - directions concerning what will be displayed on the screen
HTML Tags - special codes marked by < tag name > and </tag name>
- they tell a computer how to display a Web page
- the slash in the closing tag tells the computer to stop this tag
Format - the proper way to write a computer command
Directions:
1) On the Desktop go to Programs, then Accessories, then Open Windows Notepad.
2) Type the following, but use your name:
<html>
<head>
<title>Name’s Web Page</title>
</head>
<!-- biome web page created for technology and science-->
<body>
This is Name’s web page.
</body>
</html>
3) Save the file as Web_Name.html, but use your name in place of Name.
4) Open Internet Explorer. Then use the BROWSE button to find and open your file.
5) You should now see your sentence on the screen.
____________ Ms. A
------------------------------------------------------------------------------------------------------
Placing headings within a document.
You will make a title for your web page, credit yourself as creating it,
and add the date that you began creation of it. Later you may want to
change the title and that would be fine!
Format for a heading tag -
<hN>Text to appear in heading number N</hN>
N will be any number from 1 to 6 and is the level of the heading. The smaller the
number N is, the more important is the heading and the larger it will appear on the
screen.
For a heading to appear on the screen its tags must be placed in the body section of the web page.
Directions:
1) Open your web page document in Notepad.
2) After the <body> tag add the following tag but change the words
inside of the tags to be the real title for your web page.
<h1>Biome WEB Page Title</h1>
3) Press ENTER and then add a tag with your first name.
<h2>Produced by Name</h2>
4) Finally add a level 4 heading with today’s date. (Think about how
you just created the level 1 and level 2 headings in this lesson, and
follow the same pattern to create the level 4 heading.)
5) Save what you have done in Notepad and the re-open it on the Web
and show it to Ms. Abresch for credit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
Modifying text in an HTML document.
You will now replace the sentence you typed with information about
your biome. Any time you find a new resource add it to your Noodle
Tools Annotated Bibliography, also.
Directions:
1) Open your web page document in Notepad.
2) Go to the <body> tag. Then go to the sentence you typed before.
3) Delete your sentence and instead type a paragraph of information concerning the
climate of the biome you selected for your web page.
4) Save your document.
5) Re-open it on the Web.
(If the old version is already on a Web page just reload it.)
You should see your changes.
____________ Ms. A
------------------------------------------------------------------------------------------------------
HTML Lists
You will make lists (either numbered or bulleted) for your biome of :
5 or more plants
5 or more larger animals
5 or more smaller consumers.
Format for an HTML list with bullets:
<b>My Unordered List:</b>
<ul>
</ul>
<li>Item 1
<li>Item 2
<li>Item 3
The <ul> tag marks the beginning and end of the list, and the <li> indicates each list item.
Format for an HTML numbered list:
<b>My Unordered List:</b>
<ol>
</ol>
<li> Item 1
<li> Item 2
<li> Item 3
The <ol> tag marks the beginning and end of the list, and the <li> indicates each list item.
Directions:
1) Open your web page document in Notepad.
2) Use the formats explained in the boxes to create ordered or unordered lists of
organisms found in your biome.
Remember you need at least 5 plants, at least 5 larger animals, and at least 5
smaller consumers.
3) Save what you have done in notepad and then re-open it on the Web and show
it to Ms. Abresch for credit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
HTML Paragraph Breaks
(see next section also to complete at the same time)
You will select an animal that lives within your chosen biome.
You will add information to your web page about the animal within your biome that you have chosen for your focus.
Web browsers ignore when you press ENTER to start a new line.
You will learn different commands to tell the computer how to start a new line.
Starting a New Paragraph <p>
To start a new paragraph a paragraph tag must be used. It will insert a blank line and then start a new paragraph. The HTML code for a new paragraph is <p>.
Using a Line to Divide the Page <hr>
A different way to space items on the page is to use the horizontal rule tag, <hr>.
This tag insets a blank line and then draws a horizontal line across the page. This is a useful way to divide the page into sections.
Starting a New Line <br>
Finally the tag <br> causes the typing to occur on the next line, but without causing a blank line to appear. This is useful when you have a list or a poem to place on the screen.
Directions:
1) Open your web page document in Notepad.
2) Use the <p>, <br>, and <hr> tags to divide your information into appropriate
sections.
3) Add information to your web page about the animal you have selected. If it is
appropriate add headings for different sections.
4) See the next section to complete at the same time.
5) Save what you have done in notepad and then re-open it on the Web and show
it to Ms. Abresch for credit .
____________ Ms. A
------------------------------------------------------------------------------------------------------
Writing With Bold and Italics Tags
You will use HTML tags to highlight text .
To change the style of what you are typing, there are tags for boldface and italics.
<b> This is Bold . . . </b>
<i> This is Italic . . . </i>
Directions:
1) Open your second web page document in Notepad.
2) Use the bold and italics tags to change how the information appears
on your Web page.
3) Be sure to also use one or more bold and/or italics tags in a header.
4) Save what you have done in notepad and then re-open it on the Web
and show it to Ms. Abresch for credit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
HTML Graphics Intro - Finding and Saving Images
You will find an image of your organism to place on your we page and
save it in the proper format to your web page folder.
Graphic - any image displayed on a computer (picture, photograph,
clip art, table, graph, etc.)
Pixel - a single point of light that combines with many other pixels to
form what you see on the computer screen
Format - the proper way to write a computer command
A graphic image file ends with an abbreviation to indicate how the image is formatted. Different graphics formats exist: PICT, GIF, TIFF, PNG, EPS, BMP, PCX,
and JPEG.
GIF (giff) is the standard graphics format, most recognized by other computers
JPEG or JPG (pronounced jay-peg) is also widely recognized.
JPEG works best for this project!!!
Directions:
1) Find a simple JPG image on the WEB to insert into your WEB page.
2) Click and hold the right mouse button. You should bring up the "secret"
menu.
3) Select Save Picture as . . .
4) When prompted in the SAVE window, enter "filename.jpg" as the
name for the file.
5) Save the file in the same folder/directory as your web page document.
6) Check to see that the file is saved in the correct folder. If it isn’t get
help to find and move it.
7) Show what you have done to Ms. Abresch for credit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
HTML Graphics Continued - Adding Images to a Web Page
You will add the image you stored in your web folder to your web
You will also create a food web, save it as a “.jpg” file, and add this page. image to your web page.
Multimedia = Text + Pictures
The HTML format for inserting and image is:
<img src=”filename.jpg”>
The small images will directly follow the previous text unless you use a paragraph tag (<p>) to force it to the next line.
Directions: (Inserting a picture)
1) Open your web page document in Notepad.
2) Somewhere in the body enter the following: <img src=”filename.gif”>
(Use the filename of the file you saved in the previous exercise.)
3) Save the link to the site and insert it into the line
<h4>the link</h4>
4) Save your file in Notepad, then open it on the Web and show it to Ms. Abresch
for credit.
____________ Ms. A
Directions: (Inserting a food web graphic)
1) In Paint (or possibly Inspiration) make a food web for your chosen biome. Make
sure the arrows point the correct direction!!
2) If you create the food web in Inspiration, when you are done, press the “Print Screen” key
on the keyboard, select all of the food web, copy it, then paste it in Paint.
3) Save this food web image as “foodweb.jpg”.
4) Open your web page document in Notepad.
5) Somewhere in the body enter the following: <img src=”foodweb.jpg”>
6) Save your file in Notepad, then open it on the Web and show it to Ms. Abresch
for credit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
Colors in HTML
You will find possible colors to use with your web page. These colors could be used to change the background color or to change text color.
Color Basics
When painting the primary colors are red, yellow and blue.
With light the primary colors are red, green and blue (RGB). All shades of light are formed by mixing these colors.
On the computer to create a color you must give a value from 0 to 255 for each of these primary colors. This value tells the computer how strong to make each color.
Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values
(R=0, G=0, B=0) produce black.
All other colors are represented by different combinations of RGB triplets.
Hexadecimal
Normally we use the base ten number system which uses the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Hexadecimal is base sixteen number system and uses the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C,
D, E, F
All computers use the base two number system (0,1) at their most basic level, because computers are electrically based, so 0 represents a switch that is off, and 1 represents a switch which is on.
Hexadecimal works efficiently on computers because 16 = 2 use then the binary system.
3
. It is also easier for programmers to
All color values for red, blue and green are given in hexadecimal notation. For example the color values 102, 153, 255 in hexadecimal are 66, 99, FF, but in HTML the commas are omitted, so it would read 6699FF
NOTE - not all hexadecimal combinations work on all computers
Directions:
1) Go to http://www.visibone.com/colorlab/
2) Click on colors on the palette until you have found five or more colors that you
like. Record information concerning each of these colors in the following
chart.
3) Show this completed chart to Ms. Abresch for credit.
Color Name R= G= B= Hexadecimal Code
____________ Ms. A
------------------------------------------------------------------------------------------------------
Adding a Solid Color Background
You will choose a color to use for the background color for your web page.
To add a solid color background the <body> tag is changed to the format
<body bgcolor=#XXXXXX text=#YYYYYY>
where the XXXXXX is the numbers and letters of the hexadecimal code for the color
of the background and YYYYYY is the hexadecimal code for the color of the text.
NOTE - a background should enhance your Web page, not distract or
make it illegible .
Directions:
1) Open your Web page.
2) Change the body tag to include the hexadecimal codes for the colors of the
background and the text. XXXXXX should instead be the hexadecimal code for the
color of the background and YYYYYY should instead be the hexadecimal code for
the text color.
<body bgcolor=#XXXXXX text=#YYYYYY>
3) Save what you have done in notepad and then re-open it on the Web.
4) Check that the colors you have chosen enhance your Web page. If they make it
difficult to read, try a different choice of colors.
5) Save your file in Notepad, then open it on the Web and show it to Ms. Abresch
for credit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
You will gather information about your chosen animal and add the sources you use to your Noodle Tools annotated Bibliography.
Do not choose an animal another student is researching!
Directions:
1) Gather information about this animal’s size, how it lives, where it
lives, what it eats, its needs for reproduction and raising young,
other organisms it can readily coexist with, and any other interesting
or useful facts your find.
2) Add any useful resources you find to your Noodle Tools annotated
bibliography.
____________ Ms. A
------------------------------------------------------------------------------------------------------
You will be part of a group to plan a zoo exhibit for the Albuquerque Biome Zoo that will house your animals within a biome with other organisms.
You will be able to justify the choices you have made for your exhibit.
Directions:
1) Research as necessary to determine the temperature range and moisture
needs for this exhibit.
2) Research as necessary to determine which organisms from this biome could
live in the same exhibit with your animal OR is it is necessary for your animal
to be housed separately?
3) Research as necessary to determine how to meet any seasonal needs for your
animal within this zoo (located in Albuquerque).
4) Research as necessary to determine the habitat/environment you will need to
provide to keep your animal well-provided for within this zoo.
5) Research as necessary to decide how to meet this animal’s energy needs.
6) Research as necessary to decide how to meet its reproductive and parenting
needs.
7) Add any new resources used to your Noodle Tools Annotated Bibliography.
____________ Ms. A
------------------------------------------------------------------------------------------------------
You will with your group make some type of model of this biome exhibit.
You will include a diagram and/or appropriate illustrations of this exhibit on your web page.
Directions:
1) Include color and detail as you represent the environment of your exhibit.
2) Represent your animal and the other organisms in the exhibit.
3) Include clear labels or a detailed key.
4) Insert into your web page document the graphic(s) you have created of your
exhibit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
You will add to your web page justifications for various decisions you made in creating your biome exhibit.
A justification is an explanation supported with facts.
Directions:
1) Add text to your web page that explains the reasoning behind decisions YOU
MADE concerning your biome exhibit. Use information you have gathered in
your research BUT DO NOT CUT AND PASTE information from a resource.
Also, DO NOT type your justifications while looking directly at your resources.
Type your own paragraphs without looking at anything, just using your own
words, then double check your facts and correct your writing if necessary.
Your Justifications Should Include:
the temperature and moisture needs for the exhibit
any seasonal modifications that are necessary
why or why not the animal is housed with other organisms
how the animal’s energy needs will be met
how the animal’s reproductive and parenting needs will be met
2) Use HTML commands you have learned (or in the optional part on the last page) to
correctly format your writing and possibly to make it stand out. Be sure you write
in complete sentences.
3) Save your file in Notepad, then open it on the Web and show it to Ms. Abresch
for credit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
Creating a Link - Making “Blue” Text Links
Now, you will be creating a hypertext link to a second web page.
Format for a hypertext link:
<a href="file_address.html">text that responds to link</a>
Think of it as "a" for anchor link and "href" for "hypertext reference".
The filename must be another HTML file. Whatever text occurs after the first > and before the closing </a> symbols will be the "hypertext" that appears underlined and "hyper."
Copying the link at the top of the web page you are linking to is the best way to get the correct version of its Internet address.
Directions:
1) Go on line and find a useful web page link to your web page (possibly one about
the animal you have chosen to focus on.)
2) Copy the page’s web address.
3) Open your Web page.
4) Decide where on your page you want the link to appear and find that place in the
HTML document for your web page.
5) Then type the command, but paste the copied address in place of
"web_page_address.html"
<a href="web_page_address.html">text that responds to link</a>
6) Save your file in Notepad, then open it on the Web and show it to Ms. Abresch
for credit.
____________ Ms. A
------------------------------------------------------------------------------------------------------
Revision and Final Details
Directions:
1) Get two revision sheets.
2) Complete one yourself about your web page.
3) Have a friend complete one about your web page.
4) Make changes to your web page to improve its content and appearance.
5) Turn in both revision sheets to Ms. A.
6) Make changes based on Ms. A’s comments.
7) Edit and proofread your Noodle Tool’s Annotated Bibliography, then print it out.
____________ Ms. A
------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------
OPTIONAL: Changing the Font Size or Color
The format for the Font size tag is
<font size=N>text to be changed</font> where N=1 to 7.
To change the font color use the following tag:
<font color=#XXXXXX>type text</font>
____________ Ms. A
------------------------------------------------------------------------------------------------------
OPTIONAL: Centering Text
<center> type text to be centered </center>
____________ Ms. A
------------------------------------------------------------------------------------------------------
