Web Standards XHTML and CSS
Today’s Show ► Discuss web standards ► XHTML ► Layout Without Tables ► CSS ► Why Web Standards?
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
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
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 (
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.”
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.)
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
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!!!
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.
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)
XHTML Code <head> <title>Company.Com</title>
XHTML Code <body>
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!
XHTML Code Company.Com Company.Com </div> <ul> News News Products Products Support Support Contact Us Contact Us </div>
XHTML Code Announcements Announcements This is where my announcements are going </div></div></div> News News Main content will go here </div></div></div>
XHTML Code Copyright © 2004 Company.Com Copyright © 2004 Company.Com </div></body></html>
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!
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
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.
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
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
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!
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 ► ►
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.
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>
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;}
CSS #webStandardsAlert{display:none;}
Layout.css #banner { display:block;clear:both; WIDTH: 800px; PADDING:0px;}
Layout.css #navigation { DISPLAY: block; clear:both;float:left; MARGIN-TOP: 5px; MARGIN-bottom: 5px; WIDTH: 800px; }
Layout.css #navigation ul { DISPLAY: block; float:left; list-style: none; MARGIN:0px 0px 0px 0px; padding: 0; }
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; }
Layout.css #sidebar { clear:both; MARGIN-TOP: 5px; DISPLAY: block; FLOAT: left; WIDTH: 195px; MARGIN-RIGHT: 5px; }
Layout.css #main { margin-right: -2px; MARGIN-top: 5px; MARGIN-bottom: 5px; DISPLAY: block; float:right; WIDTH: 590px; }
Layout.css.box{display:block;width:100%; MARGIN-BOTTOM: 10px; clear:both;}
Layout.css.box.title { PADDING: 2px; }.box.content { PADDING: 2px; width:100% }
Layout.css #footer{display:block;clear:both; margin-top: 10px; width: 800px; padding: 2px; }
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;}
Style.css #banner { BORDER: 1px solid #333333; } #banner #textbanner{ color:#ffffff;} #banner #graphicbanner{ display:none;}
Style.css #navigation { FONT-WEIGHT: bold; FONT-SIZE: 8pt; COLOR: #ffffff; }
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; }
Style.css.box{ BORDER: 1px solid #333333; BACKGROUND-COLOR: #A5A5A5; }.box.title { FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: #333333; }
Style.css a { COLOR: #FFFFFF; TEXT-DECORATION: none } a:hover { COLOR: #666666; }
Style.css #footer{ TEXT-ALIGN: center; border: 1px solid #333333; background-color: #A5A5A5; }
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
Print.css ► Coming in a later version of this presentation. Please keep checking back.
Why? ► Interoperability Standards-based browsers show the same thing on all platforms ► Easy design changes We can make design changes much faster! ►
Resources ► ► / / / ► ► ► ► ► ► ► ex.html ex.html ex.html
Questions? ► at ► Visit web at Slides will be posted.