Скачать презентацию 1 Credits Parts of the slides are based Скачать презентацию 1 Credits Parts of the slides are based

cccdec76ff7f510a28b760b793cbe2c5.ppt

  • Количество слайдов: 98

1 Credits: Parts of the slides are based on slides created by textbook, Essentials 1 Credits: Parts of the slides are based on slides created by textbook, Essentials for Design XHTML Copyright (c) 2009 Prentice-Hall. All rights reserved. © 2009 Pearson Education Jozef Goetz, 2010

2 Learning Outcomes § In this chapter, you will learn about: § The development 2 Learning Outcomes § In this chapter, you will learn about: § The development of HTML § The transition from HTML to XHTML § XHTML syntax, tags, and document type definitions § The anatomy of a web page § Formatting the body of a web page § Formatting the text on a web page § Physical and logical style tags § Special Characters § Connecting Web pages using hyperlinks Jozef Goetz, 2010

3 What is HTML? § The World Wide Web is composed of files containing 3 What is HTML? § The World Wide Web is composed of files containing Hypertext Markup Language (HTML) § HTML is based on SGML Standard Generalized Markup Language § Describes the general structure of the document § HTML Describes the Structure of a Page § It defines a set of common styles for Web pages § § § headings paragraphs lists tables and more § Each of these common styles has a tag associated with it to define the element § HTML § Made up of tags and attributes § The set of markup symbols or codes placed in a file intended for display on a Web browser page. Jozef Goetz, 2010

What HTML Is -- and What It Isn’t Heading Paragraph Bulleted List Paragraph Jozef What HTML Is -- and What It Isn’t Heading Paragraph Bulleted List Paragraph Jozef Goetz, 2010 4

5 What is HTML? § The text of the page § Adds special code 5 What is HTML? § The text of the page § Adds special code (tags) around words and paragraphs § each individual markup code is referred to as an element or tag. Each tag has a purpose. § Tags are enclosed in angle brackets, "<" and ">" symbols – referred to as container tags § Most tags come in pairs; an opening tag and a closing tag. § horizontal line:


is a stand-alone or self-contained tag and doesn’t have a closing tag. Jozef Goetz, 2010

HTML Whereas the text is the actual information contained in a page, the tags HTML Whereas the text is the actual information contained in a page, the tags define the appearance of the document. § Every HTML tag is a name followed by an optional list of attributes, all enclosed between less-than and greater-than symbols (< and >). § An attribute, if present, is followed by an equals sign and the value of the attribute. § Some tags can be used alone; others must be used in pairs. § Those that are used in pairs are called beginning and ending tags. § The beginning tag can have attributes and values and starts with the name of the tag. § The ending tag cannot have attributes or values but must have a slash before the name of the tag. Jozef Goetz, 2010

HTML § The browser makes a decision about the structure of the text based HTML § The browser makes a decision about the structure of the text based on the tags, which are embedded into the text. § Scripting language that instructs a Web browser how to display a Web page § Less powerful than other computer languages § Runs within a browser, not stand-alone § One of the latest version: HTML 4. 01 § Is being replaced with XHTML Jozef Goetz, 2010

8 What is HTML? § HTML tags that indicate: § page elements § structure 8 What is HTML? § HTML tags that indicate: § page elements § structure § formatting § hypertext links § HTML tags are not case sensitive § XHTML tags are case sensitive § all tags and attributes must be written in lowercase § browsers ignore: § extra spaces § tabs § returns § tags are the only way to format an HTML page Jozef Goetz, 2010

9 What HTML Is § The individual browsers map the tag to how it 9 What HTML Is § The individual browsers map the tag to how it will be viewed § different browsers can display the same tag element in radically different ways § what this means is that a Web page may look perfect on your system and be unreadable on someone else's Jozef Goetz, 2010

What HTML Is -- and What It Isn’t § In addition to the HTML What HTML Is -- and What It Isn’t § In addition to the HTML tags defined in the various versions of HTML: § browser vendors defined their own browser-specific extensions Jozef Goetz, 2010 10

11 What is HTML? § The World Wide Web is composed of files containing 11 What is HTML? § The World Wide Web is composed of files containing Hypertext Markup Language (HTML) § Scripting language that instructs a Web browser how to display a Web page § Less powerful than other computer languages § Runs within a browser, not stand-alone § One of the latest version: HTML 4. 01 § Is being replaced with XHTML Jozef Goetz, 2010

Brief History of HTML § A Brief History of HTML Tags § HTML 2. Brief History of HTML § A Brief History of HTML Tags § HTML 2. 0 (RFC 1866) was developed by the IETF's HTML Working Group, which closed in 1996. § It sets the standard for core HTML features based upon current practice in 1994. Jozef Goetz, 2010 12

What HTML Is -- and What It Isn’t § HTML 3. 2 § W What HTML Is -- and What It Isn’t § HTML 3. 2 § W 3 C's recommendation for HTML which represented the consensus on HTML features for 1996. § HTML 3. 2 added widely-deployed features such as – tables, – applets, – text-flow around images, – superscripts and – subscripts, § while providing backwards compatibility with the existing HTML 2. 0 Standard. Jozef Goetz, 2010 13

What HTML Is -- and What It Isn’t § HTML 4. 0 § First What HTML Is -- and What It Isn’t § HTML 4. 0 § First released as a W 3 C Recommendation on 18 December 1997. § A second release was issued on 24 April 1998 with changes limited to editorial corrections. § This specification has now been superseded by HTML 4. 01. § HTML 4. 01 § The HTML 4. 01 Recommendation released on 24 th December 1999 fixes a number of bugs in the HTML 4. 0 specification. Jozef Goetz, 2010 14

HTML Version Structure WML= Wireless Markup Language Jozef Goetz, 2010 15 HTML Version Structure WML= Wireless Markup Language Jozef Goetz, 2010 15

Markup Languages § HTML 5 § The next version of HTML 4 and XHTML Markup Languages § HTML 5 § The next version of HTML 4 and XHTML 1 § http: //www. w 3. org/html/ 16 Jozef Goetz, 2010

Markup Languages § The relationship between XHTML, and XML 17 Jozef Goetz, 2010 Markup Languages § The relationship between XHTML, and XML 17 Jozef Goetz, 2010

18 What is XHTML? § The World Wide Web Consortium http: //w 3 c. 18 What is XHTML? § The World Wide Web Consortium http: //w 3 c. org § sets the standards for HTML and its related languages. § The newest version of HTML is actually XHTML – e. Xtensible Hyper. Text Markup Language. § XHTML uses the tags and attributes of HTML along with the syntax of XML (e. Xtensible Markup Language). Jozef Goetz, 2010

What’s wrong with HTML? § Forgiving coding errors and § display size limitation of What’s wrong with HTML? § Forgiving coding errors and § display size limitation of new Internet devices: § § Web. TV Personal Information Managers Personal Digital Assistants - PDAs Mobile phones § HTML does not fit this need today’s devices § the need for a descriptive rather than structural language became evident and XHTML was created. Jozef Goetz, 2010 19

Programs to Help You Write HTML § Many programs available to help create HTML Programs to Help You Write HTML § Many programs available to help create HTML files § 3 flavors of editors: § HTML-based text editors § WYSIWYG (What You See What You Get) editors § Combination of HTML-based and WYSIWYG editors Dreamweaver § There also converters that generate an HTML file from an existing document. § For now use Notepad Jozef Goetz, 2010 20

What is XHTML and Why Use It? § What is XHTML and Why Use What is XHTML and Why Use It? § What is XHTML and Why Use It? § e. Xtensible Hyper. Text Markup Language. § XHTML is the transition from HTML 4. 0 to XML (Extensible Markup Language) § Expected benefits of the transition include: – places specific requirements on documents to ensure they are readable in future browsers, – an improved match to database & workflow applications, – a modular solution to the increasingly disparate capabilities of browsers, – and the ability to cleanly integrate HTML with other XML applications. Jozef Goetz, 2010 21

22 XHTML § XHTML was developed by the W 3 C World Wide Web 22 XHTML § XHTML was developed by the W 3 C World Wide Web Consortium to be the reformulation of HTML as an application of XML. § Purpose: § Provides a more structured alternative to nonstandard HTML § Provide ways to extend HTML and add new features § Separate content from presentation (>=XHTML 2. 0) § XHTML combines § the formatting strengths of HTML and § the data structure and extensibility strengths of XML. – allows for custom tags Jozef Goetz, 2010

What is XHTML and Why Use It? 23 § XHTML Syntax § Use lowercase What is XHTML and Why Use It? 23 § XHTML Syntax § Use lowercase tags and attributes § Place attribute tags in quotes § All container tags must use their opening and closing tags. All tags are enclosed in angle brackets. § Terminate all non-empty single elements – add the closing slash (/) preceded by a space just before the ending greater symbol than (>) • and


become and
§ Tags shouldn’t be overlapped – nested -- Bold and Italic – overlapping -- Bold and Italic Jozef Goetz, 2010

XML Declaration § An XML document must be well-formed i. e. adheres to the XML Declaration § An XML document must be well-formed i. e. adheres to the syntax rules § Use lowercase § Use opening and closing tags § Close stand-alone tag with special syntax


§ XML documents begin with an XML declaration as a directive. The basic form of this directive is (p. 567): § UTF-8 a form of Unicode Jozef Goetz, 2010 24

Document Type Definition (DTD) § W 3 C Recommendation: Use a Document Type Definition Document Type Definition (DTD) § W 3 C Recommendation: Use a Document Type Definition DTD to identify the type of markup language used in a web page (p. 567): 1. XHTML 1. 0 Transitional This is the least strict specification for XHTML 1. 0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts. We will use this for most of our coding in this text 2. XHTML 1. 0 Strict 3. XHTML 1. 0 Frameset Jozef Goetz, 2010 25

XHTML 1. 0 Transitional DTD 26 Document Type Definition DTD tag commonly called the XHTML 1. 0 Transitional DTD 26 Document Type Definition DTD tag commonly called the DOCTYPE We will use mainly XHTML 1. 0 version sometimes XHTML 1. 1 http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd gives access to the DTD definitio This DTD module is identified by the PUBLIC and SYSTEM identifiers PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" SYSTEM "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd Jozef Goetz, 2010

27 Versions of XHTML § Strict (XHTML 2. 0) § Must follow complete XML 27 Versions of XHTML § Strict (XHTML 2. 0) § Must follow complete XML coding rules § Must separate content from presentation § Presentation via Cascading Style Sheets (CSS) § Transitional (XHTML 1. 0, 1. 1) § Reformulation of HTML 4. 01 § Presentation and content tags exist § Frameset § Enable window-in-a-window effect 27 Jozef Goetz, 2010

Dr. Dobb's Update - 07/30/09 - HTML 5 vs. XHTML 2 § XHTML 2 Dr. Dobb's Update - 07/30/09 - HTML 5 vs. XHTML 2 § XHTML 2 is related to XHTML 1. 0 or XHTML 1. 1 — and you'd be wrong. XHTML 1. 0 is nothing more than HTML 4 with XML syntax. For its part, XHTML 1. 1 is the same, but with the requirement that documents must be served with an XML MIMEtype. § So XHTML 2 is history and we don't have to concern ourselves with it, right? Not really. A lot of people still prefer XHTML syntax. In their comic, Keith and Colbow introduce us to some of these folks who give very good reasons for their views. For example, if you want to keep on closing all tags and quoting all attributes, you can — using either XHTML 2 or HTML 5 lets you use whatever syntax you feel comfortable with. As Keith and Colbow point out, you can even serve your documents as application/XHTML+XML, transforming them from HTML 5 into XHTML 5. Jozef Goetz, 2010 28

Document Type Definition (DTD) § The document type declaration names the document type definition Document Type Definition (DTD) § The document type declaration names the document type definition (DTD) in use for the document. § Declares the document type § Required in XHTML § HTML 4. 01 specifies three DTDs: § § § Jozef Goetz, 2010 29

First Web Page 30 After the XML and the DTD, each web page begins First Web Page 30 After the XML and the DTD, each web page begins with an opening and a closing tag. an opening tag. . page info goes here a closing tag Jozef Goetz, 2010

Head & Body Sections § Head Section (description) -Contains information that describes the web Head & Body Sections § Head Section (description) -Contains information that describes the web page document. …head section info goes here § Body Section (contents) -- Used for text and tags that do show directly on the web page. …body section info goes here Jozef Goetz, 2010 31

32 namespace xmlns=http: //www. w 3. org/1999/xhtml> § The location of the documentation for 32 namespace xmlns=http: //www. w 3. org/1999/xhtml> § The location of the documentation for the elements being used http: //www. w 3. org/1999/xhtml/ § This is an XML namespace defined in the XHTML™ 1. 0: The Extensible Hyper. Text Markup Language specification, and § is shared across XHTML Family document types Jozef Goetz, 2010

and tags XHTML and tags . . Header info goes here . . Body info goes here Jozef Goetz, 2010 33

34 The Title p. 568 -9 § <title> tag § § gives a page 34 The Title p. 568 -9 § tag § § gives a page a title used in bookmarks used by search engines appears in browser title bar § goes inside the page header (<head>) Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="35 HTML Code in Notepad and Browser Results Title goes in Title bar of" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-35.jpg" alt="35 HTML Code in Notepad and Browser Results Title goes in Title bar of" /> 35 HTML Code in Notepad and Browser Results Title goes in Title bar of browser Body goes in content area of browser 35 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="36 Saving an XHTML File from Notepad § By default, files from Notepad are" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-36.jpg" alt="36 Saving an XHTML File from Notepad § By default, files from Notepad are" /> 36 Saving an XHTML File from Notepad § By default, files from Notepad are saved with a. txt extension § If you try to save as filename. htm, then the saved file name will be filename. htm. txt § You can avoid this by either: § Making sure that the Save As Type entry is set as All Files instead of *. txt or § Saving with the name in quotes, like this: "filename. htm" 36 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Checkpoint 2. 1 p. 619 37 § 1. Describe the origin, purpose, and features" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-37.jpg" alt="Checkpoint 2. 1 p. 619 37 § 1. Describe the origin, purpose, and features" /> Checkpoint 2. 1 p. 619 37 § 1. Describe the origin, purpose, and features of HTML. § 2. Explain why you would use XHTML instead of HTML. § 3. Describe the purpose of the header and body sections of a web page. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Lab Excercises 38 Hands On Practice 2. 1 Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-38.jpg" alt="Lab Excercises 38 Hands On Practice 2. 1 Jozef Goetz, 2010 " /> Lab Excercises 38 Hands On Practice 2. 1 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="39 XHTML <body> tag attributes § The <body> tag can be used to set" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-39.jpg" alt="39 XHTML <body> tag attributes § The <body> tag can be used to set" /> 39 XHTML <body> tag attributes § The <body> tag can be used to set attributes (properties) for entire Web page, such as § § Background color Background image Text color and Link color § bgcolor § Configures the background color of a web page <body bgcolor=“#000066”> // dark navy blue <body bgcolor=“white”> § text Configures the color of the text on the web page <body bgcolor=“#000066” text=“#CCCCCC”> <body bgcolor=“white” text=“red”> § Check the XHTML Reference p. 571 in the textbook for more body tag attributes Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="40 Headings § Heading tags § Six levels: <h 1>, <h 2>, <h 3>," src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-40.jpg" alt="40 Headings § Heading tags § Six levels: <h 1>, <h 2>, <h 3>," /> 40 Headings § Heading tags § Six levels: <h 1>, <h 2>, <h 3>, <h 4>, <h 5>, and <h 6> § used to divide sections -- similar to a book § displayed either in larger or bolder text § can be centered, underlined, capitalized § common to use a heading to duplicate the title Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Heading Tags 41 <h 1>Heading Level 1</h 1> <h 2>Heading Level 2</h 2> <h" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-41.jpg" alt="Heading Tags 41 <h 1>Heading Level 1</h 1> <h 2>Heading Level 2</h 2> <h" /> Heading Tags 41 <h 1>Heading Level 1</h 1> <h 2>Heading Level 2</h 2> <h 3>Heading Level 3</h 3> <h 4>Heading Level 4</h 4> <h 5>Heading Level 5</h 5> <h 6>Heading Level 6</h 6> <h 1> is largest <h 6> is smallest Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Outline 2002 Prentice Hall. All rights reserved. 42 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-42.jpg" alt="Outline 2002 Prentice Hall. All rights reserved. 42 " /> Outline 2002 Prentice Hall. All rights reserved. 42 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="43 XHTML <p> tag § Enter/Return key does not provide this in XHTML documents" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-43.jpg" alt="43 XHTML <p> tag § Enter/Return key does not provide this in XHTML documents" /> 43 XHTML <p> tag § Enter/Return key does not provide this in XHTML documents § Can use paragraph tag <p> …paragraph goes here </p> § Used to group sentences and sections of text together. § Text that is contained by <p> and </p> tags will have a blank line above and below it. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="44 Closing Container Tags § XHTML rules require all tags have closing tags §" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-44.jpg" alt="44 Closing Container Tags § XHTML rules require all tags have closing tags §" /> 44 Closing Container Tags § XHTML rules require all tags have closing tags § Opening tag has tag code: § e. g. <p> § Closing tag has forward slash in front of code § e. g. </p> § Content placed between opening and closing tags § <p> CONTENT </p> § Browsers are forgiving, but XHTML rules are strict 44 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="45 Effects of <p> Tags Without <p> tag, Enter/Return has no effect on browser" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-45.jpg" alt="45 Effects of <p> Tags Without <p> tag, Enter/Return has no effect on browser" /> 45 Effects of <p> Tags Without <p> tag, Enter/Return has no effect on browser display <p> tag inserts white space and separates lines of text Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 HOP 2. 245 +2. 3 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="46 Body and Text Basics § Structural elements, called § block-level tags p. 572," src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-46.jpg" alt="46 Body and Text Basics § Structural elements, called § block-level tags p. 572," /> 46 Body and Text Basics § Structural elements, called § block-level tags p. 572, control blocks of the text such as §headings §paragraphs and §list § Tags that effect individual section of text called text-level tags p. 574 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Lab Excercises 47 Hands On Practice 2. 2 + 2. 3 Jozef Goetz, 2010" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-47.jpg" alt="Lab Excercises 47 Hands On Practice 2. 2 + 2. 3 Jozef Goetz, 2010" /> Lab Excercises 47 Hands On Practice 2. 2 + 2. 3 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Self-contained <br /> tag § Line Break tag § the line break tag in" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-48.jpg" alt="Self-contained <br /> tag § Line Break tag § the line break tag in" /> Self-contained <br /> tag § Line Break tag § the line break tag in HTML has no corresponding closing tag. § Many empty tags in HTML (i. e. tags with no text content) have no closing tags, but this is not true in XHTML. § to make an opening tag also be a closing tag, by placing a slash before the end bracket <br />. § Stand alone tag …text goes here <br /> This starts on a new line…. § Used to force a new line when the text on the web page document is displayed by a browser. Jozef Goetz, 2010 48 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="49 Attributes § Most tags can have attributes § Attribute is: § Information in" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-49.jpg" alt="49 Attributes § Most tags can have attributes § Attribute is: § Information in" /> 49 Attributes § Most tags can have attributes § Attribute is: § Information in the opening tag § Additional information that defines a tag § Attribute syntax: § attributename = “value” § Attribute – value pair 49 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="50 The align Attribute § Specifies how text within the paragraph should be aligned" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-50.jpg" alt="50 The align Attribute § Specifies how text within the paragraph should be aligned" /> 50 The align Attribute § Specifies how text within the paragraph should be aligned § Options include: left, center, right, justify § Example: § <p align = “center”> CONTENT </p> 50 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="51 HOP 2. 4: Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-51.jpg" alt="51 HOP 2. 4: Jozef Goetz, 2010 " /> 51 HOP 2. 4: Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="52 Effects of align attribute Effect of <p align=“center”> Effect of <p align=“right”> 52" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-52.jpg" alt="52 Effects of align attribute Effect of <p align=“center”> Effect of <p align=“right”> 52" /> 52 Effects of align attribute Effect of <p align=“center”> Effect of <p align=“right”> 52 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="53 Effects of Headings Tags <h 1 align="center">Dr. Know-It-All Recommendations</h 1> <h 2 align="center">Upcoming" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-53.jpg" alt="53 Effects of Headings Tags <h 1 align="center">Dr. Know-It-All Recommendations</h 1> <h 2 align="center">Upcoming" /> 53 Effects of Headings Tags <h 1 align="center">Dr. Know-It-All Recommendations</h 1> <h 2 align="center">Upcoming Books</h 2> Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 HOP 53 2. 4 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Lab Excercises 54 Hands On Practice 2. 4 Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-54.jpg" alt="Lab Excercises 54 Hands On Practice 2. 4 Jozef Goetz, 2010 " /> Lab Excercises 54 Hands On Practice 2. 4 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="55 Deprecation § Some HTML tags or attributes are deprecated § they are still" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-55.jpg" alt="55 Deprecation § Some HTML tags or attributes are deprecated § they are still" /> 55 Deprecation § Some HTML tags or attributes are deprecated § they are still supported but will be discontinued in strict XHTML § Deprecated tags/attributes are old (obsolete) versions § Replaced by newer, improved XHTML tags/attributes § Most browsers support deprecated tags § The align attribute is deprecated § Modern alignment is handled through style sheets Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 55 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="56 XHTML <pre> tag § Preformatted Text tag § The preformatted text tag preserves" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-56.jpg" alt="56 XHTML <pre> tag § Preformatted Text tag § The preformatted text tag preserves" /> 56 XHTML <pre> tag § Preformatted Text tag § The preformatted text tag preserves your formatting and displays the text in a fixed-width or monospace font. <pre> …text goes here Line breaks and formatting are preserved </pre> § NOTE: Usually is used for listing programming or scripting code Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="57 Blockquote Tag § Used to indent a block of text for special emphasis." src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-57.jpg" alt="57 Blockquote Tag § Used to indent a block of text for special emphasis." /> 57 Blockquote Tag § Used to indent a block of text for special emphasis. <blockquote> …text goes here </blockquote> § Indents contained text § Indentation from left and right margins and a line break is placed before and after the text § Nest blockquote Prentice-Hall. Allincrease indentation tags to rights reserved. Copyright (c) 2006 Jozef Goetz, 2010 57 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="58 Effects of Blockquote Tag <blockquote> tag causes this indentation Nested <blockquote> causes more" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-58.jpg" alt="58 Effects of Blockquote Tag <blockquote> tag causes this indentation Nested <blockquote> causes more" /> 58 Effects of Blockquote Tag <blockquote> tag causes this indentation Nested <blockquote> causes more indentation Copyright (c) 2006 Prentice-Hall. All rights reserved. HOP 2. 3 – 2. 558 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Lab Excercises 59 Hands On Practice 2. 5 Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-59.jpg" alt="Lab Excercises 59 Hands On Practice 2. 5 Jozef Goetz, 2010 " /> Lab Excercises 59 Hands On Practice 2. 5 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML List Basics 60 § Definition List - dl § Ordered List - ol" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-60.jpg" alt="XHTML List Basics 60 § Definition List - dl § Ordered List - ol" /> XHTML List Basics 60 § Definition List - dl § Ordered List - ol § Unordered List -ul Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="61 Lists § List Tags Common Elements § opening and closing tag 1. definition" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-61.jpg" alt="61 Lists § List Tags Common Elements § opening and closing tag 1. definition" /> 61 Lists § List Tags Common Elements § opening and closing tag 1. definition list <dl> and </dl> – definition term <dt> and – definition data <dd> 2. ordered list – list items <ol> and </ol> <li> 3. unordered list <ul> and </ul> – list items <li> § list items have their own tag <li> Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="62 XHTML Definition List § Useful to display a list of terms an definitions" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-62.jpg" alt="62 XHTML Definition List § Useful to display a list of terms an definitions" /> 62 XHTML Definition List § Useful to display a list of terms an definitions or a list of FAQ and answers § <dl> tag Contains the definition list § <dt> tag Contains a defined term § <dd> tag Contains a data definition Jozef Goetz, 2010 HOP 2. 5 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML Definition List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl> Jozef" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-63.jpg" alt="XHTML Definition List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl> Jozef" /> XHTML Definition List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl> Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="64 1. Definition Lists <dl> Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-64.jpg" alt="64 1. Definition Lists <dl> Jozef Goetz, 2010 " /> 64 1. Definition Lists <dl> Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Lab Excercises 65 Hands On Practice 2. 6 Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-65.jpg" alt="Lab Excercises 65 Hands On Practice 2. 6 Jozef Goetz, 2010 " /> Lab Excercises 65 Hands On Practice 2. 6 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="66 2. Ordered Lists Used to convey information in an ordered fashion Jozef Goetz," src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-66.jpg" alt="66 2. Ordered Lists Used to convey information in an ordered fashion Jozef Goetz," /> 66 2. Ordered Lists Used to convey information in an ordered fashion Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="2. XHTML Ordered List § <ol> Contains the ordered list § Two main ways" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-67.jpg" alt="2. XHTML Ordered List § <ol> Contains the ordered list § Two main ways" /> 2. XHTML Ordered List § <ol> Contains the ordered list § Two main ways to customize ordered lists § how they are numbered – type attribute • default is numerals: 1, 2, … § the number with which the list starts – start attribute § Ex: <ol start=“ 100” type=“I”> § <li> Contains an list item Jozef Goetz, 2010 67 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="68 2. Ordered List § Type attribute can take one of five values §" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-68.jpg" alt="68 2. Ordered List § Type attribute can take one of five values §" /> 68 2. Ordered List § Type attribute can take one of five values § “ 1” Specifies standard Arabic numerals – 1, 2, 3, 4, 5 § “a” Specifies lowercase letters – a, b, c, d, e § “A” Specifies uppercase letters – A, B, C, D, E § “i” Specifies lowercase Roman numerals – i, iii, iv, v § “I” Specifies uppercase Roman numerals – I, III, IV, V Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="69 2. Ordered List § Both the start and type attributes are used in" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-69.jpg" alt="69 2. Ordered List § Both the start and type attributes are used in" /> 69 2. Ordered List § Both the start and type attributes are used in the <ol> tag <ol start=100 type=“I”> § start=“ 1” is the default value § type=“ 1” is the default value § By using the value attribute in the <li> tag, numbering can be reassigned at any point <li value=1111> Step 5 and …=> § So, it will start from MCXI. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="70 3. Unordered Lists Used to display information in bullet points Jozef Goetz, 2010" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-70.jpg" alt="70 3. Unordered Lists Used to display information in bullet points Jozef Goetz, 2010" /> 70 3. Unordered Lists Used to display information in bullet points Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML Unordered List Example <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul> Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-71.jpg" alt="XHTML Unordered List Example <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul> Jozef Goetz, 2010 " /> XHTML Unordered List Example <ul> <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul> Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML Unordered List § HTML 3. 2 provided ways to customize unordered lists §" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-72.jpg" alt="XHTML Unordered List § HTML 3. 2 provided ways to customize unordered lists §" /> XHTML Unordered List § HTML 3. 2 provided ways to customize unordered lists § They have been deprecated in HTML 4. 0 in favor of using style sheets § <ul> Contains the unordered list § The type attribute customizes unordered lists § the type attribute has 3 possible values – disc - default – square, – circle § the type attribute is used in the <ul> tag <ul type=“square”> § <li> Contains an list item Jozef Goetz, 2010 72 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Outline list. html (1 of 3) Nested and Ordered Lists 2002 Prentice Hall. All" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-73.jpg" alt="Outline list. html (1 of 3) Nested and Ordered Lists 2002 Prentice Hall. All" /> Outline list. html (1 of 3) Nested and Ordered Lists 2002 Prentice Hall. All rights reserved. 73 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="list. html Outline (2 of 3) Nested and Ordered Lists 2002 Prentice Hall. All" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-74.jpg" alt="list. html Outline (2 of 3) Nested and Ordered Lists 2002 Prentice Hall. All" /> list. html Outline (2 of 3) Nested and Ordered Lists 2002 Prentice Hall. All rights reserved. 74 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="list. html Outline (3 of 3) Nested and Ordered Lists 2002 Prentice Hall. All" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-75.jpg" alt="list. html Outline (3 of 3) Nested and Ordered Lists 2002 Prentice Hall. All" /> list. html Outline (3 of 3) Nested and Ordered Lists 2002 Prentice Hall. All rights reserved. 75 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="76 Comments § Comment <!-- text inside here is ignored --> § It’s a" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-76.jpg" alt="76 Comments § Comment <!-- text inside here is ignored --> § It’s a" /> 76 Comments § Comment <!-- text inside here is ignored --> § It’s a good rule of thumb not to include “--”, “<“, “>”, or HTML tags within comments Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Lab Excercises 77 Hands On Practice 2. 7 Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-77.jpg" alt="Lab Excercises 77 Hands On Practice 2. 7 Jozef Goetz, 2010 " /> Lab Excercises 77 Hands On Practice 2. 7 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML Logical Style Tags see Tab. p. 43 -45 § Indicate the logical (general)" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-78.jpg" alt="XHTML Logical Style Tags see Tab. p. 43 -45 § Indicate the logical (general)" /> XHTML Logical Style Tags see Tab. p. 43 -45 § Indicate the logical (general) style used to display the text in between the container tags. § Common Logical Style Tags § <strong></strong> § To cause text to be emphasized or to "stand out" from surrounding text. Usually displayed in bold. <strong> This is important</strong> § <em></em> § To cause text to be emphasized in relation to other text on the page. Usually displayed in italics. <em> Please note</em> Jozef Goetz, 2010 78 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML Physical Style Tags § Provide specific font instructions for the browser 79 §" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-79.jpg" alt="XHTML Physical Style Tags § Provide specific font instructions for the browser 79 §" /> XHTML Physical Style Tags § Provide specific font instructions for the browser 79 § Logical Style tags are preferred by the W 3 C § Physical Style tags § They provide specific fonts instructions for the browser § are discussed (see tab p. 45) because some web developers still use them § Common Physical Style Tags § <b></b> § To display as bold text <b>This is important</b> § <i></i> § To display text in italics <i>Please note</i> § Logical Style Tags provides a wider range of Web access Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="80 XHTML Special Characters HOP 2. 8 § Used to display special characters such" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-80.jpg" alt="80 XHTML Special Characters HOP 2. 8 § Used to display special characters such" /> 80 XHTML Special Characters HOP 2. 8 § Used to display special characters such as quotes, copyright symbol, etc. § Character entity references (in the form &code; ) § Numeric character references (e. g. & ) Numeric Code © < > & Character Code © © < < > > & & § See the Special Characters section textbook for a detailed list – appendix B p. 596 text from CMPS 318 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Outline contact 2. html (1 of 2) 2002 Prentice Hall. All rights reserved. 81" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-81.jpg" alt="Outline contact 2. html (1 of 2) 2002 Prentice Hall. All rights reserved. 81" /> Outline contact 2. html (1 of 2) 2002 Prentice Hall. All rights reserved. 81 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="contact 2. ht Outline ml (2 of 2) 2002 Prentice Hall. All rights reserved." src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-82.jpg" alt="contact 2. ht Outline ml (2 of 2) 2002 Prentice Hall. All rights reserved." /> contact 2. ht Outline ml (2 of 2) 2002 Prentice Hall. All rights reserved. 82 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Checkpoint 2. 3 83 HOP 2. 8 § 1. Provide a reason for using" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-83.jpg" alt="Checkpoint 2. 3 83 HOP 2. 8 § 1. Provide a reason for using" /> Checkpoint 2. 3 83 HOP 2. 8 § 1. Provide a reason for using logical style tags rather than physical style tags. § The last one describes fonts rather than general styles for the presentation of info. § 2. Describe the purpose of special characters. § Entity ch-rs, displays items such as quotation marks, <, >, the copyright symbol etc. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Lab Excercises 84 Hands On Practice 2. 8 Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-84.jpg" alt="Lab Excercises 84 Hands On Practice 2. 8 Jozef Goetz, 2010 " /> Lab Excercises 84 Hands On Practice 2. 8 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML <a> tag § The anchor element § href (hypertext reference) § Indicates the" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-85.jpg" alt="XHTML <a> tag § The anchor element § href (hypertext reference) § Indicates the" /> XHTML <a> tag § The anchor element § href (hypertext reference) § Indicates the target – destination page or location of the link § Text between the <a> and </a> is displayed on the web page. <a href="contact. html">Contact Us</a> § href Attribute § Indicates the file name or URL Web page document, photo, pdf, etc. 85 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Creating Links URL Opening Tag Text that will be displayed Closing Tag Jozef Goetz," src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-86.jpg" alt="Creating Links URL Opening Tag Text that will be displayed Closing Tag Jozef Goetz," /> Creating Links URL Opening Tag Text that will be displayed Closing Tag Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="87 Glossary § Hyperlinks – clickable areas take the viewer to another location §" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-87.jpg" alt="87 Glossary § Hyperlinks – clickable areas take the viewer to another location §" /> 87 Glossary § Hyperlinks – clickable areas take the viewer to another location § Uniform Resource Locator (URL) – the Web address of a resource § Relative URL – local file or folder § Absolute URL – address on another Web server § Typically begins with http: // § HTTP – hypertext transfer protocol § Web server – the computer hosting a Web site 87 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML <a> tag § Absolute link § Link to other Web sites <a href="http:" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-88.jpg" alt="XHTML <a> tag § Absolute link § Link to other Web sites <a href="http:" /> XHTML <a> tag § Absolute link § Link to other Web sites <a href="http: //yahoo. com">Yahoo</a> § Relative link § Link to pages on your own site <a href="index. htm">Home</a> 88 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="89 Hyperlinks § Hands-On Practice Home index. html Resume resume. html Favorites favorites. html" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-89.jpg" alt="89 Hyperlinks § Hands-On Practice Home index. html Resume resume. html Favorites favorites. html" /> 89 Hyperlinks § Hands-On Practice Home index. html Resume resume. html Favorites favorites. html Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="90 Effects of <a>, href, and title: Provides text that can appear in a" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-90.jpg" alt="90 Effects of <a>, href, and title: Provides text that can appear in a" /> 90 Effects of <a>, href, and title: Provides text that can appear in a tool tip when the mouse hovers over the link Mouse pointer changes when hovered over the link Tool tip generated by title="Home Page Link" Displayed text generated by text between the <a> tag and the </a> tag When user clicks, the page opened will be based on href=“http: //www. laverne. edu" <a href=“http: //www. laverne. edu" title="Home Page Link">Click here to go to our home page!</a> 90 Copyright (c) 2006 Prentice-Hall. All rights reserved. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="XHTML Email Links using the <a> tag § Automatically launch the default mail program" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-91.jpg" alt="XHTML Email Links using the <a> tag § Automatically launch the default mail program" /> XHTML Email Links using the <a> tag § Automatically launch the default mail program configured for the browser § If no browser default is configured, a message is displayed <a href=“mailto: me@hotmail. com”>me@hotmail. com</a> 91 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="92 Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-92.jpg" alt="92 Jozef Goetz, 2010 " /> 92 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Checkpoint 1. Describe when to use an absolute link. Is the http protocol used" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-93.jpg" alt="Checkpoint 1. Describe when to use an absolute link. Is the http protocol used" /> Checkpoint 1. Describe when to use an absolute link. Is the http protocol used in the href value? 2. Describe when to use a relative link. Is the http protocol used in the href value? 3. What happens when a web site visitor clicks on an e-mail link? 93 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Writing Valid XHTML § Check your code for syntax errors § Benefit: § Valid" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-94.jpg" alt="Writing Valid XHTML § Check your code for syntax errors § Benefit: § Valid" /> Writing Valid XHTML § Check your code for syntax errors § Benefit: § Valid code more consistent browser display § W 3 C XHTML Validation Tool § http: //validator. w 3. org Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="95 Web Resources § § § § www. w 3. org/TR/xhtml 11 www. xhtml." src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-95.jpg" alt="95 Web Resources § § § § www. w 3. org/TR/xhtml 11 www. xhtml." /> 95 Web Resources § § § § www. w 3. org/TR/xhtml 11 www. xhtml. org www. w 3 schools. com/xhtml/default. asp http: //validator. w 3. org hotwired. lycos. com/webmonkey/00/50/index 2 a. html wdvl. com/Authoring/Languages/XML/XHTML www. w 3. org/TR/2001/REC-xhtml 11 -20010531 Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Summary 96 § This chapter provided an introduction to XHTML. § It began with" src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-96.jpg" alt="Summary 96 § This chapter provided an introduction to XHTML. § It began with" /> Summary 96 § This chapter provided an introduction to XHTML. § It began with an introduction to the HTML, discussed the transition to XHTML, continued with the anatomy of a web page, and introduced inline and block-level formatting, and demonstrated the XHTML techniques used to create hyperlinks. § § You will use these skills over and over again as you create Web pages. Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Home Project – Java. Jam Cofee House Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-97.jpg" alt="Home Project – Java. Jam Cofee House Jozef Goetz, 2010 " /> Home Project – Java. Jam Cofee House Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Home Project – Fish Creek Animal Hospital Jozef Goetz, 2010 " src="https://present5.com/presentation/cccdec76ff7f510a28b760b793cbe2c5/image-98.jpg" alt="Home Project – Fish Creek Animal Hospital Jozef Goetz, 2010 " /> Home Project – Fish Creek Animal Hospital Jozef Goetz, 2010 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="" alt="" /> </p> </div> </div> <div id="inputform"> <script>$("#inputform").load("https://present5.com/wp-content/plugins/report-content/inc/report-form-aj.php"); </script> </div> </p> <!--end entry-content--> </div> </article><!-- .post --> </section><!-- #content --> <div class="three columns"> <div class="widget-entry"> <div id="sidebarrelated"> <div id="text-2" class="box_small box widget widget_text"><div class="crp_related crp_related_shortcode "><div class="gallery_entry_related"><a href="https://present5.com/1-lekciya-1-obshhij-obzor-sostoyaniya-bezopasnosti/" ><img src="https://present5.com/wp-content/uploads/slides-mod-2_lekciya_1-180x135.jpg" alt="1 Лекция № 1 Общий обзор состояния безопасности" title="1 Лекция № 1 Общий обзор состояния безопасности" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/1-lekciya-1-obshhij-obzor-sostoyaniya-bezopasnosti/" class="crp_title">1 Лекция № 1 Общий обзор состояния безопасности</a></div><div class="gallery_entry_related"><a href="https://present5.com/rhinoplasty-nasal-tip-tip-jean-paul-font-md/" ><img src="https://present5.com/wp-content/uploads/rhinoplasty-slides-090331-180x135.jpg" alt="Rhinoplasty- Nasal Tip. Tip Jean Paul Font, MD" title="Rhinoplasty- Nasal Tip. Tip Jean Paul Font, MD" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/rhinoplasty-nasal-tip-tip-jean-paul-font-md/" class="crp_title">Rhinoplasty- Nasal Tip. Tip Jean Paul Font, MD</a></div><div class="gallery_entry_related"><a href="https://present5.com/1-neoplasms-of-the-nose-and-paranasal-sinus/" ><img src="https://present5.com/wp-content/uploads/nose-sinus-ca-slides-040519-180x135.jpg" alt="1 Neoplasms of the Nose and Paranasal Sinus" title="1 Neoplasms of the Nose and Paranasal Sinus" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/1-neoplasms-of-the-nose-and-paranasal-sinus/" class="crp_title">1 Neoplasms of the Nose and Paranasal Sinus</a></div><div class="gallery_entry_related"><a href="https://present5.com/support-to-the-knowledge-based-and-innovative-enterprises-2/" ><img src="https://present5.com/wp-content/uploads/quality_management_ppp-180x135.jpg" alt="Support to the knowledge based and innovative enterprises" title="Support to the knowledge based and innovative enterprises" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/support-to-the-knowledge-based-and-innovative-enterprises-2/" class="crp_title">Support to the knowledge based and innovative enterprises</a></div><div class="gallery_entry_related"><a href="https://present5.com/level-1-1-22-all-recipients-of/" ><img src="https://present5.com/wp-content/uploads/actre_l1-1_0-180x135.jpg" alt="LEVEL 1 -1 22 All recipients of" title="LEVEL 1 -1 22 All recipients of" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/level-1-1-22-all-recipients-of/" class="crp_title">LEVEL 1 -1 22 All recipients of</a></div><div class="gallery_entry_related"><a href="https://present5.com/red-flags-154-slides-2-chest-pain/" ><img src="https://present5.com/wp-content/uploads/red_flags-180x135.jpg" alt="RED FLAGS 154 slides 2 Chest Pain" title="RED FLAGS 154 slides 2 Chest Pain" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/red-flags-154-slides-2-chest-pain/" class="crp_title">RED FLAGS 154 slides 2 Chest Pain</a></div><div class="gallery_entry_related"><a href="https://present5.com/1-uchebnyj-kompleks-discipliny-organizaciya/" ><img src="https://present5.com/wp-content/uploads/slides-mod-1_vvedenie_v_kurs-180x135.jpg" alt="1 УЧЕБНЫЙ КОМПЛЕКС ДИСЦИПЛИНЫ « « ОРГАНИЗАЦИЯ" title="1 УЧЕБНЫЙ КОМПЛЕКС ДИСЦИПЛИНЫ « « ОРГАНИЗАЦИЯ" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/1-uchebnyj-kompleks-discipliny-organizaciya/" class="crp_title">1 УЧЕБНЫЙ КОМПЛЕКС ДИСЦИПЛИНЫ « « ОРГАНИЗАЦИЯ</a></div><div class="gallery_entry_related"><a href="https://present5.com/sentence-analysis-lecture-3-1-syntactic-relations-in/" ><img src="https://present5.com/wp-content/uploads/3_parts_of_the_sentence-180x135.jpg" alt="Sentence analysis Lecture 3. 1. Syntactic relations in" title="Sentence analysis Lecture 3. 1. Syntactic relations in" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="https://present5.com/sentence-analysis-lecture-3-1-syntactic-relations-in/" class="crp_title">Sentence analysis Lecture 3. 1. Syntactic relations in</a></div><div class="crp_clear"></div></div></div></div> </div> </div> </div> </div> <!-- #content-wrapper --> <footer id="footer"> <div class="container"> <div class="columns twelve"> <!--noindex--> <!--LiveInternet counter--><script type="text/javascript"><!-- document.write("<img src='//counter.yadro.ru/hit?t26.10;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='"+" ' "+ "border='0' width='1' height='1'><\/a>") //--></script><!--/LiveInternet--> <script> $(window).load(function() { var owl = document.getElementsByClassName('owl-carousel owl-theme owl-loaded owl-drag')[0]; document.getElementById("owlheader").insertBefore(owl, null); $('#owlheader').css('display', 'inline-block'); }); </script> <script type="text/javascript"> var yaParams = {'typepage': '1000_top_300k', 'author': '1000_top_300k' }; </script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32395810 = new Ya.Metrika({ id:32395810, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, params: yaParams }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/32395810" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!--/noindex--> <nav id="top-nav"> <ul id="menu-top" class="top-menu clearfix"> </ul> </nav> </div> </div><!--.container--> </footer> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/present5.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.4'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/jquery.shuffle.js?ver=4.9.12'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.1'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.9.12'></script> <!--[if lt IE 9]> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/selectivizr.js?ver=1.0.2'></script> <![endif]--> </body> </html>