Macintosh Basics | Macs at Tavelli | PSD-Net | IT
Standards | Other
Very Important Notice (Spring 1999)
In June of 1999 an important policy change took place: PSD-Net no longer allows students to maintain a web site on the internet. Perhaps in the future legal documentation and binding student-parent agreements may be made available that will once again a
llow this privilege to students.
For the time being, major portions of the original directions below are now only applicable to PSD staff members. However, the directions remain as they were originally drafted in 1998. This raises important issues. Please read on.
Students may use portions of these directions to create a web site that could operate on a school server or be imported to a staff member's web directory with that staff member's full knowledge and assistance. No PSD staff member is obligated in any way
to offer such a service to any student.
*******Due to this policy change, among other things, the directory paths and URLs that appear in the body of the original directions below are no longer correct. *******
This also means that the way to create a new staff directory has changed from what the original directions below indicate. This renders major portions of the original directions obsolete. I will try to update these portions as new information becomes
available to me.
In the meantime, I would suggest interested staff members write to the webmaster for more information regarding the initial process of creating a directory on an alpha account. (It is a good idea to have your in
itial web site created on your hard drive or server space prior to contacting the webmaster for directions on how to create an alpha directory for your web-related files.)
/cwis/WWW/staff/username
http://staffweb.psdschools.org/username
Please keep the issues addressed above in mind as you make use of the now dated directions that appear below.
General Information
A staff member of PSD-Net (a staff member with an alpha account) is allowed to place a web site on the internet. Once on the web, anyone in the world with a web browser and a connected computer may view your site. It is PSD-Net policy that a staff member's web site should only be an extension of her or his classroom. The site should in no way reflect, infer or represent personal religious, business, and/or political agendas.
The following two guidelines for web pages are included to provide a general idea of what is and what isn't appropriate content for a web site. One guideline is from PSD-Net and the other is from the Claris software company. The Claris document is general. I personally do not encourage elementary students to post pictures of themselves on the web and try to explain the obvious implications regarding one's personal safety.
Please keep in mind that what is detailed here is merely an overview. Definitely visit:
The above two documents are the real thing folks. Terms and Conditions is a LEGAL document.
All materials placed on this system must be in accordance with the Terms and Conditions document. Specifically, "Member specifically agrees not to submit, publish, or display on PSD-Net any defamato
ry, inaccurate, abusive, obscene, profane, sexually oriented, threatening, racially offensive, or illegal material; nor shall Member encourage the use of controlled substances. Transmission of material, information or software in violation of any local,
state or federal law is prohibited and is a breach of the Terms and Conditions." The system administrators will, at their discretion, determine if any content violates this provision. As a general rule, any materials published on the system should be appropriate for display in any classroom in the district, including classrooms of our youngest elementary school students.
Direct links on Web pages to other systems should follow the same guidelines as materials published on the system itself. In other words, if the material would be inappropriate on this system, then direct links to it on another system would also be inappropriate. System administrators will determine if links bring inappropriate materials "too close" to the system and will ask members to remove such links from their pages. This policy is necessary to ensure a system which can be enjoyed by all of our membe
rs, even younger students.
In accordance with district academic standards, all materials published on the system should be grammatically correct and free of spelling errors, punctuation errors, and other errors in mechanics. Materials published on Web pages should follow the copyright guidelines defined in the Terms & Conditions document. Members should understand that materials developed, displayed, or contributed to the system as part of a school project, or which use any district resources in their development, become the property of the school district, and not the property of any individual or group.
Members are discouraged from publishing personal information on web pages that could make them subject to harassment from other Internet users. Do not publish personal addresses or phone numbers. There have been cases where a photograph led to criminal activity and harassment. Students under 18 should seek the advice and permission of their parent(s) before publishing personal information on a web page.
It is prohibited to publish personal information about other people without their consent and the consent of their parent(s) if the individual is under 18 years of age.
Any member with a question about the appropriateness of information content on the system should contact a system administrator via email to webmaster@psd.k12.co.us.
Creating a home page from a template
Why by hand at first?
To create a program or use a markup language (such as HTML) with only the
use of a simple text editor is sometimes known as "hardcoding."
Though many HTML editors exist, we typically do not initially use these
with elementary students. Students first learn HTML and the concepts related to hypertext/hyperlinks through careful technical reading. Soon after the students employ editors.
Note to users that are not directly connected to the internet: You might want to use some older directions on how to create and maintain a web site.
Follow these steps to obtain an index.html template for your home page:
Note to non-Tavelli users: Skip the following steps #1-#7 and access the index.html template on the web and copy and paste it into a text editor. Then proceed to step #8.
To do this, double-click on the tiger. That should bring the server window to the front of the screen. You may have to close other folders such as Student Work to see the server window.
Inside the Tiger Tech folder is another folder called HTML Templates. Open that folder. Inside it should be a file called index.html. Drag the index.html icon into your Web Pages folder and let up on the mouse. This will make a copy of this file inside your folder.
For instance, in the index.html template it reads: I am a student at Poudre Elementary.
These tags should reflect the "name" you will give your web site. For instance, if you wanted to call your web site "Poetry and Literature", you would need to replace "Joe Student's Home Page" with " Poetry and Literature" in those two places.
Of course, you will always able to change the name of your site in the future as the content, nature and focus of your web sites matures over time and effort.
Be sure not to remove any of the "<" and ">" symbols! If you accidentally remove any of these symbols, be sure to put them back in. The "<" and ">" symbols are made with the shift key and the period and comma keys.
Once you made changes to your index.html and have saved the file in your server space, you may view it through the Netscape web browser. Activate Netscape and choose Open Page from the File menu (Netscape 4.x) or Open File from the <
b>File menu (Netscape 2.x). From the menu that opens, locate and open your index.html file that is on the server in your personal folder. If you ever have difficulty in locating the server, just click on the word "desktop" that is circled on the look-up menu. The path to your index.html file is:
Server | Student Work | A - Z | [Your folder] | Web Pages | index.html
For example, Server | Student Work | M | McClendon, Ann | Web Pages | index.html
It is possible to change the colors of your web page using RGB codes. RGB stands for Red-Green-Blue. The color of the background, the text, and the links may also be specified.
To change the background:
<body bgcolor="ffffff">
There are many color codes. Of course, you can make similar color changes to the text. Just add the following to your body tag.
<body bgcolor="ffffff" text="Color Code">
You can also make changes in the color of the links and visited links:
<body bgcolor="ffffff" text="Color Code" link="Color Code" vlink="Color Code">
Here are around 100 color (RGB) codes (there are many more):
Max Creating and Maintaining a Personal Web Site
Creating and Maintaining a Personal Web Site
Viewing your home page
Change " Poudre Elementary " to Your_school_name. Feel free to make any changes to the text anywhere in the middle of the index.html file. To add paragraphs, simply add <p> tags. There is almost no limit to the amount of text you may
add to your web site. Feel free to copy and paste other things (stories, poems, research papers, opinions, other assignments, etc.) you already have entered and saved in ClarisWorks or other text editors.
Inserting the code above in the "<body>" tag will turn the background of your page from the standard default of gray to white. The quotation marks MUST be included. To make a quotation mark, hold down the shift key and press the apostrophe key.
Replace Color Code with a valid RGB code. A list of codes appear later in this section.
| White - FFFFFF | Medium Slate Blue - 7F00FF |
| Red - FF0000 | Medium Spring Green - 7FFF00 |
| Green - 00FF00 | Medium Turquoise - 70DBDB |
| Blue - 0000FF | Medium Violet Red - DB7093 |
| Magenta - FF00FF | Medium Wood - A68064 |
| Cyan - 00FFFF | Midnight Blue - 2F2F4F |
| Yellow - FFFF00 | Navy Blue - 23238E |
| Black - 000000 | Neon Blue - 4D4DFF |
| Aquamarine - 70DB93 | Neon Pink - FF6EC7 |
| Baker's Chocolate - 5C3317 | New Midnight Blue - 00009C |
| Blue Violet - 9F5F9F | New Tan - EBC79E |
| Brass - B5A642 | Old Gold - CFB53B |
| Bright Gold - D9D919 | Orange - FF7F00 |
| Brown - A62A2A | Orange Red - FF2400 |
| Bronze - 8C7853 | Orchid - DB70DB |
| Bronze II - A67D3D | Pale Green - 8FBC8F |
| Cadet Blue - 5F9F9F | Pink - BC8F8F |
| Cool Copper - D98719 | Plum - EAADEA |
| Copper - B87333 | Quartz - D9D9F3 |
| Coral - FF7F00 | Rich Blue - 5959AB |
| Corn Flower Blue - 42426F | Salmon - 6F4242 |
| Dark Brown - 5C4033 | Scarlet - 8C1717 |
| Dark Green - 2F4F2F | Sea Green - 238E68 |
| Dark Green Copper - 4A766E | Semi-Sweet Chocolate - 6B4226 |
| Dark Olive Green - 4F4F2F | Sienna - 8E6B23 |
| Dark Orchid - 9932CD | Silver - E6E8FA |
| Dark Purple - 871F78 | Sky Blue - 3299CC |
| Dark Slate Blue - 6B238E | Slate Blue - 007FFF |
| Dark Slate Grey - 2F4F4F | Spicy Pink - FF1CAE |
| Dark Tan - 97694F | Spring Green - 00FF7F |
| Dark Turquoise - 7093DB | Steel Blue - 236B8E |
| Dark Wood - 855E42 | Summer Sky - 38B0DE |
| Dim Grey - 545454 | Tan - DB9370 |
| Dusty Rose - 856363 | Thistle - D8BFD8 |
| Feldspar - D19275 | Turquoise - ADEAEA |
| Firebrick - 8E2323 | Very Dark Brown - 5C4033 |
| Forest Green - 238E23 | Very Light Grey - CDCDCD |
| Gold - CD7F32 | Violet - 4F2F4F |
| Goldenrod - DBDB70 | Violet Red - CC3299 |
| Grey - C0C0C0 | Wheat - D8D8BF |
| Green Copper - 527F76 | Yellow Green - 99CC32 |
| Green Yellow - 93DB70 | Mandarian Orange - E47833 |
| Hunter Green - 215E21 | Medium Aquamarine - 32CD99 |
| Indian Red - 4E2F2F | Medium Blue - 3232CD |
| Khaki - 9F9F5F | Medium Forest Green - 6B8E23 |
| Light Blue - C0D9D9 | Medium Goldenrod - EAEAAE |
| Light Grey - A8A8A8 | Medium Orchid - 9370DB |
| Light Steel Blue - 8F8FBD | Medium Sea Green - 426F42 |
| Light Wood - E9C2A6 | Maroon - 8E236B |
| Lime Green - 32CD32 |
Read all the directions in this section BEFORE you actually start doing the steps!
Use the following directions to make this a link to the Tavelli Home Page.
In the "Joe Student" index.html template it states something like, "I go to Poudre Elementary School in Fort Collins, Colorado in the United States."
If you haven't already, please change "Poudre Elementary" to "Tavelli Elementary." If you have already removed the "Poudre Elementary" sentence, please add it to your index.html file now.
This is the formula for adding a link:
<a href=URL>linked text</a>
URL is an actual address and linked text is what appears on the web page as hypertext.
For instance, to make the words Tavelli Elementary a link on your home page, you would need to write the following in your index.html file:
<a href=http://schoolweb.psdschools.org/tavelli/>Tavelli Elementary</a>
This would give you this on your web page:
Tavelli Elementary This would appear underlined and be a hyperlink to the Tavelli Home Page.
To actually make the link on your page look like the sentence below:
I go to Tavelli Elementary in Fort Collins, Colorado in the United States.
The words Tavelli Elementary would appear underlined on the web page.
You would need to put in the body of your index.html file:
I go to <a href=http://schoolweb.psdschools.org/tavelli/>Tavelli Elementary</a> in Fort Collins, Colorado in the United States.
After you have made the changes to your index.html file, be sure to go to File menu and save the file.
Open up Netscape to your page, press Reload, and see if your link works!
The formula for adding a link is:
<a href=URL>underlined text</a> (for a link to another site on the web)
- or -
<a href=filename>underlined text</a> (for a link to another page on your site)
Here is an easy way to add a graphic on a web page:
Log on to your server space so you will have a place to save the graphic once you find one. Find a small still or animated graphic on the web that you would like to have on one of your web pages.
Once you find a picture you like, click and hold on the image with the mouse. This should give you a pop-up menu. Select Save this image as (Netscape 4.x)or Save copy as . . . (Netscape 2.x). If the file name is easy to remember, then ju st save it to your personal space on the server. You may change the name of the file if you desire, but make sure it contains no spaces and still ends in .gif or other appropriate suffix. Make sure you save the file in the Web Pages folder with rest of your web files.
One may find it helpful to write the name of the file on a piece of scrap paper beside the computer so that information is handy for the next step.
For example, say you located and saved a graphic file named ball.gif.
The HTML code for adding an image is:
<img src=filename>
To have this image appear on your web page, you need to add the following in the body of the desired html file (in this case, index.html):
<img src=ball.gif>
The <br> tags create breaks before and after the image. One does not have to use them.
After you have entered the appropriate html code for your image, go to the File menu and save the changes.
Open Netscape to your web page and press Reload.
Gifs may also be used as a background for a web page instead of using RGB codes.
The HTML code for changing the color of the web page background is:
<body background=filename.gif>.
For example, <body background=sky.gif>. Of course, the file sky.gif would also need to be placed in your Web Pages folder.
Adding other pages to your web site
An easy way to add pages to your web site is to just start over with a new template and make the appropriate changes.
This process involves four general steps. The steps are listed below. Following that are the directions for each of these steps.
A copy of a blank.html template can be found in the Tiger Tech folder on the server. To copy this file, drag the icon into your Web Pages folder and release the mouse.
Give the "blank.html" document a new name. The file must end in .html and contain no spaces. Be sure this file is in your Web Pages folder. For example, if I wanted to make a new web page for a poem I wrote, I could call it poem.html . The rest of these directions will often refer to the poem.html example.
You'll now have to make changes in the <title> and </title> tags and <h1> and </h1> tags inside this new file. For example, you could make the name of this new page "My Best Poem" or anything you'd like .
You'll also have to add the changes in the body of the new *.html file. (Hint: If you have a poem, story or report already typed in another file, copy and paste the contents of that file into your new *.html file.)
If your original copy of your poem has paragraph breaks, you'll need to insert <p> where you'd like a paragraph break to be in your poem.html file. For line breaks, insert the <br> tag. It is a good idea to put the <br&g t; or <p> tag in your clipboard for ease of use. There are also many software applications that are able to convert regular text files to HTML ones. Please contact me for more information of such products.
For example:
Roses are red,<br>
Violets are blue,<br>
Go to the File menu and save the changes you have made to your new *.html file.
You need to add a link to your index.html file that can connect you to this new web page.
For example:
If you'd like to have a poem you wrote (on poem.html) linked on your home page . . .
To have it look like this (below) on your index.html web page:
Check out my poem. (The word poem would appear underlined on the web page).
You would need to add the following to your index.html file:
Check out my <a href="poem.html">poem</a>.
It's also a good idea to have a "Back to my Home Page" link at the bottom of all your other web pages! The blank.html template already comes with the necessary code.
<a href="index.html">Back to my home page</a>
The source file is the HTML file that directs what a web page looks like on the web. Your index.html is a source file. A great way to learn from other web pages is to view the source files. One may view the source file of any page on the web. View a source file by using the View menu of your broswer and look for the Source command.
For example, view the source file of my home page to see how I made the Alta Vista search engine input box appear on my home page. If you'd like, try copying that portion of my index.html source file that makes the search engine input box appear and paste the code directly into your index.html. A similar method is also used by many students to place a visitor counter on their web page.
Creating a public-html directory on alpha
The directions on this page are for a one-time operation to create a directory (folder) for your web pages in your PSD-Net (alpha) account. This directory must be named: public_html . This directory in your alpha account will be the place you "put" copies of your web files (*.html's, *.gifs, etc.) in order for them to be on the internet.
Note to non-WAN users: Directions for users that do not have a direct connection to the internet (those that log in at the "Destination?" prompt) can be found here.
You must do the following directions *EXACTLY* as they are written or it will NOT work! Read the entire directions PRIOR to attempting this!
Macintosh HD | Internet Folder | Telnet | alpha
From the PSD-Net main menu, type: U for unix.
Press the Return key.
Press the Return key.
Press the Return key.
Type the above *EXACTLY* as written. Be sure there is a space between the "mkdir" and the "public_html". Also, be sure to use an _ and not a - between the "public" and the "html" words. If you do it correctly, you'll be back at the username@alpha prompt. If you didn't do it correctly, you'll receive an error message and will have to attempt this step again.
Press the Return key.
*Don't miss the "." in the above command!
This sets the permissions on your directory so others will be able to access to your web pages.
Press the Return key.
This sets the permissions on the public_html directory so that web browsers will be able to execute the files you store there.
Press the Return key twice.
You have now created a folder called public_html in your internet account. This is where you will put all your web files. You will use an application called Fetch to move the files onto your PSD-Net account. Directions for Fetch begin in the ne
xt section.
Fetch is a program that does file transfers. You'll use Fetch to transfer your web-related files from your Web Pages folder on the Tavelli server to the public_html directory on your alpha account.
The contents of your personal folder are stored in a computer in the Tavelli media office. The contents of your public_html directory in alpha are stored in a computer on La Porte Avenue.
This section details a one-time procedure (per machine/per user) to set up a Fetch "shortcut" to make it easier for a user to transfer files.
Path: Macintosh HD | Internet Folder | Fetch
Fetch is also under the colored apple in the labs.
Note: The student shortcut mentioned above is present on all Tavelli Mac lab computers. If this shortcut is not on your machine, you'll need to connect to host schoolweb.psdschools.org.
Click OK.
For example,
/
u
home3
jstudent
public_html
In the example above, the pathway would be /u/home3/jstudent/public_html
Note - Another way to identify the proper directory path to one's alpha account is to use unix. At the unix command, type f login_name and press the return key. For example, f jstudent. Along with other information, unix should respond with the path to the root directory of the identified user. Just add /public_html to the end of it for the purposes here.
(see your note from #7)
For example, /u/home3/jstudent/public_html
Click OK.
***You should now be added to the Shortcut menu on that specific computer.
Using Fetch to transfer your files (one at a time)
This allows you to place a copy of your web-related files into your alpha internet account.
Click on the Put . . . button.
The path to your folder is:
Server | Student Work | A - Z | Your Folder | Web Pages
Once you click open the file that you want to transfer to your alpha account you will be brought to another window . . .
Use steps #3 and #4 to put all your web-related files into your alpha public_html directory.
If you followed all the directions up to this point, you now have an official web site! Anyone in the world with the right equipment is able to view your web site. All she or he would need is the exact URL of your site.
The URL to your home page (index.html) is:
http://www.psd.k12.co.us/~username/
**Substitute your login name for the word username in the line above.
For example: http://www.psd.k12.co.us/~jstudent/
The tilde (~) is important--be sure to include it as shown! The tilde key is usually in the upper left corner of the keyboard. You'll need to also hold down the shift key at the same time.
To view your web site, point your browser to http://www.psd.k12.co.us/~username
For example, http://www.psd.k12.co.us/~sdurkin.
You may continue to build up your web site by using the directions in this section. You can have as many web pages on your site as you'd like.
More HTMLText
Simply add text. It is easy to add text to your page! For instance, you could type or paste in a favorite story you wrote. Just don't forget the "<p>" tags (see next item).
Paragraphs
<p> This tag can be used to add a paragraph break.
Use the <p> tag wherever you'd like to start a new paragraph.
Line Breaks
<br> This tag will put a return on your page so that links and other text won't run into each other.
Headers
<h3> </h3> This will make text between the <h3> and </h3> tags much bigger than the regular text. This is a good tag to use for a "header" at the beginning of different sections of your page. Valid header numbers are 1 to 6. 1 is the largest and 6 is the smallest.
For example: <h3>This is a list of my favorite sites</h3>
Links
The format of the line below in your *.html file will give you a link on your page.
<a href=URL>Hypertext</a>
The HyperText is what will appear underlined (linked) on your page.
For example, the following in your html file . . .
<a href=http://schoolweb.psdschools.org/tavelli/>Tavelli Elementary</a>
. . . would give you the words Tavelli Elementary in hypertext on your web page.
A more complex example: A link within a sentence.
Say you wanted the following sentence to appear somewhere on your web page:
I think Jon Brelig has one of the better home pages in the Poudre School District.
In the sentence above, the words "Jon Brelig" are to be a hypertext link to Jon's home page.
For this to happen, the following line must be in your html file:
I think <a href=http://www.psd.k12.co.us/~johnnyb/>Jon Brelig</a> has one of the better home pages in the Poudre School District.
List of links
<ul> </ul> Unordered list
<ol> </ol> Ordered list
Both these tags allow you to create a list of links. The <li> tag is used to denote each item in the list. tag <li> uses the letter "l" and NOT the number "1."
These tags may also be used with the <a href=URL>Hypertext</a> tag.
For instance:
<ul><BR> <li> <a href=http://www.psd.k12.co.us/~sdurkin/>Mr. Durkin</a><BR> <li> <a href=http://www.psd.k12.co.us/~rdeakin/>Mr. Deakin</a><BR> <li> <a href=http://www.psd.k12.co.us/~dlawler/>Dr. Lawler</a> <BR> </ul>
gives you this on your page:
(hypertext)
Of course, it would look even better with a header. For instance:
Other HTML tags
Bold <b>text</b>
Italics <i>text</i>
Blinking <blink>text</blink> - use sparingly
Check out the bottom of the PSD-Net School's and Member's Home Page for more information on HTML or do a search on the web for HTML tutorials.
Macintosh Basics | Macs at Tavelli | PSD-Net | IT Standards | Other
Max