SlideShare a Scribd company logo
1 of 16
CSS & HTML Coding Today Presented by: Ted Ulle  (tedster) Administrator – WebmasterWorld  Senior Search Analyst – Converseon Senior Editor – Search Engine Marketing Journal
This is the #1 Cutting Edge Approach Top Secret It Will Give You a Major Advantage AND ALMOST NO ONE DOES IT !
Speed  development You Will… Send clear signals to the   search engines Reduce  maintenance time Have Tons More Time to Work on CORE BUSINESS TASKS
RTFM!
HT M L M stands for MARK-UP
The  DOCUMENT is assumed to be The  FOUNDATION NOT! the visible display
Semantic Meaning vs. Visual Rendering ,[object Object],[object Object]
The Goal: Lean & Mean HTML <div id=“content”> <h1> Modulation Rules </h1> <p> System-wide iteration engenders economies of scale, cross-media technology and life cycle replication. <img src=“url.jpg” class=“fl”></p> <p> Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms. Incidental re-sizing staff requirements through attrition can be accelerated by paradigm shifts and a focus on cross-training. </p> <ol> <li> Marketing teams input produce cross purposing </li> <li> Goals misalign due to knowledge paucity </li><ol> <p class=“c b”> Conceptualizing random endpoints in an access matrix provides reach extensions enterprise wide. Respective divisions historically insignificant, upscale trend lines in a management inventory analysis survivability format. </p> </div>
Under-used CSS Common elements deserve their own default style rules! Not this:  <h1 class=“topheader”><span style=“font-weight:normal;  text-align:center;”> text </span></h1> But this: <h1> text </h1> Put your rules for h1, p, li etc, in the external CSS file
Multiple class declarations with a space separator <p class=“c no sm lg”> Under-used CSS What’s the big deal?
CSS Toolkit .c {text-align:center;} .r {text-align:right;} .s {font-size:10px;} .in {margin:0 0 0 30px;} ,[object Object],[object Object],[object Object],<p   class=&quot;r s&quot; > Laurie Lipsum </p>
Under-used CSS line-height ,[object Object],[object Object],[object Object],[object Object],sup {line-height:0}
Abused CSS Hidden Anchors Don’t let aesthetics hurt communication Removing underscores? Then use redundant link cues: Color / Background-color Font variations Hover behaviour Links are the CORE of the web – Keep your visitors in touch
<span> Should be extremely rare Often exposes weak CSS planning Should change only PART of a larger containing element A major culprit in code bloat Abused CSS
H1, H2 etc Semantic meaning - not for presentation!  <h2>Buy Now and Save</h2> Use an “imitation” class for the H2 look Abused CSS
RTFM!

More Related Content

Similar to css_and_html_coding_today-ted_ulle.ppt

Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introductionapnwebdev
 
The Ulta-Handy HTML Guide
The Ulta-Handy HTML GuideThe Ulta-Handy HTML Guide
The Ulta-Handy HTML Guidejsved
 
XHTML and CSS
XHTML and CSS XHTML and CSS
XHTML and CSS peak3
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 todaythebeebs
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
HTML5 - One spec to rule them all
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them allStu King
 
Presentation Moss 2007 Usman
Presentation Moss 2007 UsmanPresentation Moss 2007 Usman
Presentation Moss 2007 UsmanUsman Zafar Malik
 
Web Design for Literary Theorists II: Overview of CSS (v 1.0)
Web Design for Literary Theorists II: Overview of CSS (v 1.0)Web Design for Literary Theorists II: Overview of CSS (v 1.0)
Web Design for Literary Theorists II: Overview of CSS (v 1.0)Patrick Mooney
 
Semantics & the Mobile Web
Semantics & the Mobile WebSemantics & the Mobile Web
Semantics & the Mobile Websurferroop
 
Successful Teams follow Standards
Successful Teams follow StandardsSuccessful Teams follow Standards
Successful Teams follow StandardsChristian Heilmann
 
Font End Development + Automation with Django
Font End Development + Automation with DjangoFont End Development + Automation with Django
Font End Development + Automation with DjangoEvan Reiser
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web DesigningLeslie Steele
 

Similar to css_and_html_coding_today-ted_ulle.ppt (20)

Michael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentationMichael(tm) Smith ED09 presentation
Michael(tm) Smith ED09 presentation
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
The Ulta-Handy HTML Guide
The Ulta-Handy HTML GuideThe Ulta-Handy HTML Guide
The Ulta-Handy HTML Guide
 
XHTML and CSS
XHTML and CSS XHTML and CSS
XHTML and CSS
 
Using HTML5 and CSS3 today
Using HTML5 and CSS3 todayUsing HTML5 and CSS3 today
Using HTML5 and CSS3 today
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
CSS
CSSCSS
CSS
 
HTML5 - One spec to rule them all
HTML5 - One spec to rule them allHTML5 - One spec to rule them all
HTML5 - One spec to rule them all
 
Presentation Moss 2007 Usman
Presentation Moss 2007 UsmanPresentation Moss 2007 Usman
Presentation Moss 2007 Usman
 
Web Design for Literary Theorists II: Overview of CSS (v 1.0)
Web Design for Literary Theorists II: Overview of CSS (v 1.0)Web Design for Literary Theorists II: Overview of CSS (v 1.0)
Web Design for Literary Theorists II: Overview of CSS (v 1.0)
 
Semantics & the Mobile Web
Semantics & the Mobile WebSemantics & the Mobile Web
Semantics & the Mobile Web
 
Week3 css
Week3 cssWeek3 css
Week3 css
 
Successful Teams follow Standards
Successful Teams follow StandardsSuccessful Teams follow Standards
Successful Teams follow Standards
 
Css
CssCss
Css
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Vijay it 2 year
Vijay it 2 yearVijay it 2 year
Vijay it 2 year
 
Developing with HTML5
Developing with HTML5Developing with HTML5
Developing with HTML5
 
Rendering The Fat
Rendering The FatRendering The Fat
Rendering The Fat
 
Font End Development + Automation with Django
Font End Development + Automation with DjangoFont End Development + Automation with Django
Font End Development + Automation with Django
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
 

More from zachbrowne

Understanding the Complex Socia-Cameron Olthuis.ppt
Understanding the Complex Socia-Cameron Olthuis.pptUnderstanding the Complex Socia-Cameron Olthuis.ppt
Understanding the Complex Socia-Cameron Olthuis.pptzachbrowne
 
Twenty Six Steps Revisited.ppt
Twenty Six Steps Revisited.pptTwenty Six Steps Revisited.ppt
Twenty Six Steps Revisited.pptzachbrowne
 
Top Secret Tools of the Trade Rand Fishkin.ppt
Top Secret Tools of the Trade Rand Fishkin.pptTop Secret Tools of the Trade Rand Fishkin.ppt
Top Secret Tools of the Trade Rand Fishkin.pptzachbrowne
 
the_wonderful_world_of_widgets-will_price.ppt
the_wonderful_world_of_widgets-will_price.pptthe_wonderful_world_of_widgets-will_price.ppt
the_wonderful_world_of_widgets-will_price.pptzachbrowne
 
the_wonderful_world_of_widgets-lawrence_coburn.ppt
the_wonderful_world_of_widgets-lawrence_coburn.pptthe_wonderful_world_of_widgets-lawrence_coburn.ppt
the_wonderful_world_of_widgets-lawrence_coburn.pptzachbrowne
 
the_secret_life_of_on_site_search_exposed-marc_cull.ppt
the_secret_life_of_on_site_search_exposed-marc_cull.pptthe_secret_life_of_on_site_search_exposed-marc_cull.ppt
the_secret_life_of_on_site_search_exposed-marc_cull.pptzachbrowne
 
taking_your_analytics_data_beyon-geoff_mack.ppt
taking_your_analytics_data_beyon-geoff_mack.ppttaking_your_analytics_data_beyon-geoff_mack.ppt
taking_your_analytics_data_beyon-geoff_mack.pptzachbrowne
 
taking_your_analytics_data_beyon-davide_leigh.ppt
taking_your_analytics_data_beyon-davide_leigh.ppttaking_your_analytics_data_beyon-davide_leigh.ppt
taking_your_analytics_data_beyon-davide_leigh.pptzachbrowne
 
taking_your_analytics_data_-shuman_ghosemajumder.ppt
taking_your_analytics_data_-shuman_ghosemajumder.ppttaking_your_analytics_data_-shuman_ghosemajumder.ppt
taking_your_analytics_data_-shuman_ghosemajumder.pptzachbrowne
 
tag_you_are_it_how_to_leverage_you-dan_zarrella.ppt
tag_you_are_it_how_to_leverage_you-dan_zarrella.ppttag_you_are_it_how_to_leverage_you-dan_zarrella.ppt
tag_you_are_it_how_to_leverage_you-dan_zarrella.pptzachbrowne
 
tag_you_are_it_how_to_leverag-geoff_livingston.ppt
tag_you_are_it_how_to_leverag-geoff_livingston.ppttag_you_are_it_how_to_leverag-geoff_livingston.ppt
tag_you_are_it_how_to_leverag-geoff_livingston.pptzachbrowne
 
social_media_the_big_sexy_buzz-kent_schoen.ppt
social_media_the_big_sexy_buzz-kent_schoen.pptsocial_media_the_big_sexy_buzz-kent_schoen.ppt
social_media_the_big_sexy_buzz-kent_schoen.pptzachbrowne
 
social_media_the_big_sexy_buzz-guillaume_bouchard.ppt
social_media_the_big_sexy_buzz-guillaume_bouchard.pptsocial_media_the_big_sexy_buzz-guillaume_bouchard.ppt
social_media_the_big_sexy_buzz-guillaume_bouchard.pptzachbrowne
 
seo_design_and_organic_site_structure-mark_jackson.ppt
seo_design_and_organic_site_structure-mark_jackson.pptseo_design_and_organic_site_structure-mark_jackson.ppt
seo_design_and_organic_site_structure-mark_jackson.pptzachbrowne
 
seo_design_and_organic_site_structure-alan_knecht.ppt
seo_design_and_organic_site_structure-alan_knecht.pptseo_design_and_organic_site_structure-alan_knecht.ppt
seo_design_and_organic_site_structure-alan_knecht.pptzachbrowne
 
seo_design_and_organic-lyndsay_walker_blahut.ppt
seo_design_and_organic-lyndsay_walker_blahut.pptseo_design_and_organic-lyndsay_walker_blahut.ppt
seo_design_and_organic-lyndsay_walker_blahut.pptzachbrowne
 
seo_and_big_search-maile_ohye.ppt
seo_and_big_search-maile_ohye.pptseo_and_big_search-maile_ohye.ppt
seo_and_big_search-maile_ohye.pptzachbrowne
 
seo_and_big_search-david_roth.ppt
seo_and_big_search-david_roth.pptseo_and_big_search-david_roth.ppt
seo_and_big_search-david_roth.pptzachbrowne
 
reputation_monitoring_and_management-andy_beal.ppt
reputation_monitoring_and_management-andy_beal.pptreputation_monitoring_and_management-andy_beal.ppt
reputation_monitoring_and_management-andy_beal.pptzachbrowne
 
reputation_monitoring_and_managememt-jessica_berlin.ppt
reputation_monitoring_and_managememt-jessica_berlin.pptreputation_monitoring_and_managememt-jessica_berlin.ppt
reputation_monitoring_and_managememt-jessica_berlin.pptzachbrowne
 

More from zachbrowne (20)

Understanding the Complex Socia-Cameron Olthuis.ppt
Understanding the Complex Socia-Cameron Olthuis.pptUnderstanding the Complex Socia-Cameron Olthuis.ppt
Understanding the Complex Socia-Cameron Olthuis.ppt
 
Twenty Six Steps Revisited.ppt
Twenty Six Steps Revisited.pptTwenty Six Steps Revisited.ppt
Twenty Six Steps Revisited.ppt
 
Top Secret Tools of the Trade Rand Fishkin.ppt
Top Secret Tools of the Trade Rand Fishkin.pptTop Secret Tools of the Trade Rand Fishkin.ppt
Top Secret Tools of the Trade Rand Fishkin.ppt
 
the_wonderful_world_of_widgets-will_price.ppt
the_wonderful_world_of_widgets-will_price.pptthe_wonderful_world_of_widgets-will_price.ppt
the_wonderful_world_of_widgets-will_price.ppt
 
the_wonderful_world_of_widgets-lawrence_coburn.ppt
the_wonderful_world_of_widgets-lawrence_coburn.pptthe_wonderful_world_of_widgets-lawrence_coburn.ppt
the_wonderful_world_of_widgets-lawrence_coburn.ppt
 
the_secret_life_of_on_site_search_exposed-marc_cull.ppt
the_secret_life_of_on_site_search_exposed-marc_cull.pptthe_secret_life_of_on_site_search_exposed-marc_cull.ppt
the_secret_life_of_on_site_search_exposed-marc_cull.ppt
 
taking_your_analytics_data_beyon-geoff_mack.ppt
taking_your_analytics_data_beyon-geoff_mack.ppttaking_your_analytics_data_beyon-geoff_mack.ppt
taking_your_analytics_data_beyon-geoff_mack.ppt
 
taking_your_analytics_data_beyon-davide_leigh.ppt
taking_your_analytics_data_beyon-davide_leigh.ppttaking_your_analytics_data_beyon-davide_leigh.ppt
taking_your_analytics_data_beyon-davide_leigh.ppt
 
taking_your_analytics_data_-shuman_ghosemajumder.ppt
taking_your_analytics_data_-shuman_ghosemajumder.ppttaking_your_analytics_data_-shuman_ghosemajumder.ppt
taking_your_analytics_data_-shuman_ghosemajumder.ppt
 
tag_you_are_it_how_to_leverage_you-dan_zarrella.ppt
tag_you_are_it_how_to_leverage_you-dan_zarrella.ppttag_you_are_it_how_to_leverage_you-dan_zarrella.ppt
tag_you_are_it_how_to_leverage_you-dan_zarrella.ppt
 
tag_you_are_it_how_to_leverag-geoff_livingston.ppt
tag_you_are_it_how_to_leverag-geoff_livingston.ppttag_you_are_it_how_to_leverag-geoff_livingston.ppt
tag_you_are_it_how_to_leverag-geoff_livingston.ppt
 
social_media_the_big_sexy_buzz-kent_schoen.ppt
social_media_the_big_sexy_buzz-kent_schoen.pptsocial_media_the_big_sexy_buzz-kent_schoen.ppt
social_media_the_big_sexy_buzz-kent_schoen.ppt
 
social_media_the_big_sexy_buzz-guillaume_bouchard.ppt
social_media_the_big_sexy_buzz-guillaume_bouchard.pptsocial_media_the_big_sexy_buzz-guillaume_bouchard.ppt
social_media_the_big_sexy_buzz-guillaume_bouchard.ppt
 
seo_design_and_organic_site_structure-mark_jackson.ppt
seo_design_and_organic_site_structure-mark_jackson.pptseo_design_and_organic_site_structure-mark_jackson.ppt
seo_design_and_organic_site_structure-mark_jackson.ppt
 
seo_design_and_organic_site_structure-alan_knecht.ppt
seo_design_and_organic_site_structure-alan_knecht.pptseo_design_and_organic_site_structure-alan_knecht.ppt
seo_design_and_organic_site_structure-alan_knecht.ppt
 
seo_design_and_organic-lyndsay_walker_blahut.ppt
seo_design_and_organic-lyndsay_walker_blahut.pptseo_design_and_organic-lyndsay_walker_blahut.ppt
seo_design_and_organic-lyndsay_walker_blahut.ppt
 
seo_and_big_search-maile_ohye.ppt
seo_and_big_search-maile_ohye.pptseo_and_big_search-maile_ohye.ppt
seo_and_big_search-maile_ohye.ppt
 
seo_and_big_search-david_roth.ppt
seo_and_big_search-david_roth.pptseo_and_big_search-david_roth.ppt
seo_and_big_search-david_roth.ppt
 
reputation_monitoring_and_management-andy_beal.ppt
reputation_monitoring_and_management-andy_beal.pptreputation_monitoring_and_management-andy_beal.ppt
reputation_monitoring_and_management-andy_beal.ppt
 
reputation_monitoring_and_managememt-jessica_berlin.ppt
reputation_monitoring_and_managememt-jessica_berlin.pptreputation_monitoring_and_managememt-jessica_berlin.ppt
reputation_monitoring_and_managememt-jessica_berlin.ppt
 

css_and_html_coding_today-ted_ulle.ppt

  • 1. CSS & HTML Coding Today Presented by: Ted Ulle (tedster) Administrator – WebmasterWorld Senior Search Analyst – Converseon Senior Editor – Search Engine Marketing Journal
  • 2. This is the #1 Cutting Edge Approach Top Secret It Will Give You a Major Advantage AND ALMOST NO ONE DOES IT !
  • 3. Speed development You Will… Send clear signals to the search engines Reduce maintenance time Have Tons More Time to Work on CORE BUSINESS TASKS
  • 5. HT M L M stands for MARK-UP
  • 6. The DOCUMENT is assumed to be The FOUNDATION NOT! the visible display
  • 7.
  • 8. The Goal: Lean & Mean HTML <div id=“content”> <h1> Modulation Rules </h1> <p> System-wide iteration engenders economies of scale, cross-media technology and life cycle replication. <img src=“url.jpg” class=“fl”></p> <p> Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms. Incidental re-sizing staff requirements through attrition can be accelerated by paradigm shifts and a focus on cross-training. </p> <ol> <li> Marketing teams input produce cross purposing </li> <li> Goals misalign due to knowledge paucity </li><ol> <p class=“c b”> Conceptualizing random endpoints in an access matrix provides reach extensions enterprise wide. Respective divisions historically insignificant, upscale trend lines in a management inventory analysis survivability format. </p> </div>
  • 9. Under-used CSS Common elements deserve their own default style rules! Not this: <h1 class=“topheader”><span style=“font-weight:normal; text-align:center;”> text </span></h1> But this: <h1> text </h1> Put your rules for h1, p, li etc, in the external CSS file
  • 10. Multiple class declarations with a space separator <p class=“c no sm lg”> Under-used CSS What’s the big deal?
  • 11.
  • 12.
  • 13. Abused CSS Hidden Anchors Don’t let aesthetics hurt communication Removing underscores? Then use redundant link cues: Color / Background-color Font variations Hover behaviour Links are the CORE of the web – Keep your visitors in touch
  • 14. <span> Should be extremely rare Often exposes weak CSS planning Should change only PART of a larger containing element A major culprit in code bloat Abused CSS
  • 15. H1, H2 etc Semantic meaning - not for presentation! <h2>Buy Now and Save</h2> Use an “imitation” class for the H2 look Abused CSS
  • 16. RTFM!