W3C Web Standards Effective use of CSS / HTML

W3C Web Standards

Effective use of CSS / HTML

1http://kb.nextbridge.org

* Ignore Spell mistakes as its Created by IT Professional for IT Professionals

Training Agenda

• W3C Standards– Benefits– Includes– Implementation– Considerations– Conclusion

• Effective usage of CSS• HTML Tips (Food for thought)


W3C Standards Adavantages

• Standards compliant Web sites Advantages– Lower your development and maintenance efforts– Compatible– Loads fast– Save bandwidth– Accessible– Better SEO– Easier to modify– Scalable & Re-useable


Compatibility

• Backward compatibility: Render properly on old devices, browsers etc...

• Forward compatibility: Will render properly on future devices, browsers, etc...

• Render properly on all Platforms: IBM, Linux, Apple ...

• browsers: Internet Explorer, Netscape, FireFox, Safari, Opera ...

• Devices: PDA's, mobile phones ...


Website when rendered on Mozilla Firefox


Website when rendered on Internet Explorer


What is the solution ?• Set a browser detection script and serve a different file for every browser.

Which requires Designing a different page that renders properly on every browser.

• Use CSS Hacks to identify the browser– Conditional Comments– – 

– Condition is one of the following:– IE (Any version of IE)– lt IE version “ < “ (Versions less than version)– lte IE version “ <= “ (Versions less than or equal to version)– IE version (Only version)– gte IE version “ >= “ (Versions greater than or equal to version)– gt IE version “ > “ (Versions greater than version)

• Stylegala- No More CSS Hacks• Many more CSS Hacks• Use Standards compliant pages with a proper Doctype. 7http://kb.nextbridge.org

DocType• Every web page should contain a "Doctype", Doctype (short for

"document type declaration") informs the browser which version of HTML / XHTML you're using.

• Some doctypes• HTML 4.01 Strict• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">• HTML 4.01 Transitional• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">• HTML 4.01 Frameset• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

http://www.w3.org/TR/html4/frameset.dtd">• XHTML 1.0 Strict• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">• XHTML 1.0 Transitional• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">• XHTML 1.1• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


http://www.w3.org/TR/html4/strict.dtd

http://www.w3.org/TR/html4/loose.dtd

http://www.w3.org/TR/html4/frameset.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

Advantages of DocType

• Web browsers render a web page according to it's Doctype.

• Standards compliant web sites should render the same on all browsers, Un-like a web page that doesn't contain a doctype it's rendered differently on every browser.


Loads fast• Standards compliant web site is more than half file size• Due to smaller files sizes

– Therefor it loads twice as fast– And save more than half the bandwidth– Bandwidth: The amount of data downloaded from a

server.

Use in Repetition

Home

Home

Non Complaint

Complaint


Accessible

• Accessible for blind persons– Images (ALT) – Using Screen Reader

• Accessible for motor skill impaired– Access key for navigation links– Logical tab index for buttons and forms


Compatible with more browsers and platforms

• Overall, 5 different rendering engines are used to surf the web in dozens of browsers on 3 platforms.

• More and more browsers, other than Internet Explorer for Windows, are used to surf the web.– Windows : MSIE, Netscape Gecko, Opera.– Mac: MS-Tasman (IE/Mac) , Netscape Gecko, KHTML, Opera– Linux: Netscape Gecko, KHTML, Opera

• Coding to standards (instead one or two specific browsers) is then the only practical solution.


Usage of CSS

• Rather than defining the styles in code use a standard CSS separate file containing all the styles of an application.

• Getting rid of the painful mix of content and presentation by separating them.

• It is possible to update style sheets (and change the layout on all pages) without updating the documents.– Concept of theming AND/OR Template.

• Use Strict HTML and CSS to enforce the separation.• “CSS has made it possible to transform table-based layouts into

Div Based layouts. Typically this reduces page size by 25 to 50%“.• Avoid Replication of Styles.• Use Dependencies where it is needed.



Parts of a File



W3 Requires

• W3C stated that Tables shouldn't be used for forming web site layouts, it should only be used for data table, calendar, etc...

• A standards compliant web site shouldn't use table based layouts, it should use Pure CSS layouts instead.

• To make sure that your Markup complies the Standards your web pages should pass the W3C Markup validator.– http://validator.w3.org/

• To make sure that your CSS complies the Standards your web pages should pass the W3C CSS validator.– http://jigsaw.w3.org/css-validator/


http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Conclusion

• Using standards today means– Reducing efforts of development and management of content – Reaching a wider audience (wider compatibility with browsers,

accessibility, better ranking in search engines)– Compliance with accessibility law

• Tomorrow– Reduced hazards for upcoming developers.– Reduced cost of maintenance– Flexibility of presentation, including non-PC devices– A door open to XML technologies and benefits


Effective use of CSS3

• Using CSS for special effects on text makes one’s web site much easier to design the elements.– p { text-shadow: 1px 1px 1px #000; } Shadow your text

– text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; Multiple Shadows using Commas


Effective use of CSS3• Make the corners round

– #example1 { border-radius: 15px; }

– border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

– Examples• border-top-left-radius: 10px 5px;• border-bottom-right-radius: 10% 5%;• border-top-right-radius: 10px;


• -moz-border-radius: 150px; /* for firefox */ • -webkit-border-radius: 150px; /* for webkit browsers:

• More• Apply gradient using CSS3• Even design smiles and shapes using CSS3

Effective use of CSS3


Creating Smiley using CSS3

• Create div with max radius and within big div• Using more divs and there coordinates put mouth line• Even use the divs with radius to put more on smiley


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>Animation</title><link rel="stylesheet" href="style.css" type="text/css" media="all">

</head>

<body>

<div id="content"><div class="head head-one block relative">

<div class="eye left block absolute"></div><div class="eye right block absolute"></div><div class="pupil pupil-left block absolute"></div><div class="pupil pupil-right block absolute"></div><div class="mouth block absolute"></div>

</div>

<div class="head head-two block relative"><div class="eye left block absolute"></div><div class="eye right block absolute"></div><div class="pupil pupil-left block absolute"></div><div class="pupil pupil-right block absolute"></div><div class="mouth block absolute"></div><div class="tongue block absolute"></div>

</div>

</div>

</body></html> http://kb.nextbridge.org 24

Smiley Implementation(HTML)

#content{

width: 700px;margin: 0 auto;

}

.block{

display: block;}

.relative{

position: relative;}

.absolute{

position: absolute;}

.head{

background: yellow;display: block;border: 1px solid #000;border-radius: 150px;-moz-border-radius: 150px; /* for firefox */-webkit-border-radius: 150px; /* for webkit browsers: safari, chrome */height: 300px;margin: 0 auto;width: 300px;float: left;

}

http://kb.nextbridge.org 25

Smiley Implementation(CSS)

.head-two{

margin-left: 10px;}

.eye{

border: 2px solid #000;background: #fff;border-radius: 40px;-moz-border-radius: 40px;-webkit-border-radius: 40px;height: 80px;top: 83px;width: 80px;

}

.left{

left: 50px;}

.right{

right: 50px;}

.pupil{

background: #000;border-radius: 13px;-moz-border-radius: 13px;-webkit-border-radius: 13px;height: 26px;top: 114px;width: 26px;

}



.pupil-left{

left: 80px;}

.pupil-right{

right: 80px;}.mouth{

background: #000;height: 8px;top: 203px;left: 66px;width: 171px;transform: rotate(-15deg);-moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);

}.head-two .mouth{

transform: none;-moz-transform: none;-webkit-transform: none;

}

.tongue{

background: red;border-radius: 0 0 22px 22px;-moz-border-radius: 0 0 22px 22px;-webkit-border-radius: 0 0 22px 22px;height: 45px;top: 203px;left: 186px;width: 45px;

}



Useful for HTML (Food for Thought)

• Use <th> for headings in table.• For RIGHT TO LEFT language scripts Add dir="rtl" to

the html• Use <h1> for major headings• Web Page title should be appropriate with content.

Better to make it dynamic• Call header, footer, content, side bars separately.• Use less flash content for better SEO.


dd_roundies (Just for Knowledge)

• Javascript library used for creation of rounded-corner HTML boxes easier for IE

• It helps for creating rounded corners which is a very hectic task for developers while they are working in IE

• Uses Microsoft's implementation of VML for Internet Explorer.

• For other browsers, this adds simple border-radius styles to the document


dd_roundies (Just for Knowledge)

• <script src="DD_roundies.js"></script><script> DD_roundies.addRule('.nameofclass', '5px', true);</script>

• addRule can take up to three arguments: (REQUIRED) A text string representing a CSS selector

• (REQUIRED) A text string representing a border radius or radii (anywhere from 1 to 4, separated by commas)

• (OPTIONAL) A boolean indicating whether or not you want to make roundies just in IE (set to false), or attempt to make roundies in "all" browsers (set to true).

• For more information:• http://www.dillerdesign.com/experiment/DD_roundies/


Credits

• Training Head– Wajhe Muhammad

• Training Managers– Fahad Shakeel– Nazar Hussain

• Coordinator– Tehseen

• Presenter– Fahad Shakeel

Thank You

31

This Training is available at

http://kb.nextbridge.org

http://kb.nextbridge.org

W3C Web Standards Effective use of CSS / HTML

Documents