Advanced Applications of HTML Introduction ..................................................................................................................................... 1 Cascading Style Sheets ................................................................................................................... 2 About Cascading Style Sheets .................................................................................................. 2 What Cascading Means............................................................................................................. 2 Where Style Sheets Reside ....................................................................................................... 4 Style Types................................................................................................................................ 4 Style Tags.................................................................................................................................. 5 Style Rules ................................................................................................................................ 5 Syntax ....................................................................................................................................... 6 Creating HTML Tag Rules with CSS ....................................................................................... 7 Changing the Background ......................................................................................................... 8 Inline Styles and Span Tags ...................................................................................................... 8 Exercise 1 ...................................................................................................................................... 10 Introduction to the <div> Tag ....................................................................................................... 11 Simple Alignment of Text with <div> Tags ........................................................................... 11 Formatting a <div> Tag .......................................................................................................... 12 Padding the <div> Element ..................................................................................................... 13 Exercise 2 ...................................................................................................................................... 14 Understanding the New HTML5 Semantic Tags.......................................................................... 15 Using Header and Footer ........................................................................................................ 16 Identifying Navigation ............................................................................................................ 17 Using Aside ............................................................................................................................. 17 Working with Articles ............................................................................................................. 17 Identifying Sections ................................................................................................................ 18 Identifying Time Stamps......................................................................................................... 18 Styling the New HTML Semantic Tags .................................................................................. 19 Exercise 3 ...................................................................................................................................... 20 Understanding Microdata.............................................................................................................. 21 Forms ............................................................................................................................................ 22 Form Input Tags ...................................................................................................................... 22 Text Fields .............................................................................................................................. 22 Submit Button ......................................................................................................................... 23 Checkboxes ................................................................................................................................... 23 Radio Buttons.......................................................................................................................... 25 Multiple Choice ...................................................................................................................... 26 Advanced Applications of HTML www.cetc.umsl.edu Comment Box ......................................................................................................................... 27 Exercise 4 ...................................................................................................................................... 29 New Form Input Types and Attributes in HTML5 ....................................................................... 30 Working with Email Fields ..................................................................................................... 30 Working with Web Address Fields ......................................................................................... 31 Working with Numbers ........................................................................................................... 31 Using Date Pickers .................................................................................................................. 32 Working with New Form Attributes ....................................................................................... 34 Exercise 5 ...................................................................................................................................... 35 Using JavaScript with HTML Forms ............................................................................................ 36 Using JavaScript to Clear a Form Text Area .......................................................................... 37 Submitting Form Data Through Email ................................................................................... 39 New Form Input Types and Attributes in HTML5 ................................................................. 40 Date Pickers ............................................................................................................................ 43 Inserting Media in Web Pages ...................................................................................................... 45 File Formats ............................................................................................................................ 45 Linking Media ......................................................................................................................... 46 Embedding Flash Files with <object> and <embed> ............................................................. 46 A Closer Look at the Object/Embed Method ......................................................................... 47 HTML5: Audio and Video Tags (Optional) ................................................................................. 50 <Embed> ................................................................................................................................. 50 <Video> in HTML5 ................................................................................................................ 51 Using <source> to Identify Video Formats ............................................................................ 53 Compatibility with Older Browsers ........................................................................................ 54 <Audio> in HTML5 ................................................................................................................ 55 Exercise 6 (Optional) .................................................................................................................... 56 Search Engine Optimization Tips ................................................................................................. 57 Using the Canvas (Optional) ......................................................................................................... 58 Drawing on the Canvas with JavaScript ................................................................................. 58 Accordion Menus in HTML5 ....................................................................................................... 59 Appendix A: Publishing a Web Site ............................................................................................. 61 Naming Files ........................................................................................................................... 61 Accessibility for Users with Disabilities ................................................................................. 61 Service Providers .................................................................................................................... 62 Using FTP to Publish Pages .................................................................................................... 63 Appendix B: Solutions to Exercises ............................................................................................. 65 Advanced Applications of HTML www.cetc.umsl.edu .