1. MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard (martin_neuhard@yahoo.com)

2. Lecture Agenda Lecture 2 Recap Assignment 1 Recap HTML 5.0 – Tags – Browser Support – Standard Browsers / Versions CSS Cascading Style Sheets – 3 ways to insert style sheets – External – Internal – Inline Homework -- Find a website you like, why you like it, what you would like to learn to do.

3. Lecture 2 Recap Introduced HTML Elements – Navigation – Tables – Bulleted Lists Introduced Styles – CSS Cascading Style Sheets – Text styles

4. Assignment 1 Recap What am I looking For? -4 panes -Multiple Pages -Multiple Colors -External absolute links -Internal relative links

5. HTML 5.0 Perks – Developers can now drop content into a page using ‘audio’ and ‘video’ tags‘audio’ and ‘video’ tags – Simplified linking permits greater control over various elements via JavaScript, allowing customization for a better end user experience. – The ‘canvas’ option offers a true alternative to Flash – HTML5 designed for desktop and mobile device browsers Cons – Net yet full adopted, IE is still behind in its support Introduction of tags – Audio Tag – Video Tag

6. Browser Support Browsers do support previous versions of HTML and HTML tags. Backwards compatibility is important SCORE Chrome 21 »437 Maxthon 3.4.1 »422 Opera 12.00 »385 Safari 6.0 »376 Firefox 14 »345 Internet Explorer 9 »138 Based on 500 point scale

7. Browser Support

8. Audio/Video Tags Allow you to embed audio/video directly into a page Can have controls or be played automatically Allows the object to be interacted with much more readily (via styles and or javascript)

9. Audio Tag Example Your browser does not support this audio control

10. Video Tag Example Your browser does not support the video tag.

11. Styles

12. External Styles An external style sheet is most useful when it is applied and entire Web Site. This allows changes to be made in 1 place.

13. Create a CSS File link to example Open Notepad Save File as lecture_3_e1.css Open lecture_2_e1.html Save File as lecture_3_e1.html Insert code below and above h1 {color: red} a {color: gray; font-weight: bold}

14. Internal Styles An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the tag. p {font-weight:bold;}

15. Add Internal Styles Open lecture_2_e1.html Below the tag and above the tag Save the file as lecture_3_e1.html p {font-weight: bold;}

16. Inline Styles This is the least effective method, it loses the advantage of change once, effect many To use inline styles you use the style attribute in the relevant tag. Relative

17. Homework Remember, no classes on Tuesday next week! Please find a website that you really like, tell me what elements you like about it and let me know if there is anything you think is “cool” and would like to learn about. Email this information to martin_neuhard@yahoo.com martin_neuhard@yahoo.com

18. Question and Answer