SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

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)
Bulldogs83
 
Working with External CSS
Working with External CSSWorking with External CSS
Working with External CSS
davereece
 

Was ist angesagt? (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
 

Ähnlich wie Xhtml Css Presentation

Introduction to HAML
Introduction to HAMLIntroduction to HAML
Introduction to HAML
Jon Dean
 
Class 1 handout (2) html exercises
Class 1 handout (2) html exercisesClass 1 handout (2) html exercises
Class 1 handout (2) html exercises
Erin M. Kidwell
 
Introduction to Web Design
Introduction to Web DesignIntroduction to Web Design
Introduction to Web Design
webhostingguy
 
Lecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITPLecture 6 - Comm Lab: Web @ ITP
Lecture 6 - Comm Lab: Web @ ITP
yucefmerhi
 
introduction to web technology
introduction to web technologyintroduction to web technology
introduction to web technology
vikram singh
 

Ähnlich wie 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 for Joomla!
Flash templates for Joomla!Flash templates for Joomla!
Flash templates for Joomla!
 
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
 
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
 

Kürzlich hochgeladen

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Kürzlich hochgeladen (20)

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
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
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 

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