MA foundation Creating webpages using XHTML (part 1) Simon Mahony CCH [email protected].

MA foundation

Creating webpages using XHTML (part 1)

Simon Mahony CCH

[email protected]

Basic (minimum) structure of a web page:

<html><head>

<title>[page title (note where this is displayed)]

</title></head>

<body> [page content goes here]

[ie everything displayed in the browser]</body>

</html>

HTML vs XHTML

• HTML – displays your data

• XHTML – describes your data (HTML + XML)

• XHTML – separates style from content – structural and semantic markup– stricter syntax

• CSS – used to style XHTML pages (part 3)

Example of the difference

I really liked the characterisation of Ajax in Homer’s Iliad.

• HTML does not allow us to distinguish between the different uses of the italics

• With XHTML we can mark these up differently to differentiate between emphasis and the book title.

• Using XHTML we can also add more information if we wished (as with XML).

<!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=UTF-8" /><meta http-equiv="Content-Language" content="en-gb" /><title>TITLE OF THE DOCUMENT</title></head>

<body>

<p>CONTENT OF THE WEBPAGE</p>

</body></html>

Template (provided) for a basic XHTML page

Elements and attributes• Elements

– Start tag <p>– End tag </p>– Content within those tags (some text)

• Attributes– Describe the element (tell you something about it)

– Syntax:

Attribute_name="attribute value"

Eg: <h2 class="style1">second level heading</h2>

<img src="image.jpg" height="100" Width="100" alt="photo" />

Block-level and line-level tags

• block-level<h1> </h1> (h1, h2, h3, h4, h5)

<p> </p>

<table> </table>

<div> </div> (exception to rule)

• line-level<em> </em>

<strong> </strong>

Nesting elements

<body>

<p>

<strong><em>Some text</em></strong>

<strong><em> Some text</strong></em>

</p>

</body>

Empty elements

• <br /> line break - forces white space

• <hr /> horizontal rule

• <img src="filename" /> link to an image

Adding lists to you webpage• ordered list:

<ol><li>list item</li><li>another list item</li>

</ol>

• unordered list:<ul>

<li>list item</li><li>another list item</li>

</ul>

Definition list

<dl>

<dt>definition term</dt>

<dd>definition</dd>


<dd>definition</dd>


<dd>definition</dd>

</dl>

Adding images to your pages• Syntax

<img src="filename"width="width in pixels"height="height in pixels"alt="short description of the image" />

• Example<img src="image.jpg"height="100"Width="100"alt="photo of kcl" />

MA foundation Creating webpages using XHTML (part 1) Simon Mahony CCH [email protected].

Documents

Transcript of MA foundation Creating webpages using XHTML (part 1) Simon Mahony CCH [email protected].