Download presentation
Presentation is loading. Please wait.
1
Week 1
2
Phillip Chee pchee@flemingc.on.ca Ext.1214 http://fleming0.flemingc.on.ca/~pchee/fts/2011/wsdi
3
Designing with Web Standards, Third Edition. Jeffrey Zeldman with Ethan Marcotte. New Riders Press. 2009
4
What is HTML? HTML document structure HTML element syntax Document Object Model Block level and inline elements Semantics Best practices Character references
5
IETF (Internet Engineering Task Force) proposes HTML standard 1993 HTML 2.0 1995 HTML 3.0 > 3.2 1996 HTML 4.0 > 4.1 1997 > 1999 XHTML 1.0 2000 XHTML 2.0 2001 Web Hypertext Application Technology Working Group (WHATWG) 2005 HTML5 2009
6
Text file with.htm or.html extension 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
7
1. This is a heading 2. This is a paragraph of text, or content, marked up with HTML tags. This paragraph is wrapped in a paragraph element
9
HTML Page d A very simple HTML page! 1.Document type definition or DOCTYPE. Points to set of rules that HTML documents should follow to be correct. 2. elements wraps entire content. 3. element contains metadata and element; titled displayed in browser title bar. 4.<body element contains the actual content.
10
The Basics of HTML 1.Parent element 4.Closing tags 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. 2.Child element 3.Opening tags 5.Attribute
11
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
12
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: The Basics of HTML
13
The basics of title HTML is the parent element node of both the element node and text node “The Basics of.” element node is the child element node of the element node and contains two children of its own: an attribute node title and a text node containing “HTML.”
14
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
15
Two general categories of elements: Block level elements Inline elements
16
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, tables
17
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, emphasized words, abbreviations, short quotations
18
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.
19
What if there are no suitable elements to markup your content? HTML has two generic elements for identifying custom: and Used mainly for semantically marking up common page elements found in many sites: Headers, footers, content sections
20
Wraps block-level elements some text more text and more first item second item third item
21
Wraps inline elements or content HTML Basics, Web Standards Concepts WSDI
22
Best PracticeCorrectIncorrect Quote attribute values title=“Hypertext Markup Language” title=Hypertext Markup Language Close elements properly after opening them This is a heading Nest elements properly This text is emphasized strongly in parts
23
Separate content from presentation All content should go in HTML, but separate style information into CSS
24
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
25
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 & or the numeric reference &
Similar presentations
