Transcript Tutorial 1 Using XHTML to Create Web Pages

Tutorial 1
Using XHTML to Create
Web Pages
Objectives
•
•
•
•
•
•
XP
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
2
Objectives
•
•
•
•
•
•
XP
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
3
Learning About the Internet and
the World Wide Web
XP
• The Internet is a global network of computers linked by highspeed 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
XP
• 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
5
Typing the Code for XHTML Tags
XP
• 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
6
Typing the Basic XHTML Tags
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
7
Including Comments in an XHTML
Document
XP
• 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
8
Including Comments in an XHTML
Document
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
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:
<hn>content</hn>
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
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
12
Creating Body Text
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
13
Creating Text Emphasis
XP
• 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
14
Creating Text Emphasis
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
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
XP
• 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
17
Inserting Special Characters
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
18
Creating Superscripts and
Subscripts
XP
• 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
19
Creating Superscripts and
Subscripts
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
20
Tips for Typing XHTML Code
in a Text Editor
•
•
•
•
•
•
•
•
XP
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
21
Using Images on a Web Page
XP
• 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
22
Using the Image Tag
XP
• 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
23
Using the Image Element
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
24
Creating Lists
XP
• 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
25
Creating Lists
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
26
Using the Abbreviation Element
XP
• 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
27
Using the Abbreviation Element
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
28
Using the Break Element
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
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
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
31
Validating a File for XHTML
XP
• 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
32
Validating a File for XHTML
New Perspectives on Blended HTML, XHTML, and CSS, 2e
XP
33