• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    css_and_html_coding_today-ted_ulle.ppt css_and_html_coding_today-ted_ulle.ppt Presentation Transcript

    • 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
      • HTML tags = semantic information
      • CSS rules = display information
    • 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;}
      • Easier coding on the fly
      • Lower need for new classes
      • Easy team coordination
      <p class=&quot;r s&quot; > Laurie Lipsum </p>
    • Under-used CSS line-height
      • Space matters a LOT
      • “ Leading” in print typography
      • Set by ratio (1.25) not px or pt
      • Improves readability and comprehension
      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!