HTML5: Content Authoring with New and Advanced Features
HTML5 is the latest generation of markup languages used to create content for the web. It is also used as a programming language for mobile (smartphone and tablet) application development. When people say "HTML5," they typically mean not only the latest version of HTML, but also CSS, JavaScript®, and various markup languages used to represent other kinds of web content, such as SVG (graphics) and MathML (mathematical formulas).
Web browsers, which display content coded in these languages, have evolved rapidly over the last few years. This course focuses on the new and advanced features of HTML5, covering how to create HTML5 and CSS3 markup that will work well on the widest possible variety of web browsers, mobile devices, and machine readers, such as search engine web crawlers. The course also demonstrates how to use advanced HTML5 multimedia features such as video, audio, and animation.
In this course, you will develop web content in HTML5 and CSS3 following principles of responsive web design.
You will:
- Optimize HTML content to take advantage of HTML5 and CSS3 features.
- Write advanced CSS3 selectors and media queries.
- Use advanced background and border options introduced in CSS3.
- Use advanced text formatting options introduced in CSS3.
- Use HTML5 graphics and multimedia elements, including transforms, animation, audio, and video.
- Follow best practices to enable HTML content to be successfully processed by many different web browsers and machine readers.
This course was developed using a Windows 8.1 computer, but you should be able to deliver the course using another operating system with which students have experience, such as Mac OS X, or Linux. If you intend to use the course with software different from what was used to develop the course, we highly recommend that you key test the course on that configuration before delivering it to students.
The following is the recommended configuration.
- Microsoft® Windows® 7 or 8, or more recent versions of Windows.
- Google Chrome™ (latest version) or another web browser with extensive support for HTML5 to use as the primary browser for testing and development. This course was written on Chrome version 35.
- NotePad++, or a similar programmer's text editor with line numbering and syntax coloring for HTML5 and CSS3.
- Secondary web browsers, which you can use for testing cross-browser compatibility. For this course, we recommend that you use:
- Mozilla Firefox® version 29 or later.
- Microsoft® Internet Explorer® version 11 or later.
- Opera™ web browser version 21 or later.
- If necessary, software for viewing the course slides. (Instructor machine only.)
For this course, you will need one computer for each student and one for the instructor. Each computer will need the following minimum hardware configurations:
- A Microsoft Windows®, Mac OS® X, or Linux® computer
- 16 GB (32-bit) or 20 GB (64-bit) available hard disk space
- CD-ROM drive (if installing any software from a CD-ROM)
- Keyboard and mouse (or other pointing device)
- 1,024 × 768 resolution monitor recommended
- Network cards and cabling for local network access
- Internet access (contact your local network administrator)
- Projection system to display the instructor's computer screen
Lesson 1: Creating HTML5
Content
Topic A: Develop Web
Content to Follow Standards
Topic B: Update Legacy
Web Content to Meet HTML5 Requirements
Lesson 2: Using Advanced
Techniques to Select and Apply Styles
Topic A: Use Advanced
CSS Selectors
Topic B: Provide
Alternate Layouts Based On Device Characteristics
Lesson 3: Using Advanced
Background and Border Techniques
Topic A: Use Advanced
Techniques to Create Backgrounds
Topic B: Use Advanced
Techniques to Create Borders
Lesson 4: Incorporating
Advanced Text Formats
Topic A: Use Web Fonts
Topic B: Apply
Advanced Text Styles
Lesson 5: Adding Animation
and Multimedia
Topic A: Use 2D
Transforms
Topic B: Use Animation
Styles
Topic C: Embed Audio
and Video in a Web Page
Lesson 6: Making HTML
Readable and Accessible
Topic A: Support
Various Browsers
Topic B: Improve Markup to Benefit Human and Machine Readers