Tutorial 1 Using XHTML to Create Web Pages - PowerPoint PPT Presentation

1 / 33
About This Presentation
Title:

Tutorial 1 Using XHTML to Create Web Pages

Description:

Tutorial 1 Using XHTML to Create Web Pages * * * New Perspectives on Blended HTML, XHTML, and CSS, 2e XP ... – PowerPoint PPT presentation

Number of Views:22
Avg rating:3.0/5.0
Slides: 34
Provided by: Ste164
Learn more at: https://www.delta.edu
Category:
Tags: xhtml | create | delta | pages | tutorial | using | web

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com