Web Page Development Tutorial

Outline

1. Scope of  this tutorial
2. Formatting web pages
   
3. Files and file extensions
   
4. Links
5. Graphics
   
6. Web page titles
   

Scope of this Tutorial

1. Covered
• Building and linking web pages
2. Not covered
• Uploading web page files to the PSD server
  
3. Questions and answers
   

Formatting Web Pages

1. Use your standard editor to prepare and format a document
• Generally, files should be about 1 page long
• KISS - avoid fancy fonts and effects
• OK: text, bold, itralic, underline, different fonts and sizes, alignment (center, left, right)
• Avoid: lines separating sections, tables, many fonts, many sizes of fonts, etrc.
  
• One large graphic or many small graphics cause complexity and take a long time to view
  
2. Save your document as a Web file
• Use the extension htm or html and save in html format
  
3. Look to see that the files exist and are properly named
• Case (capital letters) in filenames is meaningful
• Use Windows explorer to assess this
  

Files and file extensions

1. Structure
2. If the web pages are not too complex, then it is generally simplest to save all files in one folder (directory)Filenames
• Avoid speces in filenames (smash names together, or use underscores or hypnens)
  
• Newsletter24Jan04.htm
• Newsletter-2004-01-24.htm
• Newsletter_2004-01-24.htm
3. Extensions
• Web pages should be saved with htm or html
• Graphics
  
• Photographs - .jpeg or .jpg (Joint Photographic Experts Group)
  
• Graphics - .gif (graphics interchange format)
• Other files - can use any extension, but the web browser must be configured to accept the type of file accroding to the extension, or the web browser should be confiugured to save it to disk
  

Links

1. To html files
1. Highlight the text with the mouse
2. Click on "Link" or "Insert Link" (may be a menu option)
1. The text with the link "behind it" can (and should if it spans multiple words) have spaces
   
3. Enter the name of the file, exactly as it exists on disk
1. Linked text: Topics for Spring Semester
2. Link: TopicsforSpringSemester.htm
   
2. To other files
1. Just enter the filename, exactly as it is on disk
2. Again, avoid spaces in filenames
3. Case (upper or capital, lower or small) matters in filenames
   
3. For email - entering a link, but with a special instruction in the link
• Highlight the text to be linked to generate an email
  
• Send email to Mrs. D
  
• Enter in the link: mailto: followed by an email_address
  
• Ex: mailto: cdelmont@psd.k12.co.us
  
• This invokes the atandard email application
4. To other web sites - this can be tricky, safest is to go to the web page and copy and paste the link
• For the link, insert http://linkname  where linkname is the entire name of the link
• Ex. http://www.psd.k12.co.us
• Don't forget the punctuation ://
  
• Not effective is the web page is synamic, e.g. .asp, etc.
  

Graphics

1. All graphics are links to graphics files
• The graphics are not embedded in the html document
• Graphics are separate files
2. Insert the mouse pointer in the file where you want the graphics
• Click on Image, or insert graphic
• Sometimes, you can browse for graphics files
3. Or, you cvan just create a link to a graphic file

Web Page Titles

1. Apperar at the top of the window, in the titlebar
• Can be entered in a variety of ways
• Are a good idea
• They can help the user organize (or at least recognize) the page
2. Should be descriptive
• Ex. Mrs. D's Newsletter for January 23, 2004