Muiz Brinkerhoff and Inside Skills Center offering software skills training to individuals, businesses, and in classes at SRJC
HTML - Level 2
CS 50.11-B, section 8277, Spring 2010
presented by Muiz Brinkerhoff
email is the BEST way to contact me - classes@insideSkills.com
Various Resources
The resources offered on this page are OPTIONAL, but potentially useful and helpful.
I've provided them for your convenience. You may use them if you need or want them, and you may ignore them.
If you discover that a link is not working please send me an email, indicating which specific link is broken -- and please remember to identify the location of the broken link, ie "resources page" plus the lesson number, so that I don't have to examine all of the links, or all of the pages, to find it.
Thanks in advance for your help. classes@insideSkills.com
In addition if you discover other resources which you find valuable and would like to share them with your classmates, post them in the appropriate sections of the Tips, Tricks, and Resources sub-forum at the class Forum. Give a short description of what the resource link offers, and possibly how it was useful to you.
As a beginning web designer you may feel overwhelmed by all of these resources, and by the amount of info available at the various sites on this list.
Don't let yourself get discouraged.
You don't have to use these resources. They are here for when you need them, to save you the time of doing web searches for info you might be looking for.
Also keep checking back as the class progresses and you will find you can absorb and make use of more of the information contained here, as your experience and familiarity grows.
lesson 1 - Getting Started & HTML editors
* Web Browsers
If you don't already have a current Web browser, download one from the sites listed below. Because of its high compliance with the CSS Standard, Firefox should be your primary browser for this course.
Firefox/Modzilla (mac/win)
Safari (mac/win)
Internet Explorer 7 (win xp only -- svc pack 2 or 3)
Internet Explorer 8 (win only -- xp and vista, 32- and 64-bit)
* Your Free Web Account at Student
Create a free web account (inlcudes a free email account) on the SRJC web server called student. A web account at student is required for this course. Your assignments will be uploaded to your student account.
* Secure FTP (file transfer) software
If you don't already have Secure FTP and Secure Shell installed on your computer, you need to download & install them now, so that they're ready to use in Lesson 2.
SSH Client (win only) (contains both sftp and ssh)
Fugu (mac SFTP only) (mac users already have ssh as part of terminal.app)
Alternate download links on a page at student
* Code Snippet for Basic Page Template
You should use this code snippet as the foundation or skeleton for ALL of your pages. It contains the required tags and info for the <head> section, as well as the code for the set of blue XHTML and CSS Validation Icon links, at the bottom. Rather than retyping these tags for each new page, you should create a template.html file that contains it.
Copy this code snippet, paste it into an empty text file, and save it as "template.html". Then whenever you need a new page, open template.html, and immediately do a Save As... and save it with the name of your new page. Then begin adding content in between the opening and closing <body> tags.
Don't forget to add a descriptive phrase for the <title> tag.
To use this code snippet, highlight and copy the code directly from the page as you view it below, or from this basicTemplate.txt file but DO NOT copy it from View Source.
CRUCIAL WARNING:
Whitespace (spaces, tabs, and line breaks) usually is ignored in X/HTML & CSS, however in the case of the !DOCTYPE tag, a line break within it WILL cause a problem.
There are 2 quoted strings of text in the !DOCTYPE tag. There MUST NOT be a line break in the middle of either of these 2 quoted strings of text. In other words, ALL of the text in between the double quotes MUST be on the same line.
Each quoted string of text can be on a separate line, but a line break anywhere between the opening and closing quote marks of either one, will cause a validation error -- AND THE ERROR DESCRIPTION WILL NOT SAY ANYTHING ABOUT THE OFFENDING LINE BREAK. In fact it will say that the tag is improper or incorrect, and will show what it should be, but since line breaks are invisible, it won't be at all clear that it is actually a line break inside one of the quoted strings of text that is the real problem.
For example, the following, even though the line break is where a space is in the quoted string, will still cause a validation error:
WRONG
XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
correct
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>INSERT your title text here</title>
<link type="text/css" rel="stylesheet" href="your css filename.css" />
</head>
<body>
. . . INSERT YOUR CONTENT HERE . . .
<div id="validationLinks">
<p><a href="http://validator.w3.org/check?uri=referer"
title="link to w3.org XHTML validator">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="graphic: Valid XHTML 1.0 Strict" height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/check?uri=referer"
title="link to w3.org CSS validator">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="graphic: Valid CSS 2.0" height="31" width="88" /></a>
</p>
</div><!-- end of div#validationLinks -->
</body>
</html>
* XHTML & CSS Validators
Below are links to the 2 validator sites, however every page you create for this course should have both XHTML and CSS Validator Icon links at the very bottom (code for the two icon links is included in the Basic Page Template Code above), which will allow the page visitor to check the validation by simply clicking the icon link.
Using the individual links below will require you to type or paste in the URL of the page to be validated.
Beneath the links to the validation sites there are 2 code snippets -- one for gold icons, and the other for blue icons, in case you want to add the code to other pages you've created.
IMPORTANT NOTE
You CANNOT validate the LOCAL copy of a page (ie one that is sitting on your hard drive, external drive, flash drive, or any other local storage media). The page to be validated must either be uploaded to a working website, or uploaded directly to the validator site (Validate by File Upload), or the entire page code must be copied and then pasted into the validator (Validate by Direct Input).
It is often easiest to include the Validator Icon links on your pages, so you can simply click the icons, once you've uploaded the page to you website.
XHTML validator
CSS validator
http://jigsaw.w3.org/css-validator/
A Note About a Commonly Reported CSS Validation Error
According to W3C CSS standards, if you don't specify color and background-color at the same level of specificity,
your style sheet might clash with user style sheets, and CSS Validation will likely flag an error in every rule where color is set without also setting background color.
To avoid this, declare both color and background color together. See Section 9.1 "Color Contrast" in the W3C Note "CSS Techniques for Web Content Accessibility Guidelines 1.0" or the article CSS Color Issues by the CSS Pointers Group, for a discussion.
Code Snippets for XHTML & CSS Validator Icon Links
Here are individual snippets for a set of gold validation icon buttons. If you are using the Basic Page Template snippet above, it already contains the code snippet for a set of blue buttons. If you want to use the gold buttons, change the img tag src= value to the appropriate name for the gold buttons.
To use either of these code snippets, highlight and copy the code directly from the page as you view it. DO NOT copy it from View Source.
<div id="validationLinks">
<p><a href="http://validator.w3.org/check?uri=referer"
title="link to w3.org XHTML validator">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="graphic: Valid XHTML 1.0 Strict" height="31" width="88"></a>
<a href="http://jigsaw.w3.org/css-validator/check?uri=referer"
title="link to w3.org CSS validator">
<img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="graphic: Valid CSS 2.0" height="31" width="88" /></a>
</p>
</div><!-- end of div#validationLinks -->
<div id="validationLinks">
<p><a href="http://validator.w3.org/check?uri=referer"
title="link to w3.org webpage validator">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue.gif"
alt="graphic: Valid XHTML 1.0 Strict" height="31" width="88"
class="imgBorderNone" /></a>
<a href="http://jigsaw.w3.org/css-validator/check?uri=referer"
title="link to w3.org CSS validator">
<img src="http://jigsaw.w3.org/css-validator/images/vcss-blue.gif"
alt="graphic: Valid CSS 2.0" height="31" width="88" /></a>
</p>
</div><!-- end of div#validationLinks -->
* XHTML & CSS References
Florida State Univ Certified Webmaster Curriculum:
XHTML 1.1 Tag and Attribute Reference
learningforlife.fsu.edu/webmaster/references/xhtml/tags/index.cfm
Ever wondered if it's ok to put a p tag inside of a list item li tag, or if any other tag can be placed inside a ul tag? Which block tags can have other block tags placed inside them? Will what you're doing with your code pass or fail validation?
For each tag, this site lists the tags which can validly be nested within it (ie valid child tags), and which tags are valid parent tags for the tag in question.
Florida State Univ Certified Webmaster Curriculum:
CSS 2.1 Reference
learningforlife.fsu.edu/webmaster/references/css/
Excellent resource for CSS
HTML Dog - XHTML & CSS Tags, Properties, and Tutorials
htmldog.com
Great resource site for both XHTML and CSS, when you can't quite remember which attributes a tag has, or which values are valid for a property -- I use it a lot.
30 HTML Best Practices For Beginners
http://net.tutsplus.com/tutorials/html-css-techniques/
30-html-best-practices-for-beginners/
Worthwhile article listing and describing 30 Best Practices for web page creation
Fonts Common to Both Win & Mac
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
* 5-Color Palette Creator/Editor
Highly recommended for all of those who aren't Graphic Designers ... if you've ever spent time, or agonized over, trying to pick a set of colors (a color palette) that work well together for your web sites -- background colors, primary and secondary font colors, link colors, and so on ... or if you normally just pick colors at random, because you have no idea which color combos work and which don't -- this tool will be one of the most important resources in your web designing life.
You can easily and quickly create multiple, 5-color, color palettes for your web sites using this free tool at Adobe's Kuler site. Upload a logo or other primary graphic that you will be using at your site, and Kuler will analyze it, and create a 5-color palette (which Adobe calls a 'Theme'), from the major colurs in the image -- a quick and easy way to get 5 colors that do work well with each other, and which will complement the colors in the primary graphic/logo. Or you can generate a 5-color Theme from a single base color.
You can also create variations on the original theme, according to 6 different color rules (Analagous, Monochromatic, Triad, Complementary, Complex, or Shades) with a single click, as well as creating custom themes based on the original, by moving the 5 points on a color wheel, or by dragging the RGB sliders for each of the 5 colors.
You can view themes created by other Kuler users via several categories (newest, most popular, highest rated, and random, within the last 7 or 30 days, or within all days); or you can search by theme name, by tags describing the theme, or the by creator's account name.
If you create a free account for yourself, you can save the themes you create, and any created by others which you like.
Theme displays include 5 large color chips, plus the codes for hex, rgb, cmyk, and a few other color coding schemes. And if you use Photoshop, you can download the theme as a 'color swatch' to be loaded into Photoshop.
* HTML Editors
Definition
An HTML Editor is a software application that uses menu items and tools bars to place HTML code into a text document. Most HTML editors display the code in one view and the resulting webpage in another view. In addition, most HTML editors have a feature (sometimes a separate plug-in) that will help you write CSS.
Difference between HTML Editors, and WYSIWYG Editors
HTML Editors are NOT the same as WYSIWYG editors, which create web pages while hiding the HTML code from you, or if both Code and Design windows are available, the Design window is primary. You are NOT allowed to use a WYSIWYG editor for this course, since the purpose of it is to learn how to read, write, and edit HTML and CSS code, and how to recognize and correct errors. The more you are exposed to the code the more you learn.
If you jump right into using Dreamweaver (a popular WYSIWYG editor), at this point, you will almost certainly become dependent on the Design View, and will delay your learning of the HTML and CSS code.
Unacceptable Editors
Examples of WYSIWYG Editors or Web Authoring Tools, which you are discouraged from using for this course, are Dreamweaver, GoLive, FrontPage, etc. -- any that generate the code automatically for you, and either prevent you from working in the Code window, or from changing the code by hand, or which hide the Code window from you, or which make the Code window a secondary tool, with the Design window being primary.
Acceptable Editors
Examples of HTML Editors which are acceptable to be used in this course are: HomeSite, BBEdit, TextWrangler, Hot Metal, Hot Dog, etc.
about.com reviews and links to HTML Editors
http://html.about.com/cs/htmleditors/index.htm?terms=HTML+Editors
The list has HTML Editors and WYSIWYG Web Authoring Tools mixed together
graphicdesign.about.com list of editors
http://graphicdesign.about.com/Cs/htmleditors/index.htm?terms=HTML+Editors
WebSiteTips.com HTML Editors & Authoring Tools, and MORE
http://websitetips.com/html/tools/
look down a bit to the On this page: heading
Don't Get Overwhelmed or Lose Your Focus
There are many, many HTML Editors, and you could spend days doing searches, following links, reading the descriptions at the individual Editors' download sites, as well as searching for and reading online reviews which compare them, or rate them.
Your goal, which you need to keep in front of you, is to choose an Editor to use during this class, by taking one or two for a test drive to have some hands on experience with it/them, so you can make an informed selection.
You need to make your decision before midnight Monday, so be careful not to get caught up in endless web searching, and link following.
lesson 2 - box model & box properties
Class recording at cccConfer Elluminate
Thursday 1 April, 2010 -- 10 to noon
Example of Simple Assignments Organizer Page
W3C Box Model
NOTE: Even though textbooks and online resources may blur the distinction between X/HTML Box Elements and the Box Model by using sloppy and imprecise wordings, the Box Model does not have width, padding, borders, or margins. The box element has these properties, and the model describes them and how they work.
http://www.w3.org/TR/REC-CSS2/box.html
about.com - Beginning CSS Tutorials
The CSS Box Model
webdesign.about.com/od/beginningcss/p/aacss6box.htm
(see also the Related Articles section and links at the bottom of the page)
about.com - Explore Web Design/HTML
CSS Box Properties: Think Inside the Box
webdesign.about.com/od/advancedcss/a/aa100101a.htm
(see also the Related Articles at the bottom of the article)
Lorem Ipsum/Blind Text Generators
Lorem Ipsum text generator
www.lipsum.com/
the entry box and choice buttons are about mid-page, so scroll down
Blind Text Generator
www.blindtextgenerator.com/lorem-ipsum
this one creates Lorem, and several other types of placeholding or blind text, PLUS a checkbox to put the p tags in for you
lesson 3 - div & span
Div is a block element and normally takes up the entire width of the page, or element that it is nested within. Because of this, two divs cannot normally be placed side by side.
Span is an inline element, and is only as wide as the contents which it surrounds.
Class recording at cccConfer Elluminate
Thursday 8 April, 2010 -- 10 to noon
W3C Divs and Spans
http://www.w3.org/TR/html4/struct/global.html
Goer.org Tutorial on divs and spans
http://www.goer.org/HTML/intermediate/div_and_span/
About.com - XHTML elements div and span
webdesign.about.com/cs/htmltags/a/aa011000a.htm
HtmlDog.com - div and span tags
www.htmldog.com/guides/htmlintermediate/spandiv/
CSS Zen Garden -- Amazing Examples of Design by Function
CSSZengarden.com
This site is THE perfect example of this approach to styling by layout function. A variety of designers have produced a variety of totally different layouts and appearances for the same page code and content. Just by changing the external style sheet used, the layout and appearance of the page is completely, and very dramatically changed.
Links of Possible Interest from Efolio Class (CS-50.25)
- 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.
- Biggest Mistakes in Web Design 1995 - 2015
- 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.
- Splash Pages: Pros and Cons
lesson 4 - CSS layout & positioning
W3C Visual Formatting Model (huge!)
www.w3.org/TR/REC-CSS2/visuren.html
Head First Favorite Online Resources for CSS Design
headfirstlabs.com/books/hfhtml/chapter12/cssdesign.html
MaxDesign.com - Sample CSS Page Layout
www.maxdesign.com.au/presentation/page_layouts/
glish.com - CSS Layout Techniques for Fun and Profit
BigBaer.com - Float tutorial
www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm
Digital Web.com - Web Design 101: Floats article
lesson 5 - tables
HTML Center.com - CSS Tables Tutorial
www.htmlcenter.com/tutorials/tutorials.cfm/61/CSS/
Smashing Magazine - Top 10 CSS Table Designs
www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
TimRivera.com - Styling Tables: Simple and with Classes
lesson 6 - forms
Web Standards Project:
Accessible HTML/XHTML Forms - Beginner Level
www.webstandards.org/learn/tutorials/accessible-forms/beginner/
HVCC.edu - Web Submission Forms
academ.hvcc.edu/~kantopet/old/xhtml/index.php?page=xhtml+forms
Matt's Script Archive
(Once the Submit Button is Clicked:
Processing Scripts to Handle Form Data)
The majority of this topic, and the various examples at Matt's Script Archive, are outside the purview of this XHTML & CSS class, since it focuses on creating and using CGI scripting/programming lanugages, like Perl, which allow one to take the data entered into a form and do something with it. These processing steps are "server side" or remote, rather than "client-side" or local, because they happen remotely, at the web server level, rather than locally at the visitor's computer, inside the browser showing the page (the way XHTML and CSS work).
Many of the free scripts, and descriptions of how to install and use them, at Matt's Script Archive, don't require any knowledge of CGI/Perl -- they're completely automated ... for the form processing script called formmail, you point the action= attribute of your form tag to the script, wherever it's been uploaded, and include a handful of hidden fields in the form to provide the script with the specific data it needs to send you the contents of the form via email.
In order for these scripts to work, you need to have permission from your ISP (Internet Service Provider) to upload CGI/Perl scripts -- some ISPs allow this, others do not. For those that do not allow you to upload your own scripts, they may provide a few CGI/Perl scripts for their subscribers to use, and may have formmail, or another that is comparable to Matt's formmail script, which processes form data.
There is a formmail script at student that you can use to process your form data -- instructions are in Lesson 06 -- so no need to use Matt's formmail script while you have your student account.
The link to Matt's Archive is provided here, for any who want to be able to process their forms at other web hosting locations, and to experiment with the other scripts that Matt makes available.
Accessible Forms article at JimThatcher.com
jimthatcher.com/webcourse8.htm
A very useful article on how to make sure your forms are accessible both to those who use Screen Magnification and those who use Screen Reading software, as the issues for each are slightly different.
Accessible Forms article at Usability.com
Contains a informative description of how page reading software actually reads the code and content, and other accessibility considerations.
www.usability.com.au/resources/forms.cfm
Prettier Accessible Forms article/demo at aListApart.com
Demonstrating using list items and CSS to layout a form. A List Apart is a goldmine of resources for using CSS to do a variety of really elegant things.
lesson 7 - SSI (Server Side Includes)
Craig McFetridge's SSI Tutorial
www.carleton.ca/~dmcfet/html/ssi2.html
NCSA (National Center for Supercomputing Applications)
at University of Illinois - SSI Tutorial
hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html
BigNoseBird.com - Definitive SSI Guide
CGI-ResourceIndex.com
Variety of articles, overviews, and tutorials
