1 / 30

The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies. Chapter 1 XHTML: Part I. Objectives. In this chapter, you will: Learn about HTML and XHTML Work with XHTML DTDs Study elements and attributes Work with basic body elements Link your Web pages Validate your Web pages.

sancha
Download Presentation

The Web Warrior Guide to Web Design Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. The Web Warrior Guide to Web Design Technologies Chapter 1 XHTML: Part I

  2. Objectives In this chapter, you will: • Learn about HTML and XHTML • Work with XHTML DTDs • Study elements and attributes • Work with basic body elements • Link your Web pages • Validate your Web pages

  3. Introduction to HTML • Hypertext markup language (HTML) is a language used to design Web pages. • HTML first became an Internet standard in 1993. • Latest version of HTML is 4.01, released in 1999. • HTML documents are composed of tags. • The file extension for an HTML document is .html or .htm.

  4. Introduction to HTML • The unique address for an HTML document is called uniform resource locator (URL). • Example of a URL: www.course.com • Web pages are displayed using a program called a Web browser. • Examples of Web browsers: Internet Explorer and Netscape Navigator. • Web server: the place where Web pages are located.

  5. Introduction to HTML • Web browsers request pages from the Web server. • Assembling and formatting HTML documents is called parsing or rendering. • HTML documents contain tags which are enclosed in brackets. • Examples of HTML tags: <b>This will create bold text</b> • The opening tag is <b> and the closing tag is </b>

  6. Introduction to HTML • HTML is not case-sensitive. <B> and <b> are the same tag. • HTML documents begin with <html> and end with </html>. • Some HTML tags do not require a closing tag, like <hr> (which represents a horizontal rule). • HTML tags are divided into structural tags and formatting tags.

  7. Introduction to HTML • Common structural and formatting tags:

  8. Introduction to HTML The general form of an HTML document is as follows: <html> <head> <title>title goes here</title> </head> <body> The body of the document goes here </body> </html>

  9. Introduction to HTML • Attributes are used to configure HTML tags. • The src in the following image tag is an example of an attribute: <img src=“myhouse.gif”> • To insert spaces in an HTML document, use the <p> and <br> tags. • 4.01 is the last version of HTML because it will be replaced by XHTML (extensible hypertext markup language).

  10. XHTML Document Type Definition (DTDs) • A well formed document is a document that conforms to the rules and requirements of XHTML. • <!DOCTYPE> determines the XHTML DTD with which the document complies. • DTD (Document Type Definition) defines the tags and attributes that can be used in a document.

  11. XHTML Document Type Definition (DTDs) • Three types of DTDs can be used with XHTML documents: Transitional, Strict, and Frameset. • Deprecated elements are elements that are considered obsolete and they will be eventually removed from a language. • Examples of deprecated HTML elements: <applet>, <basefont>, <center>, <dir>, <menu>…

  12. XHTML Document Type Definition (DTDs) • The World Wide Web Consortium (W3C) oversees the development of Web technology standards. • A Transitional DTD allows the use of deprecated style tags in HTML documents: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

  13. XHTML Document Type Definition (DTDs) “http://www/w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> • The Frameset DTD is identical to the Transitional DTD, except that it includes the <frameset> and <frame> elements: <!DOCTYPE html PUBLIC

  14. XHTML Document Type Definition (DTDs) “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> • The Strict DTD eliminates deprecated elements in the Transitional DTD and Frameset DTD: <!DOCTYPE html PUBLIC

  15. XHTML Document Type Definition (DTDs) “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

  16. XHTML Elements and Attributes • An element is the tag pair and the information it contains. • Elements that do not include a closing tag are called empty elements. • Content is the information contained within an element’s opening and closing tags.

  17. XHTML Elements and Attributes • There are two basic types of elements: block-level and inline. • Block-level elements: give the Web page its structure. • Examples of block-level elements: <p>, <h1>, <h2>, and <h3>

  18. XHTML Elements and Attributes • Inline elements: used to describe the text that appears on a Web page. • Example of inline elements: <b> and <br>. • Standard attributes are attributes that are available to almost every element. • Examples of standard attributes: class, dir, xml:lang, and style.

  19. XHTML Elements and Attributes • lang and xml:lang designate the language of the elements. • dir is used with lang. Its values are “ltr” (left to right) and “rtl” (right to left). • title provides descriptive text for an element.

  20. Basic Body Elements • Headings • Paragraphs and line breaks • Horizontal rule Headings: • They are block-level elements that are used for emphasizing a document’s headings and subheadings.

  21. Basic Body Elements • There are six heading-level elements: <h1> through <h6>. <h1> is the highest level of importance, and <h6> is the lowest level of importance. Paragraphs and Line Breaks: • <p> is used to add a new paragraph. • <br /> is used to add a line break.

  22. Basic Body Elements • Most Web browsers ignore multiple, contiguous spaces and carriage returns. Horizontal Rules: • The horizontal rule element, <hr>, draws a horizontal rule on a Web page that acts as a section divider.

  23. Linking Web Pages • Hypertext links are text or graphics that the user can click to open files or to navigate to other documents on the Web. • Anchor is a text or image used to represent a link on a Web page. • The <a> element is used to create basic hypertext links: <a href=“AWebPage.html”> A Web Page </a>

  24. Linking Web Pages • href is the hypertext reference. • Relative URL specifies the location of a file according to the location of the currently loaded Web page. • Absolute URL refers to a specific drive and directory or to the full Web address of a Web page.

  25. Linking Web Pages • The <a> element can be used to create a link to an external document or to a bookmark inside the current document. • Any element that includes an id attribute can be the target of a link. <h3 id=“cpp”> C++, the language</h3>

  26. Linking Web Pages • To create a link to a bookmark, an id value should be assigned to an href attribute. <a href=“#cpp”>Read about C++</a>

  27. Validating Web Pages • A validating parser is a program that checks whether an XHTML document is well formed and whether the document conforms to a specific DTD. • A validator is available on: http://validator.w3.org • English and many Western languages use the ISO-8859-1 character set.

  28. Summary • HTML is a language used to design Web pages for the World Wide Web. • HTML 4.01 is the last HTML version. HTML will be replaced by XHTML. • HTML is composed of tags and text that is to be displayed on a Web page. • Web browser displays a Web page provided by the Web server.

  29. Summary • <!DOCTYPE> determines the XHTML DTD with which the document complies. • There are two types of elements: block-level and inline. • Hypertext links are used to navigate to other documents on the Web, or to open files. • A relative URL specifies the location of a file according to the location of the currently loaded Web page.

  30. Summary • An absolute URL refers to a specific drive and directory or to the full Web address of a Web page. • Use a validating parser to ensure that the XHTML document is well formed.

More Related