jozef goetz, 2010 1 © 2009 pearson education copyright (c) 2009 prentice-hall. all rights reserved
TRANSCRIPT
Jozef Goetz, 2010
1
© 2009 Pearson Education
Copyright (c) 2009 Prentice-Hall. All rights reserved.
Jozef Goetz, 2010
2Learning Outcomes
In this chapter, you will learn about: The development of HTML The transition from HTML to XHTML XHTML syntax, tags, and document type
definitions The anatomy of a web page Formatting the body of a web page Formatting the text on a web page Physical and logical style tags Special Characters Connecting Web pages using hyperlinks
Jozef Goetz, 2010
3What is HTML?
The World Wide Web is composed of files containing Hypertext Markup Language (HTML)
HTML is based on SGML Standard Generalized Markup Language Describes the general structure of the document
HTML Describes the Structure of a Page It defines a set of common styles for Web pages
headings paragraphs lists tables and more
Each of these common styles has a tag associated with it to define the element
HTML Made up of tags and attributes
The set of markup symbols or codes placed in a file intended for display on a Web browser page.
Jozef Goetz, 2010
4What HTML Is -- and What It Isn’t
Heading
Paragraph
Bulleted List
Paragraph
Jozef Goetz, 2010
5What is HTML?
The text of the page Adds special code (tags) around words and
paragraphs each individual markup code is referred to as an element
or tag. Each tag has a purpose.
Tags are enclosed in angle brackets, "<" and ">" symbols – referred to as container tags<body> </body>
Most tags come in pairs; an opening tag and a closing tag. horizontal line: <hr align=“right” /> is a stand-alone or
self-contained tag and doesn’t have a closing tag.
Jozef Goetz, 2010
HTML
Whereas the text is the actual information contained in a page, the tags define the appearance of the document.
Every HTML tag is a name followed by an optional list of attributes, all enclosed between less-than and greater-than symbols (< and >).
An attribute, if present, is followed by an equals sign and the value of the attribute. Some tags can be used alone; others must be used in pairs.
Those that are used in pairs are called beginning and ending tags. The beginning tag can have attributes and values and starts with the
name of the tag. The ending tag cannot have attributes or values but must have a slash
before the name of the tag.
Jozef Goetz, 2010
HTML
The browser makes a decision about the structure of the text based on the tags, which are embedded into the text.
Scripting language that instructs a Web browser how to display a Web page Less powerful than other computer languages Runs within a browser, not stand-alone
One of the latest version: HTML 4.01 Is being replaced with XHTML
Jozef Goetz, 2010
8What is HTML?
HTML tags that indicate: page elements structure formatting hypertext links
HTML tags are not case sensitive XHTML tags are case sensitive
all tags and attributes must be written in lowercase
browsers ignore: extra spaces tabs returns
tags are the only way to format an HTML page
Jozef Goetz, 2010
9
What HTML Is
The individual browsers map the tag to how it will be viewed different browsers can display the same
tag element in radically different ways what this means is that a Web page may look
perfect on your system and be unreadable on someone else's
Jozef Goetz, 2010
10What HTML Is -- and What It Isn’t
In addition to the HTML tags defined in the various versions of HTML:
browser vendors defined
their own browser-specific extensions
Jozef Goetz, 2010
11What is HTML?
The World Wide Web is composed of files containing Hypertext Markup Language (HTML)
Scripting language that instructs a Web browser how to display a Web page Less powerful than other computer languages Runs within a browser, not stand-alone
One of the latest version: HTML 4.01 Is being replaced with XHTML
Jozef Goetz, 2010
12
Brief History of HTML
A Brief History of HTML Tags HTML 2.0
HTML 2.0 (RFC 1866) was developed by the IETF's HTML Working Group, which closed in 1996.
It sets the standard for core HTML features based upon current practice in 1994.
Jozef Goetz, 2010
13
What HTML Is -- and What It Isn’t
HTML 3.2 W3C's recommendation for HTML which
represented the consensus on HTML features for 1996.
HTML 3.2 added widely-deployed features such as – tables, – applets, – text-flow around images, – superscripts and – subscripts,
while providing backwards compatibility with the existing HTML 2.0 Standard.
Jozef Goetz, 2010
14What HTML Is -- and What It Isn’t
HTML 4.0 First released as a W3C Recommendation
on 18 December 1997. A second release was issued on 24 April 1998
with changes limited to editorial corrections. This specification has now been superseded by
HTML 4.01. HTML 4.01
The HTML 4.01 Recommendation released on 24th December 1999 fixes a number of bugs in the HTML 4.0 specification.
Jozef Goetz, 2010
15HTML Version Structure
WML= Wireless Markup Language
Jozef Goetz, 2010
16
Markup Languages
HTML 5
The next version of HTML 4 and XHTML 1
http://www.w3.org/html/
Jozef Goetz, 2010
17
Markup Languages
The relationship between XHTML, HTML, and XML
Jozef Goetz, 2010
18What is XHTML?
The World Wide Web Consortium http://w3c.org
sets the standards for HTML and its related languages.
The newest version of HTML is actually XHTML – eXtensible HyperText Markup Language.
XHTML uses the tags and attributes of HTML along with the syntax of XML (eXtensible Markup Language).
Jozef Goetz, 2010
19What’s wrong with HTML?
Forgiving coding errors and display size limitation of new Internet devices:
WebTV Personal Information Managers Personal Digital Assistants - PDAs Mobile phones
HTML does not fit this need today’s devices
the need for a descriptive rather than structural language became evident and XHTML was created.
Jozef Goetz, 2010
20Programs to Help You Write HTML
Many programs available to help create HTML files
3 flavors of editors: HTML-based text editors WYSIWYG (What You See What You Get) editors Combination of HTML-based and WYSIWYG editors Dreamweaver
There are also converters that generate an HTML file from an existing document.
For now use Notepad
Jozef Goetz, 2010
21What is XHTML and Why Use It?
What is XHTML and Why Use It? eXtensible HyperText Markup Language. XHTML is the transition from HTML 4.0 to XML
(Extensible Markup Language) Expected benefits of the transition include:
– places specific requirements on documents to ensure they are readable in future browsers,
– an improved match to database & workflow applications,
– a modular solution to the increasingly disparate capabilities of browsers,
– and the ability to cleanly integrate HTML with other XML applications.
Jozef Goetz, 2010
22XHTML
XHTML was developed by the W3C World Wide Web Consortium to be the reformulation of HTML as an application of XML.
Purpose: Provides a more structured alternative to non-
standard HTML Provide ways to extend HTML and add new features Separate content from presentation (>=XHTML 2.0)
XHTML combines the formatting strengths of HTML and the data structure and extensibility strengths of XML.
– allows for custom tags
Jozef Goetz, 2010
23What is XHTML and Why Use It?
XHTML Syntax Use lowercase tags and attributes Place attribute tags in quotes All container tags must use their opening and closing
tags. All tags are enclosed in angle brackets. Terminate all non-empty single elements
– add the closing slash (/) preceded by a space just before the ending greater symbol than (>)
• <br> and <hr> become <br /> and <hr /> Tags shouldn’t be overlapped
– nested -- <b><i>Bold and Italic</i></b>– overlapping -- <b><i>Bold and Italic</b></i>
Jozef Goetz, 2010
24XML Declaration An XML document must be well-formed i.e. adheres
to the syntax rules Use lowercase Use opening and closing tags
<body> </body> Close stand-alone tag with special syntax
<hr />
XML documents begin with an XML declaration as a directive. The basic form of this directive is (p.567):
<?xml version="1.0" encoding="UTF-8"?>
UTF-8 a form of Unicode
Jozef Goetz, 2010
25Document Type Definition (DTD)
W3C Recommendation: Use a Document Type Definition DTD to identify the type of markup language used in a web page (p.567):
1. XHTML 1.0 TransitionalThis is the least strict specification for XHTML 1.0. It allows the use of both Cascading Style Sheets and traditional formatting instructions such as fonts.
We will use this for most of our coding in this text<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. XHTML 1.0 Strict
3. XHTML 1.0 Frameset
Jozef Goetz, 2010
26XHTML 1.0 Transitional DTD
This DTD module is identified by the PUBLIC and SYSTEM identifiers:
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd gives access to the DTD definition
Document Type Definition DTD tag commonly called the
DOCTYPE We will use mainly XHTML 1.0 versionsometimes XHTML 1.1
Jozef Goetz, 2010
27
27
Versions of XHTML
Strict (XHTML 2.0) Must follow complete XML coding rules Must separate content from presentation Presentation via Cascading Style Sheets (CSS)
Transitional (XHTML 1.0, 1.1) Reformulation of HTML 4.01 Presentation and content tags exist
Frameset Enable window-in-a-window effect
Jozef Goetz, 2010
Dr. Dobb's Update - 07/30/09 - HTML 5 vs. XHTML 2
XHTML 2 is related to XHTML 1.0 or XHTML 1.1 — and you'd be wrong. XHTML 1.0 is nothing more than HTML 4 with XML syntax. For its part, XHTML 1.1 is the same, but with the requirement that documents must be served with an XML MIME-type.
So XHTML 2 is history and we don't have to concern ourselves with it, right? Not really. A lot of people still prefer XHTML syntax. In their comic, Keith and Colbow introduce us to some of these folks who give very good reasons for their views. For example, if you want to keep on closing all tags and quoting all attributes, you can — using either XHTML 2 or HTML 5. HTML 5 lets you use whatever syntax you feel comfortable with. As Keith and Colbow point out, you can even serve your documents as application/XHTML+XML, transforming them from HTML 5 into XHTML 5.
28
Jozef Goetz, 2010
29Document Type Definition (DTD)
The document type declaration names the document type definition (DTD) in use for the document. Declares the document type Required in XHTML HTML 4.01 specifies three DTDs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Jozef Goetz, 2010
30First Web Page
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> an opening tag
.... page info goes here
</html> a closing tag
After the XML and the DTD, each web page begins with an opening <html> and a closing </html> tag.
Jozef Goetz, 2010
31Head & Body Sections
Head Section (description) -- Contains information that describes the web page document. <head>…head section info goes here</head>
Body Section (contents) -- Used for text and tags that do show directly on the web page. <body>…body section info goes here</body>
Jozef Goetz, 2010
32namespace
xmlns=http://www.w3.org/1999/xhtml>
The location of the documentation for the elements being used
http://www.w3.org/1999/xhtml/
This is an XML namespace defined in the XHTML™ 1.0: The Extensible HyperText Markup Language specification, and
is shared across XHTML Family document types
Jozef Goetz, 2010
33XHTML <head> and <body> tags
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"><html xmlns=http://www.w3.org/1999/xhtml> <head>
.... Header info goes here </head> <body> .... Body info goes here
</body></html>
Jozef Goetz, 2010
34The Title p.568-9
<title> tag
gives a page a title used in bookmarks used by search engines appears in browser title
bar goes inside the page
header (<head>)
Jozef Goetz, 2010
35
35Copyright (c) 2006 Prentice-Hall. All rights reserved.
HTML Code in Notepad and Browser Results
Body goes in content area of browser
Title goes in Title bar of browser
Jozef Goetz, 2010
36
36Copyright (c) 2006 Prentice-Hall. All rights reserved.
Saving an XHTML File from Notepad
By default, files from Notepad are saved with a .txt extension
If you try to save as filename.htm, then the saved file name will be filename.htm.txt
You can avoid this by either: Making sure that the Save As Type entry is set as All Files
instead of *.txt or Saving with the name in quotes, like this: "filename.htm"
Jozef Goetz, 2010
37Checkpoint 2.1 p.619
1. Describe the origin, purpose, and features of HTML.
2. Explain why you would use XHTML instead of HTML.
3. Describe the purpose of the header and body sections of a web page.
Jozef Goetz, 2010
38Lab Excercises
HandsOnPractice 2.1
Jozef Goetz, 2010
39XHTML <body> tag attributes
The <body> tag can be used to set attributes (properties) for entire Web page, such as Background color Background image Text color and Link color
bgcolor Configures the background color of a web page
<body bgcolor=“#000066”> // dark navy blue<body bgcolor=“white”>
textConfigures the color of the text on the web page
<body bgcolor=“#000066” text=“#CCCCCC”><body bgcolor=“white” text=“red”>
Check the XHTML Reference p.571 in the textbook for more body tag attributes
Jozef Goetz, 2010
40Headings
Heading tags Six levels:
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6> used to divide sections -- similar to a book displayed either in larger or bolder text can be centered, underlined, capitalized common to use a heading to duplicate the title
Jozef Goetz, 2010
41Heading Tags
<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>
<h1> is largest<h6> is smallest
2002 Prentice Hall.All rights reserved.
Outline421 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.4: header.html -->
6 <!-- XHTML headers -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Headers</title>
11 </head>
12
13 <body>
14
15 <h1>Level 1 Header</h1>
16 <h2>Level 2 header</h2>
17 <h3>Level 3 header</h3>
18 <h4>Level 4 header</h4>
19 <h5>Level 5 header</h5>
20 <h6>Level 6 header</h6>
21
22 </body>
23 </html>
Jozef Goetz, 2010
43XHTML <p> tag
Enter/Return key does not provide this in XHTML documents
Can use paragraph tag
<p> …paragraph goes here </p>
Used to group sentences and sections of text together.
Text that is contained by <p> and </p> tags will have a blank line above and below it.
Jozef Goetz, 2010
44
44Copyright (c) 2006 Prentice-Hall. All rights reserved.
Closing Container Tags
XHTML rules require all tags have closing tags Opening tag has tag code:
e.g. <p>
Closing tag has forward slash in front of code e.g. </p>
Content placed between opening and closing tags <p> CONTENT </p>
Browsers are forgiving, but XHTML rules are strict
Jozef Goetz, 2010
45
45Copyright (c) 2006 Prentice-Hall. All rights reserved.
Effects of <p> Tags
<p> tag inserts white space and separates lines of text
Without <p> tag, Enter/Return has no effect on browser display
HOP 2.2 +2.3
Jozef Goetz, 2010
46Body and Text Basics
Structural elements, called block-level tags p.572, control
blocks of the text such as headingsparagraphs and list
Tags that effect individual section of text called text-level tags p.574
Jozef Goetz, 2010
47Lab Excercises
HandsOnPractice 2.2 + 2.3
Jozef Goetz, 2010
48Self-contained <br /> tag
Line Break tag the line break tag in HTML <br> has no
corresponding closing tag. Many empty tags in HTML (i.e. tags with no text content) have
no closing tags, but this is not true in XHTML.
to make an opening tag also be a closing tag, by placing a slash before the end bracket
<br />. Stand alone tag…text goes here <br />
This starts on a new line….
Used to force a new line when the text on the web page document is displayed by a browser.
Jozef Goetz, 2010
49
49Copyright (c) 2006 Prentice-Hall. All rights reserved.
Attributes
Most tags can have attributes
Attribute is: Information in the opening tag Additional information that defines a tag
Attribute syntax: attributename = “value” Attribute – value pair
Jozef Goetz, 2010
50
50Copyright (c) 2006 Prentice-Hall. All rights reserved.
The align Attribute
Specifies how text within the paragraph should be aligned
Options include: left, center, right, justify Example:
<p align = “center”> CONTENT </p>
Jozef Goetz, 2010
51
HOP 2.4:
Jozef Goetz, 2010
52
52Copyright (c) 2006 Prentice-Hall. All rights reserved.
Effects of align attribute
Effect of <p align=“center”>
Effect of <p align=“right”>
Jozef Goetz, 2010
53
53Copyright (c) 2006 Prentice-Hall. All rights reserved.
Effects of Headings Tags
<h1 align="center">Dr. Know-It-All Recommendations</h1>
<h2 align="center">Upcoming Books</h2>
HOP 2.4
Jozef Goetz, 2010
54Lab Excercises
HandsOnPractice 2.4
Jozef Goetz, 2010
55
55Copyright (c) 2006 Prentice-Hall. All rights reserved.
Deprecation
Some HTML tags or attributes are deprecated they are still supported but will be discontinued in strict
XHTML
Deprecated tags/attributes are old (obsolete) versions
Replaced by newer, improved XHTML tags/attributes
Most browsers support deprecated tags
The align attribute is deprecated
Modern alignment is handled through style sheets
Jozef Goetz, 2010
56XHTML <pre> tag
Preformatted Text tag
The preformatted text tag preserves your formatting and displays the text in a fixed-width or monospace font.
<pre> …text goes here Line breaks and formatting are preserved</pre>
NOTE: Usually is used for listing programming or scripting code
Jozef Goetz, 2010
57
57Copyright (c) 2006 Prentice-Hall. All rights reserved.
Blockquote Tag
Used to indent a block of text for special emphasis.
<blockquote> …text goes here
</blockquote>
Indents contained text
Indentation from left and right margins and a line break is placed before and after the text
Nest blockquote tags to increase indentation
Jozef Goetz, 2010
58
58Copyright (c) 2006 Prentice-Hall. All rights reserved.
Effects of Blockquote Tag
<blockquote> tag causes this indentation
Nested <blockquote> causes more indentation
HOP 2.3 – 2.5
Jozef Goetz, 2010
59Lab Excercises
HandsOnPractice 2.5
Jozef Goetz, 2010
60XHTML List Basics
Definition List - dl Ordered List - ol Unordered List -ul
Jozef Goetz, 2010
61Lists List Tags Common Elements
opening and closing tag1. definition list <dl> and </dl>
– definition term <dt> and – definition data <dd>
2. ordered list <ol> and </ol>– list items <li>
3. unordered list <ul> and </ul>– list items <li>
list items have their own tag <li>
Jozef Goetz, 2010
62XHTML Definition List
Useful to display a list of terms an definitions or a list of FAQ and answers
<dl> tagContains the definition list <dt> tag
Contains a defined term <dd> tag
Contains a data definition
HOP 2.5
Jozef Goetz, 2010
XHTML Definition List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
Jozef Goetz, 2010
641. Definition Lists <dl>
Jozef Goetz, 2010
65Lab Excercises
HandsOnPractice 2.6
Jozef Goetz, 2010
662. Ordered Lists
Used to convey information in an ordered fashion
Jozef Goetz, 2010
672. XHTML Ordered List
<ol>Contains the ordered list
Two main ways to customize ordered lists how they are numbered
– type attribute• default is numerals: 1, 2,…
the number with which the list starts – start attribute
Ex: <ol start=“100” type=“I”> <li>
Contains an list item
Jozef Goetz, 2010
682. Ordered List
Type attribute can take one of five values “1” Specifies standard Arabic numerals
– 1, 2, 3, 4,5 “a” Specifies lowercase letters
– a, b, c, d, e “A” Specifies uppercase letters
– A, B, C, D, E “i” Specifies lowercase Roman numerals
– i, ii, iii, iv, v “I” Specifies uppercase Roman numerals
– I, II, III, IV, V
Jozef Goetz, 2010
692. Ordered List
Both the start and type attributes are used in the <ol> tag
<ol start=100 type=“I”> start=“1” is the default value type=“1” is the default value
By using the value attributein the <li> tag, numberingcan be reassigned at any point
<li value=1111> Step 5 and …=> So, it will start from MCXI.
Jozef Goetz, 2010
703. Unordered Lists
Used to display information in bullet points
Jozef Goetz, 2010
XHTML Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
Jozef Goetz, 2010
72
XHTML Unordered List
HTML 3.2 provided ways to customize unordered lists They have been deprecated in HTML 4.0 in favor of using style
sheets
<ul>Contains the unordered list The type attribute customizes unordered lists
the type attribute has 3 possible values– disc - default– square, – circle
the type attribute is used in the <ul> tag<ul type=“square”>
<li>Contains an list item
2002 Prentice Hall.All rights reserved.
Outline73
list.html(1 of 3)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.11: list.html -->
6 <!-- Advanced Lists: nested and ordered -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Lists</title>
11 </head>
12
13 <body>
14
15 <h1>The Best Features of the Internet</h1>
16
17 <!-- create an unordered list -->
18 <ul>
19 <li>You can meet new people from countries around
20 the world.</li>
21 <li>
22 You have access to new media as it becomes public:
23
Nested and Ordered Lists
2002 Prentice Hall.All rights reserved.
Outline74
list.html(2 of 3)
24 <!-- this starts a nested list, which uses a -->
25 <!-- modified bullet. The list ends when you -->
26 <!-- close the <ul> tag. -->
27 <ul>
28 <li>New games</li>
29 <li>
30 New applications
31
32 <!-- nested ordered list -->
33 <ol>
34 <li>For business</li>
35 <li>For pleasure</li>
36 </ol>
37 </li>
38
39 <li>Around the clock news</li>
40 <li>Search engines</li>
41 <li>Shopping</li>
42 <li>
43 Programming
44
45 <!-- another nested ordered list -->
46 <ol>
47 <li>XML</li>
48 <li>Java</li>
Nested and Ordered Lists
2002 Prentice Hall.All rights reserved.
Outline75
list.html(3 of 3)
49 <li>XHTML</li>
50 <li>Scripts</li>
51 <li>New languages</li>
52 </ol>
53
54 </li>
55
56 </ul> <!-- ends the nested list of line 27 -->
57 </li>
58
59 <li>Links</li>
60 <li>Keeping in touch with old friends</li>
61 <li>It is the technology of the future!</li>
62
63 </ul> <!-- ends the unordered list of line 18 -->
64
65 </body>
66 </html>
Nested and Ordered Lists
Jozef Goetz, 2010
76Comments
Comment
<!-- text inside here is ignored -->
It’s a good rule of thumb not to include “--”, “<“, “>”, or HTML tags within comments
Jozef Goetz, 2010
77Lab Excercises
HandsOnPractice 2.7
Jozef Goetz, 2010
78XHTML Logical Style Tags see Tab. p.43-45
Indicate the logical (general) style used to display the text in between the container tags.
Common Logical Style Tags <strong></strong>
To cause text to be emphasized or to "stand out" from surrounding text. Usually displayed in bold. <strong> This is important</strong>
<em></em> To cause text to be emphasized in relation to other
text on the page. Usually displayed in italics.<em> Please note</em>
Jozef Goetz, 2010
79XHTML Physical Style Tags
Provide specific font instructions for the browser
Logical Style tags are preferred by the W3C Physical Style tags
They provide specific fonts instructions for the browser are discussed (see tab p.45) because some web developers still
use them Common Physical Style Tags <b></b>
To display as bold text <b>This is important</b>
<i></i> To display text in italics
<i>Please note</i>
Logical Style Tags provides a wider range of Web access
Jozef Goetz, 2010
80XHTML Special Characters
Used to display special characters such as quotes, copyright symbol, etc.
Character entity references (in the form &code;) Numeric character references (e.g. &)
Numeric Code Character Code© © ©< < <> > >& & &
See the Special Characters section textbook for a detailed list – appendix B p.596 text from CMPS 318
HOP 2.8
2002 Prentice Hall.All rights reserved.
Outline81
contact2.html(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.9: contact2.html -->
6 <!-- Inserting special characters -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Contact Page
11 </title>
12 </head>
13
14 <body>
15
16 <!-- special characters are entered -->
17 <!-- using the form &code; -->
18 <p>
19 Click
20 <a href = "mailto:[email protected]">here
21 </a> to open an e-mail message addressed to
23 </p>
24
2002 Prentice Hall.All rights reserved.
Outline82contact2.ht
ml(2 of 2)
25 <hr /> <!-- inserts a horizontal rule --> 26
27 <p>All information on this site is <strong>©</strong>
28 Deitel <strong>&</strong> Associates, Inc. 2002.</p>
29
30 <!-- to strike through text use <del> tags -->
31 <!-- to subscript text use <sub> tags -->
32 <!-- to superscript text use <sup> tags -->
33 <!-- these tags are nested inside other tags -->
34 <p><del>You may download 3.14 x 10<sup>2</sup>
35 characters worth of information from this site.</del>
36 Only <sub>one</sub> download per hour is permitted.</p>
37
38 <p>Note: <strong>< ¼</strong> of the information
39 presented here is updated daily.</p>
40
41 </body>
42 </html>
Jozef Goetz, 2010
83Checkpoint 2.3
1. Provide a reason for using logical style tags rather than physical style tags. The last one describes fonts rather than
general styles for the presentation of info.
2. Describe the purpose of special characters. Entity ch-rs, displays items such as
quotation marks, <, >, the copyright symbol etc.
HOP 2.8
Jozef Goetz, 2010
84Lab Excercises
HandsOnPractice 2.8
Jozef Goetz, 2010
85
XHTML <a> tag
The anchor element
href (hypertext reference) Indicates the target – destination page or location
of the link Text between the <a> and </a> is displayed on the web
page.
<a href="contact.html">Contact Us</a>
href Attribute Indicates the file name or URL
Web page document, photo, pdf, etc.
Jozef Goetz, 2010
Creating Links
Opening Tag Closing Tag
Text that will be displayedURL
Jozef Goetz, 2010
87
87
Glossary
Hyperlinks – clickable areas take the viewer to another location
Uniform Resource Locator (URL) – the Web address of a resource Relative URL – local file or folder Absolute URL – address on another Web server
Typically begins with http://
HTTP – hypertext transfer protocol
Web server – the computer hosting a Web site
Jozef Goetz, 2010
88
XHTML <a> tag
Absolute link Link to other Web sites
<a href="http://yahoo.com">Yahoo</a>
Relative link Link to pages on your own site
<a href="index.htm">Home</a>
Jozef Goetz, 2010
89Hyperlinks
Hands-On Practice
Jozef Goetz, 2010
90
90Copyright (c) 2006 Prentice-Hall. All rights reserved.
Effects of <a>, href, and title
Tool tip generated by title="Home Page Link"
Displayed text generated by text between the <a> tag and the </a> tag
<a href=“http://www.laverne.edu" title="Home Page Link">Click here to go to our home page!</a>
Mouse pointer changes when hovered over the link
When user clicks, the page opened will be based on href=“http://www.laverne.edu"
title: Provides text that can appear in a tool tip when the mouse hovers over the link
Jozef Goetz, 2010
91
XHTML Email Links using the <a> tag
Automatically launch the default mail program configured for the browser
If no browser default is configured, a message is displayed
<a href=“mailto:[email protected]”>[email protected]</a>
Jozef Goetz, 2010
92
Jozef Goetz, 2010
93
Checkpoint
1. Describe when to use an absolute link. Is the http protocol used in the href value?
2. Describe when to use a relative link. Is the http protocol used in the href value?
3. What happens when a web site visitor clicks on an e-mail link?
Jozef Goetz, 2010
Writing Valid XHTML
Check your code for syntax errors Benefit:
Valid code more consistent browser display
W3C XHTML Validation Tool http://validator.w3.org
Jozef Goetz, 2010
95 Web Resources
www.w3.org/TR/xhtml11 www.xhtml.org www.w3schools.com/xhtml/default.asp http://validator.w3.org hotwired.lycos.com/webmonkey/00/50/index2a.html wdvl.com/Authoring/Languages/XML/XHTML www.w3.org/TR/2001/REC-xhtml11-20010531
Jozef Goetz, 2010
96Summary
This chapter provided an introduction to XHTML.
It began with an introduction to the HTML, discussed the transition to XHTML, continued with the anatomy of a web page, and introduced inline and block-level formatting, and demonstrated the XHTML techniques used to create hyperlinks.
You will use these skills over and over again as you create Web pages.
Jozef Goetz, 2010
Home Project – JavaJam Cofee House
Jozef Goetz, 2010
Home Project – Fish Creek Animal Hospital