Roadmap to Markup Success

Understanding HTML, XML, XHTML and CSS

Molly Holzschlag

Molly.com, Inc.

Eric A. Meyer

Netscape Communications

Disclaimers!

A Dash of Theory

Width differences

Starting from scratch

Visualizing structure

/*  styles to visualize with borders  */
table {border: 1px solid red; margin: 2px;}
th {border: 1px dashed red; padding: 2px;}
td {border: 1px dashed purple; padding: 2px;}
div {border: 1px dashed #888; padding: 2px;}
div div {border: 1px dotted #888;}
div div div {border: 1px dashed #BBB;}
div div div div {border: 1px dotted #BBB;}
div div div div div {border: 1px dashed #DDD;}

/*  styles to visualize with backgrounds  */
table {background: red; margin: 2px;}
th {background: #FCC; padding: 2px;}
td {background: #FCF; padding: 2px;}
div {background: #CBC; padding: 2px;}
div div {background: #BAB;}
div div div {background: #A9A;}
div div div div {background: #989;}
div div div div div {background: #878;}
div div div div div div {border: 1px dotted black;}
[doc]

Choosing class and ID names

<p id="author-name">Eric A. Meyer</p>

<a href="http://www.w3c.org/" class="external">W3C</a>
<a href="http://www.cnn.com/" class="external">CNN</a>

Adding class and ID names

--(excerpt of markup)--

<table border="0" cellspacing="0" cellpadding="0" id="main">
<tr>
<td id="nav">
<ul>
<li id="current"><a href="index.html">UI7 East Home</a></li>

"Global" styling

body {background: url(body-bg.gif); margin: 0; padding: 0;}
#main, #masthead {width: 800px;}
#main {background: white;}
#main td {vertical-align: top;}

The left navbar

#nav {width: 125px; padding: 16px 1px 3px; background: #F4D532;}
#nav ul {margin: 0; padding: 0 0 0 15px;}
#nav li {margin: 22px 0 0; text-indent: -15px;
  font: bold 11px/12px Arial, Verdana, sans-serif; list-style-type: none; }
#nav li p {margin: 0; font: 11px "Times New Roman", Georgia, Garamond;
  text-indent: 0;}

Bullet time

#nav li a {color: black; padding-left: 15px; word-spacing: -1px;
  background: #F4D532 url(nav-bull.gif) 3px 50% no-repeat;}
#nav #current a, #nav a:hover {color: #CC203C; 
  background-image: url(nav-bull-cur.gif);}

Bullets in the main

#content {padding: 25px; width: 460px;}
#content ul {list-style: square url(red-dot.gif);
  margin: 0 0 1.25em; padding: 0 10px;}
#content ul li {margin: 10px 0;
  font: 11px Arial, Helvetica, Verdana, sans-serif;}

Styling the content

#content p {font: 12px Arial, Helvetica, Verdana, sans-serif;
  margin: 1.25em 0;}
h1 {font: bold 34px/33px sans-serif; word-spacing: -2px; letter-spacing: 0.4px;
  margin: 0.1em 0 0;}
h2 {font: bold 18px sans-serif; word-spacing: 1px; margin: 2em 0 0;}
h1, h2, h3, h4, h5, h6 {color: #CC203C;
  font-family: Arial, Helvetica, Verdana, sans-serif;}

Styling main-text links

a:link {color: #4253B2;}
a:visited {color: #4253B2;}
a:hover {color: #CC203C;}

Styling other pieces

#content .subhead1  {font-weight: 800; font-style: italic; margin-top: 2em;}
#content .regbasetext {font: bold 22px "Times New Roman", Georgia, Garamond, serif;
  text-decoration: none; text-align: center; margin-bottom: 0;}
#content .regsubtext {nt-size: 11px; text-align: center; margin-top: 0;}

Recreating the expert speakers

#expertlist div {border: 1px solid #467CC2; border-bottom-width: 10px;
  margin: 40px 40px 0 0;}
#expertlist h3 {margin: 0; padding: 10px 1px 4px; background: #467CC2;
  color: white; font-size: 14px; text-align: center;}
#expertlist p#first {border-width: 0;}
#expertlist p {font: 9px Verdana, sans-serif; margin: 0 3px;
  padding: 1em 2px; border-top: 2px solid  #467CC2; letter-spacing: -1px;
  color: #666;}

Setting up the links

#expertlist strong {font: bold 13px Times, "Times New Roman", serif;
  text-decoration: underline; color: #444; letter-spacing: 0;}
#expertlist a {color: #666; text-decoration: none;}

Hovered experts

#expertlist a:hover {color: #375E8F;}

Fixing the footer

#hosted {background: #F4D532;}

#bottomlinks {font: 12px Arial, Helvetica, Verdana, sans-serif;
  text-align: center; padding-top: 1em; color: #4253B2;}

#credits {font: 500 10px Arial, Helvetica, Verdana, sans-serif;
  word-spacing: 1px; padding: 10px 2px 50px 10px; background: #F4D532;}

Compare and contrast

Throwing out all the tables

Conversion instead of removal

[[basic document structure, sans content, prepared for floats]]

<body>
<div id="masthead">...</div>
<div id="main">
 <div id="nav">...</div>
 <div id="expertlist">...</div>
 <div id="content">
  ...
  <div id="bottomlinks">...</div>
 </div>
 <img id="hostedby">
 <div id="credits">...</div>
</div>
</body>

Placing pieces

<style type="text/css">
<!--
div#masthead, div#main {width: 800px;}
div#masthead img {vertical-align: bottom;}
div#nav {float: left; width: 140px;}
div#expertlist {float: right; width: 160px;}
div#expertlist {border: 1px solid #467CC2; border-bottom-width: 10px;
  margin: 40px 40px 0 0;}
div#content {margin: 0 200px 0 145px;}
div#credits {width: 788px;}
img#hostedby {margin-top: -120px;}
-->
</style>

Floats and height

[[hack to "stretch" around floats]]

<div style="clear: both;"&nbsp;</div>

Positioning to the rescue

[[basic document structure, sans content, prepared for positioning]]

<body>
<div id="masthead">...</div>
<div id="main">
 <div id="nav">...</div>
 <div id="content">
  ...
  <div id="bottomlinks">...</div>
 </div>
 <div id="expertlist">...</div>
 <img id="hostedby">
</div>
<div id="credits">...</div>
</body>

<style type="text/css">
<!--
div#masthead, div#main {width: 800px;}
div#masthead img {vertical-align: bottom;}
div#main {position: relative;}
div#nav {position: absolute; top: 0; left: 0; width: 140px;}
div#expertlist {position: absolute; top: 0; right: 0; width: 160px;}
div#expertlist {border: 1px solid #467CC2; border-bottom-width: 10px;
  margin: 40px 40px 0 0;}
div#content {margin: 0 200px 0 0; border-left: 142px solid #F4D532;}
div#credits {width: 788px;}
img#hostedby {position: absolute; left: 0; bottom: 0;}
-->
</style>

Compare and contrast redux

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<meta name="keywords" content="Web usability, User Interface Engineering, UIE, Jared Spool, usability research, user interface conference, web design, site design, usability engineering, usability testing, web interface, usable site, usable web" />
<meta name="description" content="User Interface Engineering hosts User Interface 7 East conference in Cambridge, MA on October 14-17, 2002." />
<meta name="author" content="Arcamedia Corp. Adam Halem 2002 www.arcamedia.com" />
<meta name="generator" content="golive and hard coding" />
<title>Welcome to User Interface 7 East Conference Website!</title>
<link rel="stylesheet" type="text/css" href="notables.css" />
<style type="text/css">
<!--
div#masthead, div#main {width: 800px;}
div#masthead img {vertical-align: bottom;}
div#main {position: relative;}
div#nav {position: absolute; top: 0; left: 0; width: 140px;}
div#expertlist {position: absolute; top: 0; right: 0; width: 160px;}
div#expertlist {border: 1px solid #467CC2; border-bottom-width: 10px; margin: 40px 40px 0 0;}
div#content {margin: 0 200px 0 0; border-left: 142px solid #F4D532;}
div#credits {width: 788px;}
img#hostedby {position: absolute; left: 0; bottom: 0;}
-->
</style>
</head>

<body>

<div id="masthead">
<img src="http://www.uiconf.com/uie-7/images-uie/logo-01.gif" alt="user interface conference logo" height="150" width="129" /><img src="http://www.uiconf.com/uie-7/images-uie/title-02.gif" alt="masthead: user interface 7 east" height="150" width="671" />
</div>

<div id="main">

<div id="nav">
<ul>

<li id="current"><a href="index.html" title="UI7 East Home">UI7 East Home</a></li>

<li><a href="https://mmm1002.sbc-webhosting.net/uiconf/secure/registerui7.htm" title="register now">Register Now!</a>
<p>Register online and arrange payment.</p></li>

<li><a href="http://www.uiconf.com/uie-7/agenda_at_a_glance.htm" title="agenda at a glance">Agenda at a Glance</a>
<p>Get a high-level overview of the conference agenda.</p></li>

<li><a href="http://www.uiconf.com/uie-7/conference_program.htm" title="conference program">Conference Program</a>
<p>Get a full, detailed description of our 4-day program.</p></li>

<li><a href="http://www.uiconf.com/uie-7/expert_speakers.htm" title="expert speakers">Expert Speakers</a>
<p>Learn more about our world-renowned speakers.</p></li>

<li><a href="http://www.uiconf.com/uie-7/pricing_policies.htm" title="pricing">Pricing &amp; Policies</a>
<p>Everything you need to know to register.</p></li>

<li><a href="http://www.uiconf.com/uie-7/keep_me_informed.htm" title="keep me informed">Keep Me Informed</a>
<p>Sign up for feature articles about our speakers and topics.</p></li>

<li><a href="http://www.uiconf.com/uie-7/hotel_travel.htm" title="hotel and travel">Hotel &amp; Travel</a>
<p>Plan your hotel and travel arrangements.</p></li>

<li><a href="http://www.uiconf.com/uie-7/order_proceedings.htm" title="order conference proceedings">Order Proceedings</a>
<p>Buy a complete set of conference notes.</p></li>

</ul>

</div>

<div id="content">

<h1>User Interface 7 East</h1>

<p>Get ready to learn side-by-side with world-renowned experts at User Interface 7 East. This is a unique conference - nowhere else will you have the chance to <b>spend a full day</b> learning advanced subject matter with top design and usability experts. You'll walk away from these in-depth sessions with the knowledge and skills to tackle your most difficult challenges.</p>

<p>At User Interface 7 East, you'll get 4 days filled with insights from the field's greatest experts—2 days of in-depth full-day seminars, 1 day of dynamic short presentations, and 1 day packed with User Interface Engineering's latest research findings. We've designed this conference for people who need to tackle major design issues.<br /></p>

<p class="subhead1">You'll learn how to:</p>

<ul>

<li>Create a solid and robust <a href="http://www.uiconf.com/uie-7/fullday-mcgovern.htm" title="information
architecture">Information Architecture</a> using ethnographic research data.</li>

<li>Use <a href="http://www.uiconf.com/uie-7/fullday-goodwin.htm" title="goal directed design">Goal-Directed Design</a> techniques to create innovative solutions.</li>

<li>Write <a href="http://www.uiconf.com/uie-7/fullday-usborne.htm" title="engaging online copy">Engaging Online Copy</a> that transforms your users' experience.</li>

<li>Build the <a href="http://www.uiconf.com/uie-7/fullday-merholz-young.htm" title="classification, navigation and search tools">Classification, Navigation, and Search tools</a> that meet users' needs.</li>

<li>Enhance the user experience with proven <a href="http://www.uiconf.com/uie-7/fullday-mccasland.htm" title="brand research
techniques">Brand Research Techniques</a>.</li>

<li>Utilize <a href="http://www.uiconf.com/uie-7/fullday-holzschlag-meyer.htm" title="XML, CSS, and XHTML">XML, CSS, and XHTML</a> to solve your biggest interface problems.</li>

<li><a href="http://www.uiconf.com/uie-7/fullday-powazek.htm" title="design for community">Design for Community</a> to connect and attach people to your web site.</li>

<li>Compel users to make transactions and discover your site's value through <a
href="http://www.uiconf.com/uie-7/fullday-chak.htm" title="persuasive design">Persuasive Design</a>.</li>
</ul>

<p>To learn more about the full-day seminars, featured talks, and the UIE Research Forum, check out our full <a href="http://www.uiconf.com/uie-7/conference_program.htm" title="conference program">Conference Program</a>.</p>

<p>We've scoured the planet to find the best, most knowledgeable presenters. Each one of them is a recognized expert in their field—highly sought after by the world's leading companies to solve some of the most difficult problems around.</p>

<p>We realize you may want to learn more about our speakers before choosing your full-day seminars, so over the summer, we will be writing feature articles that include interviews with each of our world-renowned experts. Fill out the <a href="http://www.uiconf.com/uie-7/keep_me_informed.htm" title="keep me informed">Keep Me Informed</a> form and we will email you when these articles are available.</p>

<h2>Early Registration Offer!</h2>

<p><b>Until July 30th, you can register for all four days for only $1,990 — a savings of more than $1,700 off the final walk-in registration price.</b></p>

<p><a href="https://mmm1002.sbc-webhosting.net/uiconf/secure/registerui7.htm" title="register now">Register Now!</a></p>

<p>Read more about the <a href="http://www.uiconf.com/uie-7/pricing_policies.htm" title="pricing">pricing &amp; policies</a>, and <a href="http://www.uiconf.com/uie-7/hotel_travel.htm">hotel/travel</a> details.</p>

<p class="regbasetext"><a href="https://mmm1002.sbc-webhosting.net/uiconf/secure/registerui7.htm" title="register
online">Register online or by calling 1-800-588-9855</a></p>

<p class="regsubtext">(outside the U.S. call 1-978-374-8300)</p>

<div id="bottomlinks">
<a href="https://mmm1002.sbc-webhosting.net/uiconf/secure/registerui7.htm" title="register">Register</a> &bull;
Home &bull;
<a href="http://www.uiconf.com/uie-7/agenda_at_a_glance.htm" title="agenda at a glance">Agenda at a Glance</a> &bull;
<a href="http://www.uiconf.com/uie-7/conference_program.htm" title="conference program">Conference Program</a> &bull; <a
href="http://www.uiconf.com/uie-7/expert_speakers.htm">Expert Speakers</a>
<br />
<a href="http://www.uiconf.com/uie-7/pricing_policies.htm" title="pricing">Pricing &amp; Policies</a> &bull; <a
href="http://www.uiconf.com/uie-7/keep_me_informed.htm" title="keep me informed">Keep Me Informed</a> &bull; <a
href="http://www.uiconf.com/uie-7/hotel_travel.htm" title="hotel and travel">Hotel &amp; Travel</a> &bull; <a
href="http://www.uiconf.com/uie-7/order_proceedings.htm" title="order proceedings">Order Proceedings</a>
</div>

</div>

<div id="expertlist">

<h3>Expert Speakers</h3>

<p id="first"><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_chak" title="andre chack"><strong>Andrew Chak</strong>, award winning information architect and user experience deisgner, and author of the upcoming book <cite>Submit Now: Designing Persuasive Web Sites</cite></a>.</p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_mcgovern" title="gerry mcgovern"><strong>Gerry McGovern</strong>, world-renowned content-management expert, and author of <cite>Content Critical</cite> and <cite>The Web Content Style Guide</cite></a>.</p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_mccasland" title="mitch mccasland"><strong>Mitch McCasland</strong>, an expert in brand design and account planning, who has worked with Proctor &amp; Gamble, Dr.Pepper/Seven-Up, and GTE/Verizon.</a></p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_powazek" title="derek powazek"><strong>Derek Powazek</strong>, author of <cite>Design for Community</cite>, has worked on community features for Nike, Netscape, and Sony, along with creating {fray}, Kvetch!, and SF Stories.</a></p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_holzschlag" title="molly e holzschlag"><strong>Molly E. Holzschlag</strong>, honored as one of the top 25 Women of the Web, she has written more than 10 books, including <cite>XML, HTML, &amp; XHTML Magic</cite>.</a></p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_meyer" title="eric a meyer"><strong>Eric A. Meyer</strong>, an internationally-recognized expert on cascading style sheets (CSS) and HTML, one of the creators of the W3C's CSS Test Suite, and the author of <cite>Cascading Style Sheets: The Definitive Guide</cite>.</a></p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_goodwin" title="kim goodwin"><strong>Kim Goodwin</strong>, Director of Design at Cooper, she worked with Alan Cooper to develop their world-renowned Goal-Directed design methods.</a></p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_merholz" title="peter merholz"><strong>Peter Merholz</strong>, a brilliant and well-spoken leader in the area of information architecture, he is a founder of Adaptive Path, one of San Francisco's leading user experience design firms.</a></p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_young" title="indi young"><strong>Indi Young</strong>, also from Adaptive Path, has worked with clients such as Peoplesoft and had been consulting in task analysis and user interface design since 1991.</a></p>

<p><a href="http://www.uiconf.com/uie-7/expert_speakers.htm#expert_usborne" title="nick usborne"><strong>Nick Usborne</strong>, who has dazzled audiences at conferences around the globe, is the author of <cite>Net Words: Creating High-Impact Copy Online</cite>.</a></p>

<p><strong>Plus...</strong> our own Jared M. Spool, who will entertain and inform you with his always-popular keynote address.</p>

</div>

<img src="http://www.uiconf.com/uie-7/images-uie/uie-hostedby-logo.gif" alt="hosted by user interface engineering" height="80" width="129" id="hostedby" />

</div>

<div id="credits">

<p>Site by:<br />
<a href="http://www.arcamedia.com/" title="go to arcamedia corp">Arcamedia Corp.</a></p>

<p>Cleanup by:<br /><a title="Webfixer and techno-fascist extraordinaire" href="http://www.meyerweb.com/">Eric A. Meyer</a>
and<br /> <a href="http://www.molly.com/" title="Webfixer and goddess">Molly E. Holzschlag</a></p>
</div>

</body>
</html>
/* notables.css */

body {background: url(body-bg.gif); margin: 0; padding: 0;}
a:link {color: #4253B2;}
a:visited {color: #4253B2;}
a:hover {color: #CC203C;}

#main, #masthead {width: 800px;}
#main {background: white;}
#main td {vertical-align: top;}

#nav {width: 125px; padding: 16px 1px 3px; background: #F4D532;}
#nav ul {margin: 0; padding: 0 0 0 15px;}
#nav li {margin: 22px 0 0; font: bold 11px/12px Arial, Verdana, sans-serif;
  list-style-type: none; text-indent: -15px;}
#nav li p {margin: 0; font: 11px "Times New Roman", Georgia, Garamond;
  text-indent: 0;}
#nav li a {color: black; padding-left: 15px; word-spacing: -1px;
  background: #F4D532 url(nav-bull.gif) 3px 50% no-repeat;}
#nav #current a, #nav a:hover {color: #CC203C; background-image: url(nav-bull-cur.gif);}

#content {padding: 25px;}
#content ul {list-style: square url(red-dot.gif);
  margin: 0 0 1.25em; padding: 0 10px;}
#content ul li {margin: 10px 0;
  font: 11px Arial, Helvetica, Verdana, sans-serif;}

#content p {font: 12px Arial, Helvetica, Verdana, sans-serif;
  margin: 1.25em 0;}
h1 {font: bold 34px/33px sans-serif; word-spacing: -2px;
  letter-spacing: 0.4px; margin: 0.1em 0 0;}
h2 {font: bold 18px sans-serif; word-spacing: 1px; margin: 2em 0 0;}
h1, h2, h3, h4, h5, h6 {color: #CC203C;
  font-family: Arial, Helvetica, Verdana, sans-serif;}
#content .subhead1  {font-weight: 800; font-style: italic; margin-top: 2em;}
#content .regbasetext {font: bold 22px "Times New Roman", Georgia, Garamond, serif;
  text-decoration: none; text-align: center; margin-bottom: 0;}
#content .regsubtext {nt-size: 11px; text-align: center; margin-top: 0;}

#expertlist div {border: 1px solid #467CC2; border-bottom-width: 10px;
  margin: 40px 40px 0 0;}
#expertlist h3 {margin: 0; padding: 10px 1px 4px; background: #467CC2;
  color: white; font-size: 14px; text-align: center;}
#expertlist p#first {border-width: 0;}
#expertlist p {font: 9px Verdana, sans-serif; margin: 0 3px;
  padding: 1em 2px; border-top: 2px solid  #467CC2; letter-spacing: -1px;
  color: #666;}
#expertlist strong {font: bold 13px Times, "Times New Roman", serif;
  text-decoration: underline; color: #444; letter-spacing: 0;}
#expertlist a {color: #666; text-decoration: none;}
#expertlist a:hover {color: #375E8F;}

#hosted {background: #F4D532;}

#bottomlinks {font: 12px Arial, Helvetica, Verdana, sans-serif;
  text-align: center; padding-top: 1em; color: #4253B2;}

#credits {font: 500 10px Arial, Helvetica, Verdana, sans-serif;
  word-spacing: 1px; padding: 10px 2px 50px 10px; background: #F4D532;}

Related Resources