HTML  1
Interaction      2
Upon this course completion you will havebasic knowledge on• legacy of HTML and CSS• various versions of HTML and XHTML an...
Course agenda1. HTML history and evolution2. HTML documents structure3. HTML elements4. HTML vs XHTML5. semantic markup6. ...
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 HTML...
HTML history: version history•   2000 XHTML 1.0•   2000 XHTML 1.1•   2003 Apple and Opera blasts xform 1.0 specs•   2004 a...
HTML?• It is • markup - a way of structuring content • place to add meta-information for browser to   process• It is not •...
HTML document structure                     • three main elements                     • we got some tags                  ...
HTML document structure:tags                       • just any tag_name?                         - NO                      ...
HTML : tags - structural• provide structure to content  • containers  • semantic elements  • structure organization• eleme...
HTML : tags - list • listing content  • lists  • definition lists  • punctuations                       12
HTML : tags - text formatting • text formatting  • inline elements  • links  • code  • citations  • ... • elements of DOOM...
HTML : tags - forms • building forms  • different inputs  • description elements  • structure • kinda no place in here    ...
HTML : tags - tables • tables  • they are used for tabular data, nothing else!  • table definition  • rows, cells • kinda ...
HTML : tags - media • including media  • audio  • images  • objects                     16
HTML : attributes • some common attributes you will find  • ID  • class  • title  • type  • style                        17
LETS GET BACK TO HEAD         18
HTML <head> •   You will put meta information in here •   title •   meta tags •   scripts •   styles                      ...
HTML problemds on the way• html entities• charset• DOCTYPES                  20
DOCTYPE•   !DOCTYPE is not HTML tag•   instruction for web browser about document markup language•   refers to Document Ty...
HTML vs XHTML page 1•   HTML                                       •   XHTML    ๏ case insensitive                        ...
HTML vs XHTML page 2•   HTML                         •   XHTML    ๏ MIME type text/html            ๏ should have MIME type...
XHTML when to use?•   XHTML    ๏   want to treat page as XML    ๏   use MathML or CML    ๏   manage several namespaces    ...
Semantic markup key questions•   do we need semantic markup? YES•   what are pros of semantic markup?    ๏   better SEO   ...
Semantic markup principles•   “it validates” != “it is well written”•   design for human first, computers second•   html5l...
Semantic markup practices•   don’t use html solely for presentation [<br>,<hr>]•   your document should be easily printabl...
HTML5 motivations  ๏   provide not only standard for developers but also processing      hints for implementors  ๏   back ...
HTML5 design principles  ๏   priorities : users > authors > implementors > spec writers  ๏   degrade gracefully  ๏   suppo...
HTML5 elementsStructure          Media   ๏   <header>      ๏   <video>   ๏   <footer>      ๏   <audio>   ๏   <nav>   ๏   <...
HTML5 interoperability and access  ๏   well defined behaviors in spec, focus on MUSTS for      implementors  ๏   provide b...
HTML5 features  ๏   cross document communication      aka XMLHttpRequest2  ๏   server push communication  ๏   geolocation ...
HTML5        IE6 ?        YES!          33
Tools•       MAC                          •   PC    •   panic coda                       •   notepad++    •   textmate    ...
Sources• SPARTA •   htmldog.com •   dev.opera.com •   code.google.com/edu/submissions/html-css-javascript/ •   reference.s...
Sources• SPARTA •   htmldog.com •   dev.opera.com •   code.google.com/edu/submissions/html-css-javascript/ •   reference.s...
Literature             37
Upcoming SlideShare
Loading in …5
×

Html

1,066 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,066
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

  1. 1. HTML 1
  2. 2. Interaction 2
  3. 3. Upon this course completion you will havebasic 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
  4. 4. Course agenda1. HTML history and evolution2. HTML documents structure3. HTML elements4. HTML vs XHTML5. semantic markup6. HTML57. tools8. Sources + !Sources 4
  5. 5. HTML history: origins• invented in CERN by Tim Berners-Lee• language based on SGML 5
  6. 6. 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
  7. 7. HTML history: version history• 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
  8. 8. HTML?• 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 8
  9. 9. HTML document structure • three main elements • we got some tags • too simple? 9
  10. 10. HTML document structure:tags • 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 10
  11. 11. HTML : tags - structural• provide structure to content • containers • semantic elements • structure organization• elements of DOOM • <br> • <hr> 11
  12. 12. HTML : tags - list • listing content • lists • definition lists • punctuations 12
  13. 13. HTML : tags - text formatting • text formatting • inline elements • links • code • citations • ... • elements of DOOM • <i></i> • <b></b> • <u></u> 13
  14. 14. HTML : tags - forms • building forms • different inputs • description elements • structure • kinda no place in here 14
  15. 15. HTML : tags - tables • tables • they are used for tabular data, nothing else! • table definition • rows, cells • kinda no place in here 15
  16. 16. HTML : tags - media • including media • audio • images • objects 16
  17. 17. HTML : attributes • some common attributes you will find • ID • class • title • type • style 17
  18. 18. LETS GET BACK TO HEAD 18
  19. 19. HTML <head> • You will put meta information in here • title • meta tags • scripts • styles 19
  20. 20. HTML problemds on the way• html entities• charset• DOCTYPES 20
  21. 21. 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
  22. 22. HTML vs XHTML page 1• HTML • XHTML ๏ case insensitive ๏ case sensitive ๏ you can omit end tags ๏ tags should be lowercase and some start tags ๏ all elements should have ๏ you can omit element start and end tags attributes quotes ๏ requires xml syntax for <foo attr=value> empty elements <foo/> ๏ use browser HTML ๏ you have to quote parser element attributes ๏ some attributes can be <foo attr=”value”> expressed without name ๏ xmlns attr in html tag <input type=”checkbox” checked> 22
  23. 23. HTML vs XHTML page 2• HTML • XHTML ๏ MIME type text/html ๏ should have MIME type application/xhtml+xml ๏ certain characters must appear as named entities & as &amp; ๏ xml:lang should be used instead of lang ๏ some DOM methods and properties may not work innerHTML, onClick 23
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. HTML5 elementsStructure Media ๏ <header> ๏ <video> ๏ <footer> ๏ <audio> ๏ <nav> ๏ <aside> ๏ <figure> Form controls ๏ <legend> datetime, datetimelocal, date, ๏ <article> month, week, time, number, range , email, url , search , color ๏ <section> and client side validation for them 30
  31. 31. 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
  32. 32. 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
  33. 33. HTML5 IE6 ? YES! 33
  34. 34. Tools• MAC • PC • panic coda • notepad++ • textmate • dreamweaver • Dreamweaver• YOU WILL SEEK FOR • code syntax coloring • folding • snippets • code completion • templates • ftp support • project files 34
  35. 35. Sources• 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 35
  36. 36. Sources• 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 36
  37. 37. Literature 37

×