1 HTML intro The development of HTMLThe development of HTML The transition from HTML to XHTMLThe transition from HTML to XHTML XHTML syntax, tags, and

11

HTML introHTML intro

• The development of HTMLThe development of HTML• The transition from HTML to XHTMLThe transition from HTML to XHTML• XHTML syntax, tags, and document type XHTML syntax, tags, and document type

definitionsdefinitions• The anatomy of a web pageThe anatomy of a web page• Formatting the body of a web pageFormatting the body of a web page• Formatting the text on a web pageFormatting the text on a web page• Physical and logical style tagsPhysical and logical style tags• Special CharactersSpecial Characters

22

What is What is HTML?HTML?

The World Wide Web Consortium The World Wide Web Consortium (http://w3c.org) sets the standards (http://w3c.org) sets the standards for HTML and its related languages.for HTML and its related languages.

TheThe set of markup symbols or codes set of markup symbols or codes placed in a file intended for display placed in a file intended for display on a Web browser page.on a Web browser page.

33

HTML TagsHTML Tags Each individual markup code is Each individual markup code is

referred to as an referred to as an elementelement or or tagtag. . Each tag has a purpose.Each tag has a purpose.

Tags are enclosed in angle brackets, Tags are enclosed in angle brackets, ""<<" and "" and ">>" symbols. " symbols.

Most tags come in pairs; an opening Most tags come in pairs; an opening tag and a closing tag.tag and a closing tag.

44

What isWhat isXHTML?XHTML?

The newest version of HTML is actually The newest version of HTML is actually XHTML – eXHTML – eXXtensible tensible HHyperyperTText ext MMarkup arkup LLanguage. anguage.

XHTML uses the tags and attributes of XHTML uses the tags and attributes of HTML along with the syntax of XML HTML along with the syntax of XML (e(eXXtensible tensible MMarkup arkup LLanguage). anguage).

While many web pages and web While many web pages and web authoring tools still use HTML, as a web authoring tools still use HTML, as a web developer you need to learn about developer you need to learn about XHTML – you will be seeing a lot of it in XHTML – you will be seeing a lot of it in the future.the future.

55

What’s wrongWhat’s wrongwith HTML?with HTML?

The Web has changed from a medium used to display The Web has changed from a medium used to display electronic versions of paper documents to a medium electronic versions of paper documents to a medium that provides diverse information for a variety of that provides diverse information for a variety of devices.devices.

HTML does not fit this need.HTML does not fit this need.

HTML is a structural language – it was originally HTML is a structural language – it was originally intended to markup printed documents for online intended to markup printed documents for online viewing. viewing.

With the expansion of the Web to include devices other With the expansion of the Web to include devices other than personal computers, the need for a descriptive than personal computers, the need for a descriptive rather than structural language became evident and rather than structural language became evident and XHTML was created.XHTML was created.

66

XHTMLXHTML

XHTML was developed by the XHTML was developed by the W3C to be the reformulation of W3C to be the reformulation of HTML as an application of XML. HTML as an application of XML.

XHTML combines the formatting XHTML combines the formatting strengths of HTML and the data strengths of HTML and the data structure and extensibility structure and extensibility strengths of XML. strengths of XML.

77

XMLXML An XML document must be An XML document must be well-formedwell-formed..

• Use lowercaseUse lowercase• Use opening and closing tagsUse opening and closing tags

<body> </body><body> </body>• Close stand-alone tag with special syntaxClose stand-alone tag with special syntax

<hr /><hr /> XML documents begin with an XML XML documents begin with an XML

directive. The basic form of this directive directive. The basic form of this directive is:is:

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

88

DocumentDocumentType Definition (DTD)Type Definition (DTD) W3C Recommendation: Use a Document W3C Recommendation: Use a Document

Type Definition to identify the type of Type Definition to identify the type of markup language used in a web page. markup language used in a web page.

XTML 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

XHTML 1.0 StrictRequires exclusive use of Cascading Style Sheets. We will not use this.

XHTML 1.0 FramesetRequired for pages using XHTML frames. We will use this with our frames pages later in the text.

99

XHTML 1.0 Transitional DTDXHTML 1.0 Transitional DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!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>

1010

First Web PageFirst Web Page

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!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">

<html> an opening tag<html> an opening tag

.... page info goes here.... page info goes here

</html> a closing tag</html> a closing tag

1111

Head & Body SectionsHead & Body Sections

HeadHead Section -- Contains Section -- Contains information that describes information that describes the web page document. the web page document. <head><head>……head section info goes herehead section info goes here</head></head>

BodyBody Section -- Used for text Section -- Used for text and tags that and tags that dodo show show directly on the web page. directly on the web page. <body><body>……body section info goes herebody section info goes here</body></body>

1212

XHTMLXHTML<head> and <body> tags<head> and <body> tags

<?xml version="1.0" encoding="UTF-8"?><?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!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"><html><html> <head><head>

.... Header info goes here.... Header info goes here </head></head> <body><body> .... Body info goes here.... Body info goes here

</body></body></html></html>

1313

Questions?Questions? 1. Describe the origin, purpose, and 1. Describe the origin, purpose, and

features of HTML.features of HTML. 2. Explain why you would use XHTML 2. Explain why you would use XHTML

instead of HTML.instead of HTML. 3. Describe the purpose of the 3. Describe the purpose of the

header and body sections of a web header and body sections of a web page.page.

XHTMLXHTML<title> and <meta /> tags<title> and <meta /> tags

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<!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"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head><head>

<title>My First Web Page</title> <title>My First Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head></head> <body><body> .... Body info goes here.... Body info goes here

</body></body></html></html>

1515

XHTML <body> tag attributesXHTML <body> tag attributes bgcolorbgcolor

• Configures the background color of a web pageConfigures the background color of a web page

<body bgcolor=“#000066”><body bgcolor=“#000066”><body bgcolor=“white”><body bgcolor=“white”>

texttextConfigures the color of the text on the web pageConfigures the color of the text on the web page

<body bgcolor=“#000066” text=“#CCCCCC”><body bgcolor=“#000066” text=“#CCCCCC”><body bgcolor=“white” text=“red”><body bgcolor=“white” text=“red”>

Check the XHTML Reference in the Check the XHTML Reference in the textbook for more body tag attributestextbook for more body tag attributes

1616

XHTMLXHTML tag tag

Paragraph tagParagraph tag …paragraph goes here…paragraph goes here 

Used to group sentences and Used to group sentences and sections of text together. sections of text together.

Text that is contained by Text that is contained by and and tags will have a blank tags will have a blank line above and below it.line above and below it.

1717

XHTMLXHTML tag tag

Line Break tagLine Break tag Stand alone tagStand alone tag……text goes here text goes here 

This starts on a new line….This starts on a new line…. Used to force a new line when Used to force a new line when

the text on the web page the text on the web page document is displayed by a document is displayed by a browser.browser.

1818

Heading TagsHeading Tags

<h1>Heading Level 1</h1><h1>Heading Level 1</h1>






1919

XHTML List BasicsXHTML List Basics Definition ListDefinition List Ordered ListOrdered List Unordered ListUnordered List

2020

XHTMLXHTMLDefinition ListDefinition List

Useful to display a list of terms an Useful to display a list of terms an definitions or a list of FAQ and answersdefinitions or a list of FAQ and answers

<dl> tag<dl> tagContains the definition listContains the definition list

<dt> tag<dt> tagContains a defined termContains a defined term

<dd> tag<dd> tagContains a data definitionContains a data definition

2121

XHTMLXHTMLDefinition List ExampleDefinition List Example

<dl><dl>

<dt>IP</dt><dt>IP</dt>

<dd>Internet Protocol</dd><dd>Internet Protocol</dd>

<dt>TCP</dt><dt>TCP</dt>

<dd>Transmission Control<dd>Transmission Control

Protocol</dd>Protocol</dd>

</dl></dl>

2222

XHTMLXHTMLOrdered ListOrdered List

Used to convey information in an Used to convey information in an ordered fashionordered fashion

<ol><ol>Contains the ordered listContains the ordered list

• type attribute determinestype attribute determines numbering numbering scheme of list, default is numeralsscheme of list, default is numerals

<li><li>Contains an item in the listContains an item in the list

2323

XHTMLXHTMLOrdered List ExampleOrdered List Example

<ol><ol>

<li>Apply to school</li><li>Apply to school</li>

<li>Register for course</li><li>Register for course</li>

<li>Pay tuition</li><li>Pay tuition</li>

<li>Attend course</li><li>Attend course</li>

</ol></ol>

2424

XHTMLXHTMLUnordered ListUnordered List

Used to display information in bullet Used to display information in bullet pointspoints

<ul><ul>Contains the unordered listContains the unordered list• type attribute determines the type of bullet type attribute determines the type of bullet

point, default is discpoint, default is disc <li><li>

Contains an item in the listContains an item in the list

2525

XHTMLXHTMLUnordered List ExampleUnordered List Example

<ul><ul>

<li>TCP</li><li>TCP</li>

<li>IP</li><li>IP</li>

<li>HTTP</li><li>HTTP</li>

<li>FTP</li><li>FTP</li>

</ul></ul>

2626

XHTMLXHTML<pre> tag<pre> tag

Preformatted Text tagPreformatted Text tag The preformatted text tag preserves The preformatted text tag preserves

your formatting and displays the your formatting and displays the text in a fixed-width or monospace text in a fixed-width or monospace font. font.

<pre><pre> … …text goes heretext goes here Line breaks and formatting are preservedLine breaks and formatting are preserved</pre></pre> NOTE: You will unusually NEVER use NOTE: You will unusually NEVER use

the <pre> tagthe <pre> tag

2727

XHTMLXHTML<blockquote> tag<blockquote> tag

Blockquote tagBlockquote tag Used to indent a block of text Used to indent a block of text

for special emphasis. for special emphasis. <blockquote><blockquote>

… …text goes heretext goes here

</blockquote></blockquote>

2828

QuestionsQuestions 1. Describe the features of a heading 1. Describe the features of a heading

tag and how it configures the text.tag and how it configures the text. 2. Describe the difference between 2. Describe the difference between

ordered lists and unordered lists.ordered lists and unordered lists. 3. Describe the purpose of the 3. Describe the purpose of the

blockquote tag.blockquote tag.

XHTMLXHTMLLogical Style ElementsLogical Style Elements

Indicate the logical style of the text Indicate the logical style of the text displaydisplay

Common Logical Style Tags Common Logical Style Tags ◦ 

To cause text to be emphasized or to "stand out" To cause text to be emphasized or to "stand out" from surrounding text. from surrounding text.

This is importantThis is important

◦ To cause text to be emphasized in relation to other To cause text to be emphasized in relation to other

text on the page. Usually italics.text on the page. Usually italics.

Please notePlease note

XHTMLXHTMLPhysical Style ElementsPhysical Style Elements

Provide browser font configuration infoProvide browser font configuration info◦ Useful for browsers – but not always applicable Useful for browsers – but not always applicable

for other devices or user agents such as screen for other devices or user agents such as screen readersreaders

Common Physical Style TagsCommon Physical Style Tags◦ 

To display as bold textTo display as bold text This is importantThis is important

◦ 

To display text in italicsTo display text in italicsPlease notePlease note

3131

XHTMLXHTML tag tag

USE CSS INSTEAD USE CSS INSTEAD Font tagFont tag Used to format textUsed to format text Deprecated – will be dropped in future versions Deprecated – will be dropped in future versions

of XHTMLof XHTML Common attributesCommon attributes

• face -- configure the typeface or font name to be face -- configure the typeface or font name to be used to display the text. used to display the text.

• size – sets the size of the textsize – sets the size of the text• color – configures the color of the textcolor – configures the color of the text

This is large This is large blue text.blue text.

3232

XHTMLXHTMLSpecial CharactersSpecial Characters

Used to display special characters such as Used to display special characters such as quotes, copyright symbol, etc. quotes, copyright symbol, etc.

Character CodeCharacter Code© ©© ©< << <> >> >

See the Special Characters section textbook See the Special Characters section textbook for a detailed listfor a detailed list

3333

QuestionsQuestions 1. Describe three attributes of the 1. Describe three attributes of the

font tag and their use.font tag and their use. 2. Provide a reason for using logical 2. Provide a reason for using logical

style tags rather than physical style style tags rather than physical style tags.tags.

3. Describe the purpose of special 3. Describe the purpose of special characters.characters.

Documents

1 HTML intro The development of HTMLThe development of HTML The transition from HTML to XHTMLThe transition from HTML to XHTML XHTML syntax, tags, and