Web sites consist of many pages with links, images, text and special features. Some of these will be discussed, but it takes many hours or weeks to create a full web site. By the end of this course, you will have a simple web page with an index page linking to 4 other pages, that should link back to the index page. You will also be encouraged to have 3 external links on your web site as well as 3 images (available from any number of places online) and at least 1 table. Frames, forms and javascript are totally optional, as we will only be able to discuss them in the short time frame available to us. Many students find this to be rather dull and will impose other more complex and sophisticated elements on their project. These extra elements will mean many hours of extra homework . Keep in mind that the main focus will be on HTML basics . Being very familiar with the basics will make all future HTML and web programming much easier.

The first thing we must do is to learn some new words and phrases. These will familiarize you with some basic terms and some terms specific to designing pages for the World Wide Web. The end of this document contains the words and phrases you should know to complete this course.

Structure of a Web Page

Web pages are created using XHTML (eXtensible HyperText Markup Language). This is the language used to create World Wide Web pages, with hyperlinks and markup for text formatting (different heading styles, bold, italic, numbered lists, insertion of images, etc.). It consists of tags that tell the browser how everything on a web page is displayed. These files are saved as text files with the extension .htm or .html. They do not contain any images, only text. Images in a web document are saved separately as .gif, .jpg or .png files that are pulled into the web page by the browser when it encounters an image tag. These are the only three graphics formats allowed by Web Browsers. The .jpg format is used for photographs with 16 million colors. The .gif format is used for buttons and animated graphics that may also have a transparent background. These .gif files can use up to 256 colors. The newest format is called .png (16.7 million colours, transparency and small size). PNG is a hybrid that was created in answer to copyright issues with the .gif format. When using graphics of any kind, they should be kept to a minimum and as small as possible.

The first page of your web site must have a specific filename. You will need to find help at your Internet Service Providers web site or contact them directly to find out which one you must use. This first page will need to be called one of the following:

index.htm or index.html

welcome.htm or welcome.html

default.htm or default.html

Forbidden Characters

The newest web servers require a doctype tag at the beginning of the web page. The tags must match the doctype you have entered. We will discuss this in class.

Internet Service Providers use different computers for their servers. They also use different operating systems. Windows NT/2000 and UNIX are two common operating systems. One is very flexible and the other is terribly rigid. UNIX is the rigid one. UNIX is however very powerful (more powerful than Windows NT/2000) which is why some companies prefer it. If your ISP uses Windows NT/2000 and you create your web site with the more relaxed standards, you risk a number of problems. If the company changes to a UNIX server, you will have to completely redo your entire web site. You should get used to the rigid standard right from the beginning.

There are a few rules to follow.

Do not use spaces, or any special characters (@#$%^&*+={}[]:;"’?/\|><,.\*/) in a filename, ever! Only use the numbers 0 to 9 and the letters a to z. If you must use separators at all, use dashes or underscores instead. Notice capital letters are NOT included.

UNIX is horribly case sensitive. If you use both upper and lower case letters in your filenames, you must memorize exactly what combination you used for each filename. DO NOT use capital letters in filenames.

Do not use excessively long filenames. Restrict you filenames to 10 characters or less.

Keep all your files in one folder for easy access. Do not link to files all over your hard drive. This will NOT work.

Plan Your Web Site

There is really only one reason to have a web site. That is because you have something you want to share with the world. This could be your opinion, information whether free or for sale, or physical items and services you wish to sell. You would think everyone would want an attractive site. Right? Not everyone proscribes to these simple philosophies. To see what I mean, check out the site: http://www.webpagesthatsuck.com/

Nothing is more important than your content. Not flashing lights, blinking text, bouncing graphics or scrolling Marquees. The foundation of the World Wide Web is content, content, content. To start planning your web site, take out a blank piece of paper and a pen or pencil. Still with me? Good.

Put the word Index in the middle of the paper. In a circle around the word index, put four topics you would like to tell the world about yourself. An example is given below. Next draw arrows from your Index to and from each of your topics. Each line will be a hyperlink from one page to another. The hyperlink is ALWAYS inserted into the page that sends you to the new page. For example, the index page will have links to My Job, Hobbies, My Family and Vacation. Each of those pages will only have one link back to your Index page. Each of these are topic names only, not the filenames.

Next, give each of your topics an appropriate filename remembering the rules for naming files. An example is given below. If you use simple names similar to the example, you should be fine. You have just finished drawing up the blueprints for a small web site, complete with filenames and hyperlinks. Next, on another piece of paper, write down each of your topics one by one and write down a paragraph or two about that topic. If you have more to say, even better. This is the content of your site.

Create a Folder to Store Your
Web Pages

When you publish your web pages (send the files to your Internet Service Provider), all your files should be located in the same folder. This section will give the instructions to create a new folder.

Create a new folder called WWW

Close or minimize everything on your desktop. Review: Close is the X in the top right corner of any window or program. Minimize is the _ in the top right corner of any window or program. Don't forget to save any work you had in progress.

Double click on "My Computer". Double click on C:\ drive to access your hard drive. Maximize the window containing C:\ drive. Review: Maximize is the middle button of the three in the top right corner of any window or program.

Click "File" on the Menu bar at the top of this window. Move your pointer over New. Point to "New Folder". Click on "New Folder". Do not click anywhere! Delete what is currently listed as the folder name (probably "New Folder") and type in WWW as the new name. Press enter to confirm the file name.

This is the folder we will use to store all our web files and images.

Content, Content, Content

Write up your content in any word processor you wish, MS Word, Word Perfect, Wordpad or Notepad are just a few possibilities. DO NOT use the formatting capabilities of the word processing program as we will Hard Code our web pages in Notepad (HTML tags that are written by hand in a text editor as opposed to Web Page Wizards and WYSIWYG automatic web page generators ie: Front Page). Later in the course we will download, install and use a free HTML code editor.

Viewing Your Web Pages

To view your new web page, open your browser or click on it in your taskbar if it is already open. Then choose "File", "Open Page", "Choose File", go to your WWW folder if it does not open automatically and open your index file. If you keep this window open and switch back and forth from Notepad using the taskbar, you can press and hold the Shift key on your keyboard and click the "RELOAD" button (Refresh in Internet Explorer) at the top of your browser window to view changes as you make them. You will need to repeat this any time you make a change to your web page. Remember, you must save your page in Notepad, BEFORE viewing it in your browser.

Publishing Your Web Pages

The final stage is to publish or upload your web page to your Internet Service Provider. Due to time restraints, we will NOT be able to go through this procedure during class. However, some very basic instructions for accomplishing this can be located at: http://usersite.assiniboine.net/albertsc/uploading.htm

Web Resources for Further Study

If you wish to learn HTML directly, there are courses, books and online resources available. A very good free online course can be located at: http://www.pagetutor.com/pagetutor/makapage/index.html

For more information on copyright, check out: http://www.goehner.com/copyright.htm

This document is available online at (http://home.westman.wave.ca/~conrad/intro-planning.htm)

Basic Definitions

1. Windows Definitions

Menu bar
A bar across the top of the computer screen or window, which has the names of available pull-down menus, such as "File", "Font", "Window", etc. Pressing the mouse on a menu bar item makes its pull-down menu appear.

Tool bar
A common graphical user interface component, consisting of a row of button icons which, when clicked with the mouse, cause the program to perform some action such as printing the current document or changing the mode of operation.

The tool bar buttons often duplicate functions accessible via menus but are easier to use since they are permanently visible. A typical use would be in a paint program where the tool bar allows the users to select one of the various painting "tools" - brush, pencil, bucket etc.

Some application programs under some operating systems may allow the user to customize the functions accessible via toolbars, in others the choice is fixed by the programmer.

Software
Software is the computer program that tells a computer's hardware what to do. System software is the operating system that controls the basic functioning capabilities of the computer, network software enables multiple computers to communicate with one another, and language software is used to develop programs. Compare with hardware. See also shareware, freeware.

Icon
(From miniature religious statues) A small picture intended to represent something (a file, directory, or action) in a graphical user interface. When an icon is clicked on, some action is performed such as opening a directory or aborting a file transfer. Icons are usually stored as bitmap images.

Windows Explorer
The Windows equivalent to File Manager in earlier Windows 3 formats; used for exploring directories, files, and menus.

2. Internet Definitions

World Wide Web
(WWW) A hypermedia-based system for browsing Internet sites. It is named the Web because it is made of many sites linked together; users can travel from one site to another by clicking on hyperlinks. Text, graphics, sound, and video can all be accessed with browsers like Mosaic, Netscape, or Internet Explorer. The Web can also be accessed with text-only browsers like Lynx.

World Wide Web browser
A program such as Netscape, Internet Explorer, Lynx, Mosaic and others that are used to view pages on the World Wide Web.

Netscape Communicator or Navigator
A graphical browser from Netscape Communications Corporation, widely used for navigating the World Wide Web

Internet Explorer
A graphical worldwide Web browser from Microsoft for Microsoft Windows, Windows NT, and Macintosh. It can be downloaded from the Internet.

URL
Uniform Resource Locator (formerly Universal Resource Locator). An Internet address which tells a browser where to find an Internet resource. For example, the URL for Computer User is http://www.computeruser.com/.

Hyperlink
A link in an HTML document that leads to another World Wide Web site, or another place within the same document. Hyperlinks are usually underlined or shown in a different color from the surrounding text. Sometimes hyperlinks are pictures.

3. Advanced Internet and Web Design Definitions

HTML
HyperText Markup Language. The language used to create World Wide Web pages, with hyperlinks and markup for text formatting (different heading styles, bold, italic, numbered lists, insertion of images, etc.).

HTML editor
Tool assisting with the creation of web pages.

WYSIWYG
What You See Is What You Get. Refers to the ability of a computer to present an image of a page layout or graphic on its screen that shows how the actual page will look when it comes out of the printer or displays in a Web Browser. Before advanced computer technology made WYSIWYG possible, a typesetter formatting a page would see only unformatted lines of type and coding on the screen, and would have to hope that the copy that came out would look the way it was supposed to

HTTP
HyperText Transfer Protocol. The protocol most often used to transfer information from World Wide Web servers to browsers, which is why Web addresses begin with http://. Also called Hypertext Transport Protocol.

ISP
Internet Service Provider. A company that provides Internet accounts.

. JPG (File Extension Definition)
file extension for JPEG (Joint Photographic Experts Group). A file stored in JPEG format. JPEG, an ISO/ITU standard for storing images with high compression capability, uses a discreet cosine transform that can achieve compression rates of 100:1 (significant loss of data from original) and 20:1 (minimal loss). C-Cube Microsystems introduced the first JPEG chip.

. GIF (File Extension Definition)
Graphics Interchange Format. A format used for displaying bitmap images on World Wide Web pages, usually called a "gif" because .gif is the filename extension. These files use lossless compression and can have 256 colors. JPEG and GIF are commonly used for images on the Web; JPEG is considered best for photos and GIF for other graphic images.

. PNG (File Extension Definition)
Portable Network Graphics bitmap (filename extension).

Clip art
A set of non-copyrighted images on paper which can be clipped to illustrate brochures, flyers, posters, etc. The computerized version of clip art is called "click art.".