1 / 33

Using XHTML to Create Web Pages

Learn about the Internet and the World Wide Web, identify and use tags on a Web page, save a text document as an XHTML file, format Web page text, and more.

elsie
Download Presentation

Using XHTML to Create Web Pages

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. Tutorial 1Using XHTML to Create Web Pages

  2. Objectives • Learn about the Internet and the World Wide Web • Identify and use tags on a Web page • Save a text document as an XHTML file • Document XHTML code using comments • Specify headings • Format Web page text New Perspectives on Blended HTML, XHTML, and CSS, 2e

  3. Objectives • Identify deprecated tags • Insert special characters, superscripts, and subscripts • Insert an image • Create ordered and unordered lists • Learn about definition lists • Validate a document New Perspectives on Blended HTML, XHTML, and CSS, 2e

  4. Learning About the Internet and the World Wide Web • The Internet is a global network of computers linked by high-speed data lines and wireless systems • The World Wide Web (WWW for short) is just one of several services provided by the Internet • The software you use to view and browse, or “surf,” Web pages is called a Web browser • To display a Web page in a browser, the text and graphics on the Web page must be formatted using Hypertext Markup Language (HTML) New Perspectives on Blended HTML, XHTML, and CSS, 2e

  5. Learning About the Internet and the World Wide Web • Hypertext is a way to organize information so that you can click links and view Web content in a non-sequential manner • Markup refers to the symbols in HTML code that indicate how the text or images should appear in a browser • Extensible Hypertext Markup Language (XHTML) specifies that the code to display content on Web pages must follow certain rules New Perspectives on Blended HTML, XHTML, and CSS, 2e

  6. Typing the Code for XHTML Tags • To type the code for an element that has both a start tag and an end tag, use the following format: <start tag>content</end tag>. • To type the code for an empty element, use the following format: <tag />. • To nest tags, use the following format: <tag1><tag2>content</tag2></tag1>. New Perspectives on Blended HTML, XHTML, and CSS, 2e

  7. Typing the Basic XHTML Tags New Perspectives on Blended HTML, XHTML, and CSS, 2e

  8. Including Comments in an XHTML Document • On a new blank line in an HTML document, type the start code for a comment: <!-- • Type the text for the comment • Type the end code for a comment: --> New Perspectives on Blended HTML, XHTML, and CSS, 2e

  9. Including Comments in an XHTML Document New Perspectives on Blended HTML, XHTML, and CSS, 2e

  10. Formatting Text on a Web Page • To create the heading code, type the following, where n is a value from 1 through 6 and content is the heading text: <hn>content</hn> New Perspectives on Blended HTML, XHTML, and CSS, 2e

  11. Displaying a Web Page in a Browser • After creating the XHTML document in your text editor, save the file. • Start your Web browser, and then open the XHTML document. • Whenever you edit the XHTML code in your text editor, save the file. • Use the taskbar to switch back to your browser, and then refresh the page to view the revisions. New Perspectives on Blended HTML, XHTML, and CSS, 2e

  12. Creating Body Text New Perspectives on Blended HTML, XHTML, and CSS, 2e

  13. Creating Body Text New Perspectives on Blended HTML, XHTML, and CSS, 2e

  14. Creating Text Emphasis • To create bold text, type the following: <strong>content</strong> where content is the text to be made bold. • To create italic text, type the following: <em>content</em> where content is the text to be italicized. • To create bold and italic text, type: <strong><em>content</em></strong> where content is the text to be made bold and italic. New Perspectives on Blended HTML, XHTML, and CSS, 2e

  15. Creating Text Emphasis New Perspectives on Blended HTML, XHTML, and CSS, 2e

  16. Identifying Deprecated Tags • Recall that a deprecated element is one that the W3C has determined should no longer be used • A number of other elements have not been deprecated, but they have clearly fallen out of favor with Web page designers because there are better alternatives New Perspectives on Blended HTML, XHTML, and CSS, 2e

  17. Inserting Special Characters • Some characters in HTML cannot be created by using the keyboard • Special characters • A named character reference has the following form, where name is the named character reference: &name; • A numeric character reference has the following form, where number is the numeric character reference: &#number; New Perspectives on Blended HTML, XHTML, and CSS, 2e

  18. Inserting Special Characters New Perspectives on Blended HTML, XHTML, and CSS, 2e

  19. Creating Superscripts and Subscripts • The sup element creates a superscript, which raises a character by one-half a line of type. • Similarly, the sub element creates a subscript, which lowers a character by one-half a line of type. New Perspectives on Blended HTML, XHTML, and CSS, 2e

  20. Creating Superscripts and Subscripts New Perspectives on Blended HTML, XHTML, and CSS, 2e

  21. Tips for Typing XHTML Code in a Text Editor • Type all code in lowercase • Create an eye line • Use white space • Insert break (<br />) tags at the beginning of a line of code, not at the end • Don’t use deprecated tags • Don’t use tags that are purely presentational, such as the <b> tag or the <i> tag • Format terminal punctuation properly • Beware of quotation marks from pasted text New Perspectives on Blended HTML, XHTML, and CSS, 2e

  22. Using Images on a Web Page • GIF, JPEG, and PNG formats • Copying an Image from a Web Page: • On a Web page, right-click the image you want to copy, and then click Save Picture As (or a similar command) on the shortcut menu • Change the filename—but not the extension—if necessary • Navigate to where you want to save the image file, and then click the Save button New Perspectives on Blended HTML, XHTML, and CSS, 2e

  23. Using the Image Tag • You use the image element <img> to insert an image on a Web page <img src="Bottles.jpg" alt="image of soda bottles“ /> New Perspectives on Blended HTML, XHTML, and CSS, 2e

  24. Using the Image Element New Perspectives on Blended HTML, XHTML, and CSS, 2e

  25. Creating Lists • You can use HTML to create unordered lists (a bulleted list), ordered lists (lists with numbers or letters), and definition lists (a list with a hanging indent format) New Perspectives on Blended HTML, XHTML, and CSS, 2e

  26. Creating Lists New Perspectives on Blended HTML, XHTML, and CSS, 2e

  27. Using the Abbreviation Element • To display a ScreenTip that defines either an acronym or an abbreviation, use the <abbr> tag and the title attribute, as follows: <abbr title="complete word or phrase">abbreviation</abbr> New Perspectives on Blended HTML, XHTML, and CSS, 2e

  28. Using the Abbreviation Element New Perspectives on Blended HTML, XHTML, and CSS, 2e

  29. Using the Break Element New Perspectives on Blended HTML, XHTML, and CSS, 2e

  30. Entering Code for Metadata • Keywords are words that best identify the content of a site • The meta element is used to contain metadata • Meta tags help search engines find your Web site based on the keywords you have entered in the head area on the home page New Perspectives on Blended HTML, XHTML, and CSS, 2e

  31. Entering Code for Metadata New Perspectives on Blended HTML, XHTML, and CSS, 2e

  32. Validating a File for XHTML • Open your browser and navigate to http://validator.w3.org. • If necessary, click the Validate by File Upload tab. • Click the Browse button. Navigate to the storage location of the file to be validated. • Double-click the filename to enter it into the File text box. • Click the Check button New Perspectives on Blended HTML, XHTML, and CSS, 2e

  33. Validating a File for XHTML New Perspectives on Blended HTML, XHTML, and CSS, 2e

More Related