Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
171 views

XHTML Tutorial: Author: Dwight Vantuyl Created: September 15, 2008

The document provides an overview of XHTML including: 1. It discusses the background of SGML, XML, and HTML and how XHTML evolved from these. 2. It explains some key differences between HTML (for content) and CSS (for presentation), and mandatory XHTML elements like DOCTYPE, head, and body. 3. It provides examples and explanations of common XHTML elements like paragraphs, headers, lists, links, and gives guidelines for proper XHTML syntax and structure.

Uploaded by

Revathi Patteboina
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
171 views

XHTML Tutorial: Author: Dwight Vantuyl Created: September 15, 2008

The document provides an overview of XHTML including: 1. It discusses the background of SGML, XML, and HTML and how XHTML evolved from these. 2. It explains some key differences between HTML (for content) and CSS (for presentation), and mandatory XHTML elements like DOCTYPE, head, and body. 3. It provides examples and explanations of common XHTML elements like paragraphs, headers, lists, links, and gives guidelines for proper XHTML syntax and structure.

Uploaded by

Revathi Patteboina
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

XHTML Tutorial

Author: Dwight VanTuyl


Created: September 15, 2008
SGML Background
SGML

XML

HTML
XHTML
Content vs. Presentation
• HTML (content)
– Historically was used for rendering content and
presentation
– Now, push is to use only for describing content – e.g.
Header, paragraph, list, image, etc.
– Still backwards compatible and can be used for
presentation
• CSS (presentation)
– Introduced after the web started getting really ‘fancy.’
– Now, we use a separate CSS file for the
presentation – e.g. Layout, color, font, position, size,
etc.
W3C
• The World Wide Web Consortium (W3C)
is the main international standards
organization for the World Wide Web
(abbreviated WWW or W3).
• Learn more about HTML and XHTML at:
http://www.w3schools.com/
• Also Check Out:
HTML For the World Wide Web by Elizabeth Castro
Elements and Attributes
<element_name attribute_name="attribute_value">
Element Content
</element_name>
• Elements (aka tags): specify the type of content
– how the content will be used in an XML
document. XHTML defines its own set of valid
element_names (e.g. head, body, h1).
• Attributes: give special properties to each
element. Again, XHTML defines its own set of
valid attribute_names (e.g. class, style, id).
Important XHTML Rules
• Elements must be properly nested
– Wrong: <ul><li>blah blah</ul></li>
– Right: <ul><li>blah blah</li></ul>

• Elements must always be closed


– Wrong: <p>Hello. This is paragraph that isn’t closed.
– Right: <p>This is the right way.</p>

• Element and Attribute names must be in lowercase


– Wrong: <A HREF=“http://linguistlist.org” TARGET=“_blank”/>
– Right: <a href=“http://linguistlist.org” target=“_blank”/>

• Attribute values must be quoted


– Wrong: <a href=http://linguistlist.org target=_blank/>
– Right: <a href=“http://linguistlist.org” target=“_blank”/>
Mandatory XHTML Elements

• the DOCTYPE
• the Head
• the Body
DOCTYPE
(example01.xhtml)
<!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" xml:lang="en" lang="en">


<head>
<title>Example Title</title>
</head>
<body>
</body>
</html>
DOCTYPE
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

• Defines the type of document to render


and references the DTD schema.
• An XHTML DTD describes in precise,
computer-readable language, the allowed
syntax and grammar of XHTML markup.
<head>
(example01.xhtml)
<!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" xml:lang="en" lang="en">


<head>
<title>Example Title</title>
</head>
<body>
</body>
</html>
<head>
<head>
<title>Example Title</title>
</head>

• The head element contains general information,


also called meta-information, about a
document.
• XHTML requires the <title> element specified in
the <head> element.
• Other elements in the <head> include
references to css files and javascript files used
in the page.
<body>
(example01.xhtml)
<!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" xml:lang="en" lang="en">


<head>
<title>Example Title</title>
</head>
<body>
</body>
</html>
<body>
<body>
</body>

• The main XHTML element for all rendered


elements and their content.
Validation
• Firefox Web Developer Toolbar
• http://chrispederick.com/work/web-developer/

• Local Files (on your computer):


– Tools => Validate Local HTML
• Live Files (on the server):
– Tools => Validate HTML
Comments
• XHTML Comments begin with <!-- and end with
-->
• At the top of the file should be a note from the
creator, and then a log of every change made
by the creator or any updater.
• Example:
<!--
Author’s name: Dwight VanTuyl
Created: Sept 15 2008
Description: Example page for XHTML Tutorial.
-->
Comments
(example02.xhtml)
<!--
Author’s name: Dwight VanTuyl
Created: Sept 15 2008
Description: Example page for XHTML Tutorial.
-->

<!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" xml:lang="en" lang="en">


<head>
<title>Example Title</title>
</head>
<body>
</body>
</html>
Character Entities
• Special Characters, ones that have
specific meaning in XHTML syntax, need
to be represented differently.
• space : &nbsp;
• < : &lt;
• > : &gt;
• & : &amp;
• “ : &quot;
Character Entities
(example03.xhtml)
&lt;
&nbsp;
&gt;
&nbsp;
&amp;
&nbsp;
&quot;
Character Entities
(example03.xhtml -- rendered)
Header Elements <h1>…<h6>
• Historically used for defining ‘header’ type
presentation of content – not pretty.
• Now used for semantically defining a header to
web crawlers and other non-human readers in
order to recognize the headers in a page.
• Backwards compatible -- still defines a
‘header’ type presentation.
• Block level element (not inline). Starts a new
line after the element is closed.
Header Elements <h1>…<h6>
(example04.xhtml)

<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
Header Elements <h1>…<h6>
(example04.xhtml -- rendered)
Horizontal Rule <hr/>
• Render’s a horizontal line across the width
of the containing element.
• Empty – doesn’t contain any content so it
is closed within the tag.
• !!! Always close your tags !!!
Horizontal Rule <hr/>
(example05.xhtml)

<hr/>
Horizontal Rule <hr/>
(example05.xhtml -- rendered)
Paragraph <p>
• Renders a block of text that wraps its
content within the containing paragraph
element.
• XHTML automatically adds an extra blank
line before and after a paragraph.
Paragraph <p>
(example06.xhtml)
...
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum posuere mi eget odio. Donec at libero sit amet nunc
venenatis fringilla. Sed a magna. Phasellus nec eros. Nulla
gravida imperdiet elit. Aliquam tempor, diam quis pharetra
rutrum, purus ipsum porta lectus, eu sollicitudin turpis ante ut
felis. Donec sollicitudin posuere augue. Proin dui quam, blandit
non, sagittis tempus, feugiat sed, lacus. Duis in massa quis nibh
iaculis dignissim. Nam non quam. Praesent viverra suscipit justo.
Quisque mauris mi, adipiscing et, viverra vel, molestie sed, justo.
Maecenas vel augue sit amet eros egestas tempor. Maecenas
sed urna quis tortor molestie venenatis. Vestibulum id sapien.
Integer tempus magna vel justo.
</p>
Paragraph <p>
(example06.xhtml -- rendered)
Line Break <br/>
• Even though you may have added line breaks
within your content by using the [Enter] key, they
will not render -- you must use the <br/>
element.
• Empty – doesn’t contain any content so it is
closed within the tag.
• Don’t go overboard!! Using more than one or
two line breaks at a time is considered bad style.
Use CSS for positioning elements on the page
instead.
Line Break <br/>
(example07.xhtml)
...
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum
posuere mi eget odio. Donec at libero sit amet nunc venenatis fringilla.
Sed a magna. Phasellus nec eros. Nulla gravida imperdiet elit. Aliquam
tempor, diam quis pharetra rutrum, purus ipsum porta lectus, eu
sollicitudin turpis ante ut felis. Donec sollicitudin posuere augue.
<br/><br/>
Proin dui quam, blandit non, sagittis tempus, feugiat sed, lacus. Duis in
massa quis nibh iaculis dignissim. Nam non quam. Praesent viverra
suscipit justo. Quisque mauris mi, adipiscing et, viverra vel, molestie
sed, justo.
<br/></br>
Maecenas vel augue sit amet eros egestas tempor. Maecenas sed
urna quis tortor molestie venenatis. Vestibulum id sapien. Integer
tempus magna vel justo.
</p>
Line Break <br/>
(example07.xhtml -- rendered)
Lists <ul> & <li>
• Used for rendering a bulleted list of items
(bullet can be changed to any char or no
char at all using CSS).
• <li> item </li> elements are enclosed in
<ul> </ul> tags.
• Must NOT put any content inside <ul>
elements unless inside of <li> element.
• <li> elements can NOT be used alone
without being nested inside <ul> tags.
Lists <ul> & <li>
(example08.xhtml)

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Lists <ul> & <li>
(example08.xhtml -- rendered)
Anchor & Hyperlink <a href=“ ”>
• Directs browser to an HTML page, an
image, a sound file, a movie, etc.
• Attributes:
– href: link destination to a URL, #id of an
element, or image file name.
– target=‘_blank’: use if opening in new window
• Inline element (not block)
Anchor & Hyperlink <a href=“ ”>
(example09.xhtml)

<a href="http://linguistlist.org">Link to Linguist List</a>

<a href="http://www.google.com" target="_blank">Open new window


to Google</a>

<a href="#goat">Link to Header 1 on this page</a>


Anchor & Hyperlink <a href=“ ”>
(example09.xhtml -- rendered)
Image <img />
• Renders an image from the defined source
attribute.
• Empty – doesn’t contain any content so it
is closed within the tag.
• Block level element.
• Attributes:
– src: source location of the image file.
– alt: alternative text for the image if it doesn’t
display.
Image <img />
(example10.xhtml)
<hr/>

<img src="pig.jpg" alt="Pig" />

<hr/>
Image <img />
(example10.xhtml -- rendered)
Tables <table><tr><td>
• DON’T USE TABLES – unless absolutely necessary.
• Why? Its better to separate content (HTML) from
presentation (CSS).
– Easier to maintain
– Easier to modify
– Cleaner code
• Most everything tables are used for can and should be
done with CSS.
• Why learn tables? Because linguistlist.org, like much of
the web, was built long before CSS came around. Tables
were used to provide layout to a page. So we need to
understand tables in order to maintain old pages. Even
now, people still use tables who don’t understand CSS.
• Don’t create tables! Learn CSS instead!
Tables <table><tr><td> cont.
• <table> : encloses the whole table
• <tr> : defines a table row
• <td> : defines a column in a table row.
This is where your content belongs.
• !!! Don’t put content in anything but the
<td> !!!
Tables <table><tr><td> cont.
• Table Structure:
<table>
<tr>
<td>
row1 col1
</td>
<td>
row1 col2 row1 col1 row1 col2
</td>
</tr>
<tr>
<td>
row2 col1 row2 col1 row2 col2
</td>
<td>
row2 col2
</td>

</tr>
</table>
Tables <table><tr><td>
(example11.xhtml –rendered)
CSS Preview
• Adding tables in order to layout content
makes html unwieldy and difficult to
understand.
• Better solution is to NOT use tables and
position all elements with a separate CSS
file.
• CSS is used for the “presentation” part of
a web page – e.g. color, size, position,
layout, font, etc.
CSS Preview cont.
• CSS properties can be attached to most
elements with two important attributes:
– id: the specific identity of an element – like social
security number
– class: a grouping name to add a style to many
elements.
• We’ll also learn two new elements that help CSS
out but do not render anything on their own:
– div
– span

You might also like