The Structure of a Web page
Web pages are actually text files that "tagged" with symbols to represent structure and function. You can prepare and edit Web pages in any text editor or word processor, not just Mozilla, Dreamweaver, FrontPage and so forth. The decision to use Mozilla and other programs depends on several circumstances. Actually, the system of tags, called HTML (HyperText Markup Language), is logical and fairly easy to learn. However, most people do not want to take the time to learn the code and should not have to do so. Mozilla is a good compromise solution, as noted in the introduction to the tutorial. If you want to learn more after you get started, you can develop HTML code to create or tweak any of your Web pages.
Learning HTML yourself will allow you to customize your Web pages. It is not hard to learn; in fact, it is a very logical. There are many tutorials about this on the Internet that explain all of the essential aspects of HTML. There are sections on text formatting, graphics, hyperlinks, sound, lists, tables, background colors and patterns, and so forth. For the most part, all of these are automatically handled by HTML programming aids and editors, such as Mozilla.
The icons, pictures, sound files, and video clips that are common on
Web pages are actually separate files that are referred to by special HTML
codes. When the page is viewed by a Web browser, such as Netscape, Internet
Explorer, or Mozilla, these HTML codes are interpreted by the browser,
which pulls in all the separate files and assembles the Web page for the user
to see. In other words, the browser retrieves the HTML file and shows
it to you. It reformats the text according to the information it gets from
the HTML codes it finds. For example, if it finds the codes for "bold", the
browser will display the text in a boldface font.
All of the text of a Web page is contained in an ASCII text file that is "marked up" with HTML codes and is usually given a file name that ends in ".html". The "body text" of the page is simply written out in plain text in the html file. You can use any convenient plain text editor to write you HTML files, e.g. SimpleText on the Mac or Notepad on Windows.
Since a Web page is a text file, you can use a text editor to work on
it. Notepad or Simple Text will work. Your word
processor may be able to do it too, but this is discouraged. Using a word
processor may be tricky, since it will want to save with extra codes rather
than plain text. Later versions of Word, for example, put a lot of extra
code and text into the document that can complicate your final product.
HTML Templates
If you do not want to learn HTML right away, you can still create Web pages by using a template created by someone else that has all the required HTML tags in place and that you type or Paste your text into. This is also a good approach with younger children. Here are two examples of templates that you might use.
When you first work on your Web page, most likely it will be on your computer or perhaps on a server you use to store files. Once the Web page is ready for the rest of the world to see, it must be placed on a Web server.
You move the pages you have created to the Web server in the same way you move other files — with a file transfer protocol like FTP, or by putting them on a diskette or CD and handing it to the person who will copy the files to the Web server. The details will be determined by the ISP you choose. For most schools, you will be able to load the files yourself with FTP and need no intermediary.
Once you have your Web Page on a Web Server, it will have a universal resource locator (URL), which is its unique address on the Web. When developing a Web page, it's necessary to keep all your files in the same folder or directory. It is a good idea to put all the graphics in there when you begin, and if you create more graphics later you should be sure to save them to the same directory.
Sometimes people make web pages and link to a graphic (image) and it works just fine on their computer, but when the directory is moved to a server, it will not function unless the graphics are sent along too. So be sure to keep all your files in the same directory.
Make a directory (folder) structure on your local hard disk (drive C: for most people) or an external device (e.g., A or D). If possible, you can match the directory (folder) structure you expect to have at the web server. Place your files in this directory as you are working When naming files and pages you can probably use long file names with spaces and mixed upper and lowercase letters. To be certain, however, check with the ISP who will be handling your documents, because you do not want to go to the trouble of creating a lot of files and have to rename them later. In general, it may be easier to name everything in lower case and use no capital letters at all. If you use more than two words, you should join them with an underline. For example history sources should be history_sources
To save yourself complications, give your pages and graphic files short
names that do not have spaces, and that use all lowercase letters. While
web servers can handle spaces and mixed cases, most expect "MyPage.html"
to be a
different page from "mypage.html" where the computer you are using (Mac
or Win95) does not.
If your word processor can save in HTML format (as can, for example, recent versions of MS Word), use the "Save as HTML" command to convert your documents into HTML. This automatically converts the text portion of the document into HTML format and saves each graphic in the document as a separate graphic file with sequentially generated file names. Therefore a single word processor document with pictures will be converted into a collection of several files; keep them all in the same folder so they won't get separated. You may need to touch up the automatically-generated HTML a bit to get the formatting just right.
Beware of the extra code that may be inserted, however. It may be easier to just start and stick with Mozilla.
The icons and pictures on Web pages are actually separate files that are referred to by special HTML codes. The graphics files are either in GIF or JPG format. You can create such graphics in many ways; for example by drawing them in a drawing program, capturing screen shots, taking pictures with a digital camera, scanning photographs and flat artwork with a scanner, capturing still frames from a video source, and so forth. A graphics editor program can convert the files into the required GIF or JPG formats.
An easy way to obtain graphics is to capture them from other Web pages, although you may need to be aware of copyright problems. Any graphic that is is displayed on a Web page can be easily captured by you and saved for your own use. All you have to do is to position the mouse pointer on the graphic you want and hold down the mouse button (the right mouse button on a PC). A pop-up menu appears; move the pointer to select "Save picture as..." and let up the mouse button. The "Save As..." dialog will appear, displaying the name of the graphic file (with a .gif or .jpg extension indicating whether it is a GIF or a JPG file type).
Graphics saved in GIF of JPG format are ready to use on Web pages; to display such a graphic on your page, just save the graphic file in the same directory (folder).
There are many sources of graphics on the Web. Use a search engine to search for "clip art" or "free pictures" or "free images."
Graphics are large files, so they take a long time to download. Students with slower connections will get frustrated, so it is best to limit the number of graphics. There are times when a couple of words can represent an idea more clearly and with a shorter download than a graphic.
Photos and line art can be "scanned" to make the image files you need for the Web. As a rule of thumb, GIF format files are best for "line art", banners, graphics with text, while JPEG (JPG) format is better for photographs.
You may want to develop graphics in both formats to see which looks better or which is smaller. GIF files can be made with a transparent background, so your round symbol looks round, not square; they can also be made interlaced, so they start out fuzzy and gradually get sharper and clearer. JPEG files are frequently smaller and may have better color which can be important for photos, but they do not show details, sharp, clear edges or lines as well as GIFs.
As a consumer, look at other pages, noting which kinds and sizes of
graphics add drama to a page, take longer to download, or do not add anything.
There are two basic ways to make your own digital images to display on your Web pages: use a digital camera to take the pictures, or use a scanner to scan photographs or other flat-copy material. Both digital cameras and scanners are now widely available and relatively inexpensive.
A digital camera is ideal for taking portraits of people, artwork, classroom activities, and field trips. Most of them come with a cable and software to transfer the pictures to your computer. Some save image files directly to a floppy diskette or CD-R (compact disk recordable). Most cameras save their images as JPG files, which is the format used on the Web. However, most digital cameras take pictures that are too big to fit on a Web page, so you will have to use a graphics editor program to crop or reduce the images to a more manageable size.
A color scanner comes with software. Set the scanning resolution to 72 dpi or 75 dpi (dpi = dots per inch. This will result in images that are the same size as the originals. To make the image larger, set the scanning resolution greater than 75 dpi; to make the image smaller that life-size, set the scanning resolution less than 75 dpi. Most scanners can save scanned images in various formats: JPG format is usually the best choice. When you save the image, choose JPG in the "Format" pop-up menu in the Save dialog box.
The choice between GIF or JPG formats depends on the nature of the graphic. GIF format is most efficient for sharp-edged computer-generated charts and graphs and flat-colored cartoon-like drawings, whereas JPG is most efficient for digital photographs, captured video frames, and other pictures of natural objects. Using the proper format will give you the best image quality and the smallest file sizes, which minimizes the time it takes to view the pictures with a slow Internet connection. (Graphics in other formats can not be displayed directly on a Web page, at least not without special plug-ins).
Adding sound If you have a microphone and a sound card, you can record sounds and add them to your Web page. For example, you can record a spoken narration, using the small microphone that comes with the computer, or you can record music or voice from a tape recorder or CD player.
1. You will need a sound recorder/player program that can save in "au", "aiff" formats. You can use the sound recorder that comes with the PC in Programs/Accessories/Entertainment/Sound Recorder, but it may save only in the larger WAV format.
2. Plug the microphone into the back of the computer. If you are recording from a tape recorder or CD player, connect its output into the microphone input.
3. Launch you sound recorder program. Follow its instructions to record the sounds. Adjust the sound volume to get a clear recording. Save the sound files in "au", "aiff", or "wav" format. Place the sound files in the same folder as the HTML and graphic files.
4. To get the sound to pro from your Web page, create a hyperlink to the file. For example, if you saved your sound file as "sound1.au", you could add this to your Web page:
To use RealAudio, you will need the assistance of the web master to make sure things are setup for you, and there are some extra steps in the procedures.
Testing your Pages Web browsers can read and display "local" files stored on the that same machine, by using the Open File... command under the File menu to open the HTML files. This is how you can test your pages to see how they look and to make sure everything works. Just put all of the files, graphic files, and sound files in the same directory (folder).
Ordinarily, the first file must be named index with either an htm or html extension. Check with the web master to be sure.
You may even consider using a Web browsers as a sort of low-end multimedia presentation system for stand-alone use in a classroom or computer lab. Web browsers are free; support formatted text, color graphics, and digitized sounds and video; are available in identical versions for both PCs and Macs; and the presentations so produced are easily converted between PC and Mac formats and are ready to be put "on the Web" when and if you have access to a Web server. Web pages can be distributed on and read from floppy diskettes, ZIP drives, CD-R disks, or local area network file servers. Because of their speed and capacity, CD-R disks are especially good for pages that have lots of large graphics, sound files, or video clips.Important note: if you using a PC-based CD-R writer ("burner") to produce Web sites on CD-R for playing on both PCs and Macs (taking advantage of the Mac's ability to read PC-formated disks), be sure to limit all HTML, graphic, and sound file names to 8 characters with a 3-character extension (for example "PAGE1.HTM"). Otherwise, Macs may not be able to read the site.
Finding a Host to Serve your Pages To put your Web pages" on" the Internet, they must be on a Web server. The school has a number of web servers and you can upload your files to one of the servers. To avoid confusion, we will not give specific instruction here because they may change from time to time.
You may not wish to have anyone see your web site except your students, in which case it will be necessary to ask the web master to create a mechanism for you to have a password protection system. Do not forget the password!