www.it-ebooks.info
HTML5Step by StepFaithe Wempenwww.it-ebooks.info
Published with the authorization of Microsoft Corporation by:O’Reilly Media, Inc.1005 Gravenstein Highway NorthSebastopol,...
iiiTo Margaretwww.it-ebooks.info
www.it-ebooks.info
   vWhat do you think of this book? We want to hear from you!Microsoft is interested in hearing your feedback so we can co...
vi    Contents	 2	 Setting Up the Document Structure	 13Specifying the Document Type .  .  .  .  .  .  .  .  .  .  .  .  ....
Contents   viiHyperlinking to an E-Mail Address .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . ...
viii    Contents	 9	 Displaying Graphics	 141Selecting a Graphics Format . .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . ...
Contents   ixMerging Table Cells .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . ...
x    ContentsEmbedding Video Clips . .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  ....
Contents   xiInserting Hyperlinks . .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . ...
www.it-ebooks.info
xiiiAcknowledgmentsThank you to the wonderful editorial staff at O’Reilly Media for guiding this booksmoothly through the ...
www.it-ebooks.info
IntroductionHypertext Markup Language (HTML) is the underlying markup language of the WorldWide Web. It’s the common threa...
xvi   Introduction(Please note that the access code in this image is for illustration purposes only.)	 4.	 Click the CONFI...
Introduction   xvii	5B.	 If you are a new user, click the NEW USER – FREE ACCOUNT button underStep 2.●● You’ll be taken to...
xviii   IntroductionA new browser window or tab will open, followed by the File Download dialog box:	 3.	 Click Save.	 4.	...
xixWhat Is HTML?In simple terms, a Web page (or HTML document) is a plain text file that has beenencoded using Hypertext M...
xx    What Is HTML?To understand how this system of tagging came about, you need to know that backin the olden days of the...
What Is HTML?   xxiThe tag for a hyperlink is <a>, a two-sided tag, but most people wouldn’t recognize itwithout the attri...
xxii    What Is HTML?Simply put, it’s because doing your own coding is the best way to learn HTML. In thisbook you’ll buil...
What Is HTML?   xxiiiThe code you will create as you work through the exercises in this book is based onHTML5, but I will ...
xxiv    What Is HTML?A slightly longer answer is because it enables cleaner, easier-to-write code. Web pagetechnology has ...
xxvUsing the Practice FilesEach exercise in the lessons is preceded by a paragraph or paragraphs that list the filesneeded...
xxvi    Using the Practice FilesChapter Folder SubfolderChapter 6:Introduction to Style Sheets06Styles ConstructingRulesCr...
xxviiChapter Folder SubfolderChapter 13:Formatting Tables13FmtTables ApplyingBackgroundApplyingBordersChangingPaddingChapt...
xxviiiGetting HelpEvery effort has been made to ensure the accuracy of this book. If you do run into prob-lems, please con...
xxixConventions and Features inThis BookYou can save time when you use this book by understanding how the Step by Step ser...
xxx    Conventions and Features in This BookWhat Next?To get started, turn the page to Chapter 1 and start reading and wor...
1Part 1Getting Startedwith HTML	 1	 Editing and Viewing HTML Files  . . . . . . . . . . . . . . . . . 3	 2	 Setting Up the...
Chapter at a GlanceOpen a Web page inNotepad, page 2Preview a Web pagein Internet Explorer,page 7Make, save, andview chang...
3	 1	Editing and ViewingHTML FilesIn this chapter, you will learn how to4	 Open a Web page in Notepad.4	 Preview a Web pag...
4   Chapter 	 1	 Chapter 	1	Note  You may run into various extensions on Web page files on the Internet, such as .php,.as...
Opening a Web Page in Notepad   5	 5.	 In the Open dialog box, click welcome.htm, and then click Open.The welcome.htm file...
6   Chapter 	 1	 Chapter 	1	SET UP  Open Notepad.	 1.	 Select File | Open.	 2.	 Navigate to the folder containing the pra...
Previewing a Web Page in a Web Browser   7Opening a File from Windows ExplorerA quick way to open most file types in their...
8   Chapter 	 1	 Chapter 	1	For beginners, though, Internet Explorer is a good choice because it’s the most popularbrowse...
Previewing a Web Page in a Web Browser   9	 3.	 Click the Browse button, and then browse to DocumentsMicrosoft PressHTML5S...
10   Chapter 	 1	 Chapter 	1	The file opens in Internet Explorer.CLEAN UP  Leave Internet Explorer open for the next exer...
Key Points   11	 1.	 In Notepad, locate the word Iowa, and change it to Indiana, as shown in bold textin the following cod...
Chapter at a GlanceCreate the HTML,head, and bodysections, page 15Create paragraphand line breaks,page 17Specify a page ti...
13	 2	Setting Up theDocument StructureIn this chapter, you will learn how to4	 Specify the document type.4	 Create the HTM...
14   Chapter 	 2	 Chapter 	2	Specifying the Document TypeWhen creating an HTML5 document, the first line of the document ...
Creating the HTML, Head, and Body Sections   15Creating the HTML, Head, and Body SectionsAll of your HTML coding—except th...
16   Chapter 	 2	 Chapter 	2		 2.	 In the Notepad window, type the following:!DOCTYPE html	 3.	 Press Enter, and then typ...
Creating Paragraphs and Line Breaks   17Creating Paragraphs and Line BreaksWithin the body section of the document, you ty...
18   Chapter 	 2	 Chapter 	2	Note  In XHTML, the line break tag is br /. The end slash (and the space) is necessary toind...
Specifying a Page Title and Metatags   19Note  Your screen might look slightly different, depending on the settings you ha...
20   Chapter 	 2	 Chapter 	2	Note  Not all search engines refer to meta tags. Google does not, for example; it indexesonl...
Specifying a Page Title and Metatags   21SET UP  Use the index.htm file from the previous exercise or in the practice file...
22   Chapter 	 2	 Chapter 	2	Publishing a File to a ServerThroughout most of this book’s exercises, you will save pages t...
Key Points   23Key Points●● To specify HTML5 as the document type, add !DOCTYPE html at the beginningof the file.●● All th...
Chapter at a GlanceApply superscriptand subscriptformatting,page 46Create headings,page 27Use monospaceand preformattedtex...
25	 3	Formatting Text byUsing TagsIn this chapter, you will learn how to4	 Create headings.4	 Apply bold and italic format...
26   Chapter 	 3	 Chapter 	3	This chapter introduces several important tags that format text according to its purpose.In ...
Creating Headings   27As noted earlier, there are no specific sizes or fonts assigned to the heading tags—theirappearance ...
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Html5 step by_step
Upcoming SlideShare
Loading in …5
×

Html5 step by_step

13,304 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,304
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
90
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html5 step by_step

  1. 1. www.it-ebooks.info
  2. 2. HTML5Step by StepFaithe Wempenwww.it-ebooks.info
  3. 3. Published with the authorization of Microsoft Corporation by:O’Reilly Media, Inc.1005 Gravenstein Highway NorthSebastopol, California 95472Copyright © 2011 Faithe WempenComplying with all applicable copyright laws is the responsibility of the user. All rights reserved. Without limiting the rightsunder copyright, no part of this document may be reproduced, stored in or introduced into a retrieval system, or transmittedin any form or by any means (electronic, mechanical, photocopying, recording, or otherwise), or for any purpose, withoutexpress written permission of O’Reilly Media, Inc.Printed and bound in Canada.1 2 3 4 5 6 7 8 9 TG 6 5 4 3 2 1Microsoft Press titles may be purchased for educational, business or sales promotional use. Online editions are also availablefor most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department:(800) 998-9938 or corporate@oreilly.com. Visit our website at microsoftpress.oreilly.com. Send comments to mspinput@microsoft.com.Microsoft, Microsoft Press, ActiveX, Excel, FrontPage, Internet Explorer, PowerPoint, SharePoint, Webdings, Windows,and Windows 7 are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or othercountries. Other product and company names mentioned herein may be the trademarks of their respective owners.Unless otherwise noted, the example companies, organizations, products, domain names, e-mail addresses, logos, people,places, and events depicted herein are fictitious, and no association with any real company, organization, product, domainname, e-mail address, logo, person, place, or event is intended or should be inferred.This book expresses the author’s views and opinions. The information contained in this book is provided without any ex-press, statutory, or implied warranties. Neither the author, O’Reilly Media, Inc., Microsoft Corporation, nor their respectiveresellers or distributors, will be held liable for any damages caused or alleged to be caused either directly or indirectly bysuch information.Acquisitions and Development Editors: Russell Jones and Kim SpilkerProduction Editor: Kristen BorgProduction Services: Octal Publishing, Inc.Technical Reviewer: Joydip KanjilalIndexing: Lucie HaskinsCover: Karen MontgomeryCompositor: Octal Publishing, Inc.Illustrator: Robert Romano978-0-735-64526-4www.it-ebooks.info
  4. 4. iiiTo Margaretwww.it-ebooks.info
  5. 5. www.it-ebooks.info
  6. 6.    vWhat do you think of this book? We want to hear from you!Microsoft is interested in hearing your feedback so we can continually improve our books and learning resourcesfor you. To participate in a brief online survey, please visit:microsoft.com/learning/booksurveyContentsAcknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiiiIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvWhat Is HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xixUnderstanding HTML Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xixUnderstanding Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiWhy Learn HTML in Notepad? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiChoosing an HTML Version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiWhy Code in HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiiMinimum System Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxivUsing the Practice Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvGetting Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxviiiConventions and Features in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxixWhat Next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxxPart 1 Getting Started with HTML 1 Editing and Viewing HTML Files 3Opening a Web Page in Notepad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Adding the Data File Location to the Favorites List . . . . . . . . . . . . . . . . . . . . . . . 5Opening a File from Windows Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Previewing a Web Page in a Web Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Making, Saving, and Viewing Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11www.it-ebooks.info
  7. 7. vi    Contents 2 Setting Up the Document Structure 13Specifying the Document Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Creating the HTML, Head, and Body Sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Creating Paragraphs and Line Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17Specifying a Page Title and Metatags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Publishing a File to a Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 3 Formatting Text by Using Tags 25Creating Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Applying Bold and Italic Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29Applying Superscript and Subscript Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Using Monospace and Preformatted Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Formatting a Block Quotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37Configuring View Settings in Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 4 Using Lists and Backgrounds 47Creating Bulleted and Numbered Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Nesting Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Changing the Bullet or Number Character . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Specifying the Start of a Numbered List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51Creating Definition Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54Inserting Special Characters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Inserting Horizontal Lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Choosing Background and Foreground Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Specifying Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Applying a Background Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Applying a Foreground Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61Specifying a Background Image File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 5 Creating Hyperlinks and Anchors 67Hyperlinking to a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Using Partial Paths and Filenames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68Using Relative and Absolute Paths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Setting a Target Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70www.it-ebooks.info
  8. 8. Contents   viiHyperlinking to an E-Mail Address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Creating and Hyperlinking to Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75Hyperlinking to Other Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Part 2 Style Sheets and Graphics 6 Introduction to Style Sheets 85Understanding Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Constructing Style Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87Creating Styles for Nested Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Creating Classes and IDs for Applying Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Applying Styles to Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Creating and Linking to External Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 7 Formatting Text by Using Style Sheets 103Specifying a Font Family . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104Specifying a Font Size and Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Applying Bold and Italics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111Applying Strikethrough and Underlining . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114Creating Inline Spans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117Adjusting Spacing Between Letters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 8 Formatting Paragraphs by Using Style Sheets 125Indenting Paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126Applying a Border to a Paragraph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Specifying a Border Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Setting Border Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131Specifying Border Width and Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131Formatting Border Sides Individually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Setting All Border Attributes at Once . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133Specifying the Horizontal Alignment of a Paragraph . . . . . . . . . . . . . . . . . . . . . . . . 135Specifying Vertical Space within a Paragraph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139www.it-ebooks.info
  9. 9. viii    Contents 9 Displaying Graphics 141Selecting a Graphics Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Preparing Graphics for Web Use . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143Inserting Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144Arranging Elements on the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147Controlling Image Size and Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149Hyperlinking from Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153Using Thumbnail Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Including Alternate Text for Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Adding Figure Captions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161Part 3 Page Layout and Navigation 10 Creating Navigational Aids 165Planning Your Site’s Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166Creating a Text-Based Navigation Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167Creating a Graphical Navigation Bar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Creating an Image Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174Redirecting to Another URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 11 Creating Division-Based Layouts 185Understanding HTML5 Semantic Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186Beginning to Think in Divisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187Creating Divisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Creating an HTML5 Semantic Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190Positioning Divisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192Floating a Division to the Right or Left . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192Positioning a Division on the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193Formatting Divisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 12 Creating Tables 205Creating a Simple Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207Specifying the Size of a Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211Specifying the Width of a Column . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216www.it-ebooks.info
  10. 10. Contents   ixMerging Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220Using Tables for Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 13 Formatting Tables 231Applying Table Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232Applying Borders by Using Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233Applying Borders by Using Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235Applying Background and Foreground Fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241Changing Cell Padding, Spacing, and Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Setting Cell Padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246Setting Cell Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246Setting Horizontal and Vertical Alignment . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 14 Creating User Forms 251Creating a Basic Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Creating a Text Box . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253Special Field Types for E-Mail and Web Addresses . . . . . . . . . . . . . . . . . . . . . . 254Creating a Text Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255Creating a Submit or Clear Button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255Adding Default or Placeholder Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256Creating Check Boxes and Option Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259Creating Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262Additional Input Types in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267Understanding CGI and Other Advanced Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 15 Incorporating Sound and Video 271What’s New with Audio and Video in HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272HTML Multimedia Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Multimedia Formats and Containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Codecs: Decoding the Video and Audio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274Which Format to Choose? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275File Size and Quality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275Encoding Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276www.it-ebooks.info
  11. 11. x    ContentsEmbedding Video Clips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277Introducing the <video> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277The <embed> Tag: Your Fallback Plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279Placing a Video Clip on a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279Incorporating Audio on a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282Playing Audio with the <audio> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282Playing Audio in Older Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283Placing an Audio Clip on a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 16 Including JavaScript and External Content 287Introducing the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287JavaScript, Briefly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288Including JavaScript on Your Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289Your First JavaScript Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289JavaScript Events and jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292Obtaining jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293Getting Ready for jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294Selecting Elements with jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295Calling Functions with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297Responding to Events with jQuery and JavaScript . . . . . . . . . . . . . . . . . . . . . . 298Using the HTML5 <canvas> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303Including External Content in Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311Part 4 Other Ways to Create HTML Code 17 HTML and Microsoft Expression Web 315Exploring the Expression Web Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316Creating Web Sites and Web Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320Create a Page by Using a CSS Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Insert Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328Import an Images Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328Place Images on a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330Add a Background Image to a Division . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331Formatting Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333Formatting a Division . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338www.it-ebooks.info
  12. 12. Contents   xiInserting Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340Key Points . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343Part 5 Appendixes A Designing for Usability 347Understanding Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347Planning for Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348Sketching the Site Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349Designing a Consistent Page Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349Designing the Content of Individual Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350Performing Usability Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 B Designing for Accessibility 353Guideline 1: Provide Equivalent Alternatives to Auditory and Visual Content . . . . 354Guideline 2: Don’t Rely on Color Alone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354Guideline 3: Use Markup and Style Sheets, and Do So Properly . . . . . . . . . . . . . . . 355Guideline 4: Clarify Natural Language Usage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356Guideline 5: Create Tables that Transform Gracefully . . . . . . . . . . . . . . . . . . . . . . . . . 356Guideline 6: Ensure that Pages Featuring New Technologies Transform Gracefully . .357Guideline 7: Ensure User Control of Time-Sensitive Content Changes . . . . . . . . . . 357Guideline 8: Ensure Direct Accessibility of Embedded User Interfaces . . . . . . . . . . 358Guideline 9: Design for Device Independence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358Guideline 10: Use Interim Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359Guideline 11: Use W3C Technologies and Guidelines . . . . . . . . . . . . . . . . . . . . . . . . 359Guideline 12: Provide Context and Orientation Information . . . . . . . . . . . . . . . . . . 360Guideline 13: Provide Clear Navigation Mechanisms . . . . . . . . . . . . . . . . . . . . . . . . . 360Guideline 14: Ensure that Documents are Clear and Simple . . . . . . . . . . . . . . . . . . . 361 C Tags Added and Removed in HTML5 363Tags Added in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363Tags Removed in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385www.it-ebooks.info
  13. 13. www.it-ebooks.info
  14. 14. xiiiAcknowledgmentsThank you to the wonderful editorial staff at O’Reilly Media for guiding this booksmoothly through the editorial and production process. This is my first book for O’Reilly,and I certainly hope that it won’t be the last. It was a pleasure working with you all.www.it-ebooks.info
  15. 15. www.it-ebooks.info
  16. 16. IntroductionHypertext Markup Language (HTML) is the underlying markup language of the WorldWide Web. It’s the common thread that ties together virtually every Web site, from large-scale corporate sites such as Microsoft’s to single-page classroom projects at the localgrade school.Don’t let the phrase “markup language” intimidate you. A markup language annotatesor “marks up” plain text, letting a browser know how to format that text so it looks goodon a Web page. It’s easy to get started—in fact, you can create a simple Web page in justa few minutes. While full-featured What You See Is What You Get (WYSIWYG) tools existthat can help speed up the process of writing Web pages, all you really need is an ordi-nary text-editing program such as Microsoft Notepad. You don’t need special softwareor extensive training.In this introduction, you’ll learn some basics about HTML. You’ll find out how they turnplain text into attractive formatting, how they incorporate graphics and hyperlinks, andhow anyone can create Web content in virtually any program that edits text. This intro-duction explains what cascading style sheets (CSS) are, and how they make formattingconsistent across large Web sites. You’ll also discover the differences between HTML4,XHTML, and HTML5, so you can make the important decision about which version ofHTML you want your code to conform to. Finally, you’ll learn about the conventions usedin this book for pointing out special helps like notes, tips, cautions, and references to thedata files.How to Access Your Online Edition Hosted by SafariThe voucher bound in to the back of this book gives you access to an online edition ofthe book. (You can also download the online edition of the book to your own computer;see the next section.)To access your online edition, do the following: 1. Locate your voucher inside the back cover, and scratch off the metallic foil to revealyour access code. 2. Go to http://microsoftpress.oreilly.com/safarienabled. 3. Enter your 24-character access code in the Coupon Code field under Step 1:www.it-ebooks.info
  17. 17. xvi   Introduction(Please note that the access code in this image is for illustration purposes only.) 4. Click the CONFIRM COUPON button.A message will appear to let you know that the code was entered correctly. If thecode was not entered correctly, you will be prompted to re-enter the code. 5. In this step, you’ll be asked whether you’re a new or existing user of Safari BooksOnline. Proceed either with Step 5A or Step 5B. 5A. If you already have a Safari account, click the EXISTING USER – SIGN IN but-ton under Step 2.www.it-ebooks.info
  18. 18. Introduction   xvii 5B. If you are a new user, click the NEW USER – FREE ACCOUNT button underStep 2.●● You’ll be taken to the “Register a New Account” page.●● This will require filling out a registration form and accepting an End UserAgreement.●● When complete, click the CONTINUE button. 6. On the Coupon Confirmation page, click the My Safari button. 7. On the My Safari page, look at the Bookshelf area and click the title of the bookyou want to access.How to Download the Online Edition toYour ComputerIn addition to reading the online edition of this book, you can also download it to yourcomputer. First, follow the steps in the preceding section. After Step 7, do the following: 1. On the page that appears after Step 7 in the previous section, click the Extras tab. 2. Find “Download the complete PDF of this book,” and click the book title:www.it-ebooks.info
  19. 19. xviii   IntroductionA new browser window or tab will open, followed by the File Download dialog box: 3. Click Save. 4. Choose Desktop and click Save. 5. Locate the .zip file on your desktop. Right-click the file, click Extract All, and thenfollow the instructions.Note  If you have a problem with your voucher or access code, please contactmspbooksupport@oreilly.com, or call 800-889-8969, where you’ll reach O’Reilly Media,distributor of Microsoft Press books.www.it-ebooks.info
  20. 20. xixWhat Is HTML?In simple terms, a Web page (or HTML document) is a plain text file that has beenencoded using Hypertext Markup Language (HTML) so that it appears nicely formattedin a Web browser. Here’s what HTML means, word-by-word:●● Hypertext  Text that you click to jump from document to document. This is a refer-ence to the ability of Web pages to link to one another.●● Markup  Tags that apply layout and formatting conventions to plain text. Literally,the plain text is “marked up” with the tags.●● Language  A reference to the fact that HTML is considered a programming language.Tip  When people think of computer programming, they usually think of writing a compiledprogram. A compiled programming language runs the human-readable programming codethrough a utility that converts it to an executable file (usually with an .exe or .com extension),which is then distributed to users. In contrast, HTML is an interpreted programming language.That means the program is distributed in human-readable format to users, and the program inwhich it is opened takes care of running it. The HTML code for Web pages resides in files. Eachtime your Web browser opens a Web page, it processes the HTML code within the file.Understanding HTML TagsThe code within an HTML file consists of text surrounded by tags. These tags indicatewhere the formatting should be applied, how the layout should appear, what picturesshould be placed in certain locations, and more.For example, suppose you wanted a certain word to be italicized, like this:Everything is on sale.In HTML, there’s no Italics button to click, like there is in a word-processing program. There-fore, you have to “tag” the word that you want to be italicized. The code to turn on italics is<i>, and the code to turn italics off is </i>. Your HTML code would look something like this:<i>Everything</i> is on sale.That’s an example of a two-sided tag, which encloses text between opening and closingtags, in this case <i> and </i>. Note the forward slash in the closing tag (</i>). Thatslash differentiates an opening tag from a closing tag. With a two-sided tag, there isalways a corresponding closing tag for every opening tag.www.it-ebooks.info
  21. 21. xx    What Is HTML?To understand how this system of tagging came about, you need to know that backin the olden days of the Internet, nearly everyone connected to it by using a dial-upmodem, at speeds ranging from 2400 bps to 28.8 Kbps. That’s really slow. Text filestransfer much faster than binary files, so for any type of information-sharing system tobe popular, it had to be text-based. Otherwise, people would doze off while waiting for apage to load.People designing Web pages also wanted their pages to be attractive. They couldn’tjust format pages in a word processor, though, because every word processor handledformatting differently, and it was impossible to know which one a visitor to a site mightbe using. Word processing files are also much larger than plain text files.The Web’s creators developed an elegant solution. Instead of sending the formattedpages over the Internet, they created an application—a Web browser—that couldinterpret plain-text code (HTML tags) as formatting instructions. The text could be sentquickly and efficiently in plain-text format, and then be processed and displayed attrac-tively and graphically on the local PC.HTML worked great all by itself for all kinds of text formatting, but some Web designerswanted to include graphics on their pages. To accommodate this, the <img> tag wascreated, which designers use to refer to a graphic stored on a server. When the Webbrowser gets to that tag, it requests that the image file be downloaded from the serverand displayed on the page. (You’ll learn how to insert images in Chapter 9, “DisplayingGraphics.”)The <img> tag is different in several ways from the <i> tag. It is one-sided, meaning itdoes not have a closing tag, and it takes attributes. An attribute is text within the tag thatcontains information about how the tag should behave. For example, for an <img> tag,you have to specify a source, abbreviated src. Here’s an example:<img src=”tree.gif”>This <img> tag uses the src= attribute, and specifies that the file tree.gif be displayed.Many tags accept attributes, either optional or required. You’ll see many examplesthroughout the exercises in this book.With HTML, you can also create hyperlinks from one page to another. When a visitor toa Web site clicks a hyperlink, the Web browser loads the referenced page or jumps to amarked section (a “bookmark”) within the same page. You will learn to create hyperlinksin Chapter 5, “Creating Hyperlinks and Anchors.”www.it-ebooks.info
  22. 22. What Is HTML?   xxiThe tag for a hyperlink is <a>, a two-sided tag, but most people wouldn’t recognize itwithout the attribute that specifies the file or location to which to jump. For example,to create a hyperlink with the words Click Here that jumps to the file index.htm whenclicked, the coding would look like this:<a href=”index.htm”>Click Here</a>There’s a lot more to HTML, of course, but that’s basically how it works. Plain text ismarked up with tags that indicate where elements such as formatting, hyperlinks, andgraphics should be applied, and a Web browser interprets those tags and displays thepage in its formatted state. The trick, of course, is to know which tags to use, and wherethey’re appropriate, and what attributes they need. And that’s the subject of this book.Understanding Cascading Style SheetsWeb designers who worked with early versions of HTML to create large Web sites wereoften frustrated by the amount of repetition involved in their jobs. Suppose a Web sitehas 200 pages, all using the same basic layout and design. To make a design change tothe entire site, a designer would have had to go in and manually edit each of those 200pages.Later versions of HTML have gotten around this by supporting cascading style sheets.Based on the same principle as style templates in a word-processing or page-layout pro-gram, Web designers use cascading style sheets to specify the formatting for a particulartag type—usually in a separate style sheet document—and then apply that style sheetto multiple pages. Need to make a change to the style? Simply make it in the style sheet,and the change is applied automatically to all pages.Although you can still format documents by using older methods—and you’ll learn howto do a little of that in this book—most Web designers rely almost exclusively on cascad-ing style sheets for formatting these days, and XHTML all but demands that you do so.It might seem intimidating at first, but if you are creating a multi-page site, the extratrouble involved in setting up a cascading style sheet will pay for itself many times over.Why Learn HTML in Notepad?This book teaches beginner-level HTML coding, but it teaches it in a rather fundamental-ist way: by creating plain text files in Notepad. There are so many good Web site creationprograms on the market nowadays that you may be wondering why this book takes thisapproach.www.it-ebooks.info
  23. 23. xxii    What Is HTML?Simply put, it’s because doing your own coding is the best way to learn HTML. In thisbook you’ll build a Web site from the ground up, writing every line of code yourself. It’sslower and not as much fun as a fancy graphical program, but it’s great training.The last chapter of this book shows how to use Microsoft Expression Web to create Webcontent, and you may eventually choose to move to a program like that. However, youwill be a much better Web designer—and understand what is going on in design pro-grams much better—if you tough it out with Notepad in the beginning.Choosing an HTML VersionDifferent versions of HTML use different tags for some types of content, although theymore similar than different overall, especially at the beginner level covered in this book.Here’s a quick comparison of the HTML versions you may encounter:●● HTML4  A very stable, universally accepted code set, which is also fairly forgivingof small coding errors. Using HTML4 codes is desirable when compatibility with allbrowsers is important.●● XHTML  A strict, standards-based implementation of HTML4 created with XML(eXtensible Markup Language). XHTML coding uses the same codes as HTML4, so itis compatible with the same browsers as HTML4. (See the sidebar about XML on thenext page for more information.)●● HTML5  A revised code set that builds upon HTML4 to add new capabilities.HTML5 offers many dramatic improvements in the areas of application handlingand multimedia, but a lot of those features are beyond the scope of this book. Interms of basic coding, which is what this book teaches, the biggest difference isthat there are new specific codes for different types of content that were previouslyhandled with more general codes. For example, HTML5 has <audio> and <video>tags for inserting multimedia content, whereas HTML4 inserts all types of multimediacontent via a generic <embed> tag.Since this is a book about HTML5, it might seem like an obvious decision to do your cod-ing using HTML5 tags, but it is not quite as simple as that in real-world situations.A good Web browser should ideally support every tag and every version of HTML it can,because the various HTML version differences should be completely invisible to the Website visitor. However, HTML5 is so new that not all browsers have caught up to it yet, andpeople who use older computers may not have the latest version of a browser even if anHTML5 compatible version is available.Tip  Here’s a site that lists what HTML5 features are supported by each version of each of thepopular Web browsers: http://caniuse.com.www.it-ebooks.info
  24. 24. What Is HTML?   xxiiiThe code you will create as you work through the exercises in this book is based onHTML5, but I will also show you some workarounds in situations where HTML5 codesmight cause problems in some browsers. You’ll learn both ways of creating a certaineffect, so that you can make the call of which codes to use in your real-life work as thesituations arise.What are XML and XHTML?There is a language related to HTML called Extensible Markup Language (XML)that programmers use to create their own tags. It’s widely used for Web databases,for example, because it can define tags for each data field. Because XML can beso completely customized, programmers can create almost any other markup lan-guage within it, just by re-creating all the officially accepted tags of that language.The W3C did just that: they re-created the entire HTML language in XML, andcalled it Extensible HTML (XHTML). Version 1.0 was released in 2001; the currentversion is XHTML 2.0, released in 2004.XHTML, then, is HTML written within the larger language of XML. Because it is vir-tually identical to HTML in its functionality, the basic set of tags is the same, andyou can learn both HTML and XHTML at the same time. You can also use XHTMLto create new tags and extensions, which is a valuable feature for advanced Webdevelopers.There’s just one thing about XHTML to watch out for: it’s not tolerant of mistakes.For example, in HTML, technically you are supposed to begin each paragraph with<p> and end each paragraph with </p>. But in HTML you can leave out the closing</p> tag if you want (or if you forget it). That won’t work in XHTML. There are lotsof little ways that XHTML is picky like that.At one point, it was thought that XHTML would eventually replace HTML4 as itssuccessor, but due to interoperability problems, that has not happened; insteadHTML5 is poised to succeed HTML4. This book doesn’t explicitly cover XHTML, butmost of what you will learn can be applied to XHTML coding.Why Code in HTML5?The short answer is: you should code in HTML5 because it’s an investment in the future.Within a few years, it will be the standard on which nearly all Web sites are based.www.it-ebooks.info
  25. 25. xxiv    What Is HTML?A slightly longer answer is because it enables cleaner, easier-to-write code. Web pagetechnology has grown by leaps and bounds, mostly due to the increase of the averageperson’s Internet connection speed, but also because users, designers, and programmersincreasingly demand more functionality from their Web pages, such as more precisecontrol of fonts and layout, better rendering on devices that vary wildly in size frommobile phones to huge desktop monitors, better images, more interactivity, video, audio,animations, and better support for various image and file formats. Because most peoplehave fast connections, they don’t have to wait a long time for pages to load that containlarge audio and video files, which means more and more sites are including audio andvideo content.HTML was not originally designed for the rigors of multimedia content delivery, so moreand more high-end professional sites have moved to other languages and technologiesthat piggyback on HTML to deliver that content, such as JavaScript, Java, and ActiveServer Pages (ASP).HTML5 adds some important new tags to make audio, video, and application integrationsmoother and more reliable. You’ll learn about many of these new tags in Chapters 15and 16, including <audio>, <video>, and <canvas>.HTML5 removes support for some of the older tags. For example, an old way (pre-HTML4)of specifying a font was the <font> tag. Today, most people use cascading style sheets todefine fonts, so the <font> tag has not been used by many Web designers in a long timeanyway. HTML5 formally removes it from the language.One of the biggest things that HTML5 removes is the ability to create multi-framedWeb sites with the <frame> and <frameset> commands. You can still create Web siteswith multiple sections, but they’re handled much more capably using tables or divisions.Chapter 11 covers divisions—the newer way, preferred by most professional Web design-ers. Chapters 12 and 13 cover tables, still an acceptable way, and preferred by manycasual Web page designers who are familiar with tables from programs like Word.Minimum System RequirementsThere are no minimum system requirements for developing HTML; you can do it in anytext editing program with any type of computer and any operating system. That’s thebeauty of HTML! This book uses Notepad as the text editor, but you can use any editorthat you like.For testing your work, you will need an HTML5-compliant Web browser application. Thelatest versions of Google Chrome and Firefox (both freely available online) will work finefor this, as will Internet Explorer 9 or higher.www.it-ebooks.info
  26. 26. xxvUsing the Practice FilesEach exercise in the lessons is preceded by a paragraph or paragraphs that list the filesneeded for that exercise and explain any file preparation you need to take care of beforeyou start working through the exercise. The practice files are available for download fromhttp://oreilly.com/catalog/0790145302083/. When you unzip them from the downloadfile, separate folders will be created for each chapter, and separate folders within each ofthose for each exercise.The following table lists the practice file folders for each chapter and the subfoldersyou’ll find within them. The practice file folder for each chapter also includes a Solutionssubfolder containing finished versions of the practice files used in that chapter.Chapter Folder SubfolderChapter 1:HTML and XHTML Basics01Editing no subfoldersChapter 2:Setting Up the Document Structure02Structure CreatingParagraphsPublishingFilesSpecifyingKeywordsSpecifyingTitleChapter 3:Formatting Text by Using Tags03Format ApplyingBoldApplyingSuperscriptConfiguringSettingsCreatingHeadingsFormattingQuotesUsingMonospaceChapter 4:Using Lists and Backgrounds04Lists ChoosingColorsCreatingGlossaryInsertingCharactersInsertingLinesNestingListsSpecifyingImagesChapter 5:Creating Hyperlinks and Anchors05Links CreatingAnchorsCreatingHyperlinksLinkingEmailLinkingOtherwww.it-ebooks.info
  27. 27. xxvi    Using the Practice FilesChapter Folder SubfolderChapter 6:Introduction to Style Sheets06Styles ConstructingRulesCreatingClassesCreatingExternalCreatingNestedStylingHyperlinksChapter 7:Formatting Text by Using Style Sheets07Text AdjustingSpacingApplyingBoldApplyingStrikeCreatingSpanSelectingFontSelectingSizeChapter 8:Formatting Paragraphs Using Style Sheets08Paragraphs AddingBordersAdjustingHeightIndentingSettingAlignmentChapter 9:Displaying Graphics09Graphics CaptioningFiguresClearingImagesCreatingHyperlinksInsertingImagesSizingImagesUsingAltUsingThumbnailsChapter 10:Creating Navigational Aids10Navigation CreatingGraphicBarCreatingImageMapCreatingTextBarRedirectingChapter 11:Creating Division-Based Layouts11Divisions CreatingDivisionsFormattingDivisionsPositioningDivisionsUsingSemanticChapter 12:Creating Tables12Tables CreatingTableSettingWidthSpanningCellsSpecifyingSizeUsingTableswww.it-ebooks.info
  28. 28. xxviiChapter Folder SubfolderChapter 13:Formatting Tables13FmtTables ApplyingBackgroundApplyingBordersChangingPaddingChapter 14:Creating User Forms14Forms CreatingButtonsCreatingFormsCreatingListsChapter 15:Incorporating Sound and Video15AudioVideoChapter 16:Including JavaScript and External Content16CanvasChapter 17:HTML and Microsoft Expression Web17Expression ViewingPagewww.it-ebooks.info
  29. 29. xxviiiGetting HelpEvery effort has been made to ensure the accuracy of this book. If you do run into prob-lems, please contact the sources listed in the following topics.Getting Help with This BookIf your question or issue concerns the content of this book or its practice files, please firstconsult the book’s errata page, which can be accessed at:http://oreilly.com/catalog/0790145302083/This page provides information about known errors and corrections to the book. If youdo not find your answer on the errata page, send your question or comment to O’ReillyMedia Customer Service at:mspbooksupport@oreilly.comwww.it-ebooks.info
  30. 30. xxixConventions and Features inThis BookYou can save time when you use this book by understanding how the Step by Step seriesshows special instructions, keys to press, buttons to click, and so on.Convention MeaningSET UPThese words are found at the beginning of paragraphs precedingstep-by-step exercises. They point out items you should check oractions you should carry out before beginning an exercise.UseOpenThese words are found within the SET UP paragraphs that pre-cede step-by-step exercises. They draw your attention to practicefiles that you’ll need to use in the exercise.CLEAN UP These words are found at the beginning of paragraphs followingstep-by-step exercises. They give instructions for closing openfiles or programs before moving on to another topic.1. Numbered steps guide you through hands-on exercises in eachtopic.l A round bullet indicates an exercise that has only one step.Troubleshooting These paragraphs show you how to fix a common problem thatmight prevent you from continuing with the exercise.Tip These paragraphs provide a helpful hint or shortcut that makesworking through a task easier.Important These paragraphs point out information that you need to knowto complete a procedure.Note These paragraphs provide supplementary or related information.Compatibility These paragraphs explain alternate coding you can use forgreater backward compatibilityCtrl+C A plus sign (+) between two key names means that you musthold down the first key while you press the second key. For exam-ple, “press Ctrl+C” means “hold down the Ctrl key while you pressthe c key.”user interface elements In exercises, the names of program elements such as buttons,commands, and dialog boxes.user input Anything you are supposed to type.glossary terms Terms explained in the glossary at the end of the book.www.it-ebooks.info
  31. 31. xxx    Conventions and Features in This BookWhat Next?To get started, turn the page to Chapter 1 and start reading and working throughthe exercises. The lessons are designed to be tackled in the order they appear in thebook, but feel free to skip around if you just need to fill in some holes in your HTMLknowledge.www.it-ebooks.info
  32. 32. 1Part 1Getting Startedwith HTML 1 Editing and Viewing HTML Files . . . . . . . . . . . . . . . . . 3 2 Setting Up the Document Structure . . . . . . . . . . . . . 13 3 Formatting Text by Using Tags . . . . . . . . . . . . . . . . . . 25 4 Using Lists and Backgrounds . . . . . . . . . . . . . . . . . . . 47 5 Creating Hyperlinks and Anchors . . . . . . . . . . . . . . . 67www.it-ebooks.info
  33. 33. Chapter at a GlanceOpen a Web page inNotepad, page 2Preview a Web pagein Internet Explorer,page 7Make, save, andview changes,page 10www.it-ebooks.info
  34. 34. 3 1 Editing and ViewingHTML FilesIn this chapter, you will learn how to4 Open a Web page in Notepad.4 Preview a Web page in Internet Explorer.4 Make, save, and view changes.As you work through this book’s exercises, you’ll learn HTML by creating and editingtext files in Notepad, and then viewing them in a Web browser to check your work. Thischapter teaches the important basic skills you need to work in these programs.See Also  Do you need only a quick refresher on the topics in this chapter? See the Key Pointssection at the end of this chapter.Practice Files  Before you can use the practice files provided for this chapter, you need todownload and install them from the book’s companion content location. See “Using thePractice Files” at the beginning of this book for more information.Opening a Web Page in NotepadNotepad is included with all versions of Windows, and you’ll find it in the All Programs(or Programs)/Accessories folder on the Start menu. It’s a simple text editor that savesonly in plain text format. That’s ideal for HTML editing because you don’t need to worryabout any extra word processing formatting being included in the file.Note  You are welcome to use a different text editor application to complete the exercises inthis book. Notepad is just a suggestion.When saving or opening files in Notepad, the default file extension is .txt. The Save andOpen dialog boxes are set by default to filter file listings so only those files with .txt exten-sions appear. That means each time you browse for a file, you need to change the file typeto All Files so you can browse for Web pages (which have .htm or .html extensions).www.it-ebooks.info
  35. 35. 4   Chapter 1  Chapter 1 Note  You may run into various extensions on Web page files on the Internet, such as .php,.asp, and .jsp. Those are all special formats designed for use with specific server technologies.This book only covers developing the basic type of Web page: the type with an .htm or .htmlextension.In this exercise, you will open a Web page in Notepad and examine its text and tags.SET UP  Use the welcome file in the practice file folder for this topic. This practice fileis located in the DocumentsMicrosoft PressHTML5 SBS01Editing folder. 1. From the Start menu, select All Programs | Accessories | Notepad. 2. In the untitled Notepad window, select File | Open. 3. Navigate to the folder containing the practice files for this chapter.On the Places bar, click Documents (or My Documents if you are using Windows XP).In the Open dialog box, double-click Microsoft Press, HTML5 SBS, and then01Editing.Note  You won’t see any files in the list at this point. The only thing that you should seeis just a _Solutions folder. (That folder contains the solution files for the lesson, but youdon’t need those now.) 4. Click the Files Of Type down arrow, and then click All Files.Click here to open Files of Type listwww.it-ebooks.info
  36. 36. Opening a Web Page in Notepad   5 5. In the Open dialog box, click welcome.htm, and then click Open.The welcome.htm file opens in Notepad.Note  The .htm extension might not appear on the welcome file in the Open dialog box.By default, file extensions for known file types are turned off in Windows. To turn themon, open Computer (or My Computer), and on the Tools menu (press the Alt key for themenu bar if you don’t see it), click Folder Options. On the View tab of the Folder Optionsdialog box, clear the Hide Extensions For Known File Types check box, and then click OK. 6. Locate the html and /html tags.These tags signify the beginning and end of the HTML code. 7. Locate the body and /body tags.These tags signify the beginning and end of the visible portion of the Web pagewhen viewed in a browser. 8. Locate the p and /p tags.These tags signify the beginning and end of a paragraph.CLEAN UP  Leave the page open in Notepad for later use.Adding the Data File Location to the Favorites ListIn the course of working through this book, you will open many files in Notepad. Tosave yourself the trouble of navigating to the data file folder each time (HTML5 SBS),you might want to add that folder to your Favorites bar in the Open dialog box for easyaccess to the data files.In this exercise, you will add to the Favorites bar a shortcut that brings you directly to theHTML5 SBS folder.www.it-ebooks.info
  37. 37. 6   Chapter 1  Chapter 1 SET UP  Open Notepad. 1. Select File | Open. 2. Navigate to the folder containing the practice files for this chapter.On the Places bar, click Documents (or My Documents if you are using Windows XP).In the Open dialog box, double-click Microsoft Press. The HTML5 SBS folder appearsas an icon. 3. Drag the HTML5 SBS icon to the Favorites list on the left side of the window.A shortcut for it appears on the Favorites list.Drag the folder here to create a shortcutCLEAN UP  Close the Windows Explorer windowNow, the next time you want to open a file in the Open dialog box, you can double-clickthat shortcut, and then double-click the folder for the chapter you are working on, whichis much more convenient!www.it-ebooks.info
  38. 38. Previewing a Web Page in a Web Browser   7Opening a File from Windows ExplorerA quick way to open most file types in their default applications is to double-click themfrom any Windows Explorer window. However, the problem with doing that for HTMLfiles is that the default application is your Web browser, not Notepad; thus, instead of thefile opening in Notepad, it opens in your Web browser. One way to get around this is toright-click a file in Windows Explorer, choose Open With from the contextual menu, andthen click Notepad. This opens Notepad and loads the file.Previewing a Web Page in a Web BrowserBecause Notepad is not a WYSIWYG (“What You See Is What You Get”) program, youwon’t be able to immediately see how the tags you type will affect the finished product.To work around this, most Web page designers keep a browser window open next toNotepad.You can preview your work in any browser; you do not need to use Internet Explorer 9(although that’s what I use in this book’s examples). In fact, as you progress with yourWeb development skills, you will probably want to acquire several different browsers totest your pages because each browser might display page elements a little differently.www.it-ebooks.info
  39. 39. 8   Chapter 1  Chapter 1 For beginners, though, Internet Explorer is a good choice because it’s the most popularbrowser—the one your target audience is most likely to be using. Other popular brows-ers include Google Chrome, Firefox, Safari, and Opera.Caution  Versions of Internet Explorer prior to version 9 do not support some of the HTML5features. You will probably want to test your Web pages in an earlier version to make sure thatpeople who use them will be able to view your page. But don’t use an earlier version of InternetExplorer as you work through this book’s examples; you won’t get the full effect of the newHTML5 features.Tip  If the video card in your computer has two monitor connectors on it, or if you have anadditional video card that you could install in your system, you might want to set up twomonitors side-by-side. That way you could work on your HTML code in Notepad on onemonitor and display the page full-screen in Internet Explorer in the other. All recent versionsof Windows support at least two monitors, and some versions support even more.In this exercise, you will display an HTML file in Internet Explorer. To see the displayed fileand the underlying code at the same time, open the practice files from this exercise andthe previous exercise in separate windows and arrange them so both are visible.SET UP  Use the welcome file from the previous exercise, or use the one in thepractice file folder for this topic. The practice file is located in the DocumentsMicrosoft PressHTML5 SBS01Editing folder. 1. Select Start | Internet Explorer.Note  Depending on your system and your default browser, Internet Explorer might notbe pinned to the top of your Start menu. If it is not, click Start | All Programs | InternetExplorer. 2. Select File | Open.The Open dialog box appears.Note  If the menu bar does not appear in Internet Explorer, press the Alt key to display it.www.it-ebooks.info
  40. 40. Previewing a Web Page in a Web Browser   9 3. Click the Browse button, and then browse to DocumentsMicrosoft PressHTML5SBS01Editing.Tip  If you created the shortcut in the Favorites bar earlier in the chapter, you can use it tosave a few clicks when browsing for the location. 4. Click welcome.htm, and then click Open.The path to the file appears in the Open dialog box. 5. Click OK.www.it-ebooks.info
  41. 41. 10   Chapter 1  Chapter 1 The file opens in Internet Explorer.CLEAN UP  Leave Internet Explorer open for the next exercise.The method you just learned works especially well when you already have your Webbrowser open, in which case you can skip step 1. An alternate method is to browse to thestorage location by using Windows Explorer, and double-click the file. Remember thatyou can’t just double-click a Web page to edit it; you must right-click it. By default, thedouble-click operation is reserved for opening the page in your Web browser. What wasa hardship only a few pages ago is now a convenience!Tip  Not all Web browser software displays pages exactly the same way. For example, onebrowser’s idea of what text should look like might be different from another. It’s a good ideato check your pages in multiple Web browsers, such as Firefox, Netscape, and Opera. These areavailable as free downloads from www.firefox.com, www.netscape.com, and www.opera.com,respectively.Making, Saving, and Viewing ChangesAfter you’ve made a change to a Web page, you will probably want to preview the resultof that change. If you set up your Internet Explorer and Notepad windows side by sidein the preceding two exercises, it’s easy to view those changes. Simply save your work inNotepad, and then refresh the display in Internet Explorer.In this exercise, you will change “Iowa” to “Indiana” in the welcome.htm file, and thenpreview that change in Internet Explorer. This exercise builds on the previous two, somake sure you have completed them. You can use this procedure throughout the restof the book to preview your work from each exercise.SET UP  Be sure to have the welcome file open in Notepad and in Internet Explorerbefore beginning this exercise. Use the welcome file from the previous exercise, oruse the one in the practice file folder for this topic. The practice file is located in theDocumentsMicrosoft PressHTML5 SBS01Editing folder.www.it-ebooks.info
  42. 42. Key Points   11 1. In Notepad, locate the word Iowa, and change it to Indiana, as shown in bold textin the following code:pWelcome to the Garden Company, located in the heart of Central Indiana./p 2. Save your work (File | Save). 3. On the Internet Explorer toolbar, click the Refresh button.Notice that the Web page shown in Internet Explorer now reads “Indiana,” too.CLEAN UP  Close the welcome file, and then exit Notepad and Internet Explorer.Key Points●● Any plain text editor, including Notepad, can be an HTML editor.●● Most Web pages have an .htm or .html extension. You can open them in Notepad,but first you need to change the Files Of Type setting in the Open dialog box to AllFiles. You must change this setting each time you use the Open dialog box.●● An alternative way to open a Web page in Notepad is to right-click it in WindowsExplorer, select Open With from the contextual menu, and then click Notepad.●● To preview a page in a Web browser, select File | Open from the browser’s menu.●● You can double-click an .htm or .html file in Windows Explorer to open it automati-cally in your default Web browser.●● To see changes you make in Notepad reflected in your Web browser, save yourwork in Notepad, and then click Refresh in the browser window.www.it-ebooks.info
  43. 43. Chapter at a GlanceCreate the HTML,head, and bodysections, page 15Create paragraphand line breaks,page 17Specify a page title,page 19www.it-ebooks.info
  44. 44. 13 2 Setting Up theDocument StructureIn this chapter, you will learn how to4 Specify the document type.4 Create the HTML, Head, and Body sections.4 Create paragraphs and line breaks.4 Specify a page title and keywords.4 Publish a file to a server.Every society needs an infrastructure with certain rules that everyone agrees to for thegeneral public good. For example, we have all agreed that a red light means “stop” and agreen light means “go.” Everyone who wants to participate in the transportation systemmust play by those rules, or chaos ensues.HTML is the same way. You can get creative with your Web content, but there must bean underlying structure in place for Web browsers to read and render your Web pagesproperly. That means the document must contain certain tags that delineate its majorsections and indicate to the browser what type of coding the document uses.In this chapter, you’ll learn how to structure a document with the correct underlying tags.You’ll learn how to specify the type of HTML you are writing and how to create Head andBody sections. You’ll also learn how to create paragraph and line breaks, specify a pagetitle, enter hidden keywords by which your page can be found in search engines, andpublish a test page to a Web server.See Also  Do you need only a quick refresher on the topics in this chapter? See the Key Pointssection at the end of this chapter.Practice Files  Before you can use the practice files provided for this chapter, you needto download and install them from the book’s companion content location. See “Usingthe Practice Files” at the beginning of this book for more information.www.it-ebooks.info
  45. 45. 14   Chapter 2  Chapter 2 Specifying the Document TypeWhen creating an HTML5 document, the first line of the document should be this tag:!DOCTYPE htmlThe DOCTYPE tag always begins with an exclamation point and is always placed at thebeginning of the document, before any other tag. Most HTML tags are not case-sensitive,but the word DOCTYPE should always be uppercase.Using the DOCTYPE tag is like signing a contract. It is an optional tag, but when you useit, you are promising that your coding will conform to certain standards. When a Webbrowser encounters a DOCTYPE tag, it processes the page in standards mode. When itdoesn’t encounter the DOCTYPE tag, it assumes that there is something quirky about thepage, and processes the page in quirks mode. When the browser sees the tag !DOC-TYPE html, it assumes you are using HTML5.The distinction between standards mode and quirks mode came about in earlier days,when there were problems with standardization between Web browsers. In some brows-ers, to display pages properly, you needed to get a little creative with the HTML code.Modern HTML coding does not allow that, but some older pages still include theseobsolete workarounds. By using the DOCTYPE tag, you are making a promise to theWeb browser that there is nothing but pure HTML code in the page.Earlier versions of HTML used more complex DOCTYPE tags. If you’re using HTML Ver-sion 4.01, the syntax for the tag is:!DOCTYPE HTML PUBLIC -//W3C/DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtdIf you’re using XHTML, the syntax for the tag is:!DOCTYPE HTML PUBLIC -//W3C/DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdNote  If you are writing XHTML code, the DOCTYPE tag is required.www.it-ebooks.info
  46. 46. Creating the HTML, Head, and Body Sections   15Creating the HTML, Head, and Body SectionsAll of your HTML coding—except the DOCTYPE tag—should be placed within the two-sided html tag. Recall from the Introduction that when a tag is two-sided, it requiresa corresponding closing tag that is identical to the opening tag but contains a slash:/html. The tags html and /html serve as a “wrapper” around all the other tags inthe document.In addition, your document should have two sections: a Head and a Body. The Head sec-tion is defined by the two-sided tag head. The Head section contains the page title,which is the text that will appear in the title bar of the Web browser and on the MicrosoftWindows taskbar button. It also includes information about the document that is not dis-played, such as its meta tags (which you’ll learn about on page 19). You can also includelines of code that run scripts, like Javascript.The Body section is defined by the two-sided tag body, and it contains all the infor-mation that appears in the Web browser when you view the page.Note  The html, head, and body tags are all optional in HTML—but you should still usethem because it’s a good design practice. They are required in XHTML. In addition, in XHTMLyou must add an argument to the html tag that declares its XML namespace, a reference tothe fact that XHTML is created within XML (as you learned in Chapter 1, “Editing and ViewingHTML Files”). Here’s how the opening html tag should look in an XHTML document: htmlxlmns=”http://www.w3.org/1999/xhtml”.In this exercise, you will create an HTML5 template file that you can reuse later for yourown work.SET UP  Start Microsoft Notepad before beginning this exercise. 1. In Notepad, open the Format menu. Word Wrap should have a check mark nextto it. If it does not, click it to enable the Word Wrap feature.Tip  Using Word Wrap makes it easier to see long lines of HTML coding without scrolling.www.it-ebooks.info
  47. 47. 16   Chapter 2  Chapter 2  2. In the Notepad window, type the following:!DOCTYPE html 3. Press Enter, and then type:htmlhead 4. Press Enter two or three times to add some blank lines, and then type:/headbody 5. Press Enter two or three times to add some blank lines, and then type:/body/html 6. Save the file as HTML5.htm on your Windows desktop (or to any other locationthat is convenient for you).Note  Most of the files you work with in this book will be stored elsewhere, but you mightfind it helpful to keep the templates created in this exercise handy for reuse. The desktopis a convenient place to store them, or you can store them anywhere you like.CLEAN UP  Close the Notepad window.You now have a template for creating any HTML documents you like. You can reopen thistemplate file and save it under different names, which will save time re-creating thesebasic tags.Tip  If you want to avoid accidentally editing the template in the future, make it read-only. Todo so, in Windows Explorer, right-click the file, and then select Properties from the contextualmenu. In the Properties dialog box, select the Read-Only check box. When you try to savechanges to a read-only file, an error message appears and a Save As dialog box prompts youto save a copy of it with a new name.www.it-ebooks.info
  48. 48. Creating Paragraphs and Line Breaks   17Creating Paragraphs and Line BreaksWithin the body section of the document, you type the text that will appear on theWeb page. Each paragraph of text should be enclosed in a two-sided tag that indicatesits type.The most basic paragraph type is the body paragraph, indicated by the p tag. It is atwo-sided tag, so the paragraph text is placed between a p and a /p.Note  In HTML, the code will still work even if the /p is omitted; in XHTML, it won’t. However,even if you never plan on coding in XHTML, it is a good practice to include the /p tag. Thisway, you won’t fall into any sloppy habits.When a browser displays a Web page, it inserts vertical white space between paragraphs:That spacing is usually convenient, but it can be a problem when the extra spacebetween lines is unwanted, such as with an address.To create a line break without officially starting a new paragraph (and thereby addingthat extra white space), use the br tag. This is a one-sided tag placed within a para-graph, at the end of each line, like this:pDavid Jaffebr317-555-8882/pwww.it-ebooks.info
  49. 49. 18   Chapter 2  Chapter 2 Note  In XHTML, the line break tag is br /. The end slash (and the space) is necessary toindicate that it’s a self-closing tag. Notice that the slash is placed after the letters, not before,as with the closing end of a two-sided tag. In XHTML, one-sided tags must end with a slash toindicate that they are self-closing. The space between the text and the final slash is also requiredso the tag will be recognized in HTML.In this exercise, you will add text to an HTML file template, and then preview it in Micro-soft Internet Explorer.SET UP  Use the HTML5.htm file from the previous exercise or in the practice filefolder for this topic. This practice file is located in the DocumentsMicrosoft PressHTML5 SBS02StructureCreatingParagraphs folder. Open the HTML5 file in Notepad. 1. Save the HTML5 file in the DocumentsMicrosoft PressHTML5 SBS folder asindex.htm.Note  It is customary to name the opening page of a Web site index.htm, index.html,default.htm, or default.html. When users type a URL in their Web browsers but omitthe file name (for example, typing www.microsoft.com rather than www.microsoft.com/filename.htm), most servers will automatically respond with the index or default page ifone exists. 2. Open the index file in Internet Explorer and arrange the Notepad and InternetExplorer windows so that both are visible.The index file displayed in Internet Explorer is currently blank. 3. In the Notepad window, type the following between the body and /body tags:pWelcome to The Garden Company! We hope you will find our site a usefulresource for becoming a better gardener.ppOur main store is located at:br108 Ponting StreetbrMacon, IN 46062/ppPlease stop by and browse our extensive inventory from Monday throughSaturday, 7:00 a.m. to 8:00 p.m./p 4. Save your work, and then press F5 or click the Refresh button at the right side ofthe Address bar to refresh the display in Internet Explorer to see the result of thechanges. Leave both windows open for the next exercise.www.it-ebooks.info
  50. 50. Specifying a Page Title and Metatags   19Note  Your screen might look slightly different, depending on the settings you haveconfigured in your browser.CLEAN UP  Close the Notepad and Internet Explorer windows.Specifying a Page Title and MetatagsPerhaps you noticed in the preceding exercise that the complete path to the fileappeared in the title bar of Internet Explorer. Usually when you view a Web page, afriendly, descriptive title appears in that spot instead. That text is specified by a titletag that is placed in the head section (also called the header). Here’s an example:headtitleThe Garden Company/title/headTroubleshooting  Make sure you place the title tag in the head section, and not in thebody section.Another element you can place in the header is the meta tag. The meta tag hasseveral purposes. One of these is to identify keywords related to your page. Placingappropriate keywords on your page can make it easier for people to find your pagewhen they are searching the Web using a search engine such as MSN. When some searchengines index your page, they rely not only on the full text of the page, but also on anykeywords they find in the meta tag area.www.it-ebooks.info
  51. 51. 20   Chapter 2  Chapter 2 Note  Not all search engines refer to meta tags. Google does not, for example; it indexesonly the text contained in the body area. Because of the potential for abuse of the system,such as Web developers packing their pages with unrelated keywords, fewer and fewer searchengines these days are using them.For example, suppose The Garden Company’s Web site would be useful to people whoare searching for information about all types of gardening problems, such as pests,weeds, and fungus, and about growing flowers and vegetables. Perhaps all these topicsare not mentioned on the main page, but you want people who search for those wordsto be directed to the main page anyway. You could place the following in the headsection:meta name=keywords content=pests, weeds, fungus, plants, flowers,vegetablesNotice that the meta tag in the above code is a single-sided tag that contains twoattributes: name and content. The values for each of those arguments follow the equalssign and are contained in double quotation marks.Note  If you are coding in XHTML, you would add a space and a slash (/) at the end of ameta tag because it is a one-sided (self-closing) tag. This is not necessary in HTML.The meta tag can also be used to redirect visitors to another page. For example, sup-pose you told everyone the address of your Web site, and then you needed to move it toanother URL. You could place a “We’ve Moved” page at the original address and use themeta tag to redirect users to the new address after five seconds, like this:meta http-equiv=refresh content=5; url=http://www.contoso.com/newpage.htmHere’s yet another common use: the meta tag can specify a character encodingscheme. This is not a big issue if you are coding only in English (or in a language likeEnglish that uses a Roman character set), but it is considered a tidy coding practice toinclude anyway. If you want, you can add meta charset=”utf-8” to the head sectionof your document to explicitly spell out that your page is in English.In this exercise, you will add a page title and some keywords to the index.htm page youcreated in the preceding exercise.www.it-ebooks.info
  52. 52. Specifying a Page Title and Metatags   21SET UP  Use the index.htm file from the previous exercise or in the practice file folderfor this topic. This practice file is located in the DocumentsMicrosoft PressHTML5SBS02StructureSpecifyingTitle folder. Open the index file in Notepad. 1. Between the head and /head tags, type the following to create the page title:titleThe Garden Company/title 2. After the title, type the following meta tag:meta name=keywords content=pests, weeds, fungus, plants, flowers,vegetables 3. Press Enter to start a new line, and type the following meta tag:meta encoding=utf-8 4. Save your work, and then view the file in Internet Explorer.The tab displays the site name, but notice that the inclusion of the meta tagscaused no apparent difference in the displayed text of the page. This is because thekeywords and encoding specification do not appear on the Web page itself.CLEAN UP  Close the Notepad and Internet Explorer windows.www.it-ebooks.info
  53. 53. 22   Chapter 2  Chapter 2 Publishing a File to a ServerThroughout most of this book’s exercises, you will save pages to your own hard drive.That way they don’t get into the public’s hands before they are completed. When a pageis finalized, however, you will want to transfer it to a publicly accessible Web server (thatis, to publish it) so that others can view it.There are several ways to transfer files to a server. The company or individual in chargeof the server should be able to advise you about your options. Here are some of the pos-sibilities that might be available:●● Uploading through an FTP connection by using Internet Explorer.  You dothis by entering the address of an FTP server (which will start with ftp://) in theAddress bar of Internet Explorer. A dialog box prompts you for your user nameand password for that server. If you enter those correctly, a Windows Explorer-likefile-management window appears, just as though you were browsing any folder onyour hard disk. You can then transfer the files by dragging them into that window,or copying them and pasting them into the FTP window.●● Uploading through an FTP connection by using FTP software.  There are manythird-party FTP applications available that make it simple to transfer files. Theseutilities have some advantages over the Internet Explorer transfer method, suchas the ability to restart uploads that are interrupted due to communication errors.Some examples include FileZilla (www.filezilla-project.org) and BulletProof FTP(www.bpftp.com).●● Saving directly to a Web folder.  Most Web development tools, such as MicrosoftExpression Web, let you to save directly to a Web server by typing the URL of thesite into the Save As dialog box. That’s very convenient! Unfortunately, you can’t dothat in Notepad,.This book doesn’t include an exercise for practicing transferring files to a server becausethe process details differ depending on many factors, including the site you are savingto, the availability of FTP software, and the version of Windows you are using. If you havequestions about how to upload your files, ask the network administrator or tech supportstaff for advice.www.it-ebooks.info
  54. 54. Key Points   23Key Points●● To specify HTML5 as the document type, add !DOCTYPE html at the beginningof the file.●● All the HTML coding in a document (except the DOCTYPE) is enclosed within atwo-sided html tag.●● The html and /html tags enclose the head and body sections.●● The head area contains the page title (title) and any meta tags. Thebody area contains all the displayable text for the page.●● Enclose each paragraph in a two-sided p tag. Most browsers add space betweenparagraphs when displaying the page.●● To create a line break without starting a new paragraph, use the one-sided br tag.●● When coding for XHTML, end one-sided tags with a space and a slash ( /). Thespace is required for recognition in HTML, and the slash is necessary for recognitionin XHTML.●● Use meta tags in the head section to indicate keywords and the documentencoding language.●● Use the title and /title tags to enclose the text that should appear in thebrowser’s title bar. Place these in the head section of the file.●● To publish pages directly to a server, you can use an FTP utility or the FTP capabil-ity built into Windows, or (with some tools) you can save files directly to a server.However, Notepad does not offer this capability.www.it-ebooks.info
  55. 55. Chapter at a GlanceApply superscriptand subscriptformatting,page 46Create headings,page 27Use monospaceand preformattedtext, page 37www.it-ebooks.info
  56. 56. 25 3 Formatting Text byUsing TagsIn this chapter, you will learn how to4 Create headings.4 Apply bold and italic formatting.4 Apply superscript and subscript formatting.4 Use monospaced and preformatted text.4 Format a block quotation.4 Configure Internet Explorer view settings.Creating Web pages is not word processing. It’s important to keep that in mind as youlearn HTML, because I’m going to ask you to be patient for a few chapters as you learnHTML the right way—that is, the standards-compliant way.When most people think of formatting text, the first thing that pops into their mindsis choosing a font—a typeface, size, and color. That’s easy to do in a word-processingdocument, but in HTML it’s more complicated. Early versions of HTML used a fonttag to specify a particular typeface, size, and color. If it were ten years ago, I would behappy to teach you that tag in this chapter, but the font tag has been removed fromHTML5. Even though most browsers still recognize the font tag, you shouldn’t useit: it’s obsolete. Therefore, rather than teach you bad habits with old tags, I’m going toteach you how to apply typefaces, sizes, and colors to text with styles—but not in thischapter. Although using styles is a superior way of applying fonts to text, it is a little moreadvanced than you’re ready for just yet. You’ll learn all about using fonts in HTML code inPart 2, “Style Sheets and Graphics.”www.it-ebooks.info
  57. 57. 26   Chapter 3  Chapter 3 This chapter introduces several important tags that format text according to its purpose.In Chapter 2, “Setting Up the Document Structure,” you learned about the p tag forregular paragraphs, but there are many other tags that are used for headings, program-ming code, quotations, and more. Most of the tags discussed in this chapter are semantictags; they describe the function of the text, rather than provide directions for formatting.For example, the h1 heading tag specifies that the text within it should be formattedas a major heading, but it provides no specifics as to what that formatting should be.The formatting specifics for semantic tags can come from a variety of sources:●● Styles  As you will learn in Part 2 of this book, you can specify the font familiesand sizes to use throughout your entire Web site. For example, you can select a fontfamily that will be suggested to the browser whenever a certain tag is applied.●● The Web browser in use  Each Web browser has defaults for the standard HTMLtags. For example, in Internet Explorer (and most other browsers), h1 is left-aligned, 18-point Times New Roman. Most browsers use the same defaults for thevery basic tags, but non-standard browsers, such as those on phones, often displaytext differently.●● Individual user customization  A user can customize his Web browser to suit hispreferences. Later in this chapter, you’ll get to play with these settings in InternetExplorer so you’ll know what your potential audience might be doing.Keep in mind as you practice using tags that their formatting is not fixed. The results yousee when previewing the exercise pages in Internet Explorer represent the default set-tings for your version of Internet Explorer (or whatever browser you are using to previewthem); the style is not intrinsic to those tags themselves. That will become important inPart 2 of the book, when you learn how to define more specific formatting for tags.See Also  Do you need only a quick refresher on the topics in this chapter? See the Key Pointssection at the end of this chapter.Practice Files  Before you can use the practice files provided for this chapter, you needto download and install them from the book’s companion content location. See “Usingthe Practice Files” at the beginning of this book for more information.Creating HeadingsHeadings in Web pages function the same way as they do in printed documents—theyseparate text into sections. The HTML standard defines six levels of headings, h1through h6, each one progressively smaller in font size.www.it-ebooks.info
  58. 58. Creating Headings   27As noted earlier, there are no specific sizes or fonts assigned to the heading tags—theirappearance can vary depending on the browser and its settings. But the heading levelsconnote relative sizes; the higher the heading number, the smaller the size in which it willrender on the screen. In Internet Explorer 9, for example, using the default settings willmake these six heading levels look as shown in the following graphic.Perhaps you noticed that headings 5 and 6 are actually smaller than body text. Keep inmind, though, that these are just the default settings; you can redefine these headings toappear any way you want.Many screen reader programs use the heading codes h1 through h6 to helpvisually-impaired users navigate a document, and some page structures rely on headingsfor outlining, too. (HTML5 has a new way of outlining documents, but that’s beyond thescope of this book.) In some cases, though, you might have a stack of headings that col-lectively should take up only one spot in an outline, like this:h1Dog Agility Club of Indiana/h1h2Training for canine athletes and their humans/h2HTML5 introduces a new tag to deal with this situation, called hgroup. When youenclose a stack of headings within hgroup, only the first heading in the stack willappear in an outline; the others will be ignored by screen readers and other outliningtools.hgroupwww.it-ebooks.info

×