HTML-1: Resources

Lesson 01 | Lesson 02 | Lessons 03/04/05 | Lessons 06/07

The resources on this page are OPTIONAL (except for the Prelim Steps), to be used IF you need them.

Lesson 01

7 Preliminary Steps - If you haven't completed them yet
- Check In, if you haven't done so yet
  - Start Here Page: Check In
- Register for Class Forum, if you haven't done so yet
  - Prelim Steps 2 & 3 Instructions: Forum Steps
- Resource CD
  - lesson 1, all sections
  - lesson 2, public_html sections
- Step by Step Instructions
  - Prelim Steps 4 thru 7 Instructions
- Create student web account,
  - student.santarosa.edu
- Dowload/Install Required Software
  - windows users: SSH client -- secure shell (SSH), and secure file transfer (SFTP)
    - https://cf.wm.edu/it/software/public/ssh/sshsecureshellclient-3.2.9.exe
  - mac users:
    - you already have SSH inside terminal.app
    - Fugu secure file transfer
      - http://rsug.itd.umich.edu/software/fugu/download.html
Online Office Hours via cccConfer Elluminate! Virtual Classroom
- read about how online office hours will be accessed, etc.
  cccConfer Details
Class Website FAQ page
- look over the questions on the FAQ page, so that you're aware of what questions have been asked and answered, in case you encounter any of those situations
If you still need help
- go to the class Forum, Help Requests sub-forum
- look through any already posted requests to see if they match your issue
- if they don't, create a new topic, with a descriptive subject line, so it's clear what your issue is, and then give all the pertinent details in the body of the topic
How Assignments are Submitted for Grading
- Syllabus Page: Guidelines-Assignments
Using the Forum for Help
- Syllabus Page: Guidelines-Forum for Help
When to Ask for Help
- Syllabus Page: Guidelines-When to Ask for Help
7 Pertinent Details When Asking for Help
- Syllabus Page: Guidelines-7 Help Details

Lesson 01 | Lesson 02 | Lessons 03/04/05 | Lessons 06/07

Lesson 02

Finding Notepad or TextEdit (your free XHTML Code Editor)

On the Resource CD
- watch the appropriate movie for your type of computer
- Lesson 1
  - using notepad (win) or
  - using textedit (mac)
windows users - plain text code editor
- called Notepad
- Start button, All Programs, Accessories Folder, Notepad
- it would be a good idea to create a shortcut for your Desktop as you'll be using it regularly.
  WARNING: when saving always change the Save as Type: setting to All Files, otherwise Notepad will automatically add .txt to the end of your file name, and for web pages, the 'last name' or 'file extension' MUST be .html
mac users - plain text code editor
- called TextEdit
- located in your Applications Folder
- change the Preferences
  - from the TextEdit menu, select Preferences
    - on the New Document tab
      - make CERTAIN that 'Plain Text' is selected in the Format section, instead of 'Rich Text'
    - on the Open and Save tab
      - in the When Opening a File Section
      - check the "Ignore rich text commands in HTML files"
    - in the When Saving a File section
      - uncheck the box titled "add '.txt' extension to plain text files"

Links to a Few Articles On Good & Bad Website Design

One of your assignments in this lesson is to examine 5 different websites and then choose one to critique, based on how closely it follows and incorporates 8 Evaluantion Criteria.

Since you're beginning the journey to creating web pages and web sites, you need to have a clear idea about what elements contribute to and work together to make a good site, and what elements or situations make a site difficult to use, or even make it horrible. The

Don't Make These Mistakes When Desiging Your Site
- Biggest Mistakes in Web Design 1995 - 2015
  by Vincent Flanders, at WebPagesThatSuck.com
  The author offers 16 categories of 'suck-ey-ness', with snarky titles, narrative, and links to examples that demonstrate the point he's making.
Splash Pages: Pros and Cons
- Splash Pages: Pros and Cons
  by Jennifer Kyrnin, at About.com
- Splash Pages: Do We Really Need Them
  by Sven Lennartz, at SmashingMagazine.com
- A Kind of Unique Splash-Page-Style Website Design
  by Valik Rudd, at WebDesignIdeas.org
  Make sure you scroll down below the Ads by Google screen shot at the top, to the screen shot of the site that Valik Rudd is commenting on, and his paragraph of text below that.

Lesson 01 | Lesson 02 | Lessons 03/04/05 | Lessons 06/07

Lessons 03/04/05

XHTML Tag Nesting Chart

This is similar to the one Linda shows on the CD, but a bit more complete. It may help when you have validation errors, as the Nesting column tells what can and can't be nested inside the various tags.

XHTML Element Reference

http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/index.cfm

This site is a complete reference of XHTML tags organized by what they call modules -- structure elements, text elements, list elements and so on. Clicking on the element name leads to a page that gives the pertinent info about the element, including which elements can be nested inside it (ie valid child elements), and which elements it can be nested within (ie valid parent elements).

This will also help with validation errors, when the message is of the type "character data not allowed here", or "tag cannot be used here".

Character Entity Codes

http://www.w3schools.com/tags/ref_entities.asp

Unicode Script and Symbol Charts

http://www.unicode.org/charts/

Lesson 01 | Lesson 02 | Lessons 03/04/05 | Lessons 06/07

Lessons 06/07

Determining Color

Use either site when setting the color and background-color values.
Hexadecimal site -http://www.somacon.com/p142.php

Hexadecimal site -http://www.psyclops.com/tools/rgb/

5-Color Color Palette Resource

kuler.adobe.com

A great resource for creating 5-color color palettes for web sites is kuler.adobe.com -- the palettes are displayed as 5 square boxes of color, like color swatches or chips in a paint store. There are a huge number already created and uploaded to be shared, and you can also create your own.

By registering a username and password, you can create a free account where you can store the 5-color palettes you create, and ones that you've marked as favorites from all those available for sharing.

If you pick a palette to edit/make changes, you get both the visual color squares, and numeric codes -- rgb, cmyk, hex, hsv, and lab, plus a color wheel/disc with the base color for the palette in the center of the disc, and 4 movable color points. You can make changes by moving the 4 color dots to other locations on the color disc, or you can type in the numeric codes for the different squares. OR you can choose from 6 different color rules that the web site will apply to the base color -- analogous, monochromatic, triad, complementary, compound, and shades.

You can create a new palette based on a single base color, or you can upload a photo, graphic, logo, or some other image, and the site will analyze the colors in it, and produce a 5-color palette that will work with the colors in the image.