Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Standards XHTML and CSS. Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?

Published byMia Whelpley Modified over 9 years ago

Similar presentations

Presentation on theme: "Web Standards XHTML and CSS. Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?"— Presentation transcript:

1 Web Standards XHTML and CSS

2 Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?

3 Web Standards ► What are “web standards”? ► Web Standards consist of these W3C recommendations  XHTML 1.0 or Higher  CSS Level 1 and CSS Level 2  DOM Level 1 and DOM Level 2  ECMAScript 262 (The Language formerly known as JavaScript

4 XHTML? ► XHTML is the “new” version of HTML.  It’s more strict and is an extension of XML  It has its own specifications just like HTML ► XHTML Strict ► XHTML Transitional ► XHTML Frameset

5 Converting to XHTML ► Declare the DOCTYPE  Strict vs Transitional vs Frameset ► Tag and attributes in lower case ► Attributes must have quoted values ► All tags must have an end tag ( ) ► Nest tags correctly ► Validate the page (http://validator.w3.org)

6 Layout Without Tables Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.” www.w3.org/TR/html4/struct/tables.html#h-11.1

7 Layout Without Tables ► Use the tag  Separate your page sections into regions  A is an invisible container for content ► Use Cascading Style Sheets to position your regions ► Separate your display information from your XHTML (No fonts or colors or tables for layout.)

8 Content Versus Display ► Separating display from content can be tricky  Photos are essentially content, so they can be included in the XHTML  Backgrounds are not content, and neither are colors or fonts, so they should go into the style sheet  BOLD and ITALICS emphasise the content and are often considered part of the content ► Don’t make a style just to bold words. Use ► Don’t make a style just to bold words. Use

9 Layout Without Tables (Continued) ► Separate your page into important regions  Banner area (Title, banner graphic)  Menu or navigation  Content ► Columns? Sidebar?  Footer ► DO NOT WORRY ABOUT POSITIONING YET!  You’re not doing layout in XHTML!!!

10 Layout Without Tables (Continued) ► Once your structure is defined, start thinking about the “skins” of the page ► The style sheet is your skin  You can use more than one “skin” for your page.  Because your “look and feel” is separated from your content, changing your design is easy  PDAs, phones, and even printers can have their own style sheets.

11 IDs and Classes ► Placing IDs as attributes of your elements identifies them as unique. You can use the IDs in your ECMAScript or your style sheet to manipulate the element. ► Classes are applied to elements in order to group the elements  Not unique, but similar ► Assign IDs to the “regions” of your page (layout) ► Assign CLASSES to sub-regions of your page (look and feel)

12 XHTML Code <head> <title>Company.Com</title>

13 XHTML Code <body>

14 XHTML – IMPORTANT STEP This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrad e your browser ? This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrad e your browser ?</p></div> ► We’ll hide this from the newer browsers later!

15 XHTML Code Company.Com Company.Com </div> <ul> News News Products Products Support Support Contact Us Contact Us </div>

16 XHTML Code Announcements Announcements This is where my announcements are going </div></div></div> News News Main content will go here </div></div></div>

17 XHTML Code Copyright © 2004 Company.Com Copyright © 2004 Company.Com </div></body></html>

18 Our page so far ► Not very pretty, but it is very concise and will work well for old browsers and screen readers. ► Some devices can’t read the styles and will only see this. That’s okay though because they can still read the content and navigate the site.  Instant “text-only” version!

19 Round 2: CSS Style sheets for a skinnable website: 1. Layout.CSS – simple structure 2. Style.css – colors and fonts (optional) 3. Printer Friendly CSS

20 That’s A Lot of CSS! ► This structure will  Make old browsers play along  Keeps the layout separate from the colors  Makes it easy to adjust fonts  Makes it really easy to have a “printer friendly version” without doing a lot of additional work.

21 The “Cascading” Part ► Styles are “Cascading” meaning that they can be redefined several times, either adding to the style’s properties or overriding the properties.  A.box style can have a width defined in one styleshee and a color defined in another.  A.box style can have a width defined in one styleshee and have its width redefined in another style

22 The Cascading Part (Continued) ► The style that is displayed to the user is the last style applied for that media type.box{background-color:#ffffff;}.box{background-color:#000000;} This would result in a black background

23 Stacking styles This p {color:#ffffff;} td {color:#ffffff; } td {color:#ffffff; } h1 {color:#ffffff; } h1 {color:#ffffff; } could be simplified to this: p, td, h1 {color:#ffffff; } Keeping your style small and compact will reduce download times for your users!

24 Selector Types ► ID  #banner ► # sign is used to identify an ID selector in the stylesheet only ► ► ► CLASS .box ► Period (.) is used to identify a class selector in the stylesheet only ► ►

25 Selector Types ► Redefined Elements  body ► No # or. means that you are going to redefine the characteristics of this element. ► Good for removing that annoying line break left when using the tag.

26 Using Style to Affect a Region ► #main.content a{ color:#ffffff; } ► All anchor tags within a region defined as class “contents” within a region defined as id “main” ► This ensures that only the elements in a specific section will be modified Link Link <div>

27 Layout.css body { TEXT-ALIGN: center TEXT-ALIGN: center} #page { display:block; display:block; margin:0px auto; margin:0px auto; VERTICAL-ALIGN: middle; VERTICAL-ALIGN: middle; WIDTH: 800px; WIDTH: 800px; TEXT-ALIGN: left; TEXT-ALIGN: left;}

28 CSS #webStandardsAlert{display:none;}

29 Layout.css #banner { display:block;clear:both; WIDTH: 800px; PADDING:0px;}

30 Layout.css #navigation { DISPLAY: block; clear:both;float:left; MARGIN-TOP: 5px; MARGIN-bottom: 5px; WIDTH: 800px; }

31 Layout.css #navigation ul { DISPLAY: block; float:left; list-style: none; MARGIN:0px 0px 0px 0px; padding: 0; }

32 Layout.css #navigation li { DISPLAY: block; DISPLAY: block; float:left; float:left; VERTICAL-ALIGN: middle; TEXT-ALIGN: center; width:98px; width:98px;margin-right:2px;} #navigation li a { DISPLAY: block; }

33 Layout.css #sidebar { clear:both; MARGIN-TOP: 5px; DISPLAY: block; FLOAT: left; WIDTH: 195px; MARGIN-RIGHT: 5px; }

34 Layout.css #main { margin-right: -2px; MARGIN-top: 5px; MARGIN-bottom: 5px; DISPLAY: block; float:right; WIDTH: 590px; }

35 Layout.css.box{display:block;width:100%; MARGIN-BOTTOM: 10px; clear:both;}

36 Layout.css.box.title { PADDING: 2px; }.box.content { PADDING: 2px; width:100% }

37 Layout.css #footer{display:block;clear:both; margin-top: 10px; width: 800px; padding: 2px; }

38 Style.css body { FONT-SIZE: 10pt; FONT-SIZE: 10pt; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #8B8B8B; BACKGROUND-COLOR: #8B8B8B;}

39 Style.css #banner { BORDER: 1px solid #333333; } #banner #textbanner{ color:#ffffff;} #banner #graphicbanner{ display:none;}

40 Style.css #navigation { FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #ffffff; }

41 Style.css #navigation li a { FONT-WEIGHT: bold; COLOR: #FFFFFF; BACKGROUND-COLOR: #333333; TEXT-ALIGN: center; TEXT-DECORATION: none; border: 1px solid #ffffff; } #navigation ul li a:hover { COLOR: #cccccc; BACKGROUND-COLOR: #666666; }

42 Style.css.box{ BORDER: 1px solid #333333; BACKGROUND-COLOR: #A5A5A5; }.box.title { FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #333333; }

43 Style.css a { COLOR: #FFFFFF; TEXT-DECORATION: none } a:hover { COLOR: #666666; }

44 Style.css #footer{ TEXT-ALIGN: center; border: 1px solid #333333; background-color: #A5A5A5; }

45 Why Are We Doing This? ► Separating layout from content  Makes pages more accessible ► Text-only ► PDA ► Printer-friendly  Makes download times smaller ► Large bandwidth reduction because CSS is cached ► We can now use more graphics

46 Print.css ► Coming in a later version of this presentation. Please keep checking back.

47 Why? ► Interoperability  Standards-based browsers show the same thing on all platforms ► Easy design changes  We can make design changes much faster! ► http://www.csszengarden.com/ http://www.csszengarden.com/

48 Resources ► http://glish.com/css/ http://glish.com/css/ ► http://www.mezzoblue.com/zengarden/resources / http://www.mezzoblue.com/zengarden/resources / http://www.mezzoblue.com/zengarden/resources / ► http://www.meyerweb.com/ http://www.meyerweb.com/ ► http://www.alistapart.com/ http://www.alistapart.com/ ► http://www.zeldman.com/dwws/ http://www.zeldman.com/dwws/ ► http://www.w3.org/TR/xhtml1/ http://www.w3.org/TR/xhtml1/ ► http://www.w3.org/Style/CSS/ http://www.w3.org/Style/CSS/ ► http://www.mozilla.org/products/firefox/ http://www.mozilla.org/products/firefox/ ► http://www.westciv.com/style_master/house/ind ex.html http://www.westciv.com/style_master/house/ind ex.html http://www.westciv.com/style_master/house/ind ex.html

49 Questions? ► Email at hoganbp@uwec.edu hoganbp@uwec.edu ► Visit web at http://www.bphogan.com/ http://www.bphogan.com/  Slides will be posted.

Download ppt "Web Standards XHTML and CSS. Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?"

Similar presentations

Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.

Copyright © 2003 Pearson Education, Inc. Slide 3-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.
Slice and Dice: From PSD Image to XHTML+CSS Svetlin Nakov Telerik Corporation www.telerik.com.

Slice and Dice: From PSD Image to XHTML+CSS Svetlin Nakov Telerik Corporation
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets

Cascading Style Sheets
Cascading Style Sheets

Cascading Style Sheets
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.
CSS Digital Media: Communication and design 2007.

CSS Digital Media: Communication and design 2007.
Today CSS HTML A project.

Today CSS HTML A project.
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.

CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.

Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Introduction to CSS.

Introduction to CSS.
Very quick intro HTML and CSS. Sample html A Web Title.

Very quick intro HTML and CSS. Sample html A Web Title.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.

Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.

Similar presentations

Ads by Google