Skip to main content


Teach Yourself VISUALLY HTML5

Mike Wooldridge

ISBN: 978-1-118-06332-3 July 2011 336 Pages


Make mark-up language more manageable with this visual guide

HTML5 is the next-generation of web standard mark-up language, and among other things, it offers amazing new avenues for incorporating multimedia into your sites. What easier way to master all of HTML5's new bells and whistles than with a guide that shows you, screenshot by screenshot, just what to do? Over a hundred tasks that web designers need to know most are explained using, full-color screenshots and how-to steps. From the easy stuff like revised new header and footer elements to complex updates such as canvas and audio, this guide covers the new, as well as most-commonly used, tags and features.

  • Helps you get up to speed on the completely redesigned new HyperText Markup Language, HTML5
  • Shows you how to incorporate rich media content into the sites you design, without relying on proprietary software such as Flash
  • Explains revisions, from essential structural elements like header and footer to more complex elements such as canvas and audio—over a hundred tasks in all
  • Uses easy-to-follow, full-color, two-page tutorials, so you can see step by step how to do tasks and quickly obtain the information you need

Web designers, keep your HTML skills up to date with this "learn-by-seeing," visual guide.

Chapter 1 Getting Started with HTML5 and Web Pages.

Internet Basics 4

Introducing HTML5 6

Explore Web Browsers 8

Explore HTML Editors 9

Understanding HTML5 Syntax 10

New Features in HTML5 12

View HTML5 Code in a Browser 14

Chapter 2 Creating Your First HTML5 Web Page.

Understanding HTML5 Document Structure 18

Start an HTML5 Document 20

Save an HTML5 Document 24

View an HTML5 Page 26

Add Metadata 28

Chapter 3 Adding and Modifying Text.

Create a New Paragraph 32

Add a Line Break 33

Add a Line Break Opportunity 34

Add a Horizontal Rule 35

Insert a Blank Space 36

Make Text Bold 37

Italicize Text 38

Insert Preformatted Text 39

Insert a Heading 40

Add a Block Quote 41

Add Small Print 42

Insert a Comment 43

Create a Numbered List 44

Create a Bulleted List 46

Create a Nested List 47

Create a Definition List 48

Define an Abbreviation 49

Add a Date and Time 50

Insert Special Characters 52

Special Characters 53

Chapter 4 Adding CSS Styles.

Understanding Style Sheets 56

Create an Internal Style Sheet 58

Create an External Style Sheet 60

Link to a Style Sheet 62

Apply a Style Locally 63

Apply a Style to a Tag 64

Apply a Style Using a Class 66

Apply a Style Using an ID 68

Link to Media-specific Style Sheets 70

Link to Style Sheets for iPads, iPhones, and Android Phones 72

Define Styles for Nested Tags 74

Chapter 5 Styling Text.

Change the Font Size 78

Indent Text 79

Change the Color of Text 80

Change the Font 82

Change Text Alignment 84

Change the Text Case 85

Control Line Spacing 86

Control Letter Spacing 87

Add Background Colors 88

Style a Bulleted List 90

Chapter 6 Adding Images.

Understanding Web Page Images 94

Insert an Image 96

Specify an Image Size 98

Add Alternative Text 100

Create an Image Label 101

Add an Image as a Figure 102

Align an Image Horizontally 104

Align an Image Vertically 105

Center an Image 106

Stop Text Wrap 107

Add Space around an Image 108

Add a Background Image 110

Add a Meter Image 112

Chapter 7 Adding Links.

Understanding Links 116

Understanding URLs 117

Link to Another Page 118

Open a New Window with a Link 120

Link to an Area on the Same Page 122

Link to Another File Type 124

Link to an E-Mail Address 126

Change Link Colors 128

Change Link Hover Effects 130

Define Link Relationships 132

Chapter 8 Working with Tables.

Understanding Table Structure 136

Add a Table138

Add Table Borders 140

Adjust Cell Padding and Border Spacing 142

Adjust Cell Width and Height 144

Add Column Labels 146

Add a Caption to a Table 147

Add a Background Color to Cells 148

Add a Background Color to a Table 149

Adjust the Table Size 150

Change Cell Alignment 152

Change Table Alignment 154

Extend Cells Across Columns and Rows 156

Use a Table for Page Layout 158

Chapter 9 Creating Forms.

Understanding Forms 162

Types of Form Elements 164

Create a Form 166

Send Form Data to an E-Mail Address 167

Add a Text Box 168

Add a Large Text Area 170

Add Check Boxes172

Add Radio Buttons 174

Add a Menu List176

Add a Date and Time Input 178

Add an E-Mail Field 180

Add a URL Field 182

Add a Range Slider 184

Add a File Upload 186

Add a Submit Button 188

Add a Reset Button 189

Require a Field 190

Add a Placeholder 191

Validate Input with a Pattern 192

Chapter 10 Controlling Page Layout.

Control Layout 196

Set Width and Height for an Element 198

Use Relative Positioning 200

Use Absolute Positioning 202

Use Fixed Positioning 204

Set Margins 206

Add Padding 207

Align Elements Horizontally 208

Control the Overlap of Elements 210

Apply Styles with a div Tag 212

Chapter 11 Adding Semantic Tags.

Define a Section 216

Define an Article 218

Define a Header 220

Define Navigation 222

Define an Aside 224

Define a Footer 226

Chapter 12 Working with JavaScript.

Understanding JavaScript 230

Understanding Script Events and Handlers 232

Add JavaScript to a Web Page 234

Link to a JavaScript File 235

Insert the Current Date and Time 236

Display an Alert Message Box 237

Display a Pop-Up Window 238

Create an Image Rollover Effect 240

Show a Hidden Element 242

Change Page Content 244

Display a Calculation 246

Chapter 13 Adding Canvases.

Understanding Canvases 250

Set Up a Canvas 252

Draw Rectangles 254

Draw Circles 256

Draw Lines 258

Add Text 260

Add an Image 262

Slice an Image 264

Add a Gradient 266

Rotate Canvas Content 268

Animate Canvas Content 270

Chapter 14 Adding Video and Audio.

Understanding Video and Audio 276

Insert a Video File 278

Insert an Audio File 280

Resize a Video 282

Preload Multimedia 284

Loop Multimedia 285

Offer Multiple Sources 286

Support Older Browsers 288

Embed a YouTube Video 290

Chapter 15 Publishing Your Web Pages.

Understanding Web Page Publishing 294

Look Up a Domain Name 296

Transfer Files to a Web Server with FileZilla 298

Troubleshoot Your Web Pages 302

HTML Reference 304

Index 312

Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Chapter 13
Chapter 14
All Chapter Files Examples