Note: A PowerPoint presentation is available that includes an outline of these notes.

Introduction

What is a web page?

A web page is a document (containing text, graphics, links, etc.) described in a text file that can be displayed by a web browser. A web page has no fixed width or length like a paper page. The information and formatting of the web page is stored in text file that contains the text of the page and HTML (HyperText Markup Language) codes (called tags) that determine the layout of the page in the web browser. The HTML tags come in pairs (at least most of them ... some do not have an ending tag) that indicate the beginning and end of the instruction. The syntax is:

• Beginning tag: <tag-name-and-parameters>
  • Optional parameters have the form: parameter-name="parameter-value"
• Ending tag: </tag-name>

More details on HTML later.......

What is a web site?

A collection of related web pages. In the simplest sense, a web site could be a single web page. The primary starting page of a web site is called the "Home" page. NOTE: This is not the same as the "Home" page of your browser.

Web Page Elements

Web pages consist of various elements (objects) that are placed on the page (screen window) as specified by the HTML tags. Some of the things that can be found on web pages include ...

Paragraphs Formatted text Headings Lists Rules (horizontal lines)

Links Background Images Image Maps Tables

Frames Forms Sound clips Video clips Java applets

Web Page/Site Terminology

• Web Server - A computer with software that provides web pages to users.
• Web Browser - A program on a user's computer that requests web pages from web servers and then displays these pages.
• HTTP (HyperText Transfer Protocol) - The protocol (i.e. rules) for requesting and transmitting web pages between a browser and server.
• HTML (HyperText Markup Language) - The set of formatting and layout "tags" used to define and describe a web page.
• URL (Uniform Resource Locator) - An "address" of a resource on the web. A URL consists of four parts:
  • Example (the URL of this page): http://cs.bluecc.edu/cs120/lectures/tutor/www/basics.shtml
    • http:// is the Internet protocol to be used by the server
    • cs.bluecc.edu is the server's domain name (associated w/ an IP# ... 69.1.124.24)
    • cs120/lectures/tutor/www is the folder path on the server to the requested file
    • basics.htm is the name of the requested file

Tools for Creating Web Pages

There are four types of programs that are used to create web pages:

1. Word Processor or Text Editor: Type the text and tags as needed. If a word processor is used, the file must be saved as a "text" only file. Examples: Notepad
2. HTML Editor: A lot like a text editor, but commands are included that insert the tags for you (you see them, but you don't need to type them) and associated dialog boxes help with the optional parameters for each tag. Example: EditPlus2
3. Web Page Authoring Program: WYSIWYG programs that are more like a word processor. In these programs, you do not need to see or use the actual HTML tags (the program does this for you in the background). Most of these programs will let you see and edit the actual HTML. Examples: Dreamweaver (Macromedia/Adobe), FrontPage (Microsoft), and Nvu (open source).
4. Other Applications: Many application programs include a special "save as HTML" option. Not always the best results, but it basically works. This is not generally the preferred method for creating web pages, although if some information is already in another application, this can be a quick way to publish it on the Internet.

The best and most versatile tool for creating web pages is a Web Page Authoring Program. For this course we will be using Nvu (pronounced: N-view) because it is simple and free (open source).

Note for Distance Education Students: A copy of the installer for Nvu is included on the course CD. If you have not yet installed this program on your computer, you need to do so now.

1. Put the CD in your computer's CD or DVD drive. A menu will auto-launch (be patient, it takes a few seconds ... seems like minutes).
2. Click on the Nvu installer option.
3. Follow the on-screen directions (it is recommended that on the fifth screen you check one or both of the checkboxes to create icons on the desktop and/or the quick-launch toolbar).

But first ... Think & Plan

Before web pages are created, there are several things that need to be considered and accomplished first.

• Collect the Information - Do the research and gather together the information that will make up the web page/site. Web sites are not static, therefore this is actually an on-going process. But before you begin, you should have the basic information available.
• Determine the Organization - How is the information going to be organized on the pages.

One basic design option is to have an opening page (called the "home" page) that gives an introduction to the site and acts as a table of contents with links to the other pages (each page with its own purpose ... like a chapter of a book or a section of a report).

• Determine the File Organization - All of the pages and supporting files for a web site are placed in a single folder called the "site folder." With everything in one folder, the web site can easily be moved to a server or another storage device without causing problems with references to graphics or links to other pages. Inside the site folder, files are organized using other folders that will reflect the organization of the site. NOTE: The site folder is VERY important. The first step when creating a web site is to create the site folder and make sure everything is placed in this folder.
• Collect the Supporting Graphics - Note that I said "supporting" graphics. Graphics should enhance the information, not detract from it. Every graphic should have a purpose!
  • The actual graphics are not part of the web page file. They are separate files and the web page includes references to these files. They should be in the same folder as the page that will reference (i.e. contain) them, in a nested folder, or in a shared graphics folder (i.e. a single folder inside the site folder). NOTE: All graphics MUST be placed in the site folder BEFORE they are placed on a web page. Also, the web page must be saved in the site folder BEFORE the graphics are placed on the page (of course, you must save again after the graphics are added).
  • Graphics for web pages use three formats: JPG (for photos), GIF (for everything else), and PNG (not used much).
  • Try to make you graphic files as small as possible (small meaning file size, not necessarily dimensions).
  • Before placing a graphic on a web page, the file must be properly located relative to the page's file. If you change the graphic's size, filename, or location; you will need to re-insert the graphic on the page. --- more on this below ---

File and Folder Naming Rules for Web Pages

Legal file and folder names are technically dependent on the operating system of the web server and the web server software. To remain consistent and to be able to easily move a web site from server to server, the following guidelines should be followed in order to keep these names as generic as possible.

• No spaces. Use only letters, digits, dashes, and underscore characters.
• Filenames should be considered "case sensitive" because some operating systems and their web servers are case sensitive. It is common, for consistency, to always use all lower case letters for all file and folder names.
• Web pages will use the extension .htm or .html (depending on the requirements of the server). Other extensions can be used for special purposes, but this course will not be considering those situations.
• Graphic files must use the appropriate extension (JPG, GIF, or PNG).
• The "home" page of the web site should be index.htm or index.html. By using this name, the user that accesses the web site will not need to enter the filename in the URL. This is considered standard practice and good design.

Web Page Layout Considerations

There are three primary software tools for publishing information. Word processing, desktop publishing, and web publishing. Although they all have basically the same purpose and therefore have many similarities, they are all different in many ways.

Some of the unique aspects of web pages include:

• You cannot control the page size because you do not know what size monitor the user has, what resolution their monitor is set to, or how large the window is on their screen.
• You have limited control over the font that will be used to display the page (i.e. typeface and size). Even if you specify a font, you do not know if the user has that font available on their computer. Therefore, when fonts are specified, always use common font typefaces.
• You have limited control over the location of graphics on the page.

Why these limitations? Because web pages are designed to be platform and browser independent.

HTML Basics

In this class, we will not be working much with actual HTML coding, but you should understand some of the basics. A minimal web page will include the following HTML (note: HTML is NOT case sensitive, line sensitive, or spacing sensitive).

<HTML>
   <HEAD>
      <TITLE>Page title.</TITLE>
   </HEAD>
   <BODY BGCOLOR="#ffffcc">
      <P>Hello world!</P>
   </BODY>
</HTML>

The colors above show the pairs of tags. Each tag is placed between a pair of "angled brackets" (i.e. <>). Most tags come in begin/end pairs. Each pair uses the same name. The beginning tag may include parameters (the body tag above is an example). The ending tag begins with a forward slash (/) character. HTML tags may be nested (i.e. one pair inside another pair). The tags in the above example accomplish the following:

• <HTML> </HTML> Marks the beginning and ending of the page information. Anything outside this pair will be ignored by the browser.
• <HEAD> </HEAD> Marks the "head" section of the page. This section is used to provide information about the page. Its content is not included in the main page window in the browser.
• <TITLE> </TITLE> Specifies the page title. This title is displayed in the title bar (the colored line at the top of the window) of the browser program and on the tab (if your browser uses tabs). This title is also used when the user bookmarks your page.
• <BODY> </BODY> Marks the "body" section of the page. This section includes all of the information used to display the page in the browser, therefore most of the web page description goes inside this tag pair. In the example above, this tag includes a parameter (BGCOLOR="#ffffcc") that specifies that the background color for the page is to be light yellow (How did I get light yellow from this? Color specifications will be discussed later).
• <P> </P> This final tag pair specifies the beginning and ending of a paragraph. Every paragraph must be enclosed in a <P> tag pair.

Therefore, the result of the above code would be a page containing a single paragraph that says, "Hello world!" Also, you would see the words, "Page title." in the title bar and tab of the browser.

Creating a Web Site

Nvu is an open source (i.e. free) web page authoring tool. We will use it to create pages that will contain only the most basic web page elements. These elements will include:

• Page Title - displayed in the browser at the top of the window above the menus
• Colors - setting default colors for the background, text, and links
• Headings - titles and sub-titles (bold text that is usually larger than the primary body text)
• Normal Paragraph Text - body text
• Text Formatting - size, bold, italic, & color
• Paragraph Formatting - alignment & indenting
• Bulleted Lists - technically called unordered lists (options include the bullet shape)
• Numbered Lists - technically called ordered lists (options include the numeration type and the starting number)
• Tables - organizes data in rows and columns with or without borders around the cells
• Rules - horizontal lines
• Graphics - inline or text wrap
• Links - local & external

Each of these features will be introduced in the following tutorials. As you work through these tutorials you should try everything and experiment with a practice web page.

REMEMBER ... DON'T FORGET ... The fist step of building a web site (even if it only includes one page) will be to create a folder for the web site. This folder is referred to as the "site folder." Inside this folder, other folders can be created that reflects the organization of the site and its files.

When you build your own web site, some planning should occur ahead of time. After the planning process, you should gather together as many resources as you can and place them in the site folder structure so that they will be available when the pages are constructed. It is often the case that you will add to these resources as needed.

The Nvu Environment

Nvu is a WYSIWYG (What You See Is What You Get) web page authoring tool. This basically means that Nvu is used a lot like a word processor or desktop publishing program to make web pages. But instead of word processing and desktop publishing formatting and layout features, Nvu is designed to create web pages and therefore includes formatting and design features available with HTML.

The following image shows the different elements of the Nvu screen. Point to the links at the right to see these elements circled in the graphic.

Menus Composition Toolbar Buttons for common commands (new, open, save, etc). Format Toolbars Buttons and options for formatting commands. Edit Mode Toolbar Tabs for editing modes Normal = Displays the page as it will be seen in the browser, with extra information that assists with editing. This is the mode that is primarily used to create a web page. HTML Tags = Graphically shows where the tags are. HTML Source = Shows the actual HTML code tags and all other information (this is what is actually saved and used by a browser) Preview = Displays the page as it will be seen in the browser. Actually, to really see the results you should view your pages in a browser. Site Manager Used to manage the files of a web site. The F9 key can be used to hide and show the site manager. If you are not going to use the site manager, press the F9 key allow more space for the work area. If you need the site manager later, press the F9 key again and it will reappear. Work Area

NOTE: Distance education students should startup Nvu and experiment a little with the program. Don't save anything, just play with it a little. Where do you find Nvu? Assuming that you have installed the program (as directed above), if you do not have an icon on the desktop or in the quick-launch toolbar, click on the Start menu, choose the Programs submenu, choose the Nvu submenu, and then choose Nvu.

Creating a New Page with Nvu

Every time you create a new web page in Nvu (or with any other tool), you immediately need to do several things (don't just read the following, try everything).

1. Open a new document. When you start Nvu, a new document is automatically created. If you are already working on another page, there are three options for creating a new document:
   • From the File menu, select the New command, and then click the Create button.
   • Type: Ctrl-N (i.e. hold down the Ctrl key while pressing and releasing the N key) and then click the Create button.
   • Click on the New icon in the Composition Toolbar (this is the easiest and quickest method)
2. Give the page a title. From the Format menu, choose the Page Title and Properties... command (the last item in the menu). Enter a page title in the dialog box and then click the OK button.
• A page title is optional, but highly recommended.
• The page title is NOT part of the actual page.
• The page title is displayed in the colored title bar at the top of the browser window and in the tab if the browser uses tabs.
• The page title is also used when a user bookmarks the page.
• The page title should be brief and descriptive of the page's purpose.
3. Setup the page's color scheme (background, text, links, visited link, and active link colors).
• This is optional. If you do nothing, the default colors will be used:
  • background = white
  • text = black
  • links = blue (link color before they are used)
  • visited links = magenta (link color after they are used and when the user returns to the page)
  • active links = red (link color when it is clicked)
• To change any or all of these colors:
  1. From the Format menu, select the Page Colors and Background... command.
  2. For custom colors, click on the Use custom colors radio button.
  3. Click on a color to change it. A palette will be displayed for choosing a color. From more colors, HTML color numbers can be manually entered.
4. Save the page. Why save before you put anything on the page? Because references to links, graphics, and other objects within the site are specified by relative location to this file. Therefore, you need to save the file before any references are added to the page. Where do you save the page? In its appropriate location within the web site's folder.

Try this! Start Nvu (if you haven't already), create a new page, create a title, change the colors, and save the page. Type something on the page and save it again. Now go to your browser and open your page. Did it work? Do you see the page title at the top line of the browser window (above the menus) and on the tab (if your browser uses tabs)?

At this point, go back to Nvu and click on the Source tab at the bottom of the window. You should now see the actual HTML that has been created. This is what is actually saved in your HTML file and what is sent the browser when the page is requested. Do you understand this code? If not, go back to the HTML Basics section of this page and see if you can figure it out (don't worry if can't ... this course will not be working in the actual HTML code). To return to the normal editing mode, click on the Normal tab at the bottom of the window.

Where to go from here...

If you understand the above concepts, you are ready to go to the next tutorial (Text: Editing & Formatting)