More Related Content
Similar to XHTML and CSS (20)
XHTML and CSS
- 2. Table of Contents
XHTML MP
CSS
JSP
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 4. 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
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 5. 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
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 6. XHTML MP
<?xml version="1.0" encoding="UTF-8"?>
<!-- XML Declaration, above. XHTML-MP is XML.-->
<!-- DOCTYPE declaring that this document is XHTML-MP. -->
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<!-- The rest of this document looks a lot like desktop HTML. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Externally Linked Stylesheet-->
<!-- <link rel="stylesheet" href=“css/style1.css" type="text/css" /> -->
<title>Annotated XHTML Example</title>
</head>
<body>
<div class="hdr">Annotated XHTML Example</div>
</body>
</html>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 7. 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.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
XHTML Elements Unsupported in XHTML-MP
- 8. XHTML MP
XHTML Element Reason for Exclusion
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.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 9. XHTML MP
XHTML Element Reason for Exclusion
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.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 10. 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
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 11. 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
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 12. 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>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 13. 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>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 14. 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" />
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 15. 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>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 16. 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
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 17. 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
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 19. Wireless CSS
/*
This is a Wireless CSS file.
*/
h1 {
color: blue
}
p {
font-style: italic
}
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
Sample Wireless CSS
- 20. Wireless CSS
CSS = Cascading Style Sheets
Used to define presentation including layouts,
colours & fonts
Can use either Wireless CSS or CSS Mobile Profile
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 21. 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.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 22. 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}
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 23. Wireless CSS
Example of multiple properties: p {text-align: right;
color: blue}
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 24. 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/
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 26. 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
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
- 27. 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>
<!-- <link rel="stylesheet" href="css/style1.css" type="text/css" /> -->
<title>Annotated XHTML Example</title>
</head>
<body>
<p>An XHTML JSP Example</p>
<% out.println("<p>My name is Michael</p>"); %>
</body>
</html>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.