separating content and layout, HTML CSS and some web history
-
Upload
lon-barfield -
Category
Technology
-
view
466 -
download
4
description
Transcript of separating content and layout, HTML CSS and some web history
![Page 1: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/1.jpg)
Content and LayoutLon Barfield
![Page 2: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/2.jpg)
Separating content and layout
Bit of web historyContent and layout on the webWhy separation is a good thing
But first...
![Page 3: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/3.jpg)
The Large Hadron Collider
![Page 4: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/4.jpg)
Million GBytes per second
![Page 5: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/5.jpg)
The Higgs Boson - July 2012
![Page 6: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/6.jpg)
Yes it’s Comic Sans!
![Page 7: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/7.jpg)
The God particle the Devil’s typeface
bancomicsans.com
It would be nice to publish data without layout issues
![Page 8: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/8.jpg)
Tim Berners-Lee CERN - 1989
10,000 scientists from over 100 countriesIt would be nice to publish data without layout issuesWorld Wide Web - “Vague but exciting”info.cern.ch/hypertext/WWW/TheProject.html
![Page 9: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/9.jpg)
Tim Berners-Lee CERN - 1989
![Page 10: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/10.jpg)
Just content, no layout
This chunk of text is a heading, etc.Headings, Text, Title, Quote, Abstract20 Elements
![Page 11: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/11.jpg)
Early web had no ‘design’
![Page 12: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/12.jpg)
Designers v content purists
‘Tricks’ subverting the HTML tagsspaces, blank images, H2 for titles
Compromise - the centre tagHTML became content and layout
![Page 13: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/13.jpg)
Nice HTML timeline
more layout oriented tagsstill mixing content and layout
broadcast.rackspace.com/blog/HTMLtimeline
![Page 14: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/14.jpg)
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;}
![Page 15: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/15.jpg)
Advantages
Accessibility - screen readers for the blind won’t start by reading the navigation barsResponsive design - information can adapt for small screens, printing etc.
![Page 16: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/16.jpg)
Advantages cont.
Better search indexing - Is the term in the title, the heading?Semantic web - what do things actually mean
![Page 17: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/17.jpg)
Hands on - Zen Garden
csszengarden.comen.wikipedia.org/wiki/CSS_Zen_Garden
download HTML and CSS sample using the links, tweak and screen grab it
![Page 18: separating content and layout, HTML CSS and some web history](https://reader034.fdocuments.in/reader034/viewer/2022051514/54b793774a79591d4a8b4662/html5/thumbnails/18.jpg)
Taking a peek at the CSS
The page using the CSSwww.csszengarden.com/?cssfile=/210/210.cssJust the CSSwww.csszengarden.com/210/210.css