Transcript intro
HTML intro
• 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
1
What is
HTML?
The World Wide Web Consortium
(http://w3c.org) sets the standards
for HTML and its related languages.
The set of markup symbols or codes
placed in a file intended for display
on a Web browser page.
2
HTML Tags
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.
Most tags come in pairs; an opening
tag and a closing tag.
3
What is
XHTML?
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).
While many web pages and web
authoring tools still use HTML, as a web
developer you need to learn about
XHTML – you will be seeing a lot of it in
the future.
4
What’s wrong
with HTML?
The Web has changed from a medium used
to display electronic versions of paper
documents to a medium that provides
diverse information for a variety of devices.
HTML does not fit this need.
HTML is a structural language – it was
originally intended to markup printed
documents for online viewing.
With the expansion of the Web to include
devices other than personal computers, the
need for a descriptive rather than structural
language became evident and XHTML was 5
created.
XHTML
XHTML was developed by the
W3C to be the reformulation of
HTML as an application of XML.
XHTML combines the formatting
strengths of HTML and the data
structure and extensibility
strengths of XML.
6
XML
An XML document must be wellformed.
• Use lowercase
• Use opening and closing tags
<body>
</body>
• Close stand-alone tag with special
syntax
<hr />
XML documents begin with an XML
directive. The basic form of this
directive is:
<?xml version="1.0" encoding="UTF-8"?>
7
Document
Type Definition (DTD)
W3C Recommendation: Use a
Document Type Definition to identify
the type of markup language used in
a web page.
XTML 1.0 Transitional
This 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
XHTML 1.0 Strict
Requires exclusive use of Cascading Style Sheets. We will not use this.
XHTML 1.0 Frameset
Required for pages using XHTML frames. We will use this with our
frames pages later in the text.
8
XHTML 1.0 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
9
First 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
10
Head & Body Sections
Head Section -- Contains
information that describes the
web page document.
<head>
…head section info goes here
</head>
Body Section -- Used for text
and tags that do show
directly on the web page.
<body>
…body section info goes here
</body>
11
XHTML
<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>
<head>
.... Header info goes here
</head>
<body>
.... Body info goes here
</body>
</html>
12
Questions?
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.
13
XHTML
<title> and <meta /> tags
<!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" lang="en" xml:lang="en">
<head>
<title>My First Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
.... Body info goes here
</body>
</html>
XHTML <body> tag attributes
bgcolor
• Configures the background color of a web
page
<body bgcolor=“#000066”>
<body bgcolor=“white”>
text
Configures the color of the text on the web
page
<body bgcolor=“#000066”
text=“#CCCCCC”>
<body bgcolor=“white” text=“red”>
Check the XHTML Reference in the
textbook for more body tag attributes
15
XHTML
<p> tag
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.
16
XHTML
<br /> tag
Line Break tag
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.
17
Heading 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>
18
XHTML List Basics
Definition List
Ordered List
Unordered List
19
XHTML
Definition List
Useful to display a list of terms an
definitions or a list of FAQ and answers
<dl> tag
Contains the definition list
<dt> tag
Contains a defined term
<dd> tag
Contains a data definition
20
XHTML
Definition List Example
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control
Protocol</dd>
</dl>
21
XHTML
Ordered List
Used to convey information in an
ordered fashion
<ol>
Contains the ordered list
• type attribute determines numbering
scheme of list, default is numerals
<li>
Contains an item in the list
22
XHTML
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
23
XHTML
Unordered List
Used to display information in bullet
points
<ul>
Contains the unordered list
• type attribute determines the type of bullet
point, default is disc
<li>
Contains an item in the list
24
XHTML
Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
25
XHTML
<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: You will unusually NEVER
use the <pre> tag
26
XHTML
<blockquote> tag
Blockquote tag
Used to indent a block of text
for special emphasis.
<blockquote>
…text goes here
</blockquote>
27
Questions
1. Describe the features of a heading tag
and how it configures the text.
2. Describe the difference between
ordered lists and unordered lists.
3. Describe the purpose of the blockquote
tag.
28
XHTML
Logical Style Elements
Indicate the logical style of the text
display
Common Logical Style Tags
◦ <strong></strong>
To cause text to be emphasized or to "stand out"
from surrounding text.
<strong>This is important</strong>
◦ <em></em>
To cause text to be emphasized in relation to other
text on the page. Usually italics.
<em>Please note</em>
XHTML
Physical Style Elements
Provide browser font configuration info
Common Physical Style Tags
◦ Useful for browsers – but not always applicable
for other devices or user agents such as screen
readers
◦ <b></b>
To display as bold text
<b>This is important</b>
◦ <i></i>
To display text in italics
<i>Please note</i>
XHTML
<font> tag
USE CSS INSTEAD
Font tag
Used to format text
Deprecated – will be dropped in future
versions of XHTML
Common attributes
• face -- configure the typeface or font name to
be used to display the text.
• size – sets the size of the text
• color – configures the color of the text
<font face=“Arial” size=“6” color=“#000099”>This31is
large blue text.</font>
XHTML
Special Characters
Used to display special characters such as
quotes, copyright symbol, etc.
Character
©
<
>
Code
©
<
>
See the Special Characters section textbook
for a detailed list
32
Questions
1. Describe three attributes of the font tag
and their use.
2. Provide a reason for using logical style
tags rather than physical style tags.
3. Describe the purpose of special
characters.
33