How To Create A Web Page
In 2 Hours

A guide specifically written for the Clark County School District Librarian

This HTML introduction was prepared for the CCSD Librarian’s Workshop on June 12, 2001 by Watson Elementary School's Teacher-Librarian, Mr. Dwyer. Since this web page is designed to be a companion to the workshop, it may be difficult for you to actually create your own site using this source alone. Eventually however, if you know already something about HTML or if you have a good deal of experience with computers in general, this site should prove to be very useful. The author can be contacted through e-mail or Interact if you have any questions, suggestions or corrections.

While this page was created a few years ago, the content was revised and the links were verified as active on 8/3/04.

Document Directory:
The Introduction
1. Create a Folder
2. Open a Text Editor
3. The Essential Tags
4. The Formatting Tags
5.See What You’ve Created!
6. Images / Graphics
7. Links
8. Image Processing
9. File Transfer Protocol
10. Zippers
11. Miscellaneous
12. So What’s Next?
13. Example HTML Document
14. HTML Document Results

    HTML (HyperText Markup Language) is a type of code that tells web browsers like Netscape and Microsoft Internet Explorer how to display text and graphics. It also helps navigate the WWW (World Wide Web) through hyperlinks. The Internet was invented by Al Gore. (Just kidding) Actually, techies in 1989 came up with the framework for HTML.

1. Create a Folder
    Create a folder that you’re going to use for all of your web site’s things. If it’s on the hard drive, you will be able to access it faster than with a floppy. Once you’re where you want to put it, click on File, New, Folder. Give it a good name.

2. Open a Text Editor
    Open up a new document in a text editor such as Notepad (Windows) or SimpleText (MAC). To find Notepad, click on the Start button on the lower left hand corner of the screen. From there, click on programs, accessories and finally Notepad. Once you’ve opened Notepad, select “Word Wrap” which you will find under the “Edit” menu. This will make your document much easier to read.

3. The Essential Tags
    Tags are the vehicle that HTML uses to instruct web browsers on how to show text and graphics. Tags are simple commands beginning with “<” and ending with “>.” These characters indicate when a tag’s instruction begins and ends. You will need the following essential tags in all HTML documents.

<HTML> </HTML>These two tags must begin and end all HTML documents. They tell the computer when a web page begins and ends.
<HEAD> </HEAD>All these tags do is enclose the “title” of the document.
<TITLE> </TITLE > The title is what appears on the title bar of the web browser when viewing a page. Used together, the HEAD and TITLE tags for a web site called “If librarians were all kings and queens” would look like this:
<HEAD> <TITLE> If librarians were all kings and queens </TITLE> </HEAD>
<BODY> </BODY>Everything in an HTML document that’s not in the “head” is in the “body,” enclosed between these two tags. This is the main part of your document
- There are 216 “safe” colors to use with web browsers. You can find them at the following two HTML color sites:
  
  http://www.visibone.com/colorlab/
  http://www.iboost.com/build/reference/1045.htm
- The page that you're looking at now is using the CCSLA logo as a background image. If you would like to use an image in your page’s background, it would look like this:
  <BODY BACKGROUND=“filename.gif”>
  - You can find background graphics at http://www.backgroundcity.com/
  - For another 5250 background images, visit:http://www.grsites.com/textures/
- To save an image that you’ve found on the web, right click on the image itself and select Save Image As. Choose the path and put it in your web site folder. Give it a simple and short name. Finally click on Save.
- To set a default color for text include the following into the body tag (Below the HTML code, you will see the actual results): <BODY BGCOLOR=“#FFOOOO” TEXT=“#324395”>
  
  Not that this looks tasteful, but the background will now be red and all text will be blue. #FFOOOO is the hexadecimal code for red and #324395 is the code for blue.

4. Formatting Tags

<BR> Makes a break to the next, lower line. You can use more than one at a time.
<P> Causes two line breaks. <BR>*2=<P>
<B> </B> Everything between these tags will appear bold.
<I> </I> Everything between these two tags will appear in italics.
<U> </U> Everything between these two tags will be underlined.
<H><H> Write your headings within the <H> tag. The number that appears to the right of the 'H' determines the text size. <H1> is the largest while <H6> is the smallest.
- Here are two examples, using the largest and smallest heading size. First, the HTML coding is shown. Below this, the same coding is shown as interpreted through a browser.
  
  example 1 HTML:<H1>This is the largest heading size</H1>
  example 1 results:
  This is the largest heading size
  example 2 HTML:<H6>This is the smallest heading size</H6>
  example 2 results:
  This is the smallest heading size
<FONT> </FONT>
To change text size or color, use the FONT tag. The larger the number that’s in the tag, the larger the text size. 4 is a typical size. For text colors, use the same hexadecimal code that you would use with the background. Below you will first find the coding and second the actual HTML interpretation.
<FONT color=“#178069”> I love HTML so much that I’m going make my own web site!</FONT>

I love HTML so much that I’m going make my own web site!
- To align a heading or regular text you will use ALIGN. This is best used inside the <H> or <FONT> tag. You can align information to the right, left and center. By default, everything is aligned to the left. Here are three examples:
  
  example 1 HTML:<H1 ALIGN=“RIGHT”> George Bush leans to the right. </H1>
  example 1 results:
  George Bush leans to the right.
  example 2 HTML:<H1 ALIGN=“MIDDLE”> The Middle Road is the path to take. </H1>
  example 2 results:
  The Middle Road.
  example 3 HTML:<FONT COLOR=“#FFFFFO” SIZE=“6” ALIGN=“LEFT”>This text leans to the left.</FONT>example 3 results:
  This text leans to the left.
<ADDRESS></ADDRESS> On your main entry page, you should include an ADDRESS tag. This provides information about who created the page, how to contact them and when it was last updated. This is normally the last item in the “body.” Here's an example:
This page was created by Joe Schmo. JoeSchmo@netscape.net While it was birthed in 3000 B.C., it was last updated June 12, 2001.

5. Now See What You’ve Created!
    There is a cycle to creating a web page. First, create the initial document in Notepad. Save your document to the hard drive or a floppy with the extension html. For example, if you wanted to call your file testfile, you would need to write testfile.html If you leave off the file’s extension and only write testfile, it will not become an HTML document but rather a Notepad file. After this, open the document in your browser. With Netscape, this is done by clicking on File, Open Page and Choose File. From there, navigate through the directory to find your file. Finally, click the Open button. Whaa-la! Ooooh, Aaaaah!

   When you’re opening up an HTML file that you previously saved, the Notepad menu will not find it initially because it is by default looking for a text file and not an HTML file. What you need to do is go to Files of type: and click on the drop down menu to select All Files (*.*). Only then will all HTML files appear.

6. Images / Graphics
    IMG SRC is an abbreviation for image source. This is used to add JPEG (pronounced jay-peg) and GIF (pronounced jiff) graphics into your web page. IMG SRC’s side kick is “ALT.” ALT is used to describe or label the image. This is used so that people viewing your site with non-graphic settings can still appreciate your page. If you don’t want anything to be in the ALT tag, just leave the quotes with nothing written in between. Again, use ALIGN to tell the browser where to put your image.
    Below this paragraph is a sample IMG SRC tag for a JPEG image. Below the HTML code, the result is displayed -the desired photo. Using the mouse, place the arrow over the photo to see what's written in the ALT tag.

<IMG SRC=“filename.jpg” ALT=“Description of graphic.”>

Typical grade level meeting.

For library specific graphics, visit the following three sites:

Library Media & PR Toolbox: http://www.ssdesign.com/librarypr/toolbox.html
For a massive list of background graphics, borders, buttons, icons, clip art, arrows, bars, and dividers, visit this site: http://www.totallyfreeclipart.com/index.html

To save an image that you’ve found on the web, right click on the image itself and select Save Image As. Choose the path and put it in your web site folder. Give it a simple and short name. Finally click on Save.

7. Links
<A HREF=“”> </A> These are the things that make the web ‘work.’ When it comes to the WWW, links are the mechanism that connect and intertwine the whole thing together. Links allow you to jump from one web page to another. With links, a visitor can jump from one page to another within your site. Somebody can also jump from from your site to another. From your site, someone could even visit jumptheshark.com or the Clark County School Library Association’s site!

To link to a page within your web site:

<A HREF=“filename.html”> This is where the text goes that people will click on to move to your other page. </A>
To link to another web site:
<A HREF=“web site’s URL”> This is where the text goes that people will click on to move to another site. Sometimes, the URL (Uniform Resource Locator) or name of the site goes here. </A>
example: <A HREF="http://starwars.com/">Official Star Wars Site </A>
result: Official Star Wars Site
You can use graphics for links:
<A HREF="web site URL"> <IMG SRC="graphic’s file name" ALT="name of the web site"> </A>
example: <A HREF="HTTP://CCSD.NET"> <IMG SRC="CCSDlamp.gif" ALT="Clark County School District logo"> </A>
result:

8. Image Processing
You will eventually want to customize your images. With the right software, you can crop, flip, rotate, enlarge, shrink or add text to an image whether it be a photo or custom made image.Windows comes with Paintbrush. While it does some useful tasks, it has limited features. MagicViewer on the other hand, is an effective piece of graphic software that at around $30.00 costs far less than Photoshop, which starts at $600.00. It is simple, light and friendly to use. If you download it straight from the net, you will need an unzipper (see no.10) to open the files. Otherwise, they’ll mail you a copy. Below is the link to the MagicViewer web site. http://www.crayonsoft.com/

9. FTP (File Transfer Protocol)
In order to create and maintain a site, you will need to send files back and forth to the District’s main computer on Flamingo that hosts all CCSD web pages. You can update your web site files instantly from school or home. You will need FTP software. LapLink offers an excellent FTP that is free. You can search for the free version at http://laplink.com/ or go straight to:
http://laplink.com/products/llftp/overview.asp

10. Zippers To use software such as Magic View or LView, you may need a program called a zipper -or unzipper as the case may be. Zippers compress large files into smaller ones. This makes them easier to send over the Internet. Once such files arrive at their destination, they need to be unzipped to use. You can find a great one by CAM UnZip that’s free at:
http://laplink.com/products/llftp/overview.asp

11. Miscellaneous

To indent a paragraph add the following code but with all six characters touching eachother. (If I put them together, you wouldn't be able to see the code since your broswer would carry out the instruction and implement the actual indentation):
& n b s p ;
The Clark County School District will host any school web site for free. You can create a site for your school or if your school already has a web site, you can add a library page to it. Troy Miller is the District’s web master. If you have questions, you can find him on Interact, call him at: 799-5417 ext. 330, or e-mail webmaster@interact.ccsd.net. He will give you the FTP password that you’ll need to update your site.
Before using a picture with any student’s face or original work, you need a permission slip, first! It can be the generic media form or the District’s official Internet release form. Keep these in a single binder for your school.
Different browsers and browser settings will interpret your HTML code differently. There is no pure reality of what your web site looks like, just various interpretations.
You can view any web page’s HTML code by going to the top menu and selecting the browser’s View and Page Source.
You can post any Kid Pix creation. Just treat it as any other graphic image.
Keep a graphics URL log to eventually post a “graphics page.” This is done to cite the origin of your web images. Many sites that host graphics actually require this. Even if not, it’s a nice gesture of appreciation. Visit the CCSLA's graphics page at: http://ccsd.net/libassoc/graphics.html

12. So What’s Next?
There are many additional tags, tricks and techniques to using HTML. Once you master the basic tags, you’ll be ready to use more advanced ones since the rules never change. For example, you can create lists (numbered and unnumbered), play sound files (midi files or your own recordings), insert feedback forms and there’s a neat way of organizing on-line info into something called a table. Here are some excellent on-line tutorials that will support this document and provide additional information.

Case Western Reserve University’s Here’s Wibur!: http://www.cwru.edu/help/wilbur/toc.htm
The National Center for Supercomputing Applications (NCSA) at the U of Illinois:http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
If you get stuck, you can always contact me. You can find me on Interact or through e-mail

13. Example HTML Document
Below is a complete, Internet-ready HTML document. Below the coding, you will find what the below code looks like through a browser.

<HTML>
<HEAD>
<TITLE>Fictitious Elementary School</TITLE></HEAD>
<BODY BGCOLOR="#FFFF66">

<IMG SRC="vader.jpg" ALIGN="RIGHT" ALT="Our Principal is our Mascot!"><H1 ALIGN="CENTER"> <FONT COLOR="#3399FF">Welcome to<BR> Fictitious Elementary School!</FONT></H1>

<FONT COLOR="#000099" size="5" ALIGN="LEFT"> Fictitious Elementary School is an oasis in a desert. We are in the heart of Las Vegas, just two minutes from 'the strip.' Our school of approximately 950 students looms in the shadow of the magnificent Stratosphere Tower, the tallest observation tower in America. Our school is a great place to learn and work.</FONT><P>

<FONT size="4"><ALIGN="RIGHT">Here’s a picture of our school. <B>This picture was take during the daytime. </B>Day comes after night, or is it night that comes before day?<I> Anyway, this is a picture of our front office.</I></FONT><P>

<FONT COLOR="#CC6600" size="5" ALIGN="LEFT"> These words are here to fill up this space. You might believe that these words are actually saying something but they're not. I could have just written blah blah but I chose not to. Do you think these words are saying anything significant? I don't. <U>You believe me on this, right?</U></FONT><BR><BR><BR>

<H3 ALIGN="CENTER">We hope that you've enjoyed your visit to Fictitious. Thanks for visiting. <I>Yall come back now ya hear!</I> </H3>

<ADDRESS>This page was created by Joe Schmo. JoeSchmo@netscape.net While it was birthed in 3000 B.C., it was last updated June 12, 2001. </ADDRESS>

</BODY></HTML>

Below you will find what the above HTML document looks like when a browser opens it (minus the HTML, TITLE, & HEAD tags). If you would like to see it as a whole, true web page (with the HTML, TITLE and HEAD tags) click me.

Our Principal is our Mascot!
Welcome to
Fictitious Elementary School!
Fictitious Elementary School is an oasis in a desert. We are in the heart of Las Vegas, just two minutes from 'the strip.' Our school of approximately 950 students looms in the shadow of the magnificent Stratosphere Tower, the tallest observation tower in America. Our school is a great place to learn and work.
Here’s a picture of our school. This picture was take during the daytime. Day comes after night, or is it night that comes before day? Anyway, this is a picture of our front office.
Photo of the front of our school
These words are here to fill up this space. You might believe that these words are actually saying something but they're not. I could have just written blah blah but I chose not to. Do you think these words are saying anything significant? I don't. You believe me on this, right?

We hope that you've enjoyed your visit to Fictitious. Thanks for visiting. Yall come back now ya hear!
This page was created by Joe Schmo. JoeSchmo@netscape.net While it was birthed in 3000 B.C., it was last updated June 12, 2001.

Home | The Introduction | Literacy Standards | Online Libraries | HTML for Librarians | Become a School Librarian | The Library Calendar | Membership | Vendors | The Links Page

Document Directory:
The Introduction	1. Create a Folder	2. Open a Text Editor
3. The Essential Tags	4. The Formatting Tags	5.See What You’ve Created!
6. Images / Graphics	7. Links	8. Image Processing
9. File Transfer Protocol	10. Zippers	11. Miscellaneous
12. So What’s Next?	13. Example HTML Document	14. HTML Document Results

How To Create A Web Page In 2 Hours

Document Directory:

This is the largest heading size

This is the smallest heading size

George Bush leans to the right.

The Middle Road.

Welcome to Fictitious Elementary School!

We hope that you've enjoyed your visit to Fictitious. Thanks for visiting. Yall come back now ya hear!

Home | The Introduction | Literacy Standards | Online Libraries | HTML for Librarians | Become a School Librarian | The Library Calendar | Membership | Vendors | The Links Page

How To Create A Web Page
In 2 Hours

Welcome to
Fictitious Elementary School!