SlideShare a Scribd company logo
1 of 8
XHTML/CSS: The Basics Best practices for standards oriented front end development
HTML vs. XHTML They are slightly different.  Write XHTML, the end. Element and attribute names must be lower case, attribute values must be quoted. Never skip closing tags, this happens a lot. <br /> <hr /> <img src=”#” />  Name attribute is now “id”
Head Content Doctype, Title Tag.  Don't forget these! Use conditional statements because IE6 is the Devil, so learn to hate it. Write CSS for Firefox and Safari. Add CSS for bad browsers (that's you, IE6).
Conditional Statements “Browser Hack”   <!--[if IE 6]>  link to another css sheet here  <![endif]-->   <!--[if IE 7]>  link to another css sheet here  <![endif]-->
How I Start A Project Application.css  IE6_only.css  IE7_only.css  Reset.css  McKinsey CSS/HTML  fix_png.js
Don't Write Crappy Code XHTML Transitional  Empty tags == bad  <br /> are crap, use margins  Use inline and block elements for their intended purpose  Poorly structured markup, bad layout decisions. Write as little markup as possible!
Tables are OK <table>  <thead>  <tr>  <th>Table Header</th>  </tr>  </thead>  <tbody>  <tr>  <td>Table Cell</td>  </tr>  </tbody>  <tfoot>  <tr>  <td>Table Cell</td>  </tr>  </tfoot>  </table> Proper Table Structure
Xhtml Css Presentation

More Related Content

What's hot

What's hot (19)

1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
Fundamentals Of Html
Fundamentals Of HtmlFundamentals Of Html
Fundamentals Of Html
 
You and Your Stylesheet
You and Your StylesheetYou and Your Stylesheet
You and Your Stylesheet
 
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
Technical SEO for international markets- Leonie Mann - Brighton SEO 2021Technical SEO for international markets- Leonie Mann - Brighton SEO 2021
Technical SEO for international markets - Leonie Mann - Brighton SEO 2021
 
Html
HtmlHtml
Html
 
HTML Basics for SEO
HTML Basics for SEOHTML Basics for SEO
HTML Basics for SEO
 
Html5 accessibility
Html5 accessibilityHtml5 accessibility
Html5 accessibility
 
YL basic tag
YL basic tagYL basic tag
YL basic tag
 
Html Css Mistakes
Html Css MistakesHtml Css Mistakes
Html Css Mistakes
 
New HTML5/CSS3 techniques
New HTML5/CSS3 techniquesNew HTML5/CSS3 techniques
New HTML5/CSS3 techniques
 
Javascript
JavascriptJavascript
Javascript
 
Html5: What is it?
Html5: What is it? Html5: What is it?
Html5: What is it?
 
CSS
CSSCSS
CSS
 
Html basics
Html basicsHtml basics
Html basics
 
WordPress SEO & Optimisation
WordPress SEO & OptimisationWordPress SEO & Optimisation
WordPress SEO & Optimisation
 
Working with External CSS
Working with External CSSWorking with External CSS
Working with External CSS
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
10 Email Etc
10 Email Etc10 Email Etc
10 Email Etc
 
WhiteHat SEO for Blog Owner
WhiteHat SEO for Blog OwnerWhiteHat SEO for Blog Owner
WhiteHat SEO for Blog Owner
 

Similar to Xhtml Css Presentation

Similar to Xhtml Css Presentation (20)

Introduction to HAML
Introduction to HAMLIntroduction to HAML
Introduction to HAML
 
Class 1 handout (2) html exercises
Class 1 handout (2) html exercisesClass 1 handout (2) html exercises
Class 1 handout (2) html exercises
 
CSS Best practices
CSS Best practicesCSS Best practices
CSS Best practices
 
Html in a box
Html in a boxHtml in a box
Html in a box
 
Diva
DivaDiva
Diva
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
Html
HtmlHtml
Html
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
 
Css
CssCss
Css
 
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITPLecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
 
KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7KMUTNB - Internet Programming 3/7
KMUTNB - Internet Programming 3/7
 
Flash Templates- Joomla!Days NL 2009 #jd09nl
Flash Templates- Joomla!Days NL 2009 #jd09nlFlash Templates- Joomla!Days NL 2009 #jd09nl
Flash Templates- Joomla!Days NL 2009 #jd09nl
 
Flash templates for Joomla!
Flash templates for Joomla!Flash templates for Joomla!
Flash templates for Joomla!
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
 
Html ppt
Html pptHtml ppt
Html ppt
 
Semantics & the Mobile Web
Semantics & the Mobile WebSemantics & the Mobile Web
Semantics & the Mobile Web
 
APEX Themes and Templates
APEX Themes and TemplatesAPEX Themes and Templates
APEX Themes and Templates
 
Html
HtmlHtml
Html
 
Lecture1 B Frames&Forms
Lecture1 B  Frames&FormsLecture1 B  Frames&Forms
Lecture1 B Frames&Forms
 

Recently uploaded

Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 

Recently uploaded (20)

Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 

Xhtml Css Presentation

  • 1. XHTML/CSS: The Basics Best practices for standards oriented front end development
  • 2. HTML vs. XHTML They are slightly different. Write XHTML, the end. Element and attribute names must be lower case, attribute values must be quoted. Never skip closing tags, this happens a lot. <br /> <hr /> <img src=”#” /> Name attribute is now “id”
  • 3. Head Content Doctype, Title Tag. Don't forget these! Use conditional statements because IE6 is the Devil, so learn to hate it. Write CSS for Firefox and Safari. Add CSS for bad browsers (that's you, IE6).
  • 4. Conditional Statements “Browser Hack” <!--[if IE 6]> link to another css sheet here <![endif]--> <!--[if IE 7]> link to another css sheet here <![endif]-->
  • 5. How I Start A Project Application.css IE6_only.css IE7_only.css Reset.css McKinsey CSS/HTML fix_png.js
  • 6. Don't Write Crappy Code XHTML Transitional Empty tags == bad <br /> are crap, use margins Use inline and block elements for their intended purpose Poorly structured markup, bad layout decisions. Write as little markup as possible!
  • 7. Tables are OK <table> <thead> <tr> <th>Table Header</th> </tr> </thead> <tbody> <tr> <td>Table Cell</td> </tr> </tbody> <tfoot> <tr> <td>Table Cell</td> </tr> </tfoot> </table> Proper Table Structure