Class 2-5

Web Hosting

As a professional or hobbyist web developer you will need your own hosting service and domain. See a page describing some web hosting choices.

 

Final Project - Requirements

1. All pages must pass HTML and CSS Validation
   Review: Use toolbars OR validate css or validate html directly
2. Demonstrate that you have a template on which your submitted code is built. Extra credit: have more than one layout in the same template “family”
   Review: Customizing a Dreamweaver template
3. Have a site with navigation menu and at least two pages based on this template. Extra credit – include some multimedia or jquery effect.
   Review: Include files for shared content
4. Have a third page that contains a working form that returns email responses to you. This form and the associated thank you page should also be based on the template.
   Review: Email Form Instructions
5. The form should be validated with some simple javascript. Extra credit: validate the form so that only people can submit it – using this simple math function or a captcha image.
6. Extra credit – beauty, utility, completeness. The assignment is for the rudiments of a maintainable site. Extra credit is for this site to be complete – interesting or useful and attractive to behold. Something ready for a real audience!

Validation: clarification

The "strict" DOCTYPE we are using prohibits you from doing certain things, such as "target=" on links. The validator will also fail you for things like having javascript in your header - which is perfectly legal, just not understood by the validator. So when I require that you pass HTML and CSS validation, I actually require that you either pass it or explain why you are not passing it and producing an argument that what the validator is complaining about is intentional and a reasonable solution.

Question Period; Review

Take Away: What to Remember

1. Semantic HTML or "if it acts like a list, call it a list". Use the html markup tags that describe how the content ACTS, not how it LOOKS - and then modify the look with CSS. Semantic HTML degrades nicely when CSS is not available, upgrades nicely in new versions of HTML/CSS, and generally acts in a particular, predictable way and MAKES SENSE.
2. CSS adjusts the Look. This does mean that in your HTML you may need to put classes and IDs to define which types of things are to be treated in a special way, but CSS will define what that special way is.
   HTML=CONTENT and CSS=STYLE.
   

   What is the difference between HTML and CSS

   	HTML	CSS
   Usage / Purpose	For content and meaning; the words and images on your site	For style; the colors and placement and spacing and look of your site
   Tag / Selector	<tag>......</tag>	tag {} or . {} etc
   Attribute / Property	href=	width:
   Setting Values	"value"	10px;
   filename	.htm or .html or .shtml	.css

3. Review the ways you can tell the CSS which elements you're styling by the major kinds of selectors: review selectors here
   1. html elements - just use the tag name like p{} or li{} or ul{}
   2. named elements - if the html has class="classname" then your CSS has .classname {}, if it has id="idname" then there can ONLY be one of them on the page and the css has #classname {}
   3. Context (" " or ">" or "+" or ":") look these up when you need them.
4. The Box Model. Why doesn't it fit? When you need to know how much horizontal room something takes up, calculate it this way: width + L border + R border + margins (left + right) + paddings (left + right) . So if your container has 500 pixels, and your width is 500, you have no room for border, margins and paddings. Make the width smaller to accomodate the border, margins and paddings.

Review of Class Projects

Assessments