1 / 11

Objectives

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.

brad
Download Presentation

Objectives

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

  2. 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.

  3. Browser Issues • Many jobs today ask for HTML 5 experience. • As of publication, HTML 5 is not yet the standard. • Enter http://html5test.com/ 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.

  4. Browser Issues • What about CSS 3? • CSS from its inception has never been implemented properly across browsers. • Enter http://css3test.com/ 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.

  5. 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.

  6. HTML and CSS

  7. Basic Terms • Element – HTML “Tag” (DOM object) • <body> <div> <span> • 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:

  8. The Box Model

  9. Element Positions

  10. Breaking Down A Design

More Related