Presentation is loading. Please wait.

Presentation is loading. Please wait.

LBSC 670 Organization of Information. Class plan Review Documents and document models Digital document exploration –HTML –CSS Putting it together – Why.

Similar presentations

Presentation on theme: "LBSC 670 Organization of Information. Class plan Review Documents and document models Digital document exploration –HTML –CSS Putting it together – Why."— Presentation transcript:

1 LBSC 670 Organization of Information

2 Class plan Review Documents and document models Digital document exploration –HTML –CSS Putting it together – Why IO matters Wrap-up

3 Questions

4 Technical stuff 10 minute HTML Overview 5 minute Cascading Stylesheet (CSS) Overview

5 HTML Hypertext Markup Language HTML 1.0 1992 – Tim Berners-Lee HTML 4.0 – 1999 XHTML 1.0 – 2002XHTML 1.0 –Tight integration with JavaScript, DOM. XHTML 2.0 – 2002, 2006, 2008XHTML 2.0 –Not entirely backwards compatible –Xforms, XML DOM, XML Events HTML5 - 2010 –Media and interactivity focused

6 Semantic html (XHTML) Semantics: of or relating to meaning or the study of meaning; "semantic analysis" (wordnet) Two forms of layout in html –Layout is embedded into document –Layout is abstracted into CSS Semantic HTML –“As much as possible, the tags surrounding the content of a document should describe what that content is and/or what it's for.” Jason KottkeJason Kottke

7 Web-based DOM technologies Semantics & structure Design & interactivityDecision making CSS PHP PERL RUBY RDBMS XML XHTML XSL SQL AJAX JavaScript

8 Technology for this exercise Semantics & structure Design & interactivityDecision making CSS XHTML

9 HTML Document My webpage.....

10 XHTML Syntax All elements must be closed properly Elements must be properly nested Attribute values must be quoted Formatting Elements names are in lower case Documents must be well-formed Special characters must use entities –& < > Comments

11 Tags, elements, attributes Tag / element Consists of a name inside brackets <> Attributes Properties of the elements included within the <> such as Universal attributes –class, id

12 Interesting Elements Headings: – Paragraphs – Unordered Lists: – Ordered Lists: – Definition Lists: – Divs: – Breaks: – Links: – Images: –

13 XHTML Reference ref.html ref.html

14 XHTML for our exercise ….

15 CSS Overview What is CSS? –A styling language - –Client side –Cascading / inheritance What do we need to know today? –Overall document structure –Relationship to HTML –Some syntax/code

16 Cascading Style Sheets Uses the element Methods for including in HTML Inline – styles embedded within tags Internal – styles embedded within head tags External – style sheets included using

17 CSS Syntax Element { Attribute:value; /*comment*/ }.class { attribute:value; attribute:value;} Ul.thumb li a {attrribute:value;}

18 CSS Syntax Entries Selector (elements, classes, ids, etc) { Attribute:value; attribute:value; } Comments /* this is a comment */

19 CSS formatting elements Properties –Fonts, colors, backgrounds, text, boxes and layout, lists, tag classification Property types –Keywordfont-weight:bold; –Lengthfont-size:+2em; –Percentageline-height:120% –URLurl(http://....) –Color#FFCC66

20 A CSS File Very basic Document Model Just element references (p, h1, h2, body) and assigned behaviors p { visibility:hidden; /* This hides all p elements */ } img { visibility:hidden; /* This hides all img elements */ }

21 CSS Selectors ul li {} – descendent li nodes of ul Ul, ol {} – both ul and ol elements a:hover {}– a pseudoclass.classname {}– all elements with class Div.classname {}– a div with a class #idname {}– the element with this id ul[attribute=“”] {}– ul with attribute

22 Technical Exercise In this exercise we will style an XHTML page using CSS and compare that page to another one with identical content. Part 1 –Download & style XHTML page Part 2 –Compare document models

23 Selector context {color:purple} all text elements p ul h1 {color:red} elements share style ol > li {font-size:2em} child of ol h1 + h2 {margin:top} adjacent h2 element Div[title~=“bibliography”] matched attribute p.centered a class on an element.centeredgeneric class #headerid a:hoverpseudoclass a:active

24 Positioning Standard document flow –Beginning to end –Renders block/inline elements using default rules Positioning in CSS –float:left – relative elements “flow” around floated element –position:relative – keeps element in document flow –position:absolute – removes element from flow and places in specific position –position:fixed – keeps a specific place in the window

25 Cascading External stylesheets –From within CSS @import(“style.css”); –From within HTML Start with minimal styles (mobile/print), add functionality as needed Use media selectors: All – all media Aural – sound Handheld – mobile device Print – for printing – Screen – computer screen TV – for television

26 CSS Box Model All elements in CSS are rendered in a box:

27 Understanding size Font Sizes –em: the 'font-size' of the relevant font'font-size' –ex: the 'x-height' of the relevant font –px: pixels, relative to the viewing device. Absolute Measurements –in: inches -- 1 inch is equal to 2.54 centimeters. –cm: centimeters –mm: millimeters –pt: points -- the points used by CSS2 are equal to 1/72th of an inch. –pc: picas -- 1 pica is equal to 12 points. Relative Measurements –Percentage values are always relative to another value From:

28 Standards W3c - –CSS1 – Formatting –CSS2 – Positioning –CSS3 – Layout, Media, Interaction Browser compliance – – –

29 Discussion Benefits of CSS / HTML approach? Information organization concepts –Inheritance –By-value vs. By-reference –Element refinement

30 HTML5

31 Review Online texts include models, schemas, encodings allow new uses

Download ppt "LBSC 670 Organization of Information. Class plan Review Documents and document models Digital document exploration –HTML –CSS Putting it together – Why."

Similar presentations

Ads by Google