Presentation is loading. Please wait.

Presentation is loading. Please wait.

CHAPTER 19 HTML DOCUMENT STRUCTURE AND SEMANTICS.

Similar presentations


Presentation on theme: "CHAPTER 19 HTML DOCUMENT STRUCTURE AND SEMANTICS."— Presentation transcript:

1 CHAPTER 19 HTML DOCUMENT STRUCTURE AND SEMANTICS

2 LEARNING OBJECTIVES HTML 5 provides new tags you can use to define a document structure, such as its header, footer, figures, and captions. Using the HTML 5 and tag pair, you can highlight text within a document. Using the HTML and tag pair, you can provide semantics about the date and time, which can be used by a user-agent program.

3 ASSIGNING A PAGE HEADER AND FOOTER Document Title Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim adminim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex eacommodoconsequat.Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Copyright (C) 2013, Somesite.com

4 CREATING A SIDEBAR Document Title Sedutperspiciatisundeomnisistenatus error sit voluptatemaccusantiumdoloremquelaudantium, totam rem aperiam, eaqueipsa quae abilloinventoreveritatis et quasi architectobeatae vitae dicta suntexplicabo. Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex eacommodoconsequat. Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatatnon proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Copyright (C) 2013, Somesite.com

5 ORGANIZING ARTICLE CONTENT Document Title Sedutperspiciatisundeomnisistenatus error sit voluptatemaccusantiumdoloremquelaudantium, totam rem aperiam, eaqueipsa quae abilloinventoreveritatis et quasi architectobeatae vitae dicta suntexplicabo. Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex eacommodoconsequat. Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Copyright (C) 2013, Somesite.com

6 ORGANIZING PAGE SECTIONS Document Title Sedutperspiciatisundeomnisistenatus error sit voluptatemaccusantiumdoloremquelaudantium, totam rem aperiam, eaqueipsa quae abilloinventoreveritatis et quasi architectobeatae vitae dicta suntexplicabo. Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex eacommodoconsequat. Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Copyright (C) 2013, Somesite.com

7 FIGURES AND FIGURE CAPTIONS Document Title Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex eacommodoconsequat. Figure 19.1: My new dog Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Copyright (C) 2013, Somesite.com

8 IDENTIFYING DOCUMENT NAVIGATIONAL LINKS As the length of a printed report increases, authors often integrate a table of contents to help the reader navigate the document. In a similar way, a web-based document may consist of a set of related internal links. To group the document’s navigational links, use the and tag pair. In general, you should limit your use of the navigation tags to your document’s internal links, as opposed to other links that may appear on your page: Chapter 1 Chapter 2 Chapter 3

9 HIDING UNDERLYING CONTENT Depending on your document’s contents, there may be times when, for page real- estate purposes, you don’t want to display all of the information about a topic. Instead, you can display summary text for which, if the user is interested, he or she can expand to display the underlying specifics. In such cases, you can use the HTML 5 and tag pair. The following statements illustrate the tag’s use: This summary text will appear The following text is hidden until the user triggers the text content. Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. In this case, the browser will display the summary text and hide the text that follows. Not all browsers support the and tag pair. Depending on the browser, the actual process the user must perform to expand and display the underlying content may differ.

10 MARKING DOCUMENT TEXT Document Title Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex eacommodo consequat. Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum. Copyright (C) 2013, Somesite.com

11 SPECIFYING A WORD BREAK By default, when a browser needs to wrap text, the browser will do so at a white space location, such as a space character or tab. Depending on your page content, you may prefer that the browser break the text within a word. In such cases, you can use the tag to specify a potential break location: I like to play basket ball.

12 REAL WORLD WEB DESIGN SUPPORTING USER AGENTS AND INTERNATIONAL PAGES

13 SUMMARY Across the Web, more page content is similar in appearance to a paper-based document, meaning, the content has a header, footer, figures, captions, and so on. To help developers structure and format such content, HTML 5 provides several new tags. In addition, HTML 5 provides the and tags you can use to provide semantics or meaning dates and times that appear in a document. These can be used by user agents in their processing of a webpage. Finally, this chapter presents several tags developers may need when they work with languages other than English.


Download ppt "CHAPTER 19 HTML DOCUMENT STRUCTURE AND SEMANTICS."

Similar presentations


Ads by Google