How to Set up a Classroom Web Site

(Even If You Aren't Connected to the Internet)

Still waiting for the promised connection to the internet for your classroom? You can have a classroom web site right now, whether you are connected to the internet or not. I'll tell you step-by-step how to set it up and then give you some suggested ways to use it. Your students won't miss the opportunity to participate in a web community. You can create one by setting up your own classroom web site on a classroom computer.

It is not necessary to be connected to the internet or to have a phone line hooked up to a modem to do this. The work you and your students put on this classroom web site will be visible only in your classroom, but will otherwise behave exactly like any other web site the students might encounter on the internet.

The internet has created a literary Renaissance in the last five years. People are leaving their television sets and turning to computers, where they read and write happily for hours. The world has changed into an electronic grass roots community devoted to reading, writing, communicating and information sharing. Reading a student's web page is reading! Writing a web page is writing! But don't tell the students.

What you'll need...

You need two things: a browser such as Netscape Navigator or Internet Explorer and some web site design software such as Macromedia Dreamweaver or Adobe Golive. The browser reads the web pages and displays them with working links to other web pages. The site design software creates the web pages in a form that can be used by the browser.

These two types of software give you the ability to create a tiny web universe in your classroom. The real internet is actually nothing but links and documents, and with a web design program and a browser you have both links and documents. Even though you aren't really on the internet, it will seem as if you are. Web pages the students make will be exactly like those on the internet. The only difference is that the students' pages are still on your computer and haven't been transferred to a server. A server is a computer run by a company in the business of serving up web documents on request to all comers.

How to get organized...

Before we get into the home page and how it links to all the other pages, let's take a minute to discover how a web site is organized. Begin by creating a folder for the web site. All the files, whether images or web pages, will be stored in this folder. Name the folder anything you want, but a short, all lowercase, name is the best choice. In fact, the first rule of web site organization is that the names of things need to be lowercase and cannot have any blank spaces. So "Class Web" would be out, but "classweb" or "class_web" would be okay.

Although I use capital letters to refer to HTML, GIF and JPEG in my explanation, remember that your actual file names will be in lowercase. For example, a student named Jeff might create these files for the classroom web: jeff.html, babyjeff.gif or jeffaward.jpeg. What our virtual student Jeff has is the web page (jeff.html) and a couple of images or graphics (babyjeff.gif and jeffaward.jpeg) that he can put on the web page.

The browser can read three things: HTML (or HTM on a PC) files, GIF files, and JPEG (or JPG) files. (There is a Dictionary of Terms at the end of the page.) Everything in your shiny new web site folder will need to be one in of these three formats. GIF and JPEG are image files. The HTML files are created by whatever web design software you are using. If you have a scanner, or if students bring scanned photos from home, the pictures need to be "Saved As" either GIF or JPEG before they can be added to web pages. Web design software usually comes with a library of GIF images that the students can place on their pages. Painting and drawing programs such as those in Apple Works may also allow original creations to be saved as GIF or JPEG images.

Within the folder you create for your classroom web site, you can have no additional folders and simply dump everything in together. If you think you will have a large number of files, you might create subfolders inside the main one. It is very common to create a subfolder for images and another for HTML content. If you are dealing with different groups of students during the day, you might want folders for each group.

No matter how you decide to organize the documents, remember one thing. Once a link is created to an image or to another HTML file, the link will "break" if the file is moved on the computer's hard drive. Therefore, it is very important to train the students to "Save" the file in the right place the first time they save. If you have a particular folder for content, for a certain group of students, or for a certain project, make sure the students know how to find that folder and save their web page into it the first time they save.

Make the home page...

That takes care of organization. Let's go on to the web site home page. The first page that anyone sees when the site opens up is the Home Page. Be aware of the distinction between the title of a page and the name of the file. The page titled Home Page should have a file name of index.html (or default.html). The file name is what you call the file when you "Save," while the title of the page is the descriptive name you write at the top of the document.

Put the index.html file in the folder you created for the web site, but don't put it inside any subfolders. The browser should be able to find it as soon as it is inside the main folder. All the other pages created by you or your students can be reached with links starting from the Home Page. Every time you add a new file to the web site, you need to link to it from one or more of the other pages. The students can link to each other's pages, or link their own page to a project page or report page.

Create the home page and all the other pages using the web design software. This software is termed WYSIWYG, meaning what you see is what you get, because as you create the page, you select and see colors, text sizes, placement and images just as they will appear in the browser. There are buttons to insert images, create links and do all other web design tasks. Many of the button icons are exactly like the icons used in word processing software. The icon to center text, for example, is recognizable from word processing software. The icon to insert an image is a tiny "picture." The students will grasp immediately how to start typing text and creating a page.

Students may need some help in finding the image libraries if they aren't familiar with negotiating the route through the various files and folders on the computer's hard drive. Once students find the images and start exploring backgrounds and decorations for their pages, they may forget to "Save" in the web site folder. If a student swears he or she saved some work and it can't be found or isn't where it belongs, look in the image library. That seems to be the home of lost HTML files. Remind students whose files have to be rescued from such places and stored in the right folder that all their links will be broken and that the page will have to be reworked so the images will appear and the links will work.

Make the links...

Most web design software creates links in this manner:

Links only work when clicked on in the browser. To actually use the web site links, the students must get out of the design software and go into the browser. Since the web design WYSIWYG interface is so realistic looking, it is easy to get confused and think something is wrong with links when it really isn't.

Making a web site is a constant dance between the creation process in the web design software and checking the use of the documents in the browser. This means that you usually have both programs open and up on your desktop at the same time. When you open your browser, it automatically looks for a connection to the internet. If it can't find one, it returns an error message saying that it was unable to connect to a network socket. Click okay. The browser will remain open and can be used to display all the web pages you have stored on your classroom computer.

Open your web site with the browser by going to the File pull down menu, selecting Open Page in Browser in Netscape Navigator. In Internet Explorer select Open under the File pull down menu. Browse through your computer's hard drive in just the same way you would look for a word processing document or any other file to open. When you find the file you have created as the classroom home page, open it. You can open any other HTML file in the browser this way as well. Once the web is running in the browser, files can be brought up into the browser by clicking on the links. You are now able to move around in the class web and navigate any and all links that you have set up. You're surfing!

Ten Ways to Use a Classroom Web Site

1. Let students create home pages about themselves. This is the electronic version of Student of the Week bulletin boards. Everyone can be a star on their own home page.

2. Students can share writing, riddles, reports, family history or timelines on their web pages. It is an electronic book containing the students' work.

3. Class assignments can be tailored to the web site. When the class reads a book together, make a section of the web site into book reviews by various students.

4. Group projects such as reports can be compiled into classroom web sites. Whether you are studying amphibians or English sonnets, why not have a web site on the subject?

5. Conduct surveys. Students vote or express preferences on a web page.

6. Create a web feedback board, something like an electronic bulletin board, where students can post comments of praise or congratulations for work well done.

7. Artists, designers and doodlers can show off their art on a section of the web site.

8. Make announcements on the web site. Class picnic on the 14th with student committees assigned to do the organizing? List the details on the web where everyone can see them. Want everyone to know there is an assembly after lunch? Post it on a web page and have it on display when class begins. The information age doesn't require chalk dust or marker fumes, only bits and bytes.

9. Create a group story zone. Let students contribute paragraphs or drawings to the stories.

10. Chart your science experiment results on a web page as you work. Tables are easy to make an could be used to track such things as plant growth or daily weather data.

Dictionary of Terms

HTML Hyper Text Markup Language. The mark up language the browser uses to determine how to display and format a document.

GIF Graphics Interchange Format. An image format.

JPEG Joint Photographic Experts Group. An image format.

URL Uniform Resource Locator. The location or address of the web page. Each of the over 320 million websites available on the world wide web has a unique location name.

Link A hypertext connection between two different documents. The user clicks on the link to bring the linked file up on the computer screen. Although we speak of "going to" various web sites, what the link actually does is transfer the web site to us.


©1998, Virginia DeBolt, All Rights Reserved.

Permission is granted for teachers to print one copy of this page to use while setting up a classroom web site. Refer others to this website rather than reproducing for distribution.