Project 2B: Technology History and Information - html/xhtml

Available Points:

    5% Step 1. HTML Introduction
    5% Step 2. Web Project Site Plan
  40% Step 3. Web Design Practice Exercises
  50% Step 4. Web Page Project Presentation
100% TOTAL

Due Dates:

Part 1. HTML Introduction - Cascade: Wednesday, October 25, 2009
Sylvania: Thursday, October 22, 2009

Part 2. Web Project Plan - Cascade: Wednesday, November 18, 2009
Sylvania: Thursday, November 12, 2009

Part 3. Web Design Practice Exercises - Cascade: Monday, November 30, 2009
Sylvania: Thursday, December 3, 2009

Part 4. Web Page Project Presentation - Cascade: Wednesday, December 2, 2009
Sylvania: Thursday, December 10, 2009

Related Readings:

Text: Primary: 2 (The Internet and World Wide Web)
Secondary: 3 (Application Software), Chapters 5 (Input), 6 (Output), 7 (Storage), 8 (Operating System)

A Brief HTML Guide

Creating Web Pages and Transferring Them to a Web Server

Creating a Web Page Presentation with html/xhtml

HTML Tutorial

The Creating a Web Page Presentation will help you get started with this assignment. This tutorial at the W3Schools site will provide reinforcement and additional information on the required tags and elements required for this assignment.

XHTML Tutorial

Again, the "Creating a Web Page Presentation" will help you with the xhtml basics that you need for this class; however, you may also want to work through this XHTML tutorial provided at the W3Schools site.

Project Basics

This assignment covers html and xhtml coding, web page design and website deveopment.

You will ultimately create a simple website of a minumum of 3 pages and post it (FTP it) to your directory on the Student Web Server (SWS) which will result in it being viewable on the Internet. One will be a home page, the first page you want to show when you go to your website. It will have a file name of index.htm. and at least 2 additional pages, named in a logical manner, that you create related to the home page. Please see the complete instructions on the class web site: Web Page Design Plan and Project Instructions.

You need to have have at least one of each of the following somewhere within your web site:

Before starting your web pages you will complete three other activities which will help you to learn the html/xhtml code and to plan and organize your final web site.

NOTE 1: You must have the HTML Introduction completed and have your CIS 120 - Disk with you for class on the scheduled due date. We will begin working with HTML during class and you will need to use the files on your disk and your login name for the Student Web Server (SWS).

NOTE 2: It is important to follow the required file structure to avoid difficulties during the html/xhtml/Web page project. During this activity and all web related work be sure that the extensions for known file types are turned on, if they are not already showing. If you have forgotten how, check the File Management project instructions for the procedure.

Previously, in the file mamagement homework assignemnt, you created a folder called project2b. Inside that folder your created three additional sub-folders: html_introduction, web_design_practice and yourlastname_webproject. These folders are where you will save all the files related to Project 2b.

Project 2B - Part 1: HTML Introduction

1. Scripting Languages (JavaScript)

   Is a scripting language developed by Netscape to enable Web authors to design interactive sites. Although it shares many of the features and structures of the full Java language, it was developed independently. Javascript can interact with HTML (Hypertext Mark-up Language) source code, enabling Web authors to spice up their sites with dynamic content. JavaScript is endorsed by a number of software companies and is an open language that anyone can use without purchasing a license. It is supported by several browsers, but may require special downl;oad to function properly in a given browser.

1. Open a blank Notepad window and enter the following JavaScript code into it.

       <SCRIPT LANGUAGE="JavaScript">        document.write( "My first JavaScript" + "<BR>" );    </SCRIPT>    

   You can copy and paste it from the web page, or you can carefully type it in. You cannot, however, copy it from a "view source" for reasons we will discuss later. Briefly, the reason is that I have to add special codes to make the angle brackets around the SCRIPT tags display properly in the browser; the angle brackets are not really in the source code.
2. After you finish entering the above script, hit enter a few times and type the following script:

   <A HREF="artists.html" onMouseover="document.art.src='images/art_1.gif'" onMouseout="document.art.src='images/art_2.gif'"><IMG SRC="images/art_2.gif" WIDTH=78 HEIGHT=35 NAME="art"></A>

   Used in the body to allow a swap of images and to create a link.

3. Save your file as: lastname_js.txt in the html_introduction folder. We will use these or other applets later as you develop your Web page design. Print a copy of your lastname_js.txt document for turn-in.
4. Close the Notepad window.
2. ASCII Text Files

   An HTML document is a "pure ASCII text" file. ASCII text files are usually created in a text editor. Numerous HTML "Integrated Development Environments" (IDE's) such as Dream Weaver, FrontPage, etc. implement "WYSIWYG" editing similar to word processors. However, all HTML documents for this class will be created in a text editor (or word processor saved as text). All major operating systems ship with at least one text editor: Windows Notepad, edit; Mac OS SimpleText ; UNIX/Linux vi, emacs.

   Windows Notepad defaults to a file type of "Text Document" and automatically appends a ".txt extension to most filenames. Enclose the file name in quotes to ensure you always get the exact file name and extension that you intend:

   
   Force Notepad to save file without .txt extension For this class we will use Notepad as our text editor.

Minimum HTML/XHTML Requirements

1. Short History of Web Pages

Even though a web page might look like a word-processed document, it is not created like one. Web pages were created by Tim Berners-Lee in 1989 with the HyperText Markup Language (HTML). This markup language consists of a number of tags that an Internet browser reads, in sequential order from top to bottom, to format and write a web page. In the beginning, HTML was a very simple language with just a few simple tags that formatted a web page. Since then, it has evolved into a very sophisticated system of mark-up tags in HTML 4. In addition, the Extensible HyperText Markup Language (XHTML) is an extension of HTML which includes current and future document types, but is almost identical to HTML 4.01.

Because HTML was originally created in a loosey-goosey type fashion, it did not have stringent coding rules. As it has progressed, there has become a need to have strict coding standards. For the past 10 years, the World Wide Web Consortium (W3C) (an international organization where members work together to develop Web standards) and they have masterminded the standards for both HTML 4 and XHTML.

For further information on the development of HTML, click on the following: History of HTML.

2. DOCTYPE

XHTML (Extensible Hypertext Markup Language) is the latest specification for HTML. It is used to provide the structure of a Web page in conjunction with Cascading Style Sheets (CSS) to provide the presentation, i.e., how it looks. A vaild XHTML document requires a DOCTYPE declaration at the beginning of an XHTML page stating the language and language version of the document. We will use a transitional XHTML DOCTYPE since many older (deprecated) elements are no longer the standard, but still work. CSS has been used to replace many of the effects of the depricated tags.

XHTML is the new HTML and is a standard that the W3C developed to make HTML coding more standardized and cleaner. If you are new to creating web-pages or have been doing so for some time, you need to be coding your pages per XHTML standards. It will save you heartache in the future if web browser developers decide to stop supporting the earlier HTML (deprecated) coding techniques.

The following represents a brief summary of the basic requirements of XHTML:

• All XHTML Documents Must have a DOCTYPE declaration as the first Statement
• All XHTML Elements must be in lower-case (no UPPERCASE tags)
• All XHTML Elements must be closed (each tag must have a starting tag and an ending tag)
• XHTML Elements Must be Properly Nested
• XHTML Attribute Names Must be in Lower Case and Attribute Values Must be in Quotes

3. HTML Basics (What is HTML?)

   Lab 3 is aimed at getting you started on making simple web pages. This is only a brief introduction and is designed to prepare some of the files needed to start your Web pages. All Web pages are written with HTML (Hypertext Mark-up Language).  HTML lets you format text, add graphics, sound, video, and save it all in a Text Only or ASCII file that any computer, with a browser, can read. The key to HTML is in the tags or elements, keywords enclosed in less than (<) and greater than (>) signs (you know, those little pointy things), which indicate what kind of content is coming up.

   Another way to describe the HTML files are as text files with a little extra information that adds features to an essentially plain text file like any other. Images and other bits are not found within the HTML file itself. These are separate and only referenced in the code. As such, HTML files (pages) are quite small in themselves. The pictures, sound or whatever else they also rely upon cause the delay one normally experiences with an elaborate and graphic rich web page or site.

   While there are many software programs that create HTML code for you, by learning HTML yourself, you'll never be limited to a particular program's features. You will also be better able to troubleshoot your work and understand how other Web pages accomplished a particular effect by viewing their source HTML code.

   HTML Tags:Tags are the code that is generally known as HTML. Browsers read this differently from normal text because it is contained within the <> brackets. A Web page begins with <html> and <head> tags. These tell a browser this is an HTML file, and the HEAD can contain many things including JavaDcript, links to stylesheets, and information about the document itself, such as,the <title> of the page. Soon after comes the <body> tag that contains the page content. The final tags are a </body> and </html> tags. The slash is a closing sign, as most tags will have. Tags are opened then closed in this way. That is, the action or effect of the tag begins with the opening tag, such as the strong tag <strong> which would cause all text following it to be bold and ends with the closing tag </strong> which would end the bolding of the text. Most tags require a beginning and ending tag. There are only a few exceptions, such as the paragraph tag <p> ... </p> where the ending tag could be omitted. Current XHTML standards require and ending tag. As a matter of good practice and consistency, you should end all tags. If you leave out the ending tags you will often get unexpected results.

   You will not see these tags in a real page, as they are intended for the browser only, and no spaces are lost because of their presence. Tags are intended to work together as mirrors or sandwiches. The main point to remember is to keep your code neat and even, or it will get confusing and hard to edit later, or hard to find typos and surplus tags will begin accumulating.

   The tags listed below are required for an HTML page:

   1. <html> .... </html> Starts and ends an HTML page.
   2. <head> ... </head> Starts and ends head section used to indicate title, author, etc.
   3. <title> ..... </title> Goes within the head and indicates title shown in browser title bar.
   4. <body> .... </body> Starts and ends the main content of the page.

   HTML Template

   An easy way to write Web pages is to create some templates for a basic Web page and for certain commonly used features, such as tables, ordered/unordered lists, etc. In your basic page template you may want to include all the information for your links and background colors. You can open the templates and cut and paste in features to speed up your writing process. HTML tags can be written in lower-case or upper case. In the past, they were often written in upper case so that they could be easily distinguished from plain text in the page code and for consistency. However, as mentioned, HTML is now moving to XHTML which requires tags to be wrtten in lower case. Also, many Web servers are UNIX/Linux based and they can be case sensitive.

   A basic template for an HTML page:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>your page title that will show in the browser title bar </title>
   </head>
   <body  bgcolor=""  text=""  link=""  vlink=""  alink=""  background="">

   This is where your page content goes (all the information that will be displayed on the screen in the browser window).

   </body>
   </html>

   This template has some attributes that would not be used if you were using CSS.

4. Create an HTML Template

   Notepad is an excellent tool for writing your HTML code. Unlike MS Word, it doesn't put in extra formatting, which can interfere with your page display and reading your code. For all your work in this class, you will only use Notepad.  Do not use other HTML editors or WYSIWYG programs, such as, MS FrontPage or Dreamweaver.

   1. Open a blank Notepad window and type in the basic HTML template example listed above. Be accurate in your work. You can copy and paste.
   2. Save your template as: lastname_template.htm, where lastname is your last name, in the web_design_practice folder. Don't close the Notepad window.
   3. Copy your lastname_personal.txt file from your homework (you created the file when you did the file management homewrok) to the html_introduction folder.
   4. Open a second blank Notepad window. Go to: File - Open and navigate to the html_introduction folder and open your lastname_personal.txt document.
   5. Copy and paste the contents into the lastname_template.htm window between the beginning and ending body tags and Save As: lastname_personal.htm in the html_introduction folder of your disk.
   6. Print copies of your lastname_template.htm and your lastname_personal.htm files for turn-in.  NOTE: Print he Notepad code, not the browser window.
   7. Close the Notepad windows.

5. Obtain your Student Web Server Login name

   NOTE: You did this in Project 1. If you remember your login name you can skip this part.

1. Obtain your Student Web Server Login name at the Instructional Media Department Student Web Server Login Page at: http://sws.pcc.edu. You will need to read and agree to the PCC Acceptable Use Policy, then enter your name as you are registered for this class and your birthday.
2. Capture a screen shot showing the results of your Student Web Server user name calculation. It is the screen that has a message similar to the following on it:



3. Open a blank MS Word window and type a bold heading that says:

   CIS 120 - Project 2B - HTML Introduction
   Your name
   Your campus

4. Paste the login name screen shot below the heading and save the document as login.doc in your html_introduction folder.

Project 2B Part 1 - HTML Inroduction Turn-in:

Due date for HTML Introduction portion of Project 2B:
Cascade: Wednesday, October 25, 2009
Sylvania: Thursday, October 22, 2009

1. Print a copy of your login.doc file for turn-in (if you did this) and use this as the cover sheet for the other three files you printed.
2. Otherwise, turn in the other three files you printed with a cover sheet that has Project 2B - HTML Introduction, your name and campus. The other three files, printed in NotePad, are:
   • lastname_js.txt
   • lastname_template.htm
   • lastname_personal.htm
3. Write down your login in a place where you can easily find it for future reference.

This concludes the HTML Introduction portion of Project 2B.   NOTE: You must have completed the HTML Introduction and have your CIS 120 disk with you for class on the scheduled due date.  We will begin working with HTML during class and you will need to use the files on your disk and your login.

Project 2B - Part 2. Web Page Project Plan

Turn in your Web Page Project Plan and Site Diagram.  Be sure to keep a copy of your plan so that you can work from it.  Include the following items in your plan:

1. Purpose statement - why are you doing the website, what it is about (Word processed)
2. Outline of each web page - basic content of each page (Word processed)
3. A plain text list of links (Identify the site along with the URL) (Word processed)
4. Site diagram - shows the relationship between the pages of your website. (Must be neat and easy to understand. Look at Web Site Diagram examples on class Web site.)
Draw a diagram of your site. Keep the design simple.

Use arrows to indicate link directions.  Put question marks where you need to fill in data.  This can be on one sheet of paper.



Due date for Web Page Project Plan portion of Project 2B:
Cascade: Wednesday, November 18, 2009
Sylvania: Thursday, November 12, 2009

Project 2B - Part 3. Web Design Practice