Date post: | 29-Dec-2015 |
Category: |
Documents |
Upload: | lee-howard |
View: | 218 times |
Download: | 0 times |
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<p> tag<p> tag
Paragraph tagParagraph tag<p><p> …paragraph goes here…paragraph goes here </p></p>
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 <p><p> and and </p> </p> tags will have a blank tags will have a blank line above and below it.line above and below it.
1717
XHTMLXHTML<br /> tag<br /> tag
Line Break tagLine Break tag Stand alone tagStand alone tag……text goes here text goes here <br /><br />
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>
<h2>Heading Level 2</h2><h2>Heading Level 2</h2>
<h3>Heading Level 3</h3><h3>Heading Level 3</h3>
<h4>Heading Level 4</h4><h4>Heading Level 4</h4>
<h5>Heading Level 5</h5><h5>Heading Level 5</h5>
<h6>Heading Level 6</h6><h6>Heading Level 6</h6>
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 ◦ <strong></strong><strong></strong>
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.
<strong>This is important</strong><strong>This is important</strong>
◦ <em></em><em></em> 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.
<em>Please note</em><em>Please note</em>
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◦ <b></b><b></b>
To display as bold textTo display as bold text <b>This is important</b><b>This is important</b>
◦ <i></i><i></i>
To display text in italicsTo display text in italics<i>Please note</i><i>Please note</i>
3131
XHTMLXHTML<font> tag<font> 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
<font face=“Arial” size=“6” color=“#000099”>This is large <font face=“Arial” size=“6” color=“#000099”>This is large blue text.</font>blue text.</font>
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.