• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html
 

Html

on

  • 932 views

 

Statistics

Views

Total Views
932
Views on SlideShare
932
Embed Views
0

Actions

Likes
0
Downloads
24
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html Html Presentation Transcript

    • HTML 1
    • Interaction 2
    • 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
    • Course agenda1. HTML history and evolution2. HTML documents structure3. HTML elements4. HTML vs XHTML5. semantic markup6. HTML57. tools8. 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
    • 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
    • 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
    • HTML document structure • three main elements • we got some tags • too simple? 9
    • 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
    • HTML : tags - structural• provide structure to content • containers • semantic elements • structure organization• elements of DOOM • <br> • <hr> 11
    • HTML : tags - list • listing content • lists • definition lists • punctuations 12
    • HTML : tags - text formatting • text formatting • inline elements • links • code • citations • ... • elements of DOOM • <i></i> • <b></b> • <u></u> 13
    • HTML : tags - forms • building forms • different inputs • description elements • structure • kinda no place in here 14
    • HTML : tags - tables • tables • they are used for tabular data, nothing else! • table definition • rows, cells • kinda no place in here 15
    • 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 19
    • 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 Type Definition• artifact from SGML• will we utilize it? YES!• sample doctype 21
    • 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
    • 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
    • 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 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
    • 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 IE6 ? YES! 33
    • 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
    • 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
    • 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
    • Literature 37