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

Tag ...... 11 Simple Alignment of Text with

Tags ...... 11 Formatting a

Tag ...... 12 Padding the

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