1. © Anselm SpoerriDigital Media Production Digital Media Production Info + Web Tech Course Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com

2. © Anselm SpoerriDigital Media Production Lecture 3 – Overview XHTML Elements Recap –Hierarchy of Tags –Block and Inline Elements –div | id | class Cascading Style Sheet = CSS –Formatting Rules –Inline | Internal | External specification of CSS rules CSS Demo CSS Navigation using Lists Testing & Debugging Web Pages  Check Easy Stuff First Lectures – Week 3 Content http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week3 http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week3

3. © Anselm SpoerriDigital Media Production Recap & New – Web Basics: HTML Elements & Tags HTML is made up of elements Content (read as: open tag, content, close tag) Three major elements needed on HTML page - container for all of our HTML code - put data for browser and other machines - put content to show to the user Block-level elements  take up own space vertically (,,,...) page division Inline-level elements  placed inside other elements (,,,, …)

4. © Anselm SpoerriDigital Media Production Page Layout – DIVs Two methods for creating Web Page Layout ‒ Tables (last lecture) ‒ DIVs and CSS (this lecture) Structure Your Pages URL URL ‒ Divide logical sections of document into div elements  Produces “linear / natural flow” of divs pageContent header navigation main content footer header content navigation content main content footer content

5. © Anselm SpoerriDigital Media Production Page Structure – Hierarchy & Naming Elements Body of (X)HTML document encloses Content of Web page. Breaking up Page into Divisions (DIV) Creating a Line Break: Hierarchical Structure of Web pages ‒ Elements contained inside another element (latter = parent, former = child) Naming Elements ‒ id="name" can be applied only once  unique # idName {…}define CSS rule ‒ class="name" can be applied many times. className {…}define CSS rule Useful with div (content blocks) and span (inline text) elements

6. © Anselm SpoerriDigital Media Production Page Layout – DIVs with IDs Name div elements with unique IDs pageContent header navigation main content footer text/images/links

7. © Anselm SpoerriDigital Media Production CSS Cascading Style Sheets = CSS ‒ Collection of Formatting Rules ‒ Control Appearance of web page : blocks and text ‒ Ensure a more Consistent Treatment of Page Layout and Appearance in Browsers ‒ Separation of Content from Presentation –Easier to Maintain Appearance since Make Change in Single Location –Simpler and Cleaner HTML code  shorter loading times

8. © Anselm SpoerriDigital Media Production CSS (cont.) Cascading Style Sheets (CSS) ‒ Control Text properties Specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; etc. ‒ Control Format & Position of Block-level Elements Set margins and borders for block-level elements; position them in a specific location; add background color; float text around them; etc. ‒ Liquid layouts : expand/contract based on Browser width. ‒ Easy to apply Same Layout to Whole Site and only need to modify external CSS file. ‒ Minus: Not all browsers support CSS the same way.

9. © Anselm SpoerriDigital Media Production CSS (cont.) CSS Style Sheet stored a)External CSS style sheet (.css file linked to page and using a link or an @import rule in the head section of a document). b)Internal (or embedded) CSS style sheet (included in style tag in head portion of an HTML document). c)Inline styles (defined within specific tag instance in HTML document) Using Inline styles is not recommended. CSS Rule = Selector and Block of Declarations Enclosed by {...} brackets and separated by ; Declaration = Property: Value;

10. © Anselm SpoerriDigital Media Production CSS – General Structure of CSS Rule Basic syntax for Internal and External CSS: selector {property1: value1; property2: value 2;} HTML tag you want to modify Value you want property to take Property you want to change p { text-align: left; color: black; font-family: Arial; } causes Font to be left-aligned Font to be Arial and black

11. © Anselm SpoerriDigital Media Production CSS Rules – id and class Rules in Internal Style Sheet /* Comment: pageContent ID and define font to use for page and the top and left margins as well page width. This pageContent div contains all the other divs */ #pageContent { font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin-top: 10px; margin-left: 50px; width: 500px; } /* blue text class */.blueText { color:#009; }

12. © Anselm SpoerriDigital Media Production CSS Rules – id and class Rules Applied in Heading1 Open paragraph

13. © Anselm SpoerriDigital Media Production Location of CSS Style Definition Inline style (causes only the tag to have desired properties) Something blue Internal stylesheet (specific to a document) –Causes all tags in document to have property – tag inside tag of document p { font-family:Arial; color:blue;} External stylesheet (can control multiple documents) –Ensure consistent appearance of website

14. © Anselm SpoerriDigital Media Production CSS – Cascasde of How Rules are Applied Style Rules “Cascade” from broad to narrow: –Browser’s Default Behavior –External Style Sheet –Internal Style Sheet –Inline Style

15. © Anselm SpoerriDigital Media Production CSS Demo – Step 1 Step 1 ‒ Download “startPage.html” from http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec3/Steps http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec3/Steps ‒ Save “startPage” as “page1.html” in folder “week3” ‒ Create nested div structure pageContent, header, navi, content, footer ‒ Assign id name to div

16. © Anselm SpoerriDigital Media Production CSS Demo – Step 2 Step 2 ‒ Create Internal CSS Style Sheet ‒ Create CSS Rule for id="pageContent" font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin-top: 10px; margin-left: 50px; width: 500px; ‒ Create CSS Rule for class="blueText" color:#009;

17. © Anselm SpoerriDigital Media Production CSS Demo – Step 3 Step 3 ‒ Create CSS Rule for id="header" font-size: 9px; border-bottom-width: thin; border-bottom-style: solid; border-bottom-color: #333; ‒ Create CSS Rule for id="navi" font-size: 14px; background-color: #E1E3F7; padding: 5px; margin-top: 5px;

18. © Anselm SpoerriDigital Media Production CSS Demo – Step 4 Step 4 ‒ Create CSS Rule for id="content" font-size: 12px; ‒ Apply class="blueText" tag inside div with id="content" ‒ Create CSS Rule for id="footer" font-size: 10px; border-top-width: thin; border-top-style: solid; border-top-color: #666;

19. © Anselm SpoerriDigital Media Production CSS – Navigation Bar using Lists and CSS Home Features CSS property - display: block; and float: left; and clear: both; Hyperlink States: a:link | a:visited | a:focus | a:hover | a:active Navigation = Lists of Links example

20. © Anselm SpoerriDigital Media Production CSS – Navigation Bar using Lists and CSS (cont.) Remove Bullets, Eliminate Padding and Margins #navi ul { list-style-type: none; padding: 0px; margin: 0px; overflow: hidden; } Display Link as Block (area of link clickable) and Constrain Width #navi a { display: block; width: 100px; } Horizontal Navigation Use floated method for uniform look #navi li { float: left; } You are Here Indicator #navi li.here a { text & background properties } and want CSS rules for different states of hyperlink

21. © Anselm SpoerriDigital Media Production CSS – Navigation Bar and States of Link Element Selecting Link Element based on their State  Navigation Structure Since a link can be in more than one state at a time, it is important to define rules in following order: 1.a:link 2.a:visited 3.a:focus 4.a:hover 5.a:active  LVFHA a:link, a:visited { color: #FFF; } a:focus, a:hover, a:active { color: #000; } #navi a:link, #navi a:visited { color: #FFF; } #navi a:focus, #navi a:hover, #navi a:active { color: #000; }

22. © Anselm SpoerriDigital Media Production Testing & Debugging Web Pages Before looking for a big problem, check common little problems :) Work incrementally Use process of elimination (use comments to make code active / inactive). Be careful about typos. In CSS, not sure if the problem is with the property or the selector, use a very simple declaration (color: red).

23. © Anselm SpoerriDigital Media Production Check Easy Stuff First - General Refresh browser so that latest file is shown Upload actual file and refresh browser so that latest file is shown Upload file in the correct location Make sure you save file Upload any related files: CSS, images, SWF etc. Make sure spelling of URL = spelling of filename. Test in multiple browsers Test on different computer than the one used to create the files

24. © Anselm SpoerriDigital Media Production Check Easy Stuff First – HTML & XHTML HTML Make sure you used correct spelling of tags Be careful about nesting and make sure you have closing tags Use HTML Transitional XHTML Make sure all attribute value enclosed in straight, not curly, quotes All elements have opening and closing tags (always put space before / for “ />” closing tag). XHTML is case-sensitive. Include # when specifying hexadecimal colors.

25. © Anselm SpoerriDigital Media Production Check Easy Stuff First – CSS Use colon (:) to separate your properties from value (color: red;). Complete each property-value pair with semicolon (;) No spaces between number and their units (16px). Close brackets. Don’t quote values. Use accepted value. Don’t forget closing tag. Make sure linked (X)HTML document to the proper CSS file(s). Watch the spaces and punctuation between selectors.

26. © Anselm SpoerriDigital Media Production Check Easy Stuff First – Testing Your Page 1.Validate (X)HTML and CSS. 2.Open in Browser 3.Formatting correct? 4.Hyperlinks work & correct? 5.CSS file referenced properly? 6.All images appear? If not, check the easy stuff first, especially spelling of filenames and don’t use spaces in filenames and saved as GIF or JPEG. 7.Upload files to server (and set permissions if needed). 8.View pages in different browsers. 9.Still Stuck  check for typos and check easy stuff first :)