Scribd
Upload
16 views

Structuring Web Pages With XHTML: Session 1

Uploaded by

Phuntsok Dhondup
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
16 views

Structuring Web Pages With XHTML: Session 1

Uploaded by

Phuntsok Dhondup
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 24

Structuring web pages with XHTML

Session 1

2007 Copyright Birkbeck University of London


XHTML and HTML

• XHTML is the successor of HTML


• Both are markup languages; they give instructions to a
web browser on how a web page should be displayed
• HTML can include formatting instructions; XHTML should
not. Formatting should be provided by cascading style
sheets (CSS)
• HTML is flexible; XHTML is not. XHTML must be well-
formed
• HTML includes formatting tags which are deprecated i.e.
not allowed, in XHTML
• XHTML is designed to work with new technologies (e.g.
PDAs and mobile phones), HTML was not
XHTML and HTML

<p> <h1>XHTML versus HTML</h1>


<h2>Understanding the Differences </h2>
<strong>
<p>
<font color=”#FFCCCC” Lorem ipsum dolor sit amet, consectetuer
face=”Verdana” size=”6"> XHTML adipiscing elit.Fusce convallis laoreet
versus HTML</font> </p>
</strong>
<em>
<font color=”#CCCCCC”
face=”Verdana” size=”4"> XHTML does not include
Understanding the Differences formatting tags. Formatting
</font>
provided by CSS
</em>
<br />Lorem ipsum dolor sit amet,
consectetuer adipiscing
elit.Fusce convallis laoreet . .
. . . </p>

HTML includes
formatting tags
XHTML and HTML

XHTML versus HTML Same result but:


Understanding the Differences
Lorem ipsum dolor sit amet, • XHTML file is smaller
consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin volutpat
metus vel nisl. Nam rutrum volutpat • XHTML file is search engine
turpis.
friendly
• XHTML file is easier to read
and edit
XHTML and HTML

• XHTML elements must be properly nested


HTML:
<p><strong>Warning Signs</p></strong>
XHTML:
<p><strong>Warning Signs</strong></p>

• XHTML elements must always be closed


HTML:
<p><strong>Warning Signs</strong>
XHTML:
<p><strong>Warning Signs</strong></p>
XHTML and HTML

• XHTML tags must be written in lowercase


HTML:
<P><STRONG>Warning Signs</P></STRONG>
XHTML:
<p><strong>Warning Signs</strong></p>

• XHTML documents must have root html tag


<html>
<head>
<title>XHTML for Beginners</title>
</head>
<body>
<p><strong>Warning Signs</strong></p>
</body>
</html>
XHTML and HTML

• Some HTML tags are deprecated (not accepted) in


XHTML. These include:
– Common HTML formatting and layout tags
• <font></font>
• <u></u>
• <center></center>
– Tags that should never have been created in the first
place
• <blink></blink>
• <marquee></marquee>
XHTML files

• HTML and XHTML files are text files


• Both can have the file extensions *.html or *.htm (UNIX
conventionally used *.html, early versions of Windows
*.htm
• *.html now the standard. So, always use *.html
• HTML and XHTML files can be created and edited with
any text editor (e.g. Notepad, WordPad)
• Do not use MS Word or FrontPage to create web pages.
Word creates a complex and un-editable version of
HTML
XHTML tags

• XHTML tags are used to add structure to web pages


• Tags are always enclosed inside a pair of less than and a
greater than symbols <>
• Most tags are containers; they have a start element
and an end element. The end element must include a /
symbol. E.g. <p>Some content </p>
Examples of container tags are <p></p> (paragraph)
and <h1></h1> (top-level heading)
• Some tags are not containers. These tags never contain
content. Examples of non-container tags are <img />
(image) and <hr /> (horizontal rule)
An example XHTML page

<html> • Main structural


<head>
<title>XHTML for Beginners</title> elements
</head> <html></html>
<body>
<h1>Getting Started with XHTML</h1> <head></head>
<p>Lorem ipsum dolor sit amet, <body></body>
consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin volutpat • The head and the
metus vel nisl. Nam rutrum volutpat
turpis.</p>
body are nested
</body> inside the html
</html>
container.
Elements of an XHTML page

• <html></html>
<html>
<head>
<title>XHTML for Beginners</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin volutpat
metus vel nisl. Nam rutrum volutpat
turpis.</p>
</body>
</html>

• The html tag instructs the browser that the content it is


rendering is HTML (XHTML)
Elements of an XHTML page

• <head></head>

<html>
<head>
<title>XHTML for Beginners</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin volutpat
metus vel nisl. Nam rutrum volutpat
turpis.</p>
</body>
</html>

• The head contains the page title and elements not visible in the
browser window, such as descriptive information about the page
and scripts such as JavaScript
Elements of an XHTML page

• <body></body>
<html>
<head>
<title>XHTML for Beginners</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin volutpat
metus vel nisl. Nam rutrum volutpat
turpis.</p>
</body>
</html>

• The body contains presentational elements that are


displayed in the browser window. Most coding is done in
the body section
Elements of an XHTML page
• <h1></h1> (heading 1) & <p></p> (paragraph)
<html>
<head>
<title>XHTML for Beginners</title>
</head>
<body>
<h1>Getting Started with XHTML</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin volutpat
metus vel nisl. Nam rutrum volutpat
turpis.</p>
</body>
</html>

• Heading and paragraph tags structure the textual content rendered by


the browser. A browser will typically render text inside a heading
container as large and bold and any text inside a paragraph container as
standard, unformatted text.
• Browsers wrap the text automatically.
Hands-on exercises

• Now do
– Hands-on 1 – Structuring web pages with XHTML
More XHTML tags

• Headers
• <h1>A heading</h1> A heading
• <h2>A heading</h2> A heading
• <h3>A heading</h3> A heading
• <h4>A heading</h4> A heading
• <h5>A heading</h5> A heading

• <h6>A heading</h6> A heading

Give clarity and logical division to textual content


Use only one <h1></h1> per page
More XHTML tags

• Horizontal Rule <hr />

Divide some page content

From some other page content

Non-container tag
More XHTML tags

• Line breaks <br />


• Paragraph and heading tags are block-level elements
• Block-level elements normally have a full line of padding
above and below them

Lorem ipsum dolor sit amet, • Where you want to


consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin position one element
volutpat metus vel nisl. Nam rutrum
volutpat turpis. immediately after another
Lorem ipsum dolor sit amet,
use a line break tag <br />
consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin 17 West View
volutpat metus vel nisl. Nam rutrum Terrace
volutpat turpis. London
W3 9YU
Writing readable code

• XHTML documents can be long and complex


• Coders must try to make them accessible to others
• There are two main devices for making code more
readable:
– Indentation
– Comments
Writing readable code

• Non-indented code is difficult to follow

<html>
<head>
<title>XHTML for Beginners</title>
</head>
<body>
<h1>Getting Started with XHTML</h1>
<p> Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce
convallis laoreet nibh. Proin volutpat
metus vel nisl. Nam rutrum volutpat
turpis. </p>
<ul><li>Tibkl</li><li>Miklo</li></ul>
</body>
</html>
Writing readable code

• Indented code makes it easy to see where tags begin


and end
<html>
<head>
<title>XHTML for Beginners</title>
</head>
<body>
<h1>Getting Started with XHTML</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Fusce convallis laoreet nibh. Proin volutpat metus
vel nisl. Nam rutrum volutpat turpis.
</p>
<ul>
<li>Tibkl</li>
<li>Miklo</li>
</ul>
</body>
</html>
Writing readable code

• Comments <!– some explanation of code -->


 Comments are used by professional authors to
document their code so others can more easily
understand it.
 Browsers ignore any text or tags inside comments.
 Comments at the top of a page explain the purpose
of the page and give contact details of the author.
 Comments are sometimes removed from production
sites to cut file size but they are vital on development
sites.
Writing readable code

<!–- always put departures times before arrival times in this


section -->
<p>Times of flights from European Capitals</p>
<ul>
<li>
Paris
<ul>
<li>09:30</li>
<li>12:30</li>
</ul>
</li>
<li>Rome</li>
</ul>
Hands-on exercises

• Now do
– Hands-on 2 – Adding additional Structure with XHTML

You might also like