Tutorial 1 Using XHTML to Create Web Pages

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

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

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)

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

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
• ltstart taggtcontentlt/end taggt.
• To type the code for an empty element, use the
  following format lttag /gt.
• To nest tags, use the following format
  lttag1gtlttag2gtcontentlt/tag2gtlt/tag1gt.

7
Typing the Basic XHTML Tags
8
Including Comments in an XHTML Document

• On a new blank line in an HTML document, type the
  start code for a comment
• lt!--
• Type the text for the comment
• Type the end code for a comment
• --gt

9
Including Comments in an XHTML Document
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
• lthngtcontentlt/hngt

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.

12
Creating Body Text
13
Creating Body Text
14
Creating Text Emphasis

• To create bold text, type the following
• ltstronggtcontentlt/stronggt
• where content is the text to be made bold.
• To create italic text, type the following
• ltemgtcontentlt/emgt
• where content is the text to be italicized.
• To create bold and italic text, type
• ltstronggtltemgtcontentlt/emgtlt/stronggt
• where content is the text to be made bold and
  italic.

15
Creating Text Emphasis
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

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

18
Inserting Special Characters
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.

20
Creating Superscripts and Subscripts
21
Tips for Typing XHTML Code in a Text Editor

• Type all code in lowercase
• Create an eye line
• Use white space
• Insert break (ltbr /gt) tags at the beginning of a
  line of code, not at the end
• Dont use deprecated tags
• Dont use tags that are purely presentational,
  such as the ltbgt tag or the ltigt tag
• Format terminal punctuation properly
• Beware of quotation marks from pasted text

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 filenamebut not the extensionif
  necessary
• Navigate to where you want to save the image
  file, and then click the Save button

23
Using the Image Tag

• You use the image element ltimggt to insert an
  image on a Web page
• ltimg src"Bottles.jpg" alt"image of soda
  bottles /gt

24
Using the Image Element
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)

26
Creating Lists
27
Using the Abbreviation Element

• To display a ScreenTip that defines either an
  acronym or an abbreviation, use the ltabbrgt tag
  and the title attribute, as follows
• ltabbr title"complete word or phrase"gtabbreviatio
  nlt/abbrgt

28
Using the Abbreviation Element
29
Using the Break Element
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

31
Entering Code for Metadata
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

33
Validating a File for XHTML