This document discusses the separation of content and layout on the web. It provides a brief history, noting that early web pages did not have distinct design elements. Over time, style sheets (CSS) were introduced to separate formatting instructions from the semantic content in HTML. There are several advantages to separating content and layout, including improved accessibility, responsive design, better search indexing, and support for the semantic web. The document encourages exploring examples on the CSS Zen Garden website to see how content remains the same while layout can be modified through CSS.

1. Content and
Layout
Lon Barfield

2. Separating content and layout
Bit of web history
Content and layout on the web
Why separation is a good thing
But first...

3. The Large Hadron Collider

4. Million GBytes per second

5. The Higgs Boson - July 2012

6. Yes it’s Comic Sans!

7. The God particle the Devil’s typeface
bancomicsans.com
It would be nice to publish data without layout
issues

8. Tim Berners-Lee CERN - 1989
10,000 scientists from over 100 countries
It would be nice to publish data without layout
issues
World Wide Web - “Vague but exciting”
info.cern.ch/hypertext/WWW/TheProject.html

9. Tim Berners-Lee CERN - 1989

10. Just content, no layout
This chunk of text is a heading, etc.
Headings, Text, Title, Quote, Abstract
20 Elements

11. Early web had no ‘design’

12. Designers v content purists
‘Tricks’ subverting the HTML tags
spaces, blank images, H2 for titles
Compromise - the centre tag
HTML became content and layout

13. Nice HTML timeline
more layout oriented tags
still mixing content and layout
broadcast.rackspace.com/blog/HTMLtimeline

14. Style sheets - CSS
This is the content…
<H1>Blah blah</H1>
And this is how it should look...
H1 {font-weight: bold;
text-transform: uppercase;}

15. Advantages
Accessibility - screen readers for the blind won’t
start by reading the navigation bars
Responsive design - information can adapt for
small screens, printing etc.

16. Advantages cont.
Better search indexing - Is the term in the title,
the heading?
Semantic web - what do things actually mean

17. Hands on - Zen Garden
csszengarden.com
en.wikipedia.org/wiki/CSS_Zen_Garden
download HTML and CSS sample using the
links, tweak and screen grab it

18. Taking a peek at the CSS
The page using the CSS
www.csszengarden.com/?cssfile=/210/210.css
Just the CSS
www.csszengarden.com/210/210.css