Tutorial 1 Using XHTML to Create Web Pages

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

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 2

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

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 3

• Learning About the Internet and

XP

• • • 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 4

• • Learning About the Internet and • the World Wide Web Hypertext is a way to organize information so that you

XP

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 5

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: content.

To type the code for an empty element, use the following format: .

To nest tags, use the following format: content.

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 6

Typing the Basic XHTML Tags

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 7

• • Including Comments in an XHTML • Document On a new blank line in an HTML document, type the start code for a comment:

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 8

Including Comments in an XHTML Document

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 9

Formatting Text on a Web Page

XP

• To create the heading code, type the following, where n is a value from 1 through 6 and content is the heading text:

content

New Perspectives on Blended HTML, XHTML, and CSS, 2e 10

Displaying a Web Page in a Browser

XP

• • • • 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 11

Creating Body Text

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 12

Creating Body Text

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 13

Creating Text Emphasis • • • To create bold text, type the following: content where content is the text to be made bold.

To create italic text, type the following: content where content is the text to be italicized.

To create bold and italic text, type: content where content is the text to be made bold and italic.

New Perspectives on Blended HTML, XHTML, and CSS, 2e XP 14

Creating Text Emphasis

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 15

Identifying Deprecated Tags

XP

• • 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 16

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;

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 17

Inserting Special Characters

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 18

• 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.

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 19

Creating Superscripts and Subscripts

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 20

Tips for Typing XHTML Code • • • • • • • • in a Text Editor Type all code in lowercase Create an eye line Use white space Insert break (
) 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 tag or the tag Format terminal punctuation properly Beware of quotation marks from pasted text

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 21

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

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 22

Using the Image Tag

XP

• You use the image element to insert an image on a Web page

Using the Image Element

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 24

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)

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 25

Creating Lists

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 26

Using the Abbreviation Element

XP

• To display a ScreenTip that defines either an acronym or an abbreviation, use the tag and the title attribute, as follows: abbreviation

New Perspectives on Blended HTML, XHTML, and CSS, 2e 27

Using the Abbreviation Element

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 28

Using the Break Element

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 29

Entering Code for Metadata

XP

• • • 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 30

Entering Code for Metadata

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 31

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

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 32

Validating a File for XHTML

XP New Perspectives on Blended HTML, XHTML, and CSS, 2e 33