Free Download PDF Books, Learn HTML5, Learning Free Tutorial Book

Learn HTML5, Learning Free Tutorial Book

HTML HTML5 ReadOnline

Summary of Contents

  • Page 1

    MicrosoftStartTMrL••m• I•• Ml•LearnHTML5Faithe WempenactionURI(http://www.freepdf-books.com /):http://freepdf-books.com

  • Page 2

    Ready tolearn HTML?StartHere! Learn HTML5Here!SkillLevel: BeginnerPrerequisites: NoneDEVELOPER ROADMAPStartHere!•Beginner-level instruction•Easy-to-follow explanations andexamples•Codesamples tousein yourfirst projectsLearnthefundamentals of HTML5—andbegin building yourfirst standards-bas...

  • Page 3

    LearnHTML5Faithe WempenactionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 4

    Published with the authorization of Microsoft Corporation by:O’Reilly Media, Inc.1005 Gravenstein Highway NorthSebastopol, California 95472Copyright © 2013 by Faithe WempenAll rights reserved. No part of the contents of this book may be reproduced or transmitted in any form or by any means wit...

  • Page 5

    To MargaretactionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 6

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 7

    Contents at a Glance 17,Introduction 17, xvPART I 23,GETTInG 23, STARTED 23, wITh 23, hTMLCHapTer 1 25,HTML Basics: The 25,Least You Need to 25,Know 25, 25,3CHapTer 2 41,Setting Up the Docum 41,ent Structure 41, 41,19CHapTer 3 51,Formatting Text with Ta 51,gs 51, 51,29CHapTer 4 71,Using...

  • Page 8

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 9

    viiContents 17,Introduction 17, 17, . . . . . . 17,. . . . . . . 17,. . . . . . . 17,. . . . . . . 17,. . . . . . . 17,. . . . . . . 17,. . . . . . . 17,. . . . 17, .xvPART I 23,GETTInG 23, STARTED 23, wITh 23, hTMLChapter 1 25,hTML Basics: The 25,Least you need to 25,Know 25, 25,3...

  • Page 10

    viii Contents 58,Using Monospace an 58,d Preformatted T 58,ext 58, 58,...........................36 64,Formatting a Block Quot 64,ation 64, 64,.....................................42 66,Configuring View Setting 66,s in Internet 66,Explorer 66, 66,......................44 70,Key Points 70,...

  • Page 11

    Contents ixPART II 107,STyLE 107, ShEETS 107, AnD 107, GRAPhICSChapter 6 109,Introduction to Style Shee 109,ts 109, 109,87 110,Understanding Styles 110, 110,.............................................88 111,Constructing Style Rules 111, 111,..........................................89 1...

  • Page 12

    x ContentsChapter 9 163,Inserting Graphics 163, 163,141 164,Understanding Graphic Size 164,and Resolution 164, 164,........................142 165,Inserting a Graphic 165, 165,..............................................143 168,Clearing a Graphic 168, 168,.................................

  • Page 13

    Contents xiChapter 12 221,Creating Tables 221, 221,199 222,Creating a Simple Tabl 222,e 222, 222,..........................................200 226,Specifying the Size of a T 226,able 226, 226,.....................................204 231,Specifying the Width of 231,a Column 231, 231,.......

  • Page 14

    xii ContentsChapter 15 283,Incorporating 283, Sound 283, and 283, video 283, 283,261 284,Understanding Audio and Vid 284,eo in HTML5 284, 284,.........................262 284,HTML Multimedia Ba 284,sics 284, 284,.........................................262 285,Multimedia Formats and C 285,o...

  • Page 15

    Contents xiiiPART Iv 327,APPEnDICESAppendix A 329,Designing for usability 329, 329,307 329,Understanding Usability 329, 329,.........................................307 330,Planning for Usability 330, 330,............................................308 331,Sketching the Site Orga 331,niza...

  • Page 16

    Appendix C 343,Quick 343, Reference 343, 343,321 343,Tags Added in HTML 5 343, 343,...........................................321 344,Tags Removed in HT 344,ML 5 344, 344,........................................322 345,Glossary 345, 323 349,Index 349, 327actionURI(http://www.freepdf-books.c...

  • Page 17

    xvIntroductionHypertext Markup Language (HTML) is the basic programming language of the World Wide Web. It’s the common thread that ties together virtually every website, from large-scale corporate sites like Microsoft’s to single-page classroom projects at the local grade school.In simple ...

  • Page 18

    xvi IntroductionThe last chapter of this book shows how to use Microsoft Expression Web to create web content, and you may eventually choose to move to a program like that. However, you will be a much better web designer—and understand what is going on in design programs much better—if you t...

  • Page 19

    Introduction xviiheadings, paragraphs, and lists. Part II, “Style Sheets and Graphics,” explains how to use cascading style sheets (CSS) to apply formatting to a page or a group of pages and how to include graphic elements on a page. Part III, “Page Layout and Navigation,” explains how ...

  • Page 20

    xviii IntroductionCode SamplesEach chapter includes exercises that let you interactively try out new material learned in the main text. All files you will need to complete these exercises can be downloaded from the following page:http://go .microsoft .com/FWLink/?Linkid=263540Follow the instruct...

  • Page 21

    Introduction xixAcknowledgmentsThank you to my editorial team at O’Reilly for a job well done, including Russell Jones (Acquisitions/Development), John Mueller (Technical Editor), Jeff Riley (Copy Editor), and Melanie Yarbrough (Production Editor). It is a pleasure to work with a professional...

  • Page 22

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 23

    1Part IGetting Started with HTML 25,ChAPTER 25, 1 25, 25,HTML Basics: The 25,Least You Need to 25,Know 25, 25,....... 25,3 41,ChAPTER 41, 2 41, 41,Setting Up the Docum 41,ent Structure.............19 51,ChAPTER 51, 3 51, 51,Formatting Text with Ta 51,gs 51, 51,.....................29 ...

  • Page 24

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 25

    3Chapter 1HTML Basics: The Least You Need to KnowIn this chapter, you will:■■Learn how HTML tags work■■Open a webpage in Notepad■■Preview a webpage in Internet Explorer■■Make, save, and view changes■■Learn how to publish your pages to a serverAs you work through this book’...

  • Page 26

    4 parT I Getting Started with HTMLHTML tags are codes inside angle brackets, like this: <p>. There are dozens of tags defined in the HTML5 standard. You can use these tags to specify where formatting should be applied, how the layout should appear, what pictures should be placed in certain...

  • Page 27

    ChAPTER 1 HTML Basics: The Least You Need to Know 5The <img> tag is different in several ways from the <b> tag. It is one-sided, meaning it does not have a closing tag, and it takes attributes. An attribute is text within the tag that contains information about how the tag should be...

  • Page 28

    6 parT I Getting Started with HTMLWhat is xHTML?There is a language related to HTML called Extensible Markup Language (XML) that program-mers 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 be so com...

  • Page 29

    ChAPTER 1 HTML Basics: The Least You Need to Know 7Note You may run into various extensions on webpage files on the Internet, such as .php, .asp, and .jsp. Those are all special formats designed for use with specific server techno-logies. This book covers developing only the basic type of we...

  • Page 30

    8 parT I Getting Started with HTMLNote Because you will be using Notepad extensively in this book, you might want to create a shortcut for Notepad on the taskbar. To do so in Windows 8, after locating the Notepad app as shown in the previous figure, right-click its tile, and then click Pin to Ta...

  • Page 31

    ChAPTER 1 HTML Basics: The Least You Need to Know 9Note 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 them on, open File Explorer (Windows 8), Computer (Windows Vista or 7), or...

  • Page 32

    10 parT I Getting Started with HTMLFIGuRE 1-1 You can open a file with Notepad by right-clicking the file, pointing to Open With, and then clicking Notepad.Note File Explorer is the file management interface in Windows 8. In earlier versions of Windows, that same interface is called Windows Expl...

  • Page 33

    ChAPTER 1 HTML Basics: The Least You Need to Know 11FIGuRE 1-2 To copy the Notepad shortcut to the desktop, right-click it, point to Send to, and then click Desktop (create shortcut).Caution Theoretically, you could set Notepad as the default application for opening files that have an .htm or ...

  • Page 34

    12 parT I Getting Started with HTMLNote You can actually do this in almost any application (especially the Microsoft ones), but Notepad is handy because you worked with it in the preceding exercise.2. Navigate to the folder containing the practice files for this book.On the Places bar, click Doc...

  • Page 35

    ChAPTER 1 HTML Basics: The Least You Need to Know 13Previewing hTML Files in a web BrowserBecause Notepad is not a WYSIWYG (“What You See Is What You Get”) program, you won’t be able to immediately see how the tags you type will look in the finished product. To work around this, most peop...

  • Page 36

    14 parT I Getting Started with HTMLOpen a Webpage in Internet explorer1. Using File Explorer (or Windows Explorer), open Documents\Microsoft Press\HTML 5 Start Here\01Basics and then double-click welcome .htm. The file opens in Internet Explorer (or your default browser, if you’re not using In...

  • Page 37

    ChAPTER 1 HTML Basics: The Least You Need to Know 15The path to the file displays in the Open dialog box.5. Click OK.The file opens in Internet Explorer. Leave Internet Explorer open for the next exercise.actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 38

    16 parT I Getting Started with HTMLTip Remember, not all web browsers display pages the same way. For example, one brows-er’s idea of what text should look like might be different from another. It’s a good idea to check your pages in multiple web browsers, such as Firefox, Netscape, and Oper...

  • Page 39

    ChAPTER 1 HTML Basics: The Least You Need to Know 175. Close Internet Explorer and close Notepad.Key PointsIn this chapter, you explored HTML and you were introduced to some basic skills that will be essential in following along with the exercises in upcoming chapters. Here are the key points t...

  • Page 40

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 41

    19Chapter 2Setting Up the Document StructureIn this chapter, you will:■■Specify the document type■■Create the HTML, head, and body sections■■Create paragraphs and line breaks■■Specify a page title and keywordsEvery society needs an infrastructure with certain rules that everyone...

  • Page 42

    20 parT I Getting Started with HTMLSpecifying the Document TypeThe document type tells the browser how to interpret the tags. Including a document type tag is not strictly necessary, but if you’re trying to get into good HTML habits from the get-go, you’ll want to make sure it’s included. ...

  • Page 43

    ChAPTER 2 Setting Up the Document Structure 21Creating the hTML, head, and Body SectionsAll your HTML coding—except the DOCTYPE tag—should be placed in an <html> section. Recall from Chapter 1 that when a tag is two-sided, as <html> is, it requires a corresponding closing tag th...

  • Page 44

    22 parT I Getting Started with HTML2. In the Notepad window, type the following:<!DOCTYPE html>3. Press Enter and then type:<html> <head>4. Press Enter two or three times to insert some blank lines and then type:</head> <body>5. Press Enter two or three times to ins...

  • Page 45

    ChAPTER 2 Setting Up the Document Structure 23Note Most of the files you work with in this book will be stored elsewhere, but you might find it helpful to keep the templates created in this exercise handy for reuse. The desktop is a convenient place to store them. Of course, you can store them ...

  • Page 46

    24 parT I Getting Started with HTMLThat spacing is usually convenient, but it can be a problem when the extra space between lines is unwanted, such as with an address (see Figure 2-2).FIGuRE 2-2 Sometimes you do not want extra space between each line, as shown in this example.To create a line br...

  • Page 47

    ChAPTER 2 Setting Up the Document Structure 25Note It is customary to name the opening page of a website index .htm, index .html, default .htm, or default .html. When users type a URL in their web browsers but omit the file name (like typing www .microsoft .com rather than www.microsoft.com/fil...

  • Page 48

    26 parT I Getting Started with HTMLNote Your screen might look slightly different, depending on the settings you have config-ured in your browser.Specifying a page Title and MetatagsPerhaps you noticed in the preceding exercise that the complete path to the file displayed in the page tab or in t...

  • Page 49

    ChAPTER 2 Setting Up the Document Structure 27Note If you are coding in XHTML, you would add a space and a / at the end of <meta> 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. Fo...

  • Page 50

    28 parT I Getting Started with HTML5. Close Notepad and Internet Explorer.Key PointsIn this chapter, you learned how to create the overall structure of a document and how to divide it into head and body sections. You learned how to create paragraphs and how to add a page title. Here are the key ...

  • Page 51

    29Chapter 3 Formatting Text with TagsIn this chapter, you will:■■Create headings■■Apply bold and italic formatting■■Apply superscript and subscript formatting■■Use monospaced and preformatted text■■Format a block quotation■■Configure Internet Explorer view settingsCreati...

  • Page 52

    30 parT I Getting Started with HTMLMost of the tags discussed in this chapter are semantic tags; 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 formatted as a major heading...

  • Page 53

    ChAPTER 3 Formatting Text with Tags 31FIGuRE 3-1 Headings using the default formatting in Internet Explorer 10.Perhaps you noticed that headings 5 and 6 are actually smaller than body text. Keep in mind, though, that these are just the default settings; you can redefine these headings to displ...

  • Page 54

    32 parT I Getting Started with HTMLCreate Headings1. In both Notepad and Internet Explorer, open the index .htm file located in the Documents\Microsoft Press\HTML 5 Start Here\03Format\CreatingHeadings folder.2. Immediately below the <body> tag, edit the first line to use the <h1> ta...

  • Page 55

    ChAPTER 3 Formatting Text with Tags 337. Leave the file open in both Notepad and Internet Explorer for the next exercise. Applying Bold and Italic FormattingApplying bold and italic styles are two ways of making text stand out and attract attention. You gen-erally use these styles in paragraph...

  • Page 56

    34 parT I Getting Started with HTMLNote HTML also allows the <strong> tag as a substitute for <b> and the <em> tag (em-phasis) as a substitute for <i>. You will probably never use those, but you should know what they are in case you come across them. You can also define b...

  • Page 57

    ChAPTER 3 Formatting Text with Tags 35Applying Superscript and Subscript FormattingSuperscript formatting makes text smaller and raises it off the baseline. You’d typically use superscript to format exponents in math equations (for example, the 2 shown in X2+1) and for footnote numbers and s...

  • Page 58

    36 parT I Getting Started with HTML2. At the end of the last line of text, between the </b> and the </p> tags, type <sup>1</sup>, as shown in the following: <p>Please stop in and talk with one of our friendly, experienced travel consultants anytime from Monday throu...

  • Page 59

    ChAPTER 3 Formatting Text with Tags 37As a demonstration, let’s take a look at 10 of each character to see the difference:MMMMMMMMMMIIIIIIIIIIMost webpages that we’re accustomed to viewing use proportional fonts; they are attractive, professional-looking, and easier to read.In contrast, a ...

  • Page 60

    38 parT I Getting Started with HTMLThese tags work nicely if you just want to make certain that characters appear in a monospaced font, but they don’t change the fact that HTML omits extra spacing and line breaks that the text might include. When formatting something that requires the verbatim...

  • Page 61

    ChAPTER 3 Formatting Text with Tags 394. Enclose the two monospace words in <b> tags (on the inside of the <kbd> tags):<p>1. Click in the Login box.<br> 2. Type <kbd><b>club</b></kbd>.<br> 3. Click in the Password box.<br> 4. Type <...

  • Page 62

    40 parT I Getting Started with HTMLNote The ASCII art at the end of the poem might not look right if the Notepad window is narrow; widen the Notepad window as needed if you want to see the picture as it was intended to display. How it looks in Notepad has no bearing on how it will look in Intern...

  • Page 63

    ChAPTER 3 Formatting Text with Tags 41Note Because this webpage is so simple, the <hgroup> tag you learned about earlier in the chapter would be superfluous here. Avoid using tags for their own sake; this makes your code needlessly bloated.15. Apply the <h5> tag to the stanza num...

  • Page 64

    42 parT I Getting Started with HTML18. Leave the poem .htm file open in Notepad and Internet Explorer; it will be used again in the next exercise.Formatting a Block QuotationWhen quoting blocks from other sources, it is customary, both on webpages and in print, to indent those blocks from the ma...

  • Page 65

    ChAPTER 3 Formatting Text with Tags 43Use a Block Quotation Tag1. In Notepad, open the bio .txt file located in the Documents\Microsoft Press\HTML 5 Start Here\03Format\FormattingBlock folder.2. Select all the text (Ctrl+A) and copy it to the Clipboard. Then close bio .txt.3. Open the file poe...

  • Page 66

    44 parT I Getting Started with HTML10. Close Notepad. Leave poem .htm open in Internet Explorer to use in the next exercise.Configuring View Settings in Internet Explorer At the beginning of the chapter, I mentioned that users can customize how certain tags are displayed on their own computers b...

  • Page 67

    ChAPTER 3 Formatting Text with Tags 453. Choose View | Text Size | Largest. All the text on the page increases in size.4. Choose View | Text Size | Smallest. All the text on the page decreases in size.5. Choose View | Text Size | Medium. The text returns to its default size.6. Choose Tools | I...

  • Page 68

    46 parT I Getting Started with HTML9. In the Plain text font list, click Lucida Console (if you have it; otherwise select another font). Plain text means monospace in this context.Your choices are immediately reflected in the sample text below the font lists. actionURI(http://www.freepdf-books.c...

  • Page 69

    ChAPTER 3 Formatting Text with Tags 4710. Click OK to apply your changes and to close the Fonts dialog box.11. Click OK to apply your changes and to close the Internet Options dialog box.The page now displays in Arial font for regular text and in Lucida Console for monospace text. Your font ch...

  • Page 70

    48 parT I Getting Started with HTMLKey Points■■Most tags are semantic. They specify that text has a certain function, such as a heading or quotation, rather than specifying a certain way it should appear.■■The exact formatting (the appearance) applied to tagged text is controlled by the ...

  • Page 71

    49Chapter 4Using Lists and BackgroundsIn this chapter, you will:■■Create bulleted and numbered lists■■Create definition lists■■Insert special characters■■Insert horizontal lines■■Choose background and foreground colors■■Specify a background image fileSuppose you’re stu...

  • Page 72

    50 parT I Getting Started with HTMLFinally, this chapter takes a quick look at webpage backgrounds, both solid color and graphics. Most professional web designers do not use background colors or background graphics, but some hobbyists find them fun. In addition, when you learn about using divisi...

  • Page 73

    ChAPTER 4 Using Lists and Backgrounds 51Note The indentation is added to make the text easier for you to read, but the browser ig-nores extra spaces. In fact, if the <ol> tag had been placed on the same line as the first <li> item, it would not have made any difference.You’ve prob...

  • Page 74

    52 parT I Getting Started with HTML<ol> <li>Thursday: Do Algebra homework</li> <li>Friday: Housesit for neighbors: <ul><li>Bring in the mail</li> <li>Take out the trash</li> <li>Feed the dogs</li> <...

  • Page 75

    ChAPTER 4 Using Lists and Backgrounds 53TABLE 4-1 Common list style type Attribute ValuesList StylevalueResultBulletedDiscFilled circle (the default)CircleUnfilled circleSquareFilled squareNumbered Decimal1, 2, 3, 4 (the default)decimal-leading-zero01, 02, 03, 04lower-romani, ii, iii, ivupper-r...

  • Page 76

    54 parT I Getting Started with HTMLCreate Ordered (Numbered) and Unordered (Bulleted) Lists1. In Notepad and Internet Explorer, open the destinations .htm file in the Documents\Microsoft Press\HTML 5 Start Here\04Lists\NestingLists folder.2. Create the following numbered list above the </body...

  • Page 77

    ChAPTER 4 Using Lists and Backgrounds 554. Immediately beneath the Sedona and the Grand Canyon line, create a nested ordered list as shown below, then save and check your work.<li>Sedona and the Grand Canyon</li> <ol> <li>Sedona Red Rock Jeep Tour</li> <li>Se...

  • Page 78

    56 parT I Getting Started with HTML5. Change the opening tag of both ordered lists so that they use uppercase Roman numerals:<ol style="list-style-type: upper-roman">6. Save and then check your work. Close Notepad and Internet Explorer.Creating Definition ListsA definition list (...

  • Page 79

    ChAPTER 4 Using Lists and Backgrounds 57tag, and the definition paragraphs are contained in <dd> (definition description) tags. Here’s the code for the example shown in Figure 4-4:<dl> <dt>Moderate Hiking</dt> <dd>Up to 3 miles per day. Terrain may include modera...

  • Page 80

    58 parT I Getting Started with HTML<dt>Moderate Hiking</dt> <dd>Up to 3 miles per day. Terrain may include moderately steep inclines, and may be narrow, twisting, and unpaved. Hiking boots are recommended.</dd><dt>Moderate Walking</dt> <dd>Up to 3 miles ...

  • Page 81

    ChAPTER 4 Using Lists and Backgrounds 59Table 4-2 lists the most common entities. For a more complete list, refer to the entities .htm file included with the data files for this book.TABLE 4-2 Common EntitiesSymbolEntity nameEntity number& (ampersand)&amp;&#38;< (less than)&l...

  • Page 82

    60 parT I Getting Started with HTML3. Save the file and then refresh Internet Explorer to check your work. Leave Notepad and Inter-net Explorer open for the next exercise.Inserting horizontal LinesHorizontal lines—which HTML calls horizontal rules—can be useful as dividers between sections o...

  • Page 83

    ChAPTER 4 Using Lists and Backgrounds 61FIGuRE 4-5 Horizontal lines separate sections of the page content.Most of the original attributes for the <hr> tag were deprecated in HTML 4.01; attributes such as align, color, size, and width are not supported at all in HTML5. You now set the rend...

  • Page 84

    62 parT I Getting Started with HTMLNote: In Chapter 8, “Formatting Paragraphs with CSS,” you’ll learn more possibilities for using the border attribute, including creating solid borders, dotted borders, and dashed borders.HTML recognizes these 16 basic color names. You can also specify a c...

  • Page 85

    ChAPTER 4 Using Lists and Backgrounds 635. The color and style of the border depend on the browser; in Internet Explorer 10, it’s a dark gray border on the top and left and a light gray border on the bottom and right.BorderClick here to set the zoom6. In Notepad, add border:none to the style:...

  • Page 86

    64 parT I Getting Started with HTMLChoosing Background Colors and Foreground ColorsMany web design experts caution against using dark or patterned backgrounds on webpages be-cause these backgrounds can make it difficult to read the text. Some designers go so far as to say that you should not use...

  • Page 87

    ChAPTER 4 Using Lists and Backgrounds 65of red, green, or blue that makes up the color. For example, pure red is 255,0,0; that is, maximum red (255), no green (0), and no blue (0). You can create a large range of colors using these three values. For example, 255,153,0 represents a particular sh...

  • Page 88

    66 parT I Getting Started with HTMLapplying a Foreground ColorThe foreground color is the default text color for the page. You can set the foreground color by using the style=”color: color” attribute. It can be combined with the attribute for the background color in a single style= statement...

  • Page 89

    ChAPTER 4 Using Lists and Backgrounds 674. Leave the file open in Notepad and Explorer for the next exercise.Specifying a Background Image FileA background image displays behind the text on a page. By default, the image is tiled to fill the page and scrolls with the page.Unfortunately, there ar...

  • Page 90

    68 parT I Getting Started with HTMLFIGuRE 4-7 This background is also distracting, but the edges of each copy blend together well.Use subtle patterns that don’t distract from the text. The preceding examples fail that test; they impede readability in a big way. Figure 4-8 shows a better one.FI...

  • Page 91

    ChAPTER 4 Using Lists and Backgrounds 69To use a background image file, use a style=“background-image: url(image)” attribute in the opening <body> tag, as you did for foreground and background colors in the preceding section. For example, to use the background image file called granit...

  • Page 92

    70 parT I Getting Started with HTMLNote To avoid having to specify a path to the image file, place the image file and the HTML file in the same folder. If you are using your index.htm file from the previous exercise, copy the ripplez.gif file into the folder where the active copy of index .htm i...

  • Page 93

    71Chapter 5Creating Hyperlinks and anchorsIn this chapter, you will:■■Hyperlink to a webpage■■Hyperlink to an email address■■Create and hyperlink to anchors■■Hyperlink to other contentThe web is based on hyperlinks. Each webpage contains active links to other pages, which in tur...

  • Page 94

    72 parT I Getting Started with HTMLImportant Before you can use the practice files provided for this chapter, you need to download and install them from the book’s companion content location. See “Code Samples” at the beginning of this book for more information.hyperlinking to a webpageNo ...

  • Page 95

    ChAPTER 5 Creating Hyperlinks and Anchors 73The opening page of the US version of the Microsoft website opens. Now type this URL instead:http://www .microsoft .com/en/us/default .aspxThe same page loads. The first time, when you omitted the file name, the web server responded by sending the def...

  • Page 96

    74 parT I Getting Started with HTMLsubfolder (or child folder) of it. To refer to london .htm from within index .htm, you would use a tag like this:<a href="destinations/london.htm">London Tours</a>You can also create a link to a file that is up one level (a parent folder) ...

  • Page 97

    ChAPTER 5 Creating Hyperlinks and Anchors 754. Locate the text Arizona State Tourism Guide and enclose it with an <a> tag that refers to www.arizonaguide.com and opens in a new window:<p><a href="http://www.arizonaguide.com" target="_blank">Arizona State T...

  • Page 98

    76 parT I Getting Started with HTMLhyperlinking to an Email AddressHyperlinks can point to anything, not just to webpages. For example, you can create email hyperlinks that start the user’s default email program, create a new message, and insert the recipient’s address. (You can also set it ...

  • Page 99

    ChAPTER 5 Creating Hyperlinks and Anchors 77Tip Even if all email from the site is directed to the same person, you might still create multiple email hyperlinks, each one with different default subject lines.Another option, title=, specifies a ScreenTip for the hyperlink. This attribute display...

  • Page 100

    78 parT I Getting Started with HTML3. Add a subject line of Question/Comment to the hyperlink:<p><a href="mailto:webmaster@margiestravel.com?subject=Question/Comment">Contact the Webmaster</a></p>4. Add a title to the hyperlink that will display webmaster@margie...

  • Page 101

    ChAPTER 5 Creating Hyperlinks and Anchors 79Information provided from hyperlink8. Close the email message window without sending the message and then close the Notepad and Internet Explorer windows.Creating and hyperlinking to AnchorsAn anchor is a marker within an HTML document, roughly analog...

  • Page 102

    80 parT I Getting Started with HTMLTo refer to the anchor point, include its name in the href= attribute. Precede the anchor name with a pound sign (#). If the anchor point is in the same document as the hyperlink, you can use a relative reference like this:<a href="#conclusion">...

  • Page 103

    ChAPTER 5 Creating Hyperlinks and Anchors 815. In the bulleted list at the top of the document, create a hyperlink from the bus tour anchor to the heading:<li><a href="#bus">Grand Canyon Indian Country West Rim Bus Tour</a></li>6. Repeat step 5 for each of the ...

  • Page 104

    82 parT I Getting Started with HTMLhyperlinking to other ContentA hyperlink can reference any file, not just a web document. You can take advantage of this to link to other content such as Microsoft Office documents, compressed archive files such as .zip files, and even executable program files ...

  • Page 105

    ChAPTER 5 Creating Hyperlinks and Anchors 83Hyperlink to Other Content1. In Notepad and Internet Explorer, open the swdestinations .htm file located in the Documents\Microsoft Press\HTML 5 Start Here\05Links\LinkingOther folder. 2. In Notepad, on the Grand Canyon line of the list, add the follo...

  • Page 106

    84 parT I Getting Started with HTMLNote In order to display XPS format, you must have an XPS viewer; the viewer is included with Windows Vista and later. Users of Windows XP can get XPS capabilities by installing the Microsoft XML Paper Specification Service Pack, found at actionURI(http://www.m...

  • Page 107

    85Part IIStyle Sheets and Graphics 109,ChAPTER 109, 6 109, 109,Introduction to Style Shee 109,ts....................87 127,ChAPTER 127, 7 127, 127,Formatting Text with CSS 127,.....................105 147,ChAPTER 147, 8 147, 147,Formatting 147, Paragraphs 147, with 147, CSS...............12...

  • Page 108

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 109

    87Chapter 6Introduction to Style SheetsIn this chapter, you will:■■Construct style rules■■Create styles for nested tags■■Create classes and IDs for applying styles■■Apply styles to hyperlinks■■Create and link to external style sheetsAfter you learn about cascading style shee...

  • Page 110

    88 parT II Style Sheets and Graphicsunderstanding StylesIn simplest terms, a style is a formatting rule. That rule can be applied to an individual tag, to all instances of a certain tag within a document, or to all instances of a certain tag across a group of documents.In Chapter 4, you saw how ...

  • Page 111

    ChAPTER 6 Introduction to Style Sheets 89Now further suppose that you want these specifications to apply to all the bulleted and numbered lists in all documents in your entire website. You can create an external cascading style sheet and then refer to that style sheet in the <head> sectio...

  • Page 112

    90 parT II Style Sheets and GraphicsIf you have more than one rule to apply, such as a color plus a typeface, separate the rules with semicolons within the curly braces. It is customary but not required to write each rule on its own line. For example, to specify that the heading text must be bot...

  • Page 113

    ChAPTER 6 Introduction to Style Sheets 91Horizontal rules3. In Notepad, in the <head> section, modify the style so that the lines are blue, 75% of the browser window in width, 3 pixels in height, and left-aligned, as follows:<style> hr { color: blue; background-color: blue; ...

  • Page 114

    92 parT II Style Sheets and GraphicsNote Notice that you use the text-align attribute to align the horizontal line even though it is not text. That’s because there is no separate alignment attribute for elements that do not contain text. Not all browsers support this usage (notably some versio...

  • Page 115

    ChAPTER 6 Introduction to Style Sheets 93Creating Styles for nested TagsSometimes you might want to apply a specific formatting only when one tag is nested within another. For example, perhaps you want a bulleted list that’s nested within another bulleted list to use a differ-ent bullet chara...

  • Page 116

    94 parT II Style Sheets and Graphics3. Save your work in Notepad and then refresh Internet Explorer. All list items at all levels use the square black bullet character.▪Alaskan Salmon Fishing ▪ Sitka Sound ▪ Kenai Peninsula ▪ Matanuska Susitna Valley▪ The Vineyards...

  • Page 117

    ChAPTER 6 Introduction to Style Sheets 95Note There are other CSS styles you can use to format lists. For example, you can use a graphic as a bullet character by using the list-style-image attribute, like this:ul { list-style-image: url(“bullet.gif”) }where bullet .gif is the name of the gr...

  • Page 118

    96 parT II Style Sheets and GraphicsIDs work the same way, except that you can apply them only once per document. For example, you might apply an ID to a unique heading. To create an ID, add an id= attribute to the tag:<li id="special">Special Discounts Available</li>Then d...

  • Page 119

    ChAPTER 6 Introduction to Style Sheets 97<li>Sedona Red Rock Jeep Tour</li> <li>Sedona Energy Vortex Exploration</li> <li>Grand Canyon Photo and Sightseeing Motorcoach Tour</li> <li class="sale">Grand Canyon Helicopter Adventure</li>4. A...

  • Page 120

    98 parT II Style Sheets and GraphicsNote Each style rule here is run in as a single line, whereas in earlier examples rules were broken into multiple lines for readability. It makes no difference which way you do it. The one-line method is more compact, but the multi-line method is easier to bro...

  • Page 121

    ChAPTER 6 Introduction to Style Sheets 99There are three additional pseudo-classes that you can use with hyperlink styles:■■focus This is used for links that are selected by using the keyboard (that is, by using a key-board shortcut to move the selection outline onto the hyperlink) but not ...

  • Page 122

    100 parT II Style Sheets and Graphics5. Position the mouse pointer over each hyperlink.Notice that hyperlink text is lime green when you position the mouse pointer over it. 6. Click the Southwest hyperlink.Notice that the hyperlink text color changes to red immediately before the Southwest Desti...

  • Page 123

    ChAPTER 6 Introduction to Style Sheets 101In the following exercise, you will create an external style sheet and link a webpage to it.Create and Use an external Style Sheet1. In Notepad and Internet Explorer, open the index .htm file located in the Documents\Microsoft Press\HTML 5 Start Here\06...

  • Page 124

    102 parT II Style Sheets and Graphics8. Add this line to the <head> section:<link rel="stylesheet" type="text/css" href="default.css">9. Save the file and then refresh Internet Explorer.The file does not appear to change, but the styles are now defined i...

  • Page 125

    ChAPTER 6 Introduction to Style Sheets 103■■There are three ways to apply a style. You can use the style= attribute within an individual tag, you can create an embedded style sheet, or you can create an external style sheet.■■You place an embedded style sheet in the <head> section...

  • Page 126

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 127

    105Chapter 7Formatting Text with CSSIn this chapter, you will:■■Specify a font family■■Specify a font size and color■■Apply bold and italics■■Apply strikethrough and underlining■■Create inline spans■■Adjust spacing between lettersLearning how to create style rules opens ...

  • Page 128

    106 parT II Style Sheets and GraphicsImportant Before you can use the practice files provided for this chapter, you need to download and install them from the book’s companion content location. See “Code Samples” at the beginning of this book for more information.Specifying a Font FamilySp...

  • Page 129

    ChAPTER 7 Formatting Text with CSS 107Note In the preceding example, the Cursive font does not display in a manner that you might expect from its name; it doesn’t look like cursive handwriting. In most browsers, cursive displays as a rounded version of sans-serif.By specifying a generic font ...

  • Page 130

    108 parT II Style Sheets and Graphics3. Save default .css and then refresh the Internet Explorer display for index .htm.The font of all the text in paragraphs and lists changes.4. Open the index .htm file in Notepad. Change the tag for the copyright notice at the bottom of the page to use the Ti...

  • Page 131

    ChAPTER 7 Formatting Text with CSS 109Because each page of the website has a copyright notice, it might be better to create a class (as you learned in Chapter 6, “Introduction to Style Sheets”) and change the font for the class. That’s what we’ll do next.6. In the index .htm file in Not...

  • Page 132

    110 parT II Style Sheets and GraphicsNote HTML does not usually accept a numeric size without a unit of measurement. There are a few exceptions, though; one is the line-height style you will learn about in Chapter 8.To specify a relative size, you use a relational description: xx-small, x-small,...

  • Page 133

    ChAPTER 7 Formatting Text with CSS 111Or you could set the size for an individual heading:<p style="font-size: 2em">This text is twice the base size.</p>To specify a font color, use the color attribute that you learned in previous chapters. For example, to make text in all...

  • Page 134

    112 parT II Style Sheets and GraphicsNote Don’t forget to add the semicolon after sans-serif to separate the font-family rule from the font-size rule.3. Change the style rule for the copyright class to make the text white:.copyright {font-family: "Times New Roman", "Times",...

  • Page 135

    ChAPTER 7 Formatting Text with CSS 113Hyperlink not visible6. In index .htm, in the <a> tag for the mailto hyperlink at the bottom of the file, add a style= attribute that forces the hyperlink to be white:<a href="mailto:webmaster@margiestravel.com" style="color: white&q...

  • Page 136

    114 parT II Style Sheets and GraphicsApplying Bold and ItalicsYou learned how to apply bold and italic formatting by using the <b> and <i> tags in Part I of this book. You can continue to use those tags to format individual words and phrases, but you can’t use them in internal or e...

  • Page 137

    ChAPTER 7 Formatting Text with CSS 115apply Bold and Italic with Styles1. Open default .css in Notepad and then open international .htm in Internet Explorer from the files located in the Documents\Microsoft Press\HTML5 Start Here\07Text\ApplyingBold folder.2. In default .css, add italic formatt...

  • Page 138

    116 parT II Style Sheets and GraphicsApplying Strikethrough and underliningStrikethrough formatting is typically used to denote text that has changed. For example, if you have marked down the price of an item, you might strike through the original price (see Figure 7-3).FIGuRE 7-3 An example of ...

  • Page 139

    ChAPTER 7 Formatting Text with CSS 117You can use the none keyword to remove the underlining from text that would ordinarily be un-derlined automatically, such as a hyperlink. Be careful, though, because if you remove the underline from a hyperlink, many people will not realize they can click i...

  • Page 140

    118 parT II Style Sheets and Graphics7. Close Notepad and Internet Explorer.Creating Inline SpansPart of the problem with replacing the old style tags like <b>, <i>, and <del> with styles for individual items is that the style= attribute must be placed within an existing tag. F...

  • Page 141

    ChAPTER 7 Formatting Text with CSS 119If you later change your mind, you need to make the change in only one place—the style sheet. In the following exercise, you will format text by using inline spans.Format Text with Inline Spans1. Open partners .htm in Notepad and also in Internet Explorer...

  • Page 142

    120 parT II Style Sheets and Graphics4. Save the file and then refresh Internet Explorer.5. Close Notepad and Internet Explorer.Note You could have placed the partner class in default .css instead. That would be a good idea if you thought this class would be reused on other pages that also use t...

  • Page 143

    ChAPTER 7 Formatting Text with CSS 121FIGuRE 7-4 Examples of different spacing options. To apply word and/or letter spacing, add spacing to the style= attribute for a specific tag:<p style="letter-spacing: 4px">This text has increased letter spacing.</p>You can also add sp...

  • Page 144

    122 parT II Style Sheets and Graphics4. Save the file and then refresh Internet Explorer.Notice the spacing difference. It’s not very attractive, but it’s different. 5. Edit the embedded style sheet to decrease the line spacing and word spacing to 0 .5px:h1, h2, p {word-spacing: 0.5px; lette...

  • Page 145

    ChAPTER 7 Formatting Text with CSS 1236. Save the file and then refresh Internet Explorer. Now it looks more attractive and is more consistent with the rest of the pages for this website.actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 146

    124 parT II Style Sheets and GraphicsKey Points■■Font families are sets of fonts, listed in order of preference. Because not all web visitors have the same fonts installed on their computers, you should use the font-family attribute to help ensure that your website appears the way you want....

  • Page 147

    125Chapter 8Formatting paragraphs with CSSIn this chapter, you will:■■Indent paragraphs■■Apply a border to a paragraph■■Specify the horizontal alignment of a paragraph■■Specify vertical space within a paragraphIn Chapter 7, “Formatting Text with CSS,” you learned how to use ...

  • Page 148

    126 parT II Style Sheets and GraphicsIndenting ParagraphsYou can indent any paragraph-level element in HTML. Such elements include regular paragraphs, list items, definitions, quotations, and headings. Indenting is the process of offsetting text from its usual position, either to the right or to...

  • Page 149

    ChAPTER 8 Formatting Paragraphs with CSS 127Padding: space inside the borderMargins: space outside the borderFIGuRE 8-1 Margins vs. padding.By default margin and padding attributes apply to all four sides of an element, but you can add -top, -right, -bottom, or -left arguments to restrict the f...

  • Page 150

    128 parT II Style Sheets and Graphics<h3>Day One: Tour of Chichén Itzá </h3> <p class="first">Chichén Itzá, home of the mysterious temples and pyramids of the Mayan<h1>Spraying... . . . <h3>Day Two: Xalapa</h3> <p class="first">Xa...

  • Page 151

    ChAPTER 8 Formatting Paragraphs with CSS 1296. Scroll to the bottom of the page and view the copyright notice.It is indented like other paragraphs, but you don’t want it to be. This is an excellent example of an unintended consequence stemming from making a global change to a tag’s style ru...

  • Page 152

    130 parT II Style Sheets and GraphicsTABLE 8-1 Border style examplesAttributeExamplesoliddotteddasheddoublegrooveridgeinsetoutsetnoneTo apply a border style to an individual instance of a tag, use the following:<p style="border-style: solid">To apply the same formatting using a s...

  • Page 153

    ChAPTER 8 Formatting Paragraphs with CSS 131Specifying Border Width and ColorBy default, a border is black and 4 pixels wide. To change these attributes, use the border-color and border-width attributes. The color can be any basic or extended color name or any RGB or hexadeci-mal color number. ...

  • Page 154

    132 parT II Style Sheets and GraphicsFIGuRE 8-2 This paragraph has a dotted border on the top and bottom only. There’s a shortcut for specifying arguments for each side of the border. Rather than writing each one out individually, you can simply include four different settings for the argument...

  • Page 155

    ChAPTER 8 Formatting Paragraphs with CSS 1333. Add dotted top and bottom borders to the paragraph:<p style="border-top-style: dotted; border-bottom-style: dotted">Ready to book this tour? Call 1-800-555-1191</p>4. Save the file and then refresh Internet Explorer.The paragr...

  • Page 156

    134 parT II Style Sheets and GraphicsNote Sharp-eyed students may have noticed in the above code that I included a 20px left-side padding value. Why? Because this document has an internal style sheet that specifies 20px of padding for <p> paragraphs, that same 20px had carried over when we...

  • Page 157

    ChAPTER 8 Formatting Paragraphs with CSS 135To apply the same alignment to all instances of that tag, place it in the style sheet, either within the document (in the <style> area) or in a separate CSS file:p {text-align: justify}Notice that the justify option aligns all lines of the parag...

  • Page 158

    136 parT II Style Sheets and GraphicsThe text between the green dotted lines would also look better centered, but you don’t want to create a style rule for the entire <p> tag for this. Instead you’ll add the style to the indi-vidual tag for that paragraph.6. Change the <p> tag’...

  • Page 159

    ChAPTER 8 Formatting Paragraphs with CSS 137Specifying vertical Space within a ParagraphThe line height is the amount of space between each line. This is also referred to as leading (pro-nounced like the metal). You can use this setting to make paragraphs easier to read. You are not limited to ...

  • Page 160

    138 parT II Style Sheets and Graphics5. Close Notepad and Internet Explorer.actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 161

    ChAPTER 8 Formatting Paragraphs with CSS 139Key Points■■You can indent the first line of paragraphs using the text-indent attribute.■■The padding attribute sets the amount of space between an element and its border; the margin attribute sets the amount of space around the outside of an ...

  • Page 162

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 163

    141Chapter 9Inserting GraphicsIn this chapter, you will:■■Insert graphics■■Arrange elements on the page■■Control image size and padding■■Hyperlink from graphics■■Utilize thumbnail graphics■■Include alternate text for graphics■■Add figure captionsSo far in this book, ...

  • Page 164

    142 parT II Style Sheets and GraphicsImportant Before you can use the practice files provided for this chapter, you need to in-stall them from the book’s companion content page to their default locations. See “Code Samples” in the beginning of this book for more information.understanding G...

  • Page 165

    ChAPTER 9 Inserting Graphics 143Inserting a GraphicInserting a graphic on a webpage is as simple as placing an <img> tag where you want the graphic to appear:<img src="logo.png">Note HTML5 also supports a <figure> tag for inserting images that is discussed later in t...

  • Page 166

    144 parT II Style Sheets and GraphicsFIGuRE 9-1 The image appears by itself by default.To force an image to render on the left or right side of the screen and wrap surrounding text around the image, apply a float style rule that uses a left or right attribute:<img src="logo.gif" sty...

  • Page 167

    ChAPTER 9 Inserting Graphics 145FIGuRE 9-3 The image floats to the right of the text.Notice that floating to the right moves the image all the way to the right end of the page, not simply to the right of the text. If you want to place the image in a precise location, see the section “Setting ...

  • Page 168

    146 parT II Style Sheets and Graphics6. Close Notepad and Internet Explorer.Clearing a GraphicThe image in the preceding exercise was carefully prepared to be the correct size to fit in the space where it was to be inserted. But what if the image is larger, like what’s shown in Figure 9-4 (on ...

  • Page 169

    ChAPTER 9 Inserting Graphics 147FIGuRE 9-4 This large image interferes with the positioning of the text that follows it.You can apply this style to any object, not just horizontal rules. For example, if there is a certain paragraph you want to clear the graphic, you could apply it to the <p&...

  • Page 170

    148 parT II Style Sheets and Graphics5. Close Notepad and Internet Explorer.Of course, this isn’t a look that you would want to keep, because the graphic is too big and there isn’t enough white space between it and the horizontal rule. But in the next exercise, you will learn how to specify ...

  • Page 171

    ChAPTER 9 Inserting Graphics 149When you view the page, the image shrinks proportionally. However, if you specify both height and width, the image will be distorted to fit the dimensions you specify, as shown in Figure 9-6: <img src="suitcase.png" height="150" width="...

  • Page 172

    150 parT II Style Sheets and Graphics3. Add a margin of eight pixels to the image:<img src="images/stamplarge.png" style="float: left; margin: 8px" height="75">4. Save the file and then refresh Internet Explorer.5. Add another graphic immediately below the fir...

  • Page 173

    ChAPTER 9 Inserting Graphics 1518. Close Notepad and Internet Explorer.using a Graphic as a hyperlinkIn Chapter 5, you learned how to create text hyperlinks using the <a> tag. Recall that you place the URL in the opening <a> tag and then you place the hyperlink text between the <...

  • Page 174

    152 parT II Style Sheets and GraphicsIt’s a common convention in web design to make the graphic in the upper-left corner of each page into a hyperlink to the website’s home page and to display that hyperlinked graphic in the upper-left corner of every page in the site. In the following exerc...

  • Page 175

    ChAPTER 9 Inserting Graphics 153Creating ThumbnailsHigh-resolution graphics can make a page load slowly, but avoiding high-resolution graphics alto-gether can limit your site’s effectiveness in delivering content. A compromise is to include thumbnail images, which are low-resolution copies of...

  • Page 176

    154 parT II Style Sheets and Graphics3. Save the file and then refresh Internet Explorer. Test each graphic’s hyperlink to make sure it works.4. Notice that each graphic now has a thick border around it; as you learned previously in this chapter, that occurs when you make a graphic into a hype...

  • Page 177

    ChAPTER 9 Inserting Graphics 1558. Close Notepad and Internet Explorer.Including Alternate Text for GraphicsPlacing an alt attribute (traditionally called an alt tag, although it isn’t really a tag) in an <img> tag creates alternate text for the graphic. This alternate text is a pop-up ...

  • Page 178

    156 parT II Style Sheets and GraphicsUse alt Tags1. In Notepad and Internet Explorer, open the index .htm file located in the Documents\Microsoft Press\HTML5 Start Here\09Graphics\UsingAlt folder.2. In Notepad, add an alt attribute to the <img> tag for the first image:<img src="ima...

  • Page 179

    ChAPTER 9 Inserting Graphics 157Another advantage to using <figure> is that you can assign styles and other attributes to the <figure> element via an external or internal style sheet, just as you do for any other container tag.You can also assign a single caption to a group of image...

  • Page 180

    158 parT II Style Sheets and Graphics5. In the document’s <head> section, add the following style sheet:<style> figurecaption {font-size: 12px; font-style: italic} </style>6. Save the file and then refresh Internet Explorer.7. Close Notepad and Internet Explorer.actionURI(htt...

  • Page 181

    ChAPTER 9 Inserting Graphics 159Key Points■■When possible, use graphics files that are as close as possible in resolution to the size at which they will be displayed on the webpage. Use a photo-editing program to change the resolution.■■The most reliable graphics formats for web use are...

  • Page 182

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 183

    161Part IIIPage Layout and Navigation 185,ChAPTER 185, 10 185, 185,Creating 185, Navigational 185, Aids....................163 201,ChAPTER 201, 11 201, 201,Creating Division-Base 201,d Layouts...............179 221,ChAPTER 221, 12 221, 221,Creating Tables..............................199 ...

  • Page 184

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 185

    163Chapter 10Creating Navigational aidsIn this chapter, you will:■■Plan your site’s organization■■Create a text-based navigation bar■■Create a graphical navigation bar■■Redirect to another URL■■Create a custom error pageIf you worked through the exercises in Parts I and II...

  • Page 186

    164 parT III page Layout and NavigationPlanning your Site’s organizationNavigation bars can be easy to create, but they require some planning to be effective. Up to this point in the book, you’ve been creating single pages with a common theme for eventual inclusion in a website, but you prob...

  • Page 187

    ChAPTER 10 Creating Navigational Aids 165The organization of the Margie’s Travel site, which you’ve been creating pages for in this book’s examples, might look something like what’s shown in Figure 10-2. Central andSouth AmericaMidwestCaliforniaNew EnglandPacificNorthwestSouthwestMexico...

  • Page 188

    166 parT III page Layout and NavigationCreating a Text-Based navigation BarA text-based navigation bar is the simplest and easiest, and it is also very user-friendly for all browsers and all users (including those with special needs). On simple webpages, text-based navigation bars are usually pl...

  • Page 189

    ChAPTER 10 Creating Navigational Aids 167Create a Text-Based Navigation Bar1. In Notepad and Internet Explorer, open the navbar .htm file located in the Documents\Microsoft Press\HTML5 Start Here\10Navigation\CreatingTextBar folder. 2. Above the Under Construction paragraph, add a two-sided <...

  • Page 190

    168 parT III page Layout and Navigation8. Save the file and then refresh Internet Explorer.The lines are closer to the text.9. Add hyperlinks to each of the six items in the navigation bar to the corresponding pages. Some of the pages being referenced do not exist yet, but that’s okay.Note Mak...

  • Page 191

    ChAPTER 10 Creating Navigational Aids 16914. Close Notepad and Internet Explorer.Creating a Graphical navigation BarText hyperlinks are clear and unambiguous but not all that attractive. You might prefer to create a navi-gation bar that uses buttons or other graphics instead of text links. You ...

  • Page 192

    170 parT III page Layout and NavigationMost professional website designers do not create their own buttons, nor do they acquire them from others; they instead use button-creation programs to generate them. Such programs make it very easy to create groups of identical buttons with different text ...

  • Page 193

    ChAPTER 10 Creating Navigational Aids 171Note The preceding code also removes the spaces you previously placed between the links, because the spacing is now provided by the graphics themselves. 3. Save the file and then refresh Internet Explorer to view your work. If the buttons wrap to two lin...

  • Page 194

    172 parT III page Layout and Navigation3. Change the style of the opening paragraph tag for the bottom navigation bar to include a text-align style:<p style="margin:0px; text-align:center">4. Open default .css in Notepad and change the color of the horizontal rules to brown:hr {c...

  • Page 195

    ChAPTER 10 Creating Navigational Aids 1739. Close Notepad and Internet Explorer.Redirecting to Another uRLAfter you have managed your own website for a while, you might decide you want to restructure its organization by renaming some pages, placing pages in folders, or hosting your site at a di...

  • Page 196

    174 parT III page Layout and NavigationYou implement a redirect operation by adding an attribute to a <meta> tag in the <head> section of the page (as you learned in Chapter 2, “Setting Up the Document Structure”). You must create a new <meta> tag for this operation; you ca...

  • Page 197

    ChAPTER 10 Creating Navigational Aids 175After five seconds, the index page displays.5. Click the browser’s Back button and then quickly click the click here hyperlink to test it.6. Close Notepad and Internet Explorer.Creating Custom Error PagesWhen a site visitor requests a page that doesn...

  • Page 198

    176 parT III page Layout and NavigationYou can avoid users encountering such messages due to outdated links and information by keep-ing old pages up and redirecting, as you learned in the previous exercise. However, that won’t help users who have the wrong URL due to typing mistakes—yours or...

  • Page 199

    ChAPTER 10 Creating Navigational Aids 177In the following exercise, you will use the redirect page you created in the previous exercise as the basis for a new page that will display whenever a user requests a page that does not exist.Create a Custom 404 error page1. In Notepad, reopen the oldpa...

  • Page 200

    178 parT III page Layout and NavigationKey Points■■A navigation bar contains a list of hyperlinks to the major pages on your site. It need not in-clude every page in the site. The optimal number of links is between four and seven.■■In HTML5, you can use the <nav> tag as a container...

  • Page 201

    179Chapter 11Creating Division-Based LayoutsIn this chapter, you will:■■Understand HTML5 semantic tags■■Begin to think in divisions■■Create divisions■■Position divisions■■Format divisionsUntil a few years ago, tables were a popular way of structuring a webpage. You’ll lea...

  • Page 202

    180 parT III page Layout and NavigationImportant Before you can use the practice files provided for this chapter, you need to in-stall them from the book’s companion content page to their default locations. See “Code Samples” in the beginning of this book for more information. understandin...

  • Page 203

    ChAPTER 11 Creating Division-Based Layouts 181In this chapter, you’ll learn to mark up a document both ways: with generic <div> tags that are readable in any browser and with the new HTML5 semantic tags.Beginning to Think in DivisionsIn an effective division-based layout, each part of ...

  • Page 204

    182 parT III page Layout and NavigationCreating DivisionsTo give a name to a division, use an id attribute:<div id="masthead">Each ID must be unique within the document, but multiple documents can use the same division names. Such reuse is good, in fact, because it lets you defin...

  • Page 205

    ChAPTER 11 Creating Division-Based Layouts 183Note As you learned in Chapter 10, “Creating Navigational Aids,” the <nav> tag is an HTML5 semantic tag that serves the same purpose as defining a <div> tag, but it is intended for a navigation bar. You’ll use <nav> in the n...

  • Page 206

    184 parT III page Layout and Navigation6. Enclose the copyright notice in a <div> tag and then name the tag copy:<div id="copy"> <p class="copyright"> Copyright &copy; Margie’s Travel<br> No material may be reproduced without written permission&l...

  • Page 207

    ChAPTER 11 Creating Division-Based Layouts 1853. Replace the <div id=“topnav”> tag with <nav> and then change its closing </div> tag to </nav>:<nav> <hr style="clear: left"> <p style="margin:0px"> <a href="index.htm"...

  • Page 208

    186 parT III page Layout and Navigation6. Enclose the Award-Winning Service heading and the paragraph that follows it in an <article> tag:<article> <h2>Award-Winning Service</h2> <p>Margie’s Travel is proud to be the recipient of the Gold Star Award for Travel Ser...

  • Page 209

    ChAPTER 11 Creating Division-Based Layouts 187Positioning DivisionsThere are two ways of positioning a division (or equivalent semantic-tagged block): you can use the float style rule, as you did with pictures in Chapter 9, “Inserting Graphics,” or you can use the position style rule. The ...

  • Page 210

    188 parT III page Layout and NavigationBecause the main advantage of using divisions is to promote consistency across documents, you would probably want to set up the style rule in an external style sheet rather than in the individual division tag or an internal style sheet. In a style sheet, yo...

  • Page 211

    ChAPTER 11 Creating Division-Based Layouts 189Note When using semantic tags, you won’t have one that defines the entire main body of the page content, so you might want to create a division for that purpose if you want to specify an exact position for all the body text on the page. As the pr...

  • Page 212

    190 parT III page Layout and NavigationHorizontal navigation bar2. In Notepad, in the default .css file, add the following style rule:nav {float: left; width: 150px; padding-top: 15px; padding-right: 30px}Note You can add the style rule anywhere in default .css; adding it at the end of the file ...

  • Page 213

    ChAPTER 11 Creating Division-Based Layouts 191This button is not indented as much as the othersHorizontal rules look out of place whennavigation bar is vertical4. In Notepad, open index3 .htm, remove the <hr> tags for the <nav> division, and then replace the &nbsp; characters i...

  • Page 214

    192 parT III page Layout and NavigationNavigation bar has been correctedThere are several ways to correct this problem. You could make each button its own para-graph, for example, or you could add an extra <br> tag after each button so that it not only line-breaks but also includes an extr...

  • Page 215

    ChAPTER 11 Creating Division-Based Layouts 1937. In index3 .htm, add an <hr> tag immediately above the </header> tag:<header> <h1 style="text-align: center; margin: 3px">Margie’s Travel</h1> <i><h5 style="text-align: center; margin: 5px&q...

  • Page 216

    194 parT III page Layout and NavigationIn default .css, add absolute positions for the footer and the bottom navigation bar that place them at 10px from the left and 10px and 75px from the bottom, respectively:footer {position: fixed; bottom: 10px; left: 10px} #bottomnav {width: 900px; position:...

  • Page 217

    ChAPTER 11 Creating Division-Based Layouts 195Formatting DivisionsYou format divisions as you would any other elements. You can use styles to specify the font family, font style, font weight, alignment, color, and everything else covered so far in this book. You can change the background color...

  • Page 218

    196 parT III page Layout and NavigationIn the following exercise, you will apply a colored background to one division and a background image to another; then you will fine-tune the settings to improve the appearance.Format Divisions1. Open index4 .htm in Internet Explorer and then open default ....

  • Page 219

    ChAPTER 11 Creating Division-Based Layouts 197But first, let’s change the way the header is set up. Some browsers don’t interpret <header> correctly. The masthead is a fairly important page element to get right, so in the interest of compatibility, turn that <header> back into ...

  • Page 220

    198 parT III page Layout and Navigation14. Save the files and then refresh Internet Explorer to see the new masthead.15. Close Notepad and Internet Explorer.Key Points■■To create a division, surround a section of a page with a <div> tag.■■HTML5 uses semantic tags to define sections...

  • Page 221

    199Chapter 12Creating TablesIn this chapter, you will: ■■Create a simple table■■Specify the size of a table■■Specify the width of a column■■Merge table cells■■Use tables for page layoutIf you’ve used a word-processing program before, you’re probably already familiar with...

  • Page 222

    200 parT III page Layout and NavigationImportant Before you can use the practice files provided for this chapter, you need to in-stall them from the book’s companion content page to their default locations. See “Code Samples” in the beginning of this book for more information. Creating a S...

  • Page 223

    ChAPTER 12 Creating Tables 201Note You’ll learn more about that attribute in Chapter 13, “Formatting Tables.”FIGuRE 12-2 A table with two cells in the first row and three cells in the second row.The additions are shown in bold text in the following code:<table border="1"> ...

  • Page 224

    202 parT III page Layout and Navigation3. Within the table, create three rows. Indenting the lines as shown in the following code is optional but recommended:<table> <tr> </tr> <tr> </tr> <tr> </tr> </table>4. Within the first row...

  • Page 225

    ChAPTER 12 Creating Tables 203 Save the file and then refresh Internet Explorer.Notice that the browser ignores the two empty rows.6. In Notepad, type the information about two tours:<table> <tr> <td>Tour</td> <td>Start Date</td> <t...

  • Page 226

    204 parT III page Layout and Navigation8. Close Notepad and Internet Explorer.Specifying the Size of a TableBy default, a table sizes itself to accommodate all of its cells, and each cell’s height and width changes to accommodate the largest entry in that row or column. The table structure exp...

  • Page 227

    ChAPTER 12 Creating Tables 205To apply the width specification to all tables, place it in a style sheet:table {width: "100%"}You don’t need to specify 100 percent; you could also set the table’s width to 50, 75, or any other percentage. You can do the same thing with table height,...

  • Page 228

    206 parT III page Layout and NavigationFIGuRE 12-4 When the window size is smaller, the table is cramped.And in a larger window, the extra space between the columns becomes exaggerated (see Figure 12-5).FIGuRE 12-5 When the window size is large, the table appears too spread out.An alternative ap...

  • Page 229

    ChAPTER 12 Creating Tables 207When a browser renders a fixed-width table in a smaller browser window, a horizontal scroll bar ap-pears in the window. When displayed in a larger window, extra horizontal space displays to the right of the table (assuming the table is left-aligned) rather than bei...

  • Page 230

    208 parT III page Layout and Navigation8. Save the file and then refresh Internet Explorer. It should not have changed from the last time you looked at it.9. Add a height attribute to the <table> tag that sets the table height at exactly 250 pixels:<table height="250px">10...

  • Page 231

    ChAPTER 12 Creating Tables 209Note If you use the <th> tag instead of <td> for the cells in heading rows, you don’t have to manually make the content bold in those cells, because most browsers display <th> content in boldface. However, be aware that the <th> tag might ...

  • Page 232

    210 parT III page Layout and NavigationThis code creates a table that looks like that shown in Figure 12-6.FIGuRE 12-6 A blank table with specific widths for each column.Tip The examples shown here use nonbreaking spaces (&nbsp;) as placeholders in empty cells. This is optional, but it makes...

  • Page 233

    ChAPTER 12 Creating Tables 211 <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table>You would start out with a very small table, because the table is only as large as it needs to be to hold it...

  • Page 234

    212 parT III page Layout and NavigationChange Table Column Widths1. In Notepad and Internet Explorer, open the products .htm file located in the Documents\Microsoft Press\HTML5 Start Here\12Tables\SettingWidth folder.2. In Internet Explorer, examine the widths of the columns. Change the browser ...

  • Page 235

    ChAPTER 12 Creating Tables 2136. Save the file and then refresh Internet Explorer. Experiment with various window widths in Internet Explorer to see how the table’s column widths behave compared to step 1.7. Close Notepad and Internet Explorer.Spanning (Merging) Table CellsAs you have seen in...

  • Page 236

    214 parT III page Layout and NavigationUsing those two attributes, you can create sophisticated table layouts. For example, the following table has five columns and five rows, but some of the cells span multiple columns or rows:<table border="1"> <tr> <td colspa...

  • Page 237

    ChAPTER 12 Creating Tables 215In the following exercise, you will create two simple column spans.Change Table Column Widths1. In Notepad and Internet Explorer, open the products .htm file located in the Documents\Microsoft Press\HTML5 Start Here\12Tables\SpanningCells folder. Important Make sur...

  • Page 238

    216 parT III page Layout and NavigationNote Step 4 is necessary because columns can be spanned only from left to right. 5. Format the note to span four columns:<tr> <td></td> <td colspan="4">Note: Prices shown do not include sales tax.</td> ...

  • Page 239

    ChAPTER 12 Creating Tables 217When using a table for page layout, you might place your navigation hyperlinks in the column farthest to the left and then place the body of your content in the other columns. The table cells act as containers into which you can put anything: paragraphs, lists, hea...

  • Page 240

    218 parT III page Layout and Navigation4. Enclose the top navigation bar in a table cell by adding an opening <table>, <tr>, and <td> tag above it and then adding a closing </td> tag below it:<table> <tr> <td> <nav> <p style="margin:0px&quo...

  • Page 241

    ChAPTER 12 Creating Tables 2197. Delete the <p> and </p> tags that surround the top navigation bar and then enclose each of the buttons in the top navigation bar in its own separate <p> tag:<table> <tr> <td> <nav> <p><a href="index.htm&quo...

  • Page 242

    220 parT III page Layout and Navigation9. Format the first column to be exactly 170 pixels wide and to be vertically aligned at the top: <table> <tr> <td style="width: 170px; vertical-align: top"> <nav>Note I’m jumping ahead just a little with the previous exa...

  • Page 243

    ChAPTER 12 Creating Tables 221Key Points■■To create a table, use the <table> tag. Enclose each row in a <tr> tag and enclose each cell in each row in a <td> tag. ■■You can specify table size in either pixels or as a percentage of the page width. Use the width attribute...

  • Page 244

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 245

    223Chapter 13Formatting TablesIn this chapter, you will:■■Apply table borders■■Apply background and foreground fills■■Change cell padding, spacing, and alignmentChapter 12, “Creating Tables,” explained how to create tables structurally; now it’s time to learn how to make them ...

  • Page 246

    224 parT III page Layout and NavigationApplying Table BordersTables created using the default settings are pretty plain—in fact they’re invisible—so it can be dif-ficult to distinguish where one cell ends and the next cell begins. To help with this problem, you can place borders around cel...

  • Page 247

    ChAPTER 13 Formatting Tables 225As shown in Figure 13-3, increasing the number increases the width of the outer border around the whole table, but not the inner borders. You might recall from Chapter 12 that the border=”1” attribute is a quick way to see the borders of a table for the purpo...

  • Page 248

    226 parT III page Layout and NavigationThe rules attribute does the same thing for the inner lines of the table (the cell borders). The valid values are:■■all: All inner lines■■cols: Only vertical inner lines■■rows: Only horizontal inner lines■■none: No inner lines■■groups: L...

  • Page 249

    ChAPTER 13 Formatting Tables 227<table style="border-style: dotted; border-color: black"> <tr> <td style="border-style: groove; border-color: silver">Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>C...

  • Page 250

    228 parT III page Layout and NavigationThis code produces a result that looks as shown in Figure 13-6.FIGuRE 13-6 Cell 1’s formatting overrides the table-wide formatting specified by the style rule.In the following exercise, you will add default table border settings to an external style sheet...

  • Page 251

    ChAPTER 13 Formatting Tables 2295. Save the file and then refresh Internet Explorer. Each cell has a border around it, but there is no overall border surrounding the table.No outer borderRemove the border from each cell in the top row. You have to do this for each cell individually, because you...

  • Page 252

    230 parT III page Layout and NavigationBorder removed from first rowIn the row containing the column headings, make the bottom border three pixels thick:<tr><b> <td style="width: 440px; border-bottom-width: 3px">Tour</td> <td style="width: ...

  • Page 253

    ChAPTER 13 Formatting Tables 231Thicker border below heading rowRemove the borders from all sides of the cells in the row containing the column headings. (Hint: type the attributes once, and then copy and paste.)<tr><b> <td style="width: 440px; border-bottom-width: 3px; bord...

  • Page 254

    232 parT III page Layout and NavigationTop, left, and right bordersremoved from this row9. Close Notepad and Internet Explorer.Applying Background and Foreground FillsEach table, row, and cell is its own distinct area, and each can have its own background. For example, you might want to apply a ...

  • Page 255

    ChAPTER 13 Formatting Tables 233To apply a background color to a table, use the same background-color style rule that you use for documents. For example, to make a certain row orange:<tr style="background-color: orange">The table background can also be a picture, just like a doc...

  • Page 256

    234 parT III page Layout and Navigation3. Copy the edited <tr> tag from the third table row and then insert it into every other row (the fifth, seventh, and ninth rows):<tr style="background-color: wheat"> <td>Phoenix, Sedona, and Albuquerque: The Best of the ...

  • Page 257

    ChAPTER 13 Formatting Tables 2355. In Notepad, in the row containing the column headings, add a style rule that sets the back-ground to the marble .jpg file (located in the images folder) and sets the foreground (text) color to white:<tr style="background-image: url(images/marble.jpg); ...

  • Page 258

    236 parT III page Layout and NavigationCell paddingFIGuRE 13-8 Cell padding is the space between the text and the cell’s border.■■Spacing refers to the amount of space between the outside of an element and the adjacent element. For a table cell, spacing refers to the space between the bord...

  • Page 259

    ChAPTER 13 Formatting Tables 237Setting Cell paddingTo set the padding for the entire table, use the cellpadding attribute in the <table> tag. (The cellpadding attribute does not work with individual row and cell tags.)<table cellpadding="4px">To set the padding for an ind...

  • Page 260

    238 parT III page Layout and NavigationSetting Horizontal and Vertical alignmentA cell’s content has two alignments: vertical (top, middle, or bottom) and horizontal (left, center, right, or justify). You can set these with attributes or with styles. To set alignment with attributes, use the a...

  • Page 261

    ChAPTER 13 Formatting Tables 2394. Save the file and then refresh Internet Explorer.Note Notice that wherever two bordered cells touch, the border appears double thick. You can change that by removing the border from one side of each of those cells. For example, you can remove the right and bot...

  • Page 262

    240 parT III page Layout and NavigationKey Points■■To apply a simple default border to a table, include the border=“1” attribute in the table’s opening tag. A value greater than 1 increases the table border but not the cell borders.■■The frame attribute specifies which sides of the...

  • Page 263

    241Chapter 14Creating User FormsIn this chapter, you will:■■Create a basic form■■Create check boxes and option buttons■■Create menu listsGathering feedback from your website’s visitors can be a valuable way of assessing your site’s success, and it can help you build a customer o...

  • Page 264

    242 parT III page Layout and NavigationCaution Many web design professionals strongly recommend against using email to deliver web form results. Not only is email not secure, but web forms do not interface very well with some email programs and some older browsers (such as Internet Explorer 3.0)...

  • Page 265

    ChAPTER 14 Creating User Forms 243You place the various tags that create form controls between the opening and closing <form> tags. Form controls available include text boxes, buttons, check boxes, lists, and/or command buttons. A command button is a button that executes a function, such ...

  • Page 266

    244 parT III page Layout and NavigationSpecial Field Types for email and Web addressesTwo new input field types in HTML5 support email addresses and web addresses. Use the attribute type=“email” instead of type=“text” to define a field designed to collect email addresses. If a browser do...

  • Page 267

    ChAPTER 14 Creating User Forms 245You can also include a Reset button on the form, which allows the user to clear all the fields (see Figure 14-2). Again, use the value attribute to change the text on the button:<input type="reset" value="Clear">FIGuRE 14-2 Submit and ...

  • Page 268

    246 parT III page Layout and NavigationPlaceholder text displays only in HTML5-compliant browsers. To use placeholder text, add the placeholder attribute:<input type="text" name="country" placeholder="Enter your country here">In the following exercise, you wil...

  • Page 269

    ChAPTER 14 Creating User Forms 2476. In the empty <td> tag following Comments:, create a six-line text area with a width of 50 characters:<tr> <td>Comments:</td> <td><textarea name="comments" rows="6" cols="50"></textare...

  • Page 270

    248 parT III page Layout and Navigation12. Depending on what browser and version you are using, one of two things will happen at this point: either a warning will display alerting you to the fact the message is about to be sent (click Yes to allow it) or your email program will open up a new ema...

  • Page 271

    ChAPTER 14 Creating User Forms 249Creating Check Boxes and option ButtonsWhen the valid responses to a particular prompt will always be one of a few simple options, such as sex or employment status, you will get more consistent and easier-to-evaluate results by using check boxes and option butt...

  • Page 272

    250 parT III page Layout and NavigationBy default, check boxes display unselected; users must click each check box to select it. In some cases, however, it might be advantageous to have a check box preselected. For example, to encour-age people to sign up for your newsletter, you could select th...

  • Page 273

    ChAPTER 14 Creating User Forms 251When the form results are returned, this button group will report its name and the selected value:category=goldIn the following exercise, you will enhance a form by adding a group of option buttons and a check box.add Option Buttons and a Check Box to a Form1. ...

  • Page 274

    252 parT III page Layout and Navigation7. Fill out the form (use any text you like, and select any of the option buttons) and then click Submit to send it to yourself.8. Close Notepad and Internet Explorer.Creating Menu ListsCheck boxes are good for yes/no questions, and option buttons are appro...

  • Page 275

    ChAPTER 14 Creating User Forms 253<option>Green</option> <option>Yellow</option> <option>Pink</option> <option>Brown</option> <option>Black</option> <option>Teal</option> <option>Beige</option> </select>&l...

  • Page 276

    254 parT III page Layout and Navigation<select name="printers" size="1"> <optgroup label="Inkjet"> <option>SuperJet 1400</option> <option>SuperJet 1405</option> <option>SuperJet 1405 Plus</option> ...

  • Page 277

    ChAPTER 14 Creating User Forms 2555. In the signup file, click between the opening and closing <select> tags. Press Ctrl+v to paste the options for each state into the file.6. Save the file and then refresh Internet Explorer. Click the down arrow to the right of the State box to ensure th...

  • Page 278

    256 parT III page Layout and Navigation</optgroup> <optgroup label="Territories"> <option>American Samoa</option> <option>Guam</option> <option>Northern Mariana Islands</option> <option>Puerto Rico</option> <...

  • Page 279

    ChAPTER 14 Creating User Forms 257FIGuRE 14-11 A slider is a bar you can drag to choose a setting within a range.<input type="range" name="copies" min="1"max="4" step="1" value="1">Note Internet Explorer 9 does not support spin b...

  • Page 280

    258 parT III page Layout and Navigation■■The CGI Resource Index: cgi .resourceindex .com■■BigNoseBird.Com: www .bignosebird .comAs your website becomes more sophisticated, you also might want to include a public bulletin board area where people can post and read comments, or a guest book...

  • Page 281

    ChAPTER 14 Creating User Forms 259■■To create a list, use a two-sided <select> tag, and within it, include two-sided <option> tags for each list item.■■Use a size=“1” attribute with the <select> tag to create a drop-down list, or specify a higher number to create a...

  • Page 282

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 283

    261Chapter 15Incorporating Sound and VideoIn this chapter, you will:■■Understand the purpose and scope of the <audio> and <video> tags in HTML5■■Choose multimedia formats and codecs■■Use the <video> tag■■Use the <audio> tagPlaying video and audio on the w...

  • Page 284

    262 parT III page Layout and Navigationunderstanding Audio and video in hTML5Traditionally, developers and designers have most commonly set up pages to play video and audio on the web using Adobe Flash . Sites such as YouTube (http://www .youtube .com) embed video inside of a Flash file . This r...

  • Page 285

    ChAPTER 15 Incorporating Sound and Video 263As an alternative, you can link to an audio or video clip so that it plays in an external application (such as Microsoft Windows Media Player) when the visitor clicks its hyperlink. For this to work, the visitor must have an external application that ...

  • Page 286

    264 parT III page Layout and NavigationAs with video, playing audio through a computer or hand-held mobile devices (such as smart-phones) requires a codec to read the file and play it back . Two popular formats are MPEG-4 Audio Layer 3, which you might recognize as MP3, and AAC, which is frequen...

  • Page 287

    ChAPTER 15 Incorporating Sound and Video 265In this exercise, you will encode a video clip in .ogv and .webm formats.encode a Video Clip with VLC Media player1. Download and install VLC Media Player from actionURI(http://www.videolan.org/vlc/index.html):wwwactionURI(http://www.videolan.org/vlc/...

  • Page 288

    266 parT III page Layout and Navigation10. In the Settings section, click the Profile drop-down list and then click Video – Theora + Vorbis (OGG).11. Click Start and then wait for the clip to be converted. The progress bar below the preview window shows the progress.12. Repeat the process for ...

  • Page 289

    ChAPTER 15 Incorporating Sound and Video 267There are several attributes and different ways to use the <video> tag that make it more configu-rable for your needs and the needs of your audience . Several attributes are helpful, including:■■autoplay■■controls■■height■■loop...

  • Page 290

    268 parT III page Layout and NavigationPutting it together, a real-world video element looks like this:<video src="myvideo.mp4" width="320" height="240" controls></video>The <video> tag enables more than one source (via the source element) which yo...

  • Page 291

    ChAPTER 15 Incorporating Sound and Video 269Note that you place the <embed> tag within the <video> tag. You do that because if any of the sources that appear before it are able to execute, the browser will ignore the <embed> tag. Only if the <video> tag itself is unrecog...

  • Page 292

    270 parT III page Layout and Navigation5. Open the page in a different browser.To do that, you can right-click the blog .htm file, click Open With, and then select the desired browser. Or you can copy the address from the Address bar in Internet Explorer and then paste it into the Address bar in...

  • Page 293

    ChAPTER 15 Incorporating Sound and Video 2717. Make the words Click here into a hyperlink that points to the agility .avi file:<p><a href="videos/agility.avi">Click here</a> to download a high-resolution version of the clip in AVI format.</p>8. Save your work i...

  • Page 294

    272 parT III page Layout and NavigationIf you provide MP3 support and Ogg Vorbis support for audio files on a page, you’ll hit most of the browsers that people viewing your page are likely to be using. You’ll find support for at least one of these two formats in Firefox, Chrome, Safari, Oper...

  • Page 295

    ChAPTER 15 Incorporating Sound and Video 273Note Even when using <embed> to include audio, the visitor must still have software capable of playing the type of file being provided.One other attribute commonly used with <embed> is the loop attribute. The loop attribute, when set to tr...

  • Page 296

    274 parT III page Layout and NavigationKey Points■■Incorporating sound and video is accomplished by providing video and audio files in multiple formats to ensure that your visitors can view the multimedia no matter what browser they’re using.■■It’s important to understand the differe...

  • Page 297

    275Chapter 16HTML and Microsoft expression WebIn this chapter, you will:■■Use the Expression Web interface■■Create a new website■■Create a new page using a CSS template■■Insert text and graphics■■Apply text and page formatting■■Insert hyperlinksThroughout this book, you...

  • Page 298

    276 parT III page Layout and NavigationImportant Before you can use the practice files provided for this chapter, you need to in-stall them from the book’s companion content to their default locations. See the section “Code Samples” in the beginning of this book for more information.Explor...

  • Page 299

    ChAPTER 16 HTML and Microsoft Expression Web 277In the following exercise, you will open a webpage in Expression Web and view it in several ways.View a Webpage in expression Web1. From the Start screen (Windows 8) or Start menu (earlier Windows versions), click Microsoft Expression Web.2. Click...

  • Page 300

    278 parT III page Layout and Navigation5. Click the Design tab at the bottom of the window.The code disappears and the page now displays in what-you-see-is-what-you-get (WYSIWYG) mode, which is similar to previewing it in a web browser window.If the pane is not as wide as the page, contentmight ...

  • Page 301

    ChAPTER 16 HTML and Microsoft Expression Web 279Click here forDesign viewClick here forSplit view7. In the lower (Design) pane, change worries to troubles. The word also changes in the upper pane.8. In the Code pane, change troubles back to worries. The word also changes in the lower pane.9. In...

  • Page 302

    280 parT III page Layout and NavigationClick here...…and the section of thecode it representsis highlighted10. In the Design pane, click in the first body paragraph (the one beginning with For a limited time…).A border displays around the text, with a small p tab at the top, indicating that ...

  • Page 303

    ChAPTER 16 HTML and Microsoft Expression Web 28111. Close the file (File | Close). You do not have to save changes because you did not make any. (Well, you made one change, but then you changed it back again.) 12. Leave Expression Web open for the next exercise.Creating websites and webpagesIn ...

  • Page 304

    282 parT III page Layout and Navigation5. Click OK.Expression Web creates the site, including a new folder in the chosen location. The folder displays in the Folder List pane in the upper-left corner of the Expression Web window.At this point you have a new site, but it has no pages in it yet. N...

  • Page 305

    ChAPTER 16 HTML and Microsoft Expression Web 2837. Click the X on the Untitled_1.html tab to close the unsaved new page. If prompted, do not save your changes.8. Click File | New | Page.The New dialog box displays.9. Click the Page Editor Options hyperlink.The Page Editor Options dialog box dis...

  • Page 306

    284 parT III page Layout and Navigation14. Click File | Save.The Save As dialog box displays.15. In the File Name box, type blank.16. Click the Change Title button to open the Set Page Title dialog box. Type Margie’s Travel and then click OK.The new page title displays in the Page Title area.1...

  • Page 307

    ChAPTER 16 HTML and Microsoft Expression Web 28518. Click the X on the blank.htm tab. If prompted to save changes, click Yes.Expression Web saves and closes the page. The page now displays in the Folders List pane (in the upper-left corner of the Expression Web window). 19. Leave the website op...

  • Page 308

    286 parT III page Layout and Navigation4. Click OK.Expression Web creates your new page. Two separate tabs display at the top of the editing pane: one for the new untitled HTML document and one for the untitled external cascading style sheet.Note Even though you previously set the Page Editor Op...

  • Page 309

    ChAPTER 16 HTML and Microsoft Expression Web 28712. Click OK.Notice that in the Code pane, the title displays as follows:<title>Margie&#39;s Travel</title>Tip The method you just used of setting the page title is an alternative to specifying a page title when you save your work,...

  • Page 310

    288 parT III page Layout and Navigation15. Leave the page and the website open in Expression Web for the next exercise.Insert GraphicsWhen you insert a graphic image on a page, Expression Web automatically creates the <a> tag needed to reference it and makes sure that the graphic’s locat...

  • Page 311

    ChAPTER 16 HTML and Microsoft Expression Web 2891. In File Explorer (Windows Explorer), navigate to the 16Expression folder for this lesson.2. Select the Images folder and press Ctrl+C to copy it.3. Switch to Expression Web and click in the Folder List pane.4. Press Ctrl+v to paste the folder.T...

  • Page 312

    290 parT III page Layout and Navigation4. Press the space bar once to add a blank space after the button.5. Repeat steps 1–4 for the following buttons, in the order shown, placing each new button to the right of the previous one. You can assign alternate text as appropriate for the button’s ...

  • Page 313

    ChAPTER 16 HTML and Microsoft Expression Web 291add a Background Image to a Division1. In Expression Web, click in the Masthead division in the Design pane. (That’s the division where the text Margie’s Travel currently displays.)2. In the Properties pane (lower-left), click the CSS Properti...

  • Page 314

    292 parT III page Layout and Navigation7. Above the Code pane, click the default.css tab to switch to viewing the associated CSS file. Notice that:• The tab displays as default.css*. The asterisk means that there are unsaved changes to the file.• The code that places the background image in ...

  • Page 315

    ChAPTER 16 HTML and Microsoft Expression Web 293You can define formatting for a new class in a style sheet:.tangent {font-family: "Verdana", "Arial", sans-serif; font-size: 13px}And then you can assign the class to certain tags within the document:<p class="tangent&q...

  • Page 316

    294 parT III page Layout and Navigation4. Select the words 50% off and then click B (the bold button) on the toolbar or press Ctrl+B.The selected text is enclosed in a <strong></strong> tag pair.<p>For a limited time, all our European dream vacations are up to <strong>50%...

  • Page 317

    ChAPTER 16 HTML and Microsoft Expression Web 29511. In the Styles pane (bottom-right), click New Style.The New Style dialog box displays.12. Open the Selector drop-down list and then click p.13. Open the Define In drop-down list and then click Existing Style Sheet.14. In the URL box, type defau...

  • Page 318

    296 parT III page Layout and NavigationNote The p style displays in the Styles pane (lower right) with a blue circle next to it. The blue circle indicates that it is a style applied to one of the standard HTML tags.19. In the Styles pane, right-click the p style, and then click Modify Style.The ...

  • Page 319

    ChAPTER 16 HTML and Microsoft Expression Web 29726. Click the dark-red square on the top line, setting the color to 128, 0, 0. Then click Apply.Look in the Code pane. You’ll see that a new class has been created, called auto-style1, and applied to that text:<div id="masthead" cla...

  • Page 320

    298 parT III page Layout and NavigationFormat a Division1. In Expression Web, at the bottom of the editing pane, click Design to display the page in De-sign view only (not split).2. Click in the #Masthead division to select it. (That’s the division with the navigation buttons in it.)3. Positio...

  • Page 321

    ChAPTER 16 HTML and Microsoft Expression Web 2999. Repeat steps 6–8 for the padding-left property and add 12 pixels of padding to the left side.10. View the default .css file in the Code pane to see what Expression Web added to the style definition for the division.#masthead { background-ima...

  • Page 322

    300 parT III page Layout and Navigation■■Create new Document This hyperlink type generates a new document of the type you specify. This type is not frequently used.■■E-Mail Address This type inserts a hyperlink that opens the default email application and begins composing a message.In th...

  • Page 323

    ChAPTER 16 HTML and Microsoft Expression Web 3017. In the Code pane, check the code that has been added for the hyperlink.<a href="domestic.htm" title="Domestic Travel"> <img alt="Domestic navigation button" height="23" src="images/domestic....

  • Page 324

    302 parT III page Layout and Navigation14. Click OK.The hyperlink is applied to the text, which appears underlined in the Design pane.15. Look at the code in the Code pane to see the hyperlink that was created.<a href="mailto:margie@margiestravel.com?subject=Question about site">...

  • Page 325

    ChAPTER 16 HTML and Microsoft Expression Web 303■■You can format text directly using Expression Web’s toolbar buttons. The code for the format-ting is placed either in the individual tags or in the CSS, depending on the type of formatting.■■You can change a division’s size by draggi...

  • Page 326

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 327

    305Part IVAppendicesAPPEnDIx A Designing for Usability . . . . . . . . . . . . . . . . . . . . . . .307 335,APPEnDIx 335, B 335,Designing for Accessibili 335,ty 335,....................313APPEnDIx C 343,Quick 343, Reference 343,.............................321actionURI(http://www.freepdf-bo...

  • Page 328

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 329

    307Appendix ADesigning for UsabilityAlthough there is a certain amount of artistic freedom when creating a website, there are also well-established “best practices” among professional web designers. Have you ever visited a webpage that was hard to navigate, difficult to understand, or just ...

  • Page 330

    308 parT IV appendices■■Error-handling How often do visitors make mistakes in navigating your site, and how easy is it for them to get back on track? A highly usable site provides helpful error messages when problems occur, complete with hyperlinks that help users do what they intended.■■...

  • Page 331

    APPEnDIx A Designing for Usability 309customers might turn to the website to get information about a specific problem they are having; making troubleshooting information easy to find would attract customers and keep them interested in the site.Sketching the Site organizationThe next step is to ...

  • Page 332

    310 parT IV appendices■■Place a text-only navigation bar at the bottom of the page so people do not need to scroll back up to the top again to navigate to other pages.■■If you decide to use frames, be very careful. It is very easy to create a frameset in which a frame is too small and cut...

  • Page 333

    APPEnDIx A Designing for Usability 311■■Keep articles on one page. Do not split up the text of an article onto multiple pages just because a page seems long. Visitors who want to print the article will find it much easier to do so if it is all on one page, and they will appreciate not havin...

  • Page 334

    actionURI(http://www.freepdf-books.com /):www.freepdf-books.com http://freepdf-books.com

  • Page 335

    313Appendix BDesigning for accessibilityAccessibility, a subset of usability, refers to a website’s suitability for use by anyone, regardless of age or disability. Designing for accessibility is not only a nice thing to do, but a smart thing. An estimated 18.7 percent of the population of the...

  • Page 336

    314 appeNDIx B appendices■■Users might be relying on a program that reads the content of the page aloud■■Hearing limitations■■Users might not hear music or narration being playedTo plan for these limitations, W3C has compiled a list of accessibility guidelines for web designers to fol...

  • Page 337

    APPEnDIx B Designing for Accessibility 315Guideline 3: use Markup and Style Sheets, and Do So ProperlyMark up documents by using the proper structural elements. Control presentation with style sheets rather than with presentation elements and attributes.More web designers have been moving towar...

  • Page 338

    316 appeNDIx B appendicesGuideline 4: Clarify natural Language usageUse markup that facilitates pronunciation or interpretation of abbreviated or foreign text.When a visitor is using a screen-reading program to read a page, the software that reads the text aloud can have difficulty reading foreig...

  • Page 339

    APPEnDIx B Designing for Accessibility 317Avoid using table elements strictly for visual formatting; for example, the <th> tag makes the text in a table cell centered and bold, but do not use <th> simply to achieve that formatting.Guideline 6: Ensure Pages that Feature new Technolog...

  • Page 340

    318 appeNDIx B appendicesGuideline 8: Ensure Direct Accessibility of Embedded user InterfacesEnsure that the user interface follows the principles of accessible design: device-independent access to functionality, keyboard operability, self-voicing, and so on.When an embedded object has its own in...

  • Page 341

    APPEnDIx B Designing for Accessibility 319■■For all form fields, ensure that the text label describing the field is positioned to the left of the field, so that a screen reader would first read the label, and then move on to the field immedi-ately afterward. Do not position the field labels...

  • Page 342

    320 appeNDIx B appendicesGuideline 13: Provide Clear navigation MechanismsProvide clear and consistent navigation mechanisms orientation information, navigation bars, a site map, and so onto increase the likelihood that a person will find what they are looking for at a site.Throughout the book, I...

  • Page 343

    321Appendix CQuick referenceHTML5 adds over 20 new tags to the web developer’s toolbox. Some of these new tags are semantic tags used for defining different types of divisions, like footer and header. Others pertain to audio and video clips and user forms.Here is a list of the new tags with c...

  • Page 344

    322 appeNDIx C Quick reference<meter>Defines measurement within a predefined range<nav>Defines navigation links10<nest>Defines a nesting point in a data template<output>Defines some types of output<progress>Defines progress of a task of any kind<rule>Defines t...

  • Page 345

    323Aabsolute path Paths that contain a complete ad-dress that anyone could use to get to a webpage. (See also relative path.)accessibility A subset of usability that refers to a website’s suitability for use by anyone, regardless of age or disability. (See also usability.)alignment The horizo...

  • Page 346

    324 GlossaryDdefinition description Uses the <dd> tag; a paragraph that defines a definition term.definition list Uses the <dl> tag; contains the complete list of headings and definition para-graphs.definition term Uses the <dt> tag; a word or phrase to be defined in a definiti...

  • Page 347

    Glossary 325IID An identifier for a unique element in a docu-ment. Similar to a class, except there can be mul-tiple elements assigned to the same class within a document but each ID can be assigned only once per document.image map An overlay for a graphic that assigns hyperlinks to certain def...

  • Page 348

    326 Glossaryresolution The size of a graphic, determined by the number of pixels that comprise it. Resolution is expressed in width and height.rule An argument, especially when applied within a style tag or section. Ssamples A series of audio “snapshots” that are taken per second when an aud...

  • Page 349

    327complex page layouts and, 341,319device independence and, 340,318divisions and, 201,179embedded objects and, 340,318flashing text and, 138,116graphical navigation bars and, 193,171graphics and, 177,155 178,–156<h> tags and, 53,31interim solutions for older browsers, 340,318...

  • Page 350

    <aside> tags328 Index<aside> tags, 201,179 202,, 180ASP (Active Server Pages), 29,7default.aspx and, 95,73.asp (file extension), 29,7<a> tags, 27,5, 93,71– 106,84anchors, 101, 79graphical hyperlinks and, 173,151href attribute, 94,72name attribute, 101,79subject attri...

  • Page 351

    <!DoCTyPE> tag Index 329checkboxes in forms, 271,249checked attribute (<input> tags), 272,250Chrome (Google)audio formats supported by, 294,272<audio>/<video> tag support in, 284,262tables and, 232,210cite=”URL” attribute (<blockquote> tag), 64,42class at...

  • Page 352

    document structure330 Indexdocument structure, 41,19 50,–28body section, 45,23– 48,26metatags, adding, 48,26 50,–28page title, specifying, 48,26– 50,28required sections of, 43,21– 45,23document type, specifying, 42,20Dreamweaver (web development application), 297,275<dt> t...

  • Page 353

    .html (file extension) Index 331<form> tags, 264,242enctype attribute, 264,242method attribute, 264,242404 error message, 198,176frame attribute (<table> tags), 247,225frames, 332,310GGIF (graphic file type)animations and, 164,142JPG/PNG file types vs., 164,142transparent i...

  • Page 354

    hTML (hyperText Markup Language)332 IndexHTML (HyperText Markup Language), 26,4. See also HTML5; See also HTML documents; See also tags (HTML)<html> tag, 43,21– 45,23HTML tags. See tags (HTML)http-equiv attribute (<meta> tags), 196,174hyperlinks, 93,71– 106,84anchors and, 10...

  • Page 355

    padding (images) Index 333literal text, 25,3lobby pages, 187,165loop attribute (<embed> tags), 295,273loop attribute (<video> tags), 289,267Mmargin attribute (<p> tags), 148,126arguments for, 149,127units of measurement for, 149,127margin indent, 148,126margin style at...

  • Page 356

    padding indent334 Indexpadding indent, 148,126padding (table cells)defined, 257,235setting, 259,237page layout, 201,179 220,–198accessibility concerns with, 337,315CSS and, 217,195 220,–198division-based, 203,181– 206,184division-based vs. tables, 201,179divisions, naming, 204,182...

  • Page 357

    <table> tags Index 335<div> tag vs., 202,180<select> tag, 274,252semantic layouts, 206,184 208,–186tags for, 202,180– 203,181semantic tags, 52,30<b> tags, 55,33– 57,35<code> tags, 59,37<h> tags, 52,30– 55,33<i> tags, 55,33– 57,35<k...

  • Page 358

    336 Index<table> tags, continuedwidth attribute, 226,204tags (HTML), 26,4– 28,6attributes of, 27,5target attribute (<a> tag), 96,74target windows, 96,74– 97,75taskbar, creating shortcuts in, 30,8<td> tags, 222,200align attribute, 260,238border-color attribute, 248,...

  • Page 359

    ¥ (yen) Index 337Visual Studio (web development application), 297,275VLC Media Player, 286,264audio files, encoding with, 293,271video files, encoding with, 287,265– 288,266Vorbis (audio encoding format), 286,264VP8 (video encoding format), 285,263wW3Ctechnologies and accessibility, 3...

  • Page 360

Free HTML Books, HTML Book Pdf, HTML Pdf Books, HTML Pdf Books Download, HTML Pdf Books Free Download, Free HTML5 Books, HTML5 Book Pdf, HTML5 Pdf Books, HTML5 Pdf Books Download, HTML5 Pdf Books Free Download, Free ReadOnline Books, ReadOnline Book Pdf, ReadOnline Pdf Books, ReadOnline Pdf Books Download, ReadOnline Pdf Books Free Download,