Scribd
Upload
65 views5 pages

XHTML: Ewebtech Website Development

XHTML (eXtensible Hypertext Markup Language) is a markup language used to display web page content. It is a stricter version of HTML that follows XML syntax rules. The document provides an example of a basic XML file describing a shop with items for sale. It then shows a very simple XHTML file with common elements like headings, paragraphs, links, and images. It includes a table that defines and describes various XHTML elements and their attributes. The document encourages testing XHTML skills by copying and modifying the example file.

Uploaded by

info4916
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
65 views5 pages

XHTML: Ewebtech Website Development

XHTML (eXtensible Hypertext Markup Language) is a markup language used to display web page content. It is a stricter version of HTML that follows XML syntax rules. The document provides an example of a basic XML file describing a shop with items for sale. It then shows a very simple XHTML file with common elements like headings, paragraphs, links, and images. It includes a table that defines and describes various XHTML elements and their attributes. The document encourages testing XHTML skills by copying and modifying the example file.

Uploaded by

info4916
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Website Development XHTML 1

eWebTech Website Development

Tutorial Series

Part 1

XHTML
Written by Andrew Carter

eWebTech
Website Development XHTML 2

XHTML (XML Hyper Text Markup Language) is a markup language


used to display content on web sites. Usually, when a users‟
browser requests a page from a webserver the content responded

XHTML is different from HTML because it is technically a form


of an XML file, following the same (strict) syntax and rules.

We‟re about to go through an example of a basic XML file. XML


files are not just used in webpages they are very useful for
storing information in a way which is readable to both humans
and machines.

<shop id=”50235”>
<information>
<name>Fred‟s Newsagents</name>
<postcode>XX00 0XX</postcode>
<town>Lidelham</town>
<county>Sussex</county>
<country>United Kingdom</country>
</information>
<items>
<item soldout=”no”>
<name>Apple</name>
<quantity>5</quantity>
<cost>£0.39</cost>
</item>
<item soldout=”no”>
<name>Crisps</name>
<quantity>2</quantity>
<cost>£0.59</cost>
</item>
<item soldout=”yes”>
<name>Chocolate Bar</name>
<quantity>0</quantity>
<cost>£0.60</cost>
</item>
...
</items>
</shop>
Figure 1 Example XML file describing a shop

Before we analyse Figure 1, let us make some definitions.

A node is one of the most basic elements of an XML file. In


Figure 1, the elements „shop‟, „information‟, „name‟,
„postcode‟, „town‟, „county‟, „country‟, „items‟, „item‟,
„name‟, „quantity‟ and „cost‟ can all be referred to as nodes.
Just to confuse things more, „shop‟, „information‟, „items‟,
and „item‟ can be referred to as parent nodes as they
encapsulate one or more nodes. The nodes encapsulated are
Website Development XHTML 3

defined as child nodes to the parent node encapsulating them.


For clarification, „items‟ is a parent node to its child node
„item‟, „item‟ also happens to be a parent node to its child
nodes „name‟, „quantity‟ and „cost‟.

Information can be added to nodes using attributes as well as


child nodes. In Figure 1 the „shop‟ node has an attribute
named „id‟ with a value of „50235‟. The „item‟ nodes also have
an attribute named „soldout‟ with a value of either „yes‟ or
„no‟.

This brief introduction to XML files is all you need for to


gain a sufficient knowledge on their syntax. The next part of
this chapter will, as discussed, handle XHTML files which are
a specific type of XML file.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>This is the page title</title>
</head>
<body>
<h1>This is a page heading</h1>
<p>
This is a paragraph. <a href=”http://www.google.com>Click Here for Google</a>
</p>
<img src=”http://www.mywebsite.com/myimage.jpg” alt=”my image” />
</body>
</html>
Figure 2 A very simple XHTML file

The XHTML file shown in Figure 2 is almost as simple as can be valid


for an XHTML file. The file starts with a document declaration,
ignore that for now as we will delve into them later. The first node
is „html‟ with an attribute referencing a URL declaring the format
the rest of the file adheres to. The child nodes of „html‟ are
„head‟ and „body‟. In the head section (within the „head‟ node),
XHTML files contain information which isn‟t displayed. This
information includes character set declarations, page titles,
information for search engines scanning the page, links to shortcut
icons, snippets and references to style information, snippets and
references to JavaScript code and much more data which can be
associated with the page. The body section (with the „body‟ node),
contains all of base information used to draw the page.

Use the Figure 3 to reference basic elements shown in Figure 2. For


further reference, the „img‟ node displays an image and the „a‟ node
specifies a link. The „alt‟ attribute specifies the text to display
if the image cannot be located, the „src‟ attribute specifies the
location of the image and the „href‟ attribute specifies the
location to take the user after clicking the link.
Website Development XHTML 4

Code Name Comments Attributes


p Paragraph Encapsulates text for a paragraph Standard Set
on the webpage.
h1 Heading 1 Text encapsulated here displays Standard Set
larger and in bold. Used a lot by
search engines to judge a pages
actual content.
b Bold Text Text encapsulated here displays Standard Set
in bold
table Table Encapsulates child nodes „tr‟ and „border‟,
„td‟ (in that order), for table „cellpadding‟,
rows and table cells. „cellspacing‟
div Division A rectangle you can use to group Standard Set
other elements – splitting the
page into „divisions‟. Main usage
becomes apparent alongside CSS.
a Anchor Used mainly for linking through „href‟,
to a URL. „target‟
iframe Internet Used to display a new web page „src‟,
Frame inside the current web page. „frameborder‟
link Link Used to reference style sheets, „href‟, „rel‟,
icons and RSS feeds. „media‟,
„type‟
script Script Used mainly for JavaScript code „src‟, „type‟,
inclusion. Code can be placed „language‟
inside the node or referenced
using the „src‟ attribute.
body Body Section Contains display data.
head Head Section Contains page information.
meta Meta Tags Contain instructions for the „name‟,
browser and search engines. Found „http-equiv‟,
in the head section. „content‟
title Page Title Found in head section,
encapsulates page title.
form Form Used to specify the behaviour of „action‟,
any „input‟ child nodes. Controls „method‟,
how a form is submitted to a „enctype‟
website.
input Input Element Used inside a „form‟ parent node. „type‟,
These can be anything check „name‟,
boxes, text boxes, radio boxes, „value‟
password boxes, submit buttons
and many more.
img Image Places an image on a page. „src‟, „alt‟
ul Bullet List Allows for a list of bullet Standard Set
points. The child node „li‟
defines one bullet.
ol Numbered List Allows for a list of numbered Standard Set
points. The child node „li‟
defines one numbered entry.
span Text Span Group text as a „span‟. Main Standard Set
usage is so you can apply style
conditions to portion of text
within a paragraph using CSS.
Table 1 Table of basic XHTML elements
Website Development XHTML 5

To test your XHTML skills, open up notepad (or a HTML editor) and
copy in the contents of Figure 2. Try playing around with adding
more elements and use Table 1 as a basic reference point. When
you‟re done save the file with the “.html” file extension – you may
need to switch the viewing mode to „All Files‟ in notepad first to
prevent it adding a “.txt” extension.

Below are some links which are there to help you as you play around
with your example webpages.

http://www.w3schools.com/tags/default.asp

http://xhtml.com/en/xhtml/reference/

You might also like