XHTML and CSS

Mobile Website Development
XHTML and CSS
Facilitated by:
Michael Wakahe
Tawi Commercial
Services Ltd
Jul 2011

Table of Contents
 XHTML MP
 CSS
 JSP
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.

XHTML MP
Reserved.

XHTML MP
 XHTML MP = XHTML Mobile Profile
 XHTML uses the tag set of HTML and enforces the
rigorous syntax requirements of XML
 XHTML-MP is currently considered the de facto
standard language for Mobile Web development
Reserved.

XHTML MP
 XHTML 1.0 Reference (not XHTML MP 1.0):
http://www.w3.org/TR/2000/REC-xhtml1-20000126/
• XHTML MP 1.0 Document Type Definition (DTD):
http://www.wapforum.org/DTD/xhtml-mobile10.dtd
Reserved.

XHTML MP
<?xml version="1.0" encoding="UTF-8"?>


<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<title>Annotated XHTML Example</title>
</head>
<body>
<div class="hdr">Annotated XHTML Example</div>
</body>
</html>
Reserved.

XHTML MP
XHTML Element Reason for Exclusion
frame, frameset, iframe,
noframes
Frames have significant browser memory
requirements, including new
DOM instances. Frames are not usable on small
screens.
applet Java applets are not supported in mobile browsers
or natively on mobile
devices. Java SE is not supported on mobile
devices.
area, map Image maps are not supported nor easy to use on
mobile devices.
basefont Specify default font styles using CSS.
Reserved.
XHTML Elements Unsupported in XHTML-MP

XHTML MP
bdo Bidirectional text is not supported.
button Use <input type="submit"> for push buttons.
center Use CSS to align page elements.
col, colgroup Only basic tables are supported. See the next section for
details.
del, ins, s, strike Use CSS to style text to appear as deleted from, inserted into,
or struck from the document.
dir, menu Use CSS to style text to appear as directory or menu lists.
font Use CSS to specify font styles.
legend Basic forms are supported. Legends are not supported in
fieldsets.
noscript, script Supported only in XHTML-MP 1.1 and later.
Reserved.

XHTML MP
sub, sup Mobile devices provide limited fonts. Subscripts and
superscripts are supported.
tbody, tfoot, thead Basic tables are supported. Grouping table header, body and
footer elements is not supported.
tt Use CSS to style text to appear as teletype text.
u Underlining is a universal indicator of link labels. Underlined
text that is not a link is not usable on small screens and
strongly discouraged. However, if underlining is absolutely
required, it may be accomplished using the text-decoration:
underline; CSS directive.
xmp Use CSS or the pre element to style text to appear
preformatted.
Reserved.

XHTML MP
 The tel: URI schemes allow mobile users to click a
link to initiate a phone call.
 Format of a tel: URI is tel:<phone number>
 Example: Call <a href="tel:+254-722–321-
1212">+254-722–321-1212</a> for Information
Reserved.

XHTML MP
 The wtai: scheme is used to initiate phone calls and
add contact phone numbers to the mobile device’s
address book
 Uses a different URI format for each task
Reserved.

XHTML MP
 Format for initiating a phone call from the mobile
device: wtai://wp/mc;<phone number>
 To add a contact into the mobile address book:
wtai://wp/ap;<phone number>;<name>
Reserved.

XHTML MP
 Examples:
Call <a href="wtai://wp/mc;+254728321987">+254-728–
321-1987</a> for Information
<a ref="wtai://wp/ap;+254728321987;Information">Add to
Address Book</a>
Reserved.

XHTML MP
 XHTML-MP 1.1 adds support for the <script> and
<noscript> tags
 The markup snippet below imports an external
JavaScript file into an XHTML-MP document:
<script type="text/javascript" src="js/library.js" />
Reserved.

XHTML MP
 An example of a JavaScript function declared inline in
a XHTML-MP 1.1 document:
<script type="text/javascript">
function handleOnClick() {
// Get the new image URL
var newSrc = "img/michael_icon.png";
// Update the image URL
document.getElementById("theImg").src = newSrc;
}
</script>
Reserved.

XHTML MP
 Below, an XHTML-MP image tag associates the inline
JavaScript function above with its onclick event:
<img id="theImg" src="/logo.png"width="140" height="50"
alt="Logo“ onclick=“handleOnClick();"/>
 The MIME type text/javascript must be used to identify
JavaScript and ECMAScript MP in XHTML-MP 1.1 markup
documents.
 XHTML-MP 1.2 is a new standard, adopted in March 2008
Reserved.

XHTML MP
 Other topics in XHTML MP (see examples):
Forms, Tables, Links and Access Keys
 Many examples at the following link:
http://www.developershome.com/wap/xhtmlmp
Reserved.

CSS
Reserved.

Wireless CSS
/*
This is a Wireless CSS file.
*/
h1 {
color: blue
}
p {
font-style: italic
}
Reserved.
Sample Wireless CSS

Wireless CSS
 CSS = Cascading Style Sheets
 Used to define presentation including layouts,
colours & fonts
 Can use either Wireless CSS or CSS Mobile Profile
Reserved.

Wireless CSS
 Both mobile CSS subsets support core CSS syntax and
properties including selectors, inheritance, the box
model, shorthand properties, generic font families,
and absolute and relative font sizes.
 Both mobile dialects comply with existing CSS syntax
standards and can be validated with a CSS validator.
Reserved.

Wireless CSS
 A CSS statement is consisted of a selector, a property,
and a property value: selector {property:
property_value}
 Example: p {text-align: right}
 Multiple properties are separated with a semicolon:
selector {property1: property_value1; property2:
property_value2; ... propertyN: property_valueN}
Reserved.

Wireless CSS
 Example of multiple properties: p {text-align: right;
color: blue}
Reserved.

Wireless CSS
 CSS Mobile Profile 1.0 Specification:
http://www.w3.org/TR/2002/CR-css-mobile-20020725
 CSS 2 Specification:
http://www.w3.org/TR/2008/REC-CSS2-20080411/
Reserved.

JSP and
Servlets
Reserved.

XHTML MP
 You can also introduce JSP and servlet technology to
XHTML MP similar to the way we did it in WML.
 Remember to save files as .jsp as well as to specify
the MIME type: application/vnd.wap.xhtml+xml
 Sample in next slide
Reserved.

XHTML MP
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<% response.setContentType("application/vnd.wap.xhtml+xml;charset=UTF-8"); %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Annotated XHTML Example</title>
</head>
<body>
<p>An XHTML JSP Example</p>
<% out.println("<p>My name is Michael</p>"); %>
</body>
</html>
Reserved.

The End
Michael Wakahe
michael@tawi.mobi
+254 (0)20 250 9260
www.tawi.mobi
Reserved.

XHTML and CSS

More Related Content

Similar to XHTML and CSS (20)

More from tawi123 (20)

Recently uploaded (20)

XHTML and CSS