FCIT Home > A Teacher's Guide to School Web Sites > Chapter 5: Develop


Once you have the design for your site established, you are ready to develop the content. This takes a team effort. Good communication and clear timelines will facilitate collaboration among those working on the site’s text, graphics and other media, and programming.

Writing for the Web

When you are writing for the Web, keep in mind that most users do not read text word-for-word, but scan it quickly to locate the information they are looking for or a link to that information. Organize your information on the page to help visitors efficiently find whatever information they are seeking.

Preparing Your Graphics

Well-designed graphics will help create a distinctive look and feel for your site, make your pages more inviting to read, convey information efficiently, and assist in navigation. On a well-designed site, the graphics do not just "decorate" the text content. Rather, the visuals become an integral part of the content of your site. Include someone with visual design experience on your team as you design the site. An effective site will have an inviting visual unity. No one wants to try to use a site that is a clutter of superfluous doodads dancing around the content they are trying to find.

Sources for your graphics. There are many possible sources for graphics to include on your site. They may be copied or adapted from a clip art collection. Student artwork, photos, and other flat sources may be scanned. Inexpensive digital cameras create digital files ready to edit and post on the Web. And, of course, you or your students may use computer graphics programs to create entirely original images for your site.
Editing Your Graphics. You will probably want to tweak most photos and graphics that you did not create yourself. A good graphics program will give you scores of ways to manipulate your images. As you become more experienced, you may wish to explore all of the options available. In the meantime, however, a few basic edits will suffice for most images. Saving Your Graphics. Generally you will be saving your images in one of two formats: GIF or JPEG. Each of the two formats has strengths and weaknesses, so you will do well to understand the difference between them and choose the more appropriate format when it is time to save each graphic that you make or edit. (There is, by the way, a third format called PNG that you will sometimes encounter. It incorporates features of both GIF and JPEG, but is beyond the scope of this introduction to graphics.) Tips. The following tips apply to both GIF and JPEG graphics that you will be using on your site.

Preparing Other Media

Begin The Programming

The basic language of the Internet is HyperText Markup Language (HTML). Unlike a true programming language, HTML doesn’t work like an operating system and run your computer. Instead, it allows the author to "mark up" the contents of a document in order to change its visual appearance in a web browser. A browser takes the content as written in the HTML file and represents it on the screen of your computer.

HTML Basics. Although there are programs that automate the writing of HTML code, mastering even a few basics will be of great value. Troubleshooting a page that won’t load correctly is much easier when you know how each part of the code is supposed to work. One trick to help you with this endeavor is the fact that web pages do not hide the source code that goes into creating them. All you have to do is choose “view source” from the browser’s menu, and you can see the code that makes up the page you are viewing. Of course, you should not steal code from other sites. The “view source” method should be used to learn how to write your own HTML code.

To get started then, we already know that when we view a web page, we see content “marked up” to be displayed in a browser. HTML uses tags and attributes to bring about this process. To think of this in a different way, a tag commands the browser to modify the content in a particular way. For example, to make text bold, the HTML would look like this: <b>This text is bold.</b>. The best way to think about how a tag works is to think of a light switch. Once you turn the light on with the switch, the only way to get it off is to turn the switch off. That is how the tag is working. All of the text after <b> will be bold until it is turned off through the use of </b>. There are some tags that also allow for additional modifications of how content displays on the screen. Those additional modifications are known as attributes. For example, if you want to use a different font than the browser default, you would use the font tag with an attribute specifying the particular font you wish to use: <font face="arial">Text formatted as Arial.</font>. The attribute is the additional content, face="arial". You don’t need to turn the attribute off because this will occur as part of turning the tag off.

Make sure you properly nest your tags. This means keeping the proper sequencing of tags as you open and close them within your file. For example, if you want to make some content bold and italic on a page, your code would look as follows: This sentence contains a <b><i>bold italicized</i></b> example.

One thing to always keep in mind when using HTML is that unless you specify something, the browser will use its default setting. That is why most web pages appear using a Times font. Browsers will also use the default font if you specify a font that is not available on that computer. What does this mean? One thing you should always do is check your pages on a few other computers to see how they look. Another thing to do is realize that you cannot control everything about the page you are attempting to create. Your energies are better spent focusing on creating good, usable content instead of attempting to integrate every bell and whistle that you can think of.

To create the simple web page shown below, you will need to type the HTML code as indicated. A basic text editor is all that is needed to create this page. Avoid smarter programs like Microsoft Word since they will continually try to correct the text as you type it. Two appropriate programs are, Text Edit on the Macintosh or Notepad on the PC.

You may notice that HTML code uses many quotation marks. It is very important that you use straight quotes "" in your code rather than the curly typographer’s or so-called smart quotes “”. Make sure you turn off “smart quotes” in your word processor’s preference settings or your code will not work properly.

Sunny Skies Elementary School example webpage

The HTML below was used to create the web page above.

<title>Sunny Skies Elementary School</title>
<body bgcolor="#ffffff">
<h3>to Sunny Skies Elementary School</h3>
<img src="school.gif" width="300" height="158"
border="0" alt="Picture of Sunny Skies Elementary">
<p>Welcome to Sunny Skies Elementary School. We are strongly committed to the success of our students. Commonly requested information has been digitized and made available on our site. We encourage your feedback as we strive to improve our school.</p>
<table border="0">
<tr><td colspan="2"><b>Important News:</b> Spelling Bee Champions</td></tr>
<tr><td>First Grade:</td><td>John Fitzpatrick</td></tr>
<tr><td>Second Grade:</td><td>Heather Smith</td></tr>
<tr><td>Third Grade:</td><td>Andres Laurito</td></tr>
|| <a href="class.htm">Classrooms</a>
|| <a href="mission.htm">Mission Statement</a>
|| <a href="info.htm">Information</a>
|| <a href="calendar.htm">Calendar</a>
|| <a href="policy.htm">Policies</a>
|| <a href="mailto:webmaster@sunnyskies.org">E-mail the Webmaster</a> ||

After typing this page, it needs to be saved. Name all of your web pages using the 8.3 standard. This means you can use anywhere from 1 to 8 characters for the name of the file before the period. Do not use spaces or most other characters. Limit yourself to a-z and 0-9. If you want to separate the letters, use a dash or an underscore. While not absolutely necessary in many cases, keeping your file names lowercase may help avoid unnecessary difficulty later. The three characters after the period indicate to the computer what type of file this is. Since we are creating web pages, you will use .htm as the extension.

HTML Tags. Now that we have created this basic web page, let’s take a look at some of the HTML tags that can be used to format a web page.

WYSIWYG Editors. As mentioned earlier, there are other ways to create a web site besides hand coding the pages. Many people prefer to create web pages using a WYSIWYG, or graphical based, program. Examples include Macromedia Dreamweaver and Adobe GoLive. WYSIWYG stands for What You See Is What You Get, but this is not always the case. Each of these programs allows the user to create HTML pages without knowing the underlying HTML code. Pages are created using an interface that closely resembles many popular word processing programs. Content is entered and the program does the behind-the-scenes work. Such programs allow users to create web pages without a knowledge of HTML. Other convenient aspects of advanced WYSIWYG programs are the built-in tools for site management and template creation.

In terms of a consistent look and feel for the site, using templates can greatly reduce development time and allow for additional outsourcing of work. Templates allow you to create the look and feel of a page and then define the areas that can be modified by another person. For example, you could create a template for a faculty information page. The template is sent to every teacher who then opens the page using the same program you used to create it. Instead of having the ability to modify the entire page, they are limited to the areas you defined as editable. They enter their information and send the page back to you. This type of workflow can be a significant boon when creating your site.

Site Management

Careful planning and management are extremely important. An important first step is to decide how you might best group common elements into folders. Your site map will be a useful tool. You might consider first grouping like elements together, such as graphics, movies, and sounds. Each of these groups would then be placed in a folder. Once you have created a folder for each type of media, you might then want to create a folder for each content area, such as "clubs," You would then group all of your HTML pages that relate to clubs into this folder. The clubs folder might be located within another folder called "students." Once you have decided on your folder structure, you then need to come up with a naming convention for individual folders and files.

The names of the files and folders should follow a logical plan. Make the file names short but descriptive, without any spaces. For example "bussched.htm" would be better than "b2 list.htm." Your homepage will need a special file name, which only your web server administrator can tell you. Usually the homepage must be named either "default.htm" or "index.htm." Some web servers also require that you be consistent with upper and lowercase letters in your file names. For example if you name your file "Bussched.htm" and then add a link to your homepage and refer to the file as "bussched.htm" your server might give you an error. Always be consistent!

Linking. You must make sure that all links within your HTML pages reflect the appropriate folder structure. If you have decided to place all of you image files into a folder called “graphics” any time you place a graphic into your HTML page you must include that folder (e.g. “graphics\myphoto.jpg”). The figure on the right illustrates the folder structure for Sunny Skies Elementary’s web site. Let’s look at the example of the web page for the Book Club. Their materials will be placed in a folder called “book” within the “clubs” folder. This “clubs” folder is within the “students” folder. The Book Club might name their welcome page “book.htm.” From this welcome page they might have links to various other pages such as an information page about their upcoming book sale. If this page is named “booksale.htm,” the proper format for linking to this page from the Book Club's welcome page would be: <a href="booksale.htm">. Because both the “book.htm” and “booksale.htm” files are in the same folder, it is not necessary to include any other information.

The Book Club welcome page might include a photo called “usflib.jpg” from a recent field trip. When this photo is placed on the page, the programmer must make sure that the link includes the proper folder structure. Remember that Sunny Skies has decided to place all of their images into a folder called “graphics.” The Book Club's photo link should look like this: <img src="../../graphics/usflib.jpg">. This tells the browser to go up two folder levels, look in the folder called “graphics,” and find the file called “usflib.jpg” for display on the page. If you had to move up only one folder level there would have only been one set of “../” in the code. Moving up three levels would require “../../../” in the code.

If the person editing the fundraisers page (“fundrais.htm” located in the “calendar” folder on the main school site) wants to include a link to information on the Book Club’s book sale, the link would be: <a href="../students/clubs/book/booksale.htm">.



Table of Contents || Chapter 1 || Chapter 2 || Chapter 3 || Chapter 4 || Chapter 5 || Chapter 6 || Chapter 7 || Glossary

©2004 Florida Center for Instructional Technology
College of Education, University of South Florida
4202 E. Fowler Ave., EDU162
Tampa, Florida 33620
Next Back Table of Contents Introduction Overview Decide Design Evaluate & Maintain Other Issues Glossary