1. Introduction to HTML

2. What is HTML?  Hyper Text Markup Language  Not a programming language but a markup language  Used for presentation and layout of web pages  Used to describe page content  Earlier versions of HTML had little semantic constructs  Newest versions of the HTML spec attempt to rectify this

3. Basic Structure of an HTML page Hello World This is a paragraph

4. Understanding HTML Tags  HTML tags are keywords (tag names) surrounded by angle brackets like  HTML tags normally come in pairs like and  The first tag in a pair is the start tag, the second tag is the end tag  The end tag is written like the start tag, with a forward slash before the tag name  Start and end tags are also called opening tags and closing tags Content goes here

5. Html Headings  These are used to display heading content on a web page  They are represented by tags to Example : This is a heading 1 tag This is a heading 2 tag This is a heading 3 tag This is a heading 4 tag This is a heading 5 tag This is a heading 6 tag

6. Html paragraphs  Represented by the tag  Example The content of the paragraph goes here!

7. Html links  Represented by the tag Google Home Page  The tag can also be used to represent anchor tags to content on the same page  Link to content  Content to be linked to

8. Images  Represented by tag

9. Tables  Used for displaying data  In early web days tables were used for styling pages, but styling now should be exclusively achieved with CSS (Cascading Style Sheets)  Tables are defined with the tag  Child elements of include  Table Row  Table definition or column  table header

10. Example of simple table First Name Last Name Email Address John Smith john.smith@gmail.com

11. Example of well defined table Details on the productivity of each Manager in a plant Weekday Date Manager Qty Mon 09/11 Kelsey 639 Tue 09/12 Lindsey 596 Wed 09/13 Randy 1135 Thu 09/14 Susan 1002 Fri 09/15 Randy 908 Sat 09/16 Lindsey 371 Sun 09/17 Susan 272 Total 4923

12. Table Result

13. HTML List Tags  Ordered lists  Unordered lists  These parent list tags contain children elements which make up the individual list items

14. Ordered Lists College of Applied Science and Tech Information Technology Dept College of Business

15. Unordered Lists Apple Banana Grape Strawberry

16. Block vs Inline Elements  HTML elements can generally be categorized as block level elements or inline elements  Block level elements start and end with a new line when displayed in a browser  Eg of Block level elements are:  Inline elements are displayed without starting a new line  Eg of Inline elements are: etc

17. element  This is a block level element  It is used to separate and style large blocks of content  Displayed by default on the browser with a line break before and after it  Example of Use Content of page goes here

18. element  This is an inline element  Used to apply special styles and formatting to text that is displayed inline  It is often used in conjunction with CSS to achieve the desired formatting  An error has occurred! An error has occurred!

19. HTML Forms  Forms are used to send information from the client to the web server  Forms contain different type of elements  Text fields  Radio buttons  Checkboxes  Select lists  Textareas  Password fields  Buttons or

20. Form Tags

21. Form Example

22. Form HTML Code Sample Form First Name: Last Name: Email Address: Gender: Male

23. Form HTML Code Cont’d Female Age Range: 10-20 20-30 30-40 40-50 Comments:

24. HTML DOCTYPE  A declaration helps a browser to display a web page correctly  It is usually placed at the start of an HTML file  A few different flavors of DOCTYPE exist  is not an HTML tag but it is information to the browser about what version HTML is rendered in

25. HTML 5 DOCTYPE Title of the document The body of the document

26. HTML Versions Source: http://www.w3schools.com/html/html_doctype.asphttp://www.w3schools.com/html/html_doctype.asp List of other doc types: http://www.w3schools.com/tags/tag_doctype.asphttp://www.w3schools.com/tags/tag_doctype.asp

27. HTML5  What is HTML5?  http://www.youtube.com/watch?v=mzPxo7Y6JyA http://www.youtube.com/watch?v=mzPxo7Y6JyA  Excellent HTML5 resource  http://diveintohtml5.info/ http://diveintohtml5.info/

28. What is HTML5?  Latest specification of HTML  Includes native tags for video so plugins do not have to be downloaded  Adds semantic native tags for common document structures  Headers  Footers  Sections  Captions

29. What is HTML5  Will allow a single version of an app to be rendered effectively across every compliant browser and platform including mobile phones and tablets  Can be thought of a collection of individual features  To convert your old web pages to HTML5 simply place the new DOCTYPE at the start of your page

30. Looking more closely at the new features of HTML5  Canvas  http://diveintohtml5.info/canvas.html http://diveintohtml5.info/canvas.html  Geolocation  http://diveintohtml5.info/canvas.html http://diveintohtml5.info/canvas.html  Local Storage  http://diveintohtml5.info/storage.html http://diveintohtml5.info/storage.html  Cache Manifest  http://diveintohtml5.info/offline.html http://diveintohtml5.info/offline.html  Web Workers for multi-threaded javascript

31. Storing Data in Browsers  Cookies  Allow us to login automatically to frequently visited websites  They have a data size limit of 4 KB  Issues with privacy and tracking  They are sent with every HTTP request so there is additional overhead in data transfer across the wire

32. Local Storage and Session Storage  It has a simple API (get and set)  Provides developers with a large amount of space (at least 5 to 10 MB per domain)  Data stored can be accessed via javascript  sessionStorage is only available within the browser tab or window session  It is removed when the browser is closed  Only designed to store data in a single web page session

33. Local Storage and Session Storage  Localstorage is kept even between browser sessions  Data is still available when the browser is closed or opened  Example sessionStorage.setItem('myKey', 'myValue'); var myVar = sessionStorage.getItem('myKey'); localStorage.setItem('myKey', 'myValue'); var myVar = localStorage.getItem('myKey'); Good Resource: http://sixrevisions.com/html/introduction-web-storage/http://sixrevisions.com/html/introduction-web-storage/

34. New Form Elements of HTML5  New form elements with automatic validation  Email   Url   Numbers 

35. New form elements of HTML5  Numbers as sliders   Date Pickers   Search boxes 

36. New form elements of HTML5  Color Picker 

37. Case studies  http://illinoisstate.edu/ http://illinoisstate.edu/  http://www.apple.com http://www.apple.com  http://news.google.com http://news.google.com