Objectives Define the characteristics of good design. Test browsers for HTML5 and CSS3 compatibility. Define CSS and its relationship with HTML. Glance over the HTML Box model. Play with element positioning. Breakdown a design.

Welcome To My Website Search Google for “Welcome to my website” Source Code: – Code is difficult to read. – Structure and style tangled in one document. Avoid design mistakes such as: – Table-based design. – Overuse of images. – Overloading a page with information.

Browser Issues Many jobs today ask for HTML 5 experience. – As of publication, HTML 5 is not yet the standard. – Enter into any browser. What does this mean? – Many new HTML 5 structures are not implemented cross browser. Is this a problem? NO! – HTML 5 basically builds upon HTML 4.01 and depreciates many older unnecessary elements. – Building blocks of proper design from 4.01 are in HTML 5.

Browser Issues What about CSS 3? – CSS from its inception has never been implemented properly across browsers. – Enter into any browser. What does this mean? – Learning the basics will go further than implementing the newest features. – CSS 3 builds on CSS 2, making both syntactically similar.

HTML and CSS What is CSS? – Cascading Style Sheets HTML style semantics. The use separates structure from “look”. – Easier to maintain. – Easier to read. – Cascading implies falling. HTML is a tree structure.

HTML and CSS

Basic Terms Element – HTML “Tag” (DOM object) – Selector – How to reference elements within the HTML document. – #ID.class Attribute – Property of an element that can be manipulated with CSS. – border-color: font-size: background-repeat:

The Box Model

Element Positions ValueDescription staticElements renders in order, as they appear in the document flow. This is default. absoluteThe element is positioned relative to its first positioned (not static) ancestor element fixedThe element is positioned relative to the browser window relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position inheritThe value of the position property is inherited from the parent element

Breaking Down A Design