XHTML Basics

XHTML
Ritu Devi
Web site development
● To develop a Web site, three steps:

1. Obtain the appropriate equipment
● Web Server – hardware and software
2. Register the Web Server to an Internet
Service Provider (ISP)
● Obtain the IP address and DNS address
3. Develop the contents
● Internet Programming
2
Internet Programming
● Web service is a kind of client / server process

● Need interaction between client and server
● Programming for providing Web service can
also be divided into
– Client-side programming: to define the operation to
be performed on the client’s machine
– Server-side programming: to define the operation to
be performed on the server
3
Internet
Database Web Server Web Client

Server-side Programming Client-side Programming
Skills that are often required: Skills that are often required:
• CGI • XHTML
• PHP • Javascript
• ASP • Java
• Perl • Dreamweaver
• Java Servlet, … • Flash
• SMIL, XML …
4
What is XHTML?
⚫ Unlike procedural programming languages, e.g. C, C++, XHTML

is a markup language that specifies the format of document to be
seen in browser
⚫ XHTML has replaced the HTML as the primary means of
describing the Web page content
⚫ Become a World Wide Web Consortium (W3C) recommendation
⚫ W3C is an industry consortium
⚫ Seeks to promote standards for the evolution of the Web and interoperability
between WWW products by producing specifications and reference software
⚫ Compared with HTML, XHTML provides more robust, richer and
extensible features
5
Features of XHTML
⚫ Platform independent
⚫ The same piece of code can give the same display in Mac, Linux and
Windows
⚫ Text-based
⚫ Program is written with ASCII characters
⚫ Can be written using a text editor, such as notepad
⚫ An XHTML file must have an extension of .html or .htm
⚫ Information is generally enclosed inside paired tags
⚫ E.g. <html> … </html>
⚫ There are many tags in XHTML. They specify different information
required to display the Web page content
start tag
end tag (with a /)
6
Basic Structure of XHTML
<html>

<head>
<title>
This is title, describing the content
</title>
</head>
<body>
This is body, main part of the page
</body>
</html>
7
useful for validating the code to
see if they meet the xhtml standard
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
comment


define the namespace of html
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program -
Welcome
</title> define the title of the web page
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html> <p> - new paragraph
8
Example
See the title defined in head
9 That’s the content defined in body

● An XHTML document can be divided into 2
sections
● head section
– contains information of how the page is formatted
– e.g. <title> … </title> can be found in head section
to indicate the title of the Web page when it is
shown in browser
● body section
– contains the actual page contents
– e.g. <p>Welcome to XHTML!</p> shows a line of
text “Welcome to XHTML!” on the new paragraph
10
Tags
⚫ Tags: case sensitive

⚫ For XHTML, <center> is different from <CENTER>
⚫ For HTML, it is case insensitive
⚫ Browse will not display information within tag that does not
understand
⚫ Tags: no precise positioning
⚫ Many start tags define attributes that provide additional
information
⚫ E.g. <html xmlns = "http://www.w3.org/1999/xhtml">
start tag attribute name attribute value

11
Common Tags – Headers
⚫ Some text may be more important than the others

⚫ XHTML provides six headers, called header elements, for
specifying the relative importance of information
⚫ <h1> … </h1>, <h2> … </h2> to <h6> … </h6>
⚫ It is assumed the text in <h1> is more important than that in
<h2> and so on so forth
⚫ By default, the size of the text that is more important is
bigger
12
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Internet and WWW How to Program -
Headers</title>
</head>
<body> 6 headers are all used

to indicate the relative
<h1>Level 1 Header</h1>
importance of text
<h2>Level 2 header</h2>
</body>
13 </html>
Text under <h1> has the largest size
14
Meta Tag
⚫ HTML interacts with the search engines

through using meta tag
These words are compared
with words in search requests
<head>
<meta name=“keywords” content=“lecture notes, html,
form, feedback”>
<meta name=“description” content = “this web site
describes …”>
</head>
Description of a page seen on searching
15
Linking Webpage
⚫ One of the most important XHTML features is the
hyperlink
⚫ Link to another resources, such as web page, image, etc.
⚫ Achieve by using the anchor tag <a>:
⚫ To a web page:
<a href=“http://www.eie.polyu.edu.hk”>PolyU</a>
anchor attribute The name on the Web
page that represents this
Value of the attribute:
link
The address of the Web page
16
strong tag lets the text to be
displayed with bold font
<body>
<h1>Here are my favorite
Other similar tags include
sites</h1> <u> underline and <em> italic
<p><strong>Click a name to go to that page.

</strong></p>
Four links create

<p><a href = "http://www.polyu.edu.hk">PolyU</a></p>

<p><a href = "http://www.eie.polyu.edu.hk">EIE</a></p>
<p><a href = "http://www.eie.polyu.edu.hk/~enpklun">
Dr Daniel Lun's Home</a></p>
<p><a href = "http://www.eie.polyu.edu.hk/
~enpklun/ENG224/ENG224.htm">ENG224 Home page</a></p>
</body>
Don’t introduce spaces between
17
different parts of a URL address
This line is shown with a bold font
Four links are included
18
Linking Email Addresses
⚫ To a mail address:
<a href=“mailto:enpklun@polyu.edu.hk”> Email me
</a>
⚫ With a subject:
<a href=“mailto:enpklun@polyu.edu.hk?subject=title”> Email
me
</a>
⚫ Multiple recipients:
<a href=“mailto:address1,address2, address3”> Email me
</a>
19
Linking Images
⚫ Background Image can be defined as an attribute of the

body tag:
<body background=“image.gif”>
⚫ To show an Image inside a page:
<img src=“image.gif” border=“0” height=“256”
width=“256” alt=“text description of the image”/>
⚫ We can create an image hyperlink
<a href=“page1.html”>
<img src=“image.gif” …/>
</a>
20
Will scale to this size to display
<body>
<p><img src = "xmlhtp.jpg"

height = "238“ width = "183"
alt = "XML How to Program book cover"/>
<img src = "jhtp.jpg"
height = "238" width = "183"
alt = "Java How to Program book cover"/>
</p>
</body>
empty element: jhtp.jpg in fact cannot be found.

do not markup text With the alt attribute, the statement
is displayed if the image is not found
21
“alt” statement (may not
display the same for
Netscape)
The image displayed at the

specified size
22
Color
⚫ 2 ways to specify:
⚫ Use hexadecimal numbers
⚫ RGB format: FF: strongest, 00 weakest
⚫ #FF0000
⚫ #00FF00
⚫ #0000FF
⚫ Use color names
⚫ Black, White, Red, Cyan, Green, Purple, Magenta,
Blue, Yellow, OrangeRed, SpringGreen, BlueViolet,
Gold, DarkGoldenrod, Burlywood, …
23
Color
⚫ Background color:
⚫ <body bgcolor=“#00FF00”> … </body>
⚫ <body bgcolor =“green”> … </body>
⚫ Text color, links, visited links and activated links:
⚫ <body bgcolor =“white” text=“black” link=“purple”
vlink=“blue” alink=“yellow”>
⚫ Font color:
⚫ <font color=“green”> … </font>
24
Formatting Text
⚫ The format of displayed text can be changed by using <font>
… </font>
⚫ Attributes:
⚫ Color:
⚫ Size:
⚫ Relative: +1, +2, -3, …
⚫ Absolute: 10, 12, …
⚫ Face:
⚫ Font used
⚫ Arial, Verdana, Helvetica, Times, …
⚫ Multiple fonts:
⚫ <font face="Arial, Helvetica, sans-serif">
25
background color is yellow
<body bgcolor = “#ffff00”>
<p><font face="courier" color="green" size=“24”>
This is a test.</font> horizontal ruler
<hr />
<font face="times" color="red" >
This is a test.</font> the backslash is only
</p> to improve readability
<p>
<font face="arial" color="red" size=“+1”>
See the This is a test.</font>
difference <br />
between<font face="times" color="#ff00ff" size=“+2”>
This is a test.</font>
<p> and
</p>
<br> <p align = center><font face="courier" size=“+3”>
This is a test.</font>
26 </p> the text is placed at the center
</body>
size = 24
default size
size = +1, +2, +3
27
Lists
⚫ Unordered list
⚫ a list that does not order its items by letter or number
⚫ <ul> … </ul> creates a list where each item begins with a
bullet
⚫ List items: <li> … </li>
⚫ For example
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
28
Lists
⚫ Ordered list
⚫ List that order their items by letter or
number
⚫ <ol type=“style”> … </ol>
When style equals to
⚫ 1: decimal, 1, 2, 3, …
⚫ I: uppercase Roman, I, II, III, …
⚫ i: lowercase Roman, i, ii, iii, …
⚫ A: uppercase Latin, A, B, C, …
⚫ a: lowercase Latin, a, b, c, …
⚫ List items: <li> … </li>
29
Table
⚫ Organize data into rows and columns
Table caption
Table header
Table body
Table footer
30
Table border
● <table attribute=“value”> … </table>
● Attribute examples:
– border=“1” ⇒ the larger the number, the thicker is the border.
“0” means no border
– align=“center” ⇒ the table is aligned at the center of the
browser
– width=“60%” ⇒ to set the table width to 60% of the browser’s
width
● Caption of the table: <caption> … </caption>
● Insert a table row: <tr> … </tr>
● The head, body and foot sections are defined by
<thead> … </thead>
<tbody> … </tbody>
<tfoot> … </tfoot>
31
<table border = "1" width = "40%" align = left
summary = "This table provides information about
the price of fruit">
<caption><strong>Price of Fruit</strong></caption>
<thead>
<tr> 
<th>Fruit</th> 
<th>Price</th>
</tr> The use of th tag
</thead> defines the
The tr tag insert content of header
<tbody> a new row or footer cells
<tr>
<td>Apple</td> 
<td>$0.25</td>
</tr>
32
<tr> <tfoot>
<td>Orange</td> <tr>
<td>$0.50</td> <th>Total</th>
</tr> <th>$3.75</th>
<tr> </tr>
<td>Banana</td> </tfoot>
<td>$1.00</td> </table>
</tr>
<tr>
<td>Pineapple</td>
<td>$2.00</td> The use of th tag
</tr>
The use of td tag defines the
</tbody> content of header
defines the
content of body or footer cells
cells
33
34
Col span and Row span
⚫ colspan and rowspan allow merging columns/rows
⚫ <colspan=“number”>
⚫ data cell spans more than one column
⚫ <rowspan=“number”>
⚫ data cell spans more than one row
35
<table border=“1” width=“60%”>
<caption> Average Grades </caption>
<tr>
<th colspan=“4”> Report </th> first row
</tr>
<tr>
<th> </th> <th> 2000 </th> <th> 2001 </th>
<th> 2002 </th>
</tr> 2nd row
<tr>
<td> Maths </td> <td> A </td> <td rowspan=“2”
valign=“center”> B </td> <td> C </td>
</tr>
<tr> vertical alignment 3rd row
<td> English </td> <td> C </td> <td> A </td>
</tr>
</table>
4th row
36
37
Forms
⚫ When browsing web

sites, users often need
to provide information
such as email address,
search keywords, etc
⚫ Forms allows user to
input information
38
A C
pp GI Internet
Web Server Web Client
1
www.abc.com/form.htm
2
www.abc.com
method = post or get
3
action = program name
(script) in server to
receive the data
Name = ???
and others
39
● A form element is inserted into a web page by the
<form> tag
● <form method = “value1” action = “value2”> … </form>
● Attributes:
– method = “post” or “get”
● Indicates the way the Web server will organize and
send you the form output
● post: causes changes to server data, e.g., update
a database
● get: does not cause any changes in server-side
data, e.g., make a database request
– action = “”
● Path to script, e.g., CGI
40
use post method script that will be called to
execute in the server
<form method = “post” action = “/cgi-bin/formmail”>

<input type=“radio” name=“size” value=“large”
checked=“checked”/> large
<input type=“radio” name=“size” value=“medium”/>
medium
<input type=“radio” name=“size” value=“small”/>
small
</form>
Only the radio

button of large is
checked
41
Forms
⚫ Elements inside a form are introduced by the <input> tag

⚫ <input>
⚫ type=“hidden” name=“variable name”
value=“value that sends to the server”
⚫ type =“text” name=“” value =“” size=“25”
⚫ type =“submit” value =“”
⚫ type =“reset” value =“”
⚫ type =“checkbox” value =“” name=“”
42
Form example 1
Thing that sends back to server
<input type=“checkbox” name=“things”

value=“ham”/> Ham
value=“sweetcorn”/> Sweet Corn Indicate all 5
<input type=“checkbox” name=“things” checkboxes
value=“mushroom”/> Mushroom belong to the
<input type=“checkbox” name=“things” same group
value=“chicken”/> Chicken
value=“peas”/> Peas
The words show on screen
43
Form example 2
Data that would send to

server but do not display on
screen
<input type="hidden" name=“title" value="Feedback" />
<p><label>Name:
<input type= "text" name= "name" size="25"
maxlength="30"/>
</label>
send the input the textbox to server
</p>
<input type= "submit" value="Submit your entries"/>
<input type= "reset" value="Clear Your Entries"/>
44 clear the content of textbox
Form example 3
Masked by asterisk
Space is counted here
<p><label>Comments:<br />
<textarea name= "comments" rows="4" cols="36">
Enter your comments here.
</textarea> </label></p>
<p><label>Please input your password:
<input name= "secret" type="password" size="25"/>
</label></p>
<input type= "submit" value="Submit Your Entries"/>
45<input type= "reset" value="Clear Your Entries"/>
Form example 4
The “selected” value here

mean Amazing is selected
default value
<p><label>Rate our site:
<select name= "rating">
<option value=“Amazing”
selected="selected">Amazing</option>
<option value=“3”>3</option>
<option value=“2”>2</option> Change to default
<option value=“1”>1</option> value when reset
<option value=“0”>0</option>
</select></p>
<input type= "submit" value="Submit Your Entries"/>
46 <input type= "reset" value="Clear Your Entries"/>

XHTML Basics

Uploaded by

XHTML Basics

Uploaded by

XHTML

● To develop a Web site, three steps:

● Web service is a kind of client / server process

Database Web Server Web Client

⚫ Unlike procedural programming languages, e.g. C, C++, XHTML

9 That’s the content defined in body

⚫ Tags: case sensitive

start tag attribute name attribute value

⚫ Some text may be more important than the others

<body> 6 headers are all used

⚫ HTML interacts with the search engines

<p><strong>Click a name to go to that page.

<p><a href = "http://www.polyu.edu.hk">PolyU</a></p>

Four links are included

⚫ Background Image can be defined as an attribute of the

<p><img src = "xmlhtp.jpg"

empty element: jhtp.jpg in fact cannot be found.

The image displayed at the

size = +1, +2, +3

⚫ Organize data into rows and columns

⚫ When browsing web

<form method = “post” action = “/cgi-bin/formmail”>

Only the radio

⚫ Elements inside a form are introduced by the <input> tag

<input type=“checkbox” name=“things”

The words show on screen

Data that would send to

<input type="hidden" name=“title" value="Feedback" />

The “selected” value here

You might also like