Building the User Interface by Using HTML5: Text, Graphics ... - server
Building the User Interface by Using HTML5: Text, Graphics ... - server Building the User Interface by Using HTML5: Text, Graphics ... - server
24 | Lesson 2Figure 2-1A hyperlink is the result ofthe anchor element using thehref attributeLICENSED PRODUCT NOT FOR RESALETwo of the most common uses of attributes are to create hyperlinks and to insert simplegraphics. You’ll learn how to work with graphics later in this lesson. HTML5 includes severalglobal attributes, which you can use with any HTML5 element. Examples of global attributesinclude id, lang, and class, among many others.NESTING ELEMENTSHow a Web browser displays your HTML depends on the way you combine elements, theirattributes (if any), and content. When two or more elements apply to the same block of text,you should nest tag pairs appropriately so that they do what you intended. Nesting means toplace one element inside another. Here’s an example of correct nesting:Make sure your pet has plenty of fresh waterduring hot weather.In this case, we want the words “fresh water” to stand out so they are italicized and bolded byusing the and tags. If you placed the end tag after the end tag (shownbelow), the words “fresh water during hot weather” would appear bold but only “fresh water”would be italicized. It would look awkward, as shown in Figure 2-2.Make sure your pet has plenty of fresh waterduring hot weather.Figure 2-2Incorrectly nesting tagsThe rule for nesting is that nested tags must be closed before their parent tags. Looking backat the correct example, notice that the paragraph element opens first, followed by the italicelement, and then the font element. Then the bold element closes, followed by the italic element,and finally the paragraph element. The italic and bold elements are completely nestedwithin the paragraph element.UNDERSTANDING ENTITIESAn entity is a special character, such as the dollar symbol, the registered trademark (a capitalR within a circle), and accented letters. The process of incorporating entities in a Web page is
Building the User Interface by Using HTML5: Text, Graphics, and Media | 25called character encoding. Today’s Web editing tools and browsers do a good job of handlingspecial characters that appear on your keyboard, such as those above the number keys. Inmost cases, those characters render without any problems.With some browsers, the character you expected doesn’t appear and you get a gibberish characteror symbol instead. Those situations are easy to handle. Each special character that can bereproduced in a Web page has an entity name and a numerical code. You can use either in aWeb page. However, it’s generally safer to represent symbols like the trademark using a numberedentity to ensure proper rendering in a wide variety of browsers.An entity begins with an ampersand (&) and ends with a semicolon (;). For example, theentity ® represents the registered trademark symbol, and its numerical code is ® .When a browser encounters an ampersand, it tries to match the characters that follow with anentity. If the browser finds a match, it displays the special character in place of the entity.Table 2-2 lists a few commonly used entities.LICENSED PRODUCT NOT FOR RESALETable 2-2A sampling of entitiesfor HTML5SYMBOL DESCRIPTION ENTITY NAME CODE© Copyright © ©° Degree ° °$ Dollar $ $% Percent % %® Registered trademark ® ®Another important thing to know about character encoding in HTML5 is that you shoulduse UTF-8 encoding whenever possible, because most browsers use UTF-8. That means youadd the following declaration to the head element:The HTML5 specification requires that the whole meta element fits in the first 1,024 bytesof the document, which is why you include it at the top of the page in the head element.✚ MORE INFORMATIONFor a list of entities supported in HTML5, go to http://dev.w3.org/html5/html-author/charref.UNDERSTANDING THE DOCTYPEThe doctype is a declaration that is found at the very top of almost every HTML document.When a Web browser reads a doctype declaration, the browser assumes that everything on theWeb page uses the language or rules specified in the declaration.In HTML 4, all declarations require a reference to a DTD, which stands forDocument Type Definition. The DTD is simply a set of rules that help a Web browser turntags and content into the pages you see on the Web. There are a few different DTDs that anHTML 4 Web page can use. Because of how HTML5 was created, it doesn’t require a referenceto a DTD.In HTML 4, the doctype declaration specifies the HTML page’s language and DTD, andlooks quite complex. Here’s an example:
- Page 1 and 2: Building the UserInterface by Using
- Page 3: Building the User Interface by Usin
- Page 9 and 10: Building the User Interface by Usin
- Page 11 and 12: Building the User Interface by Usin
- Page 13 and 14: Building the User Interface by Usin
- Page 15 and 16: Building the User Interface by Usin
- Page 17 and 18: Building the User Interface by Usin
- Page 19 and 20: Building the User Interface by Usin
- Page 21 and 22: Building the User Interface by Usin
- Page 23 and 24: Building the User Interface by Usin
- Page 25 and 26: Building the User Interface by Usin
- Page 27 and 28: Building the User Interface by Usin
- Page 29 and 30: Building the User Interface by Usin
- Page 31 and 32: Building the User Interface by Usin
<strong>Building</strong> <strong>the</strong> <strong>User</strong> <strong>Interface</strong> <strong>by</strong> <strong>Using</strong> <strong>HTML5</strong>: <strong>Text</strong>, <strong>Graphics</strong>, and Media | 25called character encoding. Today’s Web editing tools and browsers do a good job of handlingspecial characters that appear on your keyboard, such as those above <strong>the</strong> number keys. Inmost cases, those characters render without any problems.With some browsers, <strong>the</strong> character you expected doesn’t appear and you get a gibberish characteror symbol instead. Those situations are easy to handle. Each special character that can bereproduced in a Web page has an entity name and a numerical code. You can use ei<strong>the</strong>r in aWeb page. However, it’s generally safer to represent symbols like <strong>the</strong> trademark using a numberedentity to ensure proper rendering in a wide variety of browsers.An entity begins with an ampersand (&) and ends with a semicolon (;). For example, <strong>the</strong>entity ® represents <strong>the</strong> registered trademark symbol, and its numerical code is ® .When a browser encounters an ampersand, it tries to match <strong>the</strong> characters that follow with anentity. If <strong>the</strong> browser finds a match, it displays <strong>the</strong> special character in place of <strong>the</strong> entity.Table 2-2 lists a few commonly used entities.LICENSED PRODUCT NOT FOR RESALETable 2-2A sampling of entitiesfor <strong>HTML5</strong>SYMBOL DESCRIPTION ENTITY NAME CODE© Copyright © ©° Degree ° °$ Dollar $ $% Percent % %® Registered trademark ® ®Ano<strong>the</strong>r important thing to know about character encoding in <strong>HTML5</strong> is that you shoulduse UTF-8 encoding whenever possible, because most browsers use UTF-8. That means youadd <strong>the</strong> following declaration to <strong>the</strong> head element:The <strong>HTML5</strong> specification requires that <strong>the</strong> whole meta element fits in <strong>the</strong> first 1,024 <strong>by</strong>tesof <strong>the</strong> document, which is why you include it at <strong>the</strong> top of <strong>the</strong> page in <strong>the</strong> head element.✚ MORE INFORMATIONFor a list of entities supported in <strong>HTML5</strong>, go to http://dev.w3.org/html5/html-author/charref.UNDERSTANDING THE DOCTYPEThe doctype is a declaration that is found at <strong>the</strong> very top of almost every HTML document.When a Web browser reads a doctype declaration, <strong>the</strong> browser assumes that everything on <strong>the</strong>Web page uses <strong>the</strong> language or rules specified in <strong>the</strong> declaration.In HTML 4, all declarations require a reference to a DTD, which stands forDocument Type Definition. The DTD is simply a set of rules that help a Web browser turntags and content into <strong>the</strong> pages you see on <strong>the</strong> Web. There are a few different DTDs that anHTML 4 Web page can use. Because of how <strong>HTML5</strong> was created, it doesn’t require a referenceto a DTD.In HTML 4, <strong>the</strong> doctype declaration specifies <strong>the</strong> HTML page’s language and DTD, andlooks quite complex. Here’s an example:
Change language