Embed Size (px)
DESCRIPTION
Citation preview
HTML
1
Interaction
2
Upon this course completion you will have basic knowledge on
• legacy of HTML and CSS
• various versions of HTML and XHTML and mighty html5
• HTML structure & elements
• use of semantic markup
• base tools
• base sources
3
Course agenda
1. HTML history and evolution
2. HTML documents structure
3. HTML elements
4. HTML vs XHTML
5. semantic markup
6. HTML5
7. tools
8. Sources + !Sources
4
HTML history: origins
• invented in CERN by Tim Berners-Lee
• language based on SGML
5
HTML history: version history
• 1993 IETF introduces HTML specification draft
• 1995 first specification - HTML2.0 - by HTMLWG
• 1997 HTML3.2 by W3C. In the same year HTML4.0
๏ 1998 XML1.0 spec & W3C decided that there will be no more no-xml versions of HTML in the future
• 1999 HTML4.01
6
• 2000 XHTML 1.0
• 2000 XHTML 1.1
• 2003 Apple and Opera blasts xform 1.0 specs
• 2004 after W3C workshop WHATWG was found and work on HTML5 began
• 2008 first working draft on HTML5
• 2010 NOW - HTML5 5th version of working draft
7
HTML history: version history
HTML?
8
• It is
• markup - a way of structuring content
• place to add meta-information for browser to process
• It is not
• programming language
• presentation (styling) layer
HTML document structure
9
• three main elements
• we got some tags
• too simple?
HTML document structure:tags
10
• just any tag_name? - NO
• “ or ‘ - work both ways but use “
• empty tags? -use shorthand in xhtml <span/>
• case sensitive? NO
• spaces inside tags?omitted
HTML : tags - structural
11
• provide structure to content
• containers
• semantic elements
• structure organization
• elements of DOOM
• <br>
• <hr>
HTML : tags - list
12
• listing content
• lists
• definition lists
• punctuations
HTML : tags - text formatting
13
• text formatting
• inline elements
• links
• code
• citations
• ...
• elements of DOOM
• <i></i>
• <b></b>
• <u></u>
HTML : tags - forms
14
• building forms
• different inputs
• description elements
• structure
• kinda no place in here
HTML : tags - tables
15
• tables
• they are used for tabular data, nothing else!
• table definition
• rows, cells
• kinda no place in here
HTML : tags - media
16
• including media
• audio
• images
• objects
HTML : attributes
17
• some common attributes you will find
• ID
• class
• title
• type
• style
LETS GET BACK TO HEAD
18
HTML <head>
19
• You will put meta information in here
• title
• meta tags
• scripts
• styles
HTML problemds on the way
20
• html entities
• charset
• DOCTYPES
DOCTYPE
• !DOCTYPE is not HTML tag
• instruction for web browser about document markup language
• refers to Document Type Definition
• artifact from SGML
• will we utilize it? YES!
• sample doctype
21
HTML vs XHTML page 1
• HTML๏ case insensitive๏ you can omit end tags
and some start tags๏ you can omit element
attributes quotes <foo attr=value>
๏ use browser HTML parser
๏ some attributes can be expressed without name <input type=”checkbox” checked>
• XHTML๏ case sensitive๏ tags should be lowercase๏ all elements should have
start and end tags๏ requires xml syntax for
empty elements <foo/>
๏ you have to quote element attributes <foo attr=”value”>
๏ xmlns attr in html tag
22
HTML vs XHTML page 2
23
• HTML๏ MIME type text/html
• XHTML๏ should have MIME type
application/xhtml+xml๏ certain characters must
appear as named entities & as &
๏ xml:lang should be used instead of lang
๏ some DOM methods and properties may not work innerHTML, onClick
XHTML when to use?
• XHTML
๏ want to treat page as XML
๏ use MathML or CML
๏ manage several namespaces
๏ need to validate against strict markup
• HTML
๏ else ... always?
24
Semantic markup key questions
• do we need semantic markup? YES
• what are pros of semantic markup?
๏ better SEO
๏ easier to separate content from presentation
๏ clear document structure
๏ W3C standards
• when should we put special emphasis on it?
๏ designing for people with disabilities
๏ designing for wide variety of devices
25
Semantic markup principles
• “it validates” != “it is well written”
• design for human first, computers second
• html5lify your code
• do not use deprecated elements
• run from divitis and classitism
• follow usability guides to achieve compliancy with browsers for people with disabilities [f.e. put navigation in lists]
• separate your presentation and structure (style attr is evil!)
26
Semantic markup practices
• don’t use html solely for presentation [<br>,<hr>]
• your document should be easily printable without CSS
• non-content images should be provided by CSS [f.e. bullets]
• provide empty alt elements for images without meaning
• in structure use DIVs for block and SPANs for inline
• use tables for tabular data
• build your navigation on lists
• don’t create redundant classes [f.e. ‘link’ for <a>]
27
HTML5 motivations
๏ provide not only standard for developers but also processing hints for implementors
๏ back to open process [xhtml 2.0]
๏ give power back to end user
๏ focus on semantic markup
๏ improve accessibility
๏ bring new features to the deck
๏ bring unanimous standard for various devices
28
HTML5 design principles
๏ priorities : users > authors > implementors > spec writers
๏ degrade gracefully
๏ support settled practices [f.e.<br/>]
๏ separate content and presentation
๏ protect users
๏ evolution not revolution
๏ provide consistent DOM [for xHTML5 and HTML5]
29
HTML5 elements
๏ <header>
๏ <footer>
๏ <nav>
๏ <aside>
๏ <figure>
๏ <legend>
๏ <article>
๏ <section>
30
๏ <video>
๏ <audio>
Structure Media
Form controls
datetime, datetimelocal, date, month, week, time, number, range , email, url , search , color
and client side validation for them
HTML5 interoperability and access
๏ well defined behaviors in spec, focus on MUSTS for implementors
๏ provide backward compatibility, even for not valid markup
๏ same behavior, even for non conforming content in different implementations
๏ avoid complexity
๏ handle errors, provide recovery
๏ media access independence [desktop/phone/tv]
๏ heavy support for different languages
๏ heavy support for accessibility
31
HTML5 features
๏ cross document communication aka XMLHttpRequest2
๏ server push communication
๏ geolocation api
๏ web storage api
๏ messaging api [sms,mms]
๏ media capture
๏ 2D image input <canvas>
๏ ...
32
HTML5
33
IE6 ? YES!
Tools
34
• MAC
• panic coda
• textmate
• Dreamweaver
• PC
• notepad++
• dreamweaver
• YOU WILL SEEK FOR
• code syntax coloring
• snippets
• templates
• project files
• folding
• code completion
• ftp support
Sources
35
• SPARTA• htmldog.com
• dev.opera.com
• code.google.com/edu/submissions/html-css-javascript/
• reference.sitepoint.com
• developer.mozilla.org/en-US/docs
• www.w3.org/html/wiki
• for ubergeeks www.w3c.org
• MADNESS
• w3c-school.com (check w3fools.com)
• “biblie” html
Sources
36
• SPARTA• htmldog.com
• dev.opera.com
• code.google.com/edu/submissions/html-css-javascript/
• reference.sitepoint.com
• developer.mozilla.org/en-US/docs
• www.w3.org/html/wiki
• for ubergeeks www.w3c.org
• MADNESS
• w3c-school.com (check w3fools.com)
• “biblie” html
Literature
37
