1 / 54

COMP 135 Web Site Design Intermediate

COMP 135 Web Site Design Intermediate. Week 1. Phillip Chee pchee@flemingc.on.ca Ext.1214 http://fleming0.flemingc.on.ca/~pchee/fts/2013/wsdi. Practical CSS3: Develop and Design. Chris Mills. Peachpit Press. 2013. Introduction to CSS3 and Modern Web Design with HTML5 . What is HTML?

delano
Télécharger la présentation

COMP 135 Web Site Design Intermediate

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. COMP 135Web Site Design Intermediate Week 1

  2. Phillip Chee • pchee@flemingc.on.ca • Ext.1214 • http://fleming0.flemingc.on.ca/~pchee/fts/2013/wsdi

  3. Practical CSS3: Develop and Design. Chris Mills. Peachpit Press. 2013.

  4. Introduction to CSS3 and Modern Web Design with HTML5 • What is HTML? • HTML document structure • HTML element syntax • Document Object Model • Block level and inline elements • Semantics • Best practices • Character references

  5. History of HTML IETF (Internet Engineering Task Force) proposes HTML standard1993 HTML 2.01995 Web Hypertext Application Technology Working Group (WHATWG)2005 HTML 3.0 > 3.2 1996 HTML 4.0 > 4.11997 > 1999 XHTML 1.02000 HTML52009 XHTML 2.02001

  6. History of CSS WC3’s HTML editorial review board (ERB)1994-95 • CSS Level 31999 – work begins • Separated into modules to allow for quicker development and recommendation; no need to wait for everyone to finish • Over 50 modules • 4 at recommendation status: 2011-6-07: Color 2011-9-29:Namespaces 2011-9-29: Selectors Level 3 2012-6-19: Media Queries CSS Level 1 (completed)1996 ERB > CSS Working Group1997 CSS Level 21998 CSS Level 2.12004-2011

  7. Browser Prefixes Use when properties in module are not finalized • -webkit-Google Chrome, Apple Safari • -moz- Mozilla Firefox • -ms- Microsoft Internet Explorer • -o-Opera N.B. Opera is moving to Webkit and Google is creating Blink

  8. What HTML is • Text file with .htmor .htmlextension • Contains content—words, references to images, data • Wrapped in special syntax markers called elements • Elements are written out as opening and closing tags • Web browsers (a.k.a. user agents) display the content as intended

  9. <h1>This is a heading</h1> • <p>This is a paragraph of text, or content, marked up with HTML tags. This paragraph is wrapped in a paragraph element</p>

  10. Structure of HTML Documents Œ <!DOCTYPE html> <html> <head> <title>HTML Page</title>d </head> <body> <h1>A very simple HTML page!</h1> </body> </html> Ž    Document type definitionor DOCTYPE. Points to set of rules that HTML documents should follow to be correct. <html> elements wraps entire content. <head> element contains metadata and <title> element; titled displayed in browser title bar. <body element contains the actual content.

  11. Syntax of HTML elements Ž  <h1>The Basics of <abbr title=“Hypertext Markup Language”>HTML</abbr> </h1>  Œ  • Elements consists of two tags that wrap around content. • Some elements don’t wrap around content and consist of one tag. • Most elements can contain sub-elements. • Almost all elements can have attributes, which can modify the element’s behaviour or give it extra meaning. Parent element Child element Opening tags Closing tags Attribute and attribute value in quotes

  12. What other types of elements available? • Emphasizing parts of text in paragraphs • quotes, strong/important text, code excerpts, deleted or inserted text • Marking up numbered or bulleted lists • Marking up data contained in tables (tabular data) • Form elements • Image elements

  13. The Document Object Model (DOM) • Browsers take the code and convert the HTML elements into a Document Object Model (DOM) • The following HTML: • Can be represented by the DOM as: <h1>The Basics of <abbr title=“Hypertext Markup Language”>HTML</abbr> </h1>

  14. Document Object Model diagram <h1> The basics of <abbr> title HTML • <h1> is the parent element node of both the <abbr> element node and text node “The basics of.” • <abbr> element node is the child element node of the parent <h1> element node and contains two children of its own: an attribute node title and a text node containing “HTML.”

  15. And why should you care? • Well-formed DOM required to ensure browsers display your HTML pages correctly and consistently • CSS and JavaScript require you to travel up and down the DOM levels to select elements you wish to manipulate • CSS inheritance is derived from the DOM hierarchy

  16. Block level and inline elements • Two general categories of elements: • Block level elements • Inline elements

  17. Block level • Higher-level element corresponding to structure of document • Starts on a new line, separate from what went before it • Examples: paragraphs, list items, headings, sections, footers, tables

  18. Inline element • Contained within block level structural elements • Surrounds only small parts of the document’s content, not entire paragraphs or groupings of content • Will not cause a new line to appear in the document • Examples: hypertext links, strong or emphasized words, abbreviations, short quotations

  19. Semantics • Meaning of a word, phrase or sentence • In HTML good semantics means the HTML is self-describing: • The elements wrapping the content should match the function or purpose of the content itself • Heading elements should markup headings, paragraph elements should markup paragraphs, etc.

  20. Generic containers: <div> and <span> • What if there are no suitable elements to markup your content? • HTML has two generic elements for identifying custom: • <div> and <span> • Used mainly for semantically marking up common page elements found in many sites: • Headers, footers, content sections

  21. <div> • Wraps block-level elements • <div class=“content”> <p>some text</p> <p>more text</p> <p>and more</p></div><div class=“menu”> <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul></div>

  22. <span> • Wraps inline elements or content • <h1>HTML Basics, Web Standards Concepts <span id="logotype">WSDI</span></h1>

  23. HTML5 to the Rescue • Divs and spans are meaningless; provide no semantics • Some useful new elements • article, section, header, footer, aside, nav, time, figure, figcaption, video, audio, canvas • Say bye-bye to these HTML 4.01 elements • font, acronym, frame, frameset, noframes, tt, center, big, strike, applet, basefont

  24. Separate content from presentation • All content should go in HTML, but separate style information into CSS

  25. The New HTML5 Elements header h1 hgroup h2 nav section • ul • li • li article article article footer footer

  26. <body> <header> <hgroup> <h1>a heading</h1> <h2>a sub-heading</h2> </hgroup> </header> <nav> <ul> <li>menu item1</li> <li>menu item2</li> </ul> </nav> <section> <h1>a level 1 heading</h1> <article> <h2>a level 2 heading</h2> <p>content</p> </article> <article>...</article> <article>...</article> <footer>...</footer> </section> <footer>...</footer> </body>

  27. Character References • In HTML the characters <, >, and & are special • Represent start and end of the HTML syntax not less-than, greater-than, and ampersand • Character references are the way to include special characters or characters difficult to enter with the keyboard

  28. The ampersand (&) introduces the reference and the semi-colon (;) ends it. See http://evolt.org/entities • References can be numbers (numeric references) • Or shorthand words (entity references) • To enter an actual ampersand in your document use the character entity reference &amp;or the numeric reference &#38;

  29. CSS3 • Selectors • Specificity • Inheritance • The Cascade

  30. Selectors • Universal Selector • * • Matches any element name in the document language. If a rule has no explicit selector the universal selector is inferred. • Examples: * {color: red;} div * p {color: blue;}

  31. Selectors • Type Selector • element1 • Matches the name element name in the document language. Every instance of the element name is matched. • Examples: body {background: #FFF;} p {font-size: 1em;}

  32. Selectors • Descendant Selector • element1 element2 • Allows author to select element based on its status as a descendant of another element. Matched element can be a child, grandchild, great-grandchild, etc of the ancestor element. • Examples: body h1 {font-size: 200%;} table tr td div ulli {color: purple;}

  33. Selectors • Child Selector • element1 > element2 • Matches the name element name that is the child of another element. More restrictive than a descendant selector since only child elements are matched. • Examples: div > p {color: goldenrod;} ul > li {font-weight: bold;}

  34. Selectors • Adjacent Sibling Selector • element1 + element2 • Allows author to select element that is the following adjacent sibling of another element. Sibling elements share the same parent element. • Examples: table + p {margin-top: 2em;} h1 + * {margin-top: 0;}

  35. Selectors • General Sibling Selector • element1 ~ element2 • Allows author to select element that is the sibling of another element and follows it in the document tree. • Examples: h1 ~ h2 {margin-top: 2em;} div#navlinks ~ div {margin-top: 0;}

  36. Selectors • Class Selector • element1.classname1 • element1.classname1.classname2 • Allows author to use “dot notation” to select elements that have a class attribute with a specific value or values. Multiple values can be chained together (not supported in < IE7). If no element name precedes the dot, the selector matches all elements with that class value or values. • Examples: p.urgent {color: red;} a.external{font-style: italic;} .example {background: cyan;} .note.caution {background: yellow;}

  37. Selectors • Simple Attribute Selector • element1[attr] • Allows author to select any element based on the presence of an attribute, regardless of the attribute’s value. • Examples: a[rel] {border-bottom: 3px dotted red;} p[class] {border: 1px double silver;}

  38. Resolving CSS Rule Conflicts • HTML documents allow multiple style sheets • Inevitably CSS rule conflicts may occur • The cascade is used to resolve these conflicts • The cascade has two components: specificity and inheritance • !important declarations, style sheet origin and order are also considered

  39. Specificity • Describes the weight of a selector and any rule declarations it contains. • Specificity values are cumulative; given a selector with two element identifiers and a class identifier (e.g.div.aside p) its specificity is 0,0,1,2 • Weight is given precedence from right-to-left

  40. Table 1. Summary of Specificity Summation(adapted from CSS Pocket Reference, E. Meyer)

  41. Calculating Specificity • If two or more rules conflict and all have equal importance, then the rule with the most specific (higher weighted) selector wins • Specificity has four components; call them a, b, c, and d • Component “a” (left-most) is the most distinguishing and “d” (right-most) the least

  42. Scoring Specificity Components • Component “a” given 1 for an inline style attribute, otherwise it’s 0 • Component “b” is the number of ID identifiers in the selector (those that begin with #) • Component “c” is the number of attribute identifiers, class identifiers, and pseudo-class identifiers • Component “d” is the number of element identifers and pseudo-elements identifers

  43. Examples of calculating specificity on CSS selectors

  44. Combinators like >, + and the white space (descendant selector) have no effect on specificity • id identifier is not the same specificity as an attribute identifier that refers to the same id attribute • [id=“nav”] has a specificity of 0,0,1,0 whereas #navhas a specificity of 0,1,0,0

  45. !important Declarations • Normal declarations are normal declarations • !important declarations are just the opposite: important; these are declarations followed by the !important directive: * { font-family: Helvetica !important; } • !important declarations have more weight than nonimportant declarations • !important declarations retain their specificity and is only used with respect to other important declarations • Default browser rendering of elements are not overridden unless a rule in user or author style sheet is specified

  46. Origin • User agent style sheet • Built-in browser style sheet (default properties) • Reader style sheet • Not all browsers support this but readers can add their own. Typically used to enhance accessibility • Author style sheet • This is the “style sheet” that we normally think of • Written by the web designer

  47. Source Order • Given conflicting rules with the same importance and the same specificity, source order is used to determine the winner: the declaration that appears later in the style sheet • In a single external style sheet the declarations at the end of the file override those at the beginning when they conflict • If the conflicting rules appear in different style sheets the order in which they are linked or imported controls which one is applied • If there are two linked style sheets in the <head> of a document the one linked last overrides the one linked first

  48. Inheritance • Just as in genetics traits can be inherited by children from their parents • This is the mechanism by which certain properties can be passed from a parent element to its child elements • Without it you’d have to specify every property for every element every time you wrote a web page

  49. In the DOM the root element sits at the top with the rest of the document structure spreading out below it. html head body header section footer nav article h1 p p em

More Related