in this presentation i will describe about the standards and protocols of the following languages such as: 1. HTTP 2. HTML. 3. X-HTML 4. CGI 5. XML 6. WML 7. C-HTML

1. Web Design
&
Development
Made by Namra Ajmal
BSCS 6th semester.

2. Protocols and standards(HTTP, HTML,
XHTML, CGI, XML, WML, cHTML, etc)…

3. HYPER-TEXT TRANSFER
PROTOCOLS(HTTP)

4. Introduction to HTTP
– The Hypertext Transfer Protocol (HTTP) is an
application-level protocol for distributed,
collaborative, hypermedia information
systems.
– This is the foundation for data communication
for the World Wide Web (i.e. internet) since
1990.
– HTTP is a generic and stateless protocol
which can be used for other purposes as well
using extensions of its request methods, error
codes, and headers.
– Basically, HTTP is a TCP/IP based
communication protocol, that is used to deliver
data (HTML files, image files, query results,
etc.) on the World Wide Web.

5. Basic Features
There are three basic features that make HTTP a simple but powerful
protocol:
– HTTP is connectionless
– HTTP is media independent
– HTTP is stateless

6. Continue…
HTTP is connectionless: The HTTP client, i.e., a browser initiates an HTTP request and after
a request is made, the client waits for the response. The server processes the request and
sends a response back after which client disconnect the connection. So client and server
knows about each other during current request and response only. Further requests are made
on new connection like client and server are new to each other.
HTTP is media independent: It means, any type of data can be sent by HTTP as long as both
the client and the server know how to handle the data content. It is required for the client as
well as the server to specify the content type using appropriate MIME-type.
HTTP is stateless: As mentioned above, HTTP is connectionless and it is a direct result of
HTTP being a stateless protocol. The server and client are aware of each other only during a
current request. Afterwards, both of them forget about each other. Due to this nature of the
protocol, neither the client nor the browser can retain information between different requests
across the web pages.

7. Basic Architecture
The following diagram shows a very
basic architecture of a web application
and depicts where HTTP sits: Diagram:
– The HTTP protocol is a
request/response protocol
based on the client/server
based architecture where web
browsers, robots and search
engines, etc. act like HTTP
clients, and the Web server acts
as a server.

8. Continue…
Client:
– The HTTP client sends a request to the server
in the form of a request method, URI, and
protocol version, followed by a MIME-like
message containing request modifiers, client
information, and possible body content over a
TCP/IP connection.
Server:
– The HTTP server responds with a status line,
including the message's protocol version and
a success or error code, followed by a MIME-
like message containing server information,
entity meta information, and possible entity-
body content.

9. HYPER-TEXT MARKUP
LANGUAGE (HTML)

10. INTRODUCTION TO HTML
– HTML is not a programming language; it is a markup language that defines
the structure of your content.
– HTML consists of a series of elements, which you use to enclose, or wrap,
different parts of the content to make it appear a certain way, or act a certain
way.
– The enclosing tags can make a word or image hyperlink to somewhere else,
can italicize words, can make the font bigger or smaller, and so on.
– For example, take the following line of content:
1| My cat is very grumpy
– If we wanted the line to stand by itself, we could specify that it is a paragraph
by enclosing it in paragraph tags:
1| <p>My cat is very grumpy</p>

11. What is HTML?
– HTML is the main markup language of the web. It runs natively in every
browser and is maintained by the World Wide Web Consortium.
– You can use it to create the content structure of websites and web
applications. It’s the lowest level of frontend technologies, that serves as
the basis for styling you can add with CSS and functionality you can
implement using JavaScript.

12. Anatomy of an HTML element
– Let's explore this paragraph element a bit further.

13. Continue…
The main parts of our element are as follows:
1. The opening tag
2. The closing tag
3. The content
4. The element

14. Continue…
The opening tag: This consists of the name of the element (in this case, p), wrapped in
opening and closing angle brackets. This states where the element begins or starts to take
effect — in this case where the paragraph begins.
The closing tag: This is the same as the opening tag, except that it includes a forward
slash before the element name. This states where the element ends — in this case where the
paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can
lead to strange results.
The content: This is the content of the element, which in this case, is just text.
The element: The opening tag, the closing tag and the content together comprise the
element.

15. Attribute
Elements can also have attributes that look like the following:
– Attributes contain extra information about the element that you don't want
to appear in the actual content.
– Here, class is the attribute name, and editor-note is the attribute value.
– The class attribute allows you to give the element a non-unique identifier
that can be used to target it(and any other element with the same class
value) with style information and other things.

16. Continue…
An attribute should always have the following:
1. A space between it and the element name (or the previous attribute, if the
element already has one or more attributes).
2. The attribute name followed by an equal sign.
3. The attribute value wrapped by opening and closing quotation marks.

17. Elements
Nesting Elements:
You can put elements inside other elements too — this is called nesting. If we wanted to state
that our cat is very grumpy, we could wrap the word "very" in a <strong> element, which
means that the word is to be strongly emphasized :
<p>My cat is<strong>very</strong>grumpy.</p>
In the example above, we opened the <p> element first, then the <strong> element; therefore,
we have to close the <strong> element first, then the <p> element. The following is incorrect:
<p>My cat is<strong>very grumpy.</strong></p>

18. Continue…
Empty Element:
Some elements have no content and are called empty elements. Take the
<img> element that we already have in our HTML page:
<img src=“images/firefox_icon.png alt=“my test image”>
This contains two attributes, but there is no closing </img> tag and no inner
content. This is because an image element doesn't wrap content to affect it.
Its purpose is to embed an image in the HTML page in the place it appears.

19. Marking up Text
This section will cover some of the essential HTML elements you'll use for
marking up the text:
Heading: Heading elements allow you to specify that certain parts of your content are
headings — or subheadings. In the same way that a book has the main title, chapter titles and
subtitles, an HTML document can too. HTML contains 6 heading levels, <h1>-<h6> although
you'll commonly only use 3 to 4 at most:

20. Continue…
Paragraphs:
As explained above, <p> elements are for containing paragraphs of
text; you'll use these frequently when marking up regular text
content:

21. Continue…
Lists:
A lot of the web's content is lists and HTML has special elements for these.
Marking up lists always consist of at least 2 elements. The most common list types
are ordered and unordered lists:
– Unordered list: are for lists where the order of the items doesn't matter,
such as a shopping list. These are wrapped in a <ul> element.
– Ordered list: are for lists where the order of the items does matter, such
as a recipe. These are wrapped in an <ol> element.

22. Continue…
Each item inside the lists is put inside an <li> (list item) element:
For example, if we wanted to turn the part of the following paragraph
fragment into a list:
<p>At Mozilla, we’re global community of technologist, thinkers and builders working together…<p>
We could modify the markup to this:

23. Continue…
Links:
Links are very important — they are what makes the web a web! To add a link, we need to use
a simple element <a>, "a" being the short form for "anchor". To make text within your paragraph
into a link, follow these steps:
1. Choose some text. We chose the text “Mozilla Manifesto”.
2. Wrap the text in an <a> element as shown below:
<a>Mozilla manifesto</a>
3. Give the <a> element an href attribute, as shown below:
<a href=“”>Mozilla manifesto</a>
4. Fill in the value of this attribute with the web address that you want the link to link to:
<a href=“http://www.mozilla.org/en-US/about/manifesto/ ”>Mozilla manifesto</a>
You might get unexpected results if you omit the https:// or http:// part, called the protocol, at
the beginning of the web address. After making a link, click it to make sure it is sending you
where you wanted it to.

24. Conclusion…
– If you have followed all the
instructions in this article, you should
end up with a page that looks like the
one below:

25. HTML Evolution. What Differs
Between HTML and HTML5?
– Since the first days, HTML has gone through an incredible evolution. W3C constantly
publish new versions and updates, while historical milestones get dedicated names as well.
– HTML4 (these days commonly referred to as “HTML”) was published in 1999, while the
latest major version came out in 2014. Named HTML5, the update has introduced many
new features to the language.
– One of the most anticipated features of HTML5 is native support for audio and video
embedding. Instead of using Flash player, we can simply embed videos and audio files to
our web pages using the new <audio></audio> and <video></video> tags. It also includes
in-built support for scalable vector graphics (SVG) and MathML for mathematical and
scientific formulas.
– HTML5 introduced a few semantic improvements as well. The new semantic tags inform
browsers about the meaning of content, which benefits both readers and search engines.
– The most popular semantic tags
are <article></article>, <section></section>, <aside></aside>, <header></header>,
and <footer></footer>. To find amore unique differences, consider checking our in-depth
HTML and HTML5 comparison.

26. Pros and Cons of HTML
– Pros:
• A widely used language with a lot of
resources and a huge community
behind.
• Runs natively in every web browser.
• Comes with a flat learning curve.
• Open-source and completely free.
• Clean and consistent markup.
• The official web standards are
maintained by the World Wide Web
Consortium (W3C).
• Easily integrable with backend
languages such as PHP and Node.js.
– Cons:
• Mostly used for static web pages. For
dynamic functionality, you may need to
use JavaScript or a backend language
such as PHP.
• It does not allow the user to implement
logic. As a result, all web pages need to
be created separately, even if they use
the same elements, e.g. headers and
footers.
• Some browsers adopt new features
slowly.
• Browser behavior is sometimes hard to
predict (e.g. older browsers don’t always
render newer tags).

27. Anatomy of an HTML element
That wraps up the basics of individual HTML elements, but they aren't handy on their
own. Now we'll look at how individual elements are combined to form an entire HTML
page. Let's revisit the code we put into our index.html example (which we first met
in the Dealing with files article):

28. Continue…
Here, we have following elements are:
<!DOCTYPE html>
The doctype. It is required preamble. In the mists of time, when HTML was young (around
1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to
follow to be considered good HTML, which could mean automatic error checking and other
useful things. However these days, they don't do much, and are basically just needed to make
sure your document behaves correctly. That's all you need to know for now.
<html></html>
The <html> element. This element wraps all the content on the entire page and is sometimes
known as the root element.

29. Continue…
<head></head>
The <head> element. This element acts as a container for all the stuff you want to include on
the HTML page that isn't the content you are showing to your page's viewer’s. This includes
things like keywords and a page description that you want to appear in search results, CSS to
style our content, character set declarations and more.
<meta charset=“utf-8”>
This element sets the character set your document should use to UTF-8 which includes most
characters from the vast majority of written languages. Essentially, it can now handle any
textual content you might put on it. There is no reason not to set this and it can help avoid
some problems later on.

30. Continue…
<title></title>
The <title> element. This sets the title of your page, which is the title that appears in
the browser tab the page is loaded in. It is also used to describe the page when you
bookmark/favorite it.
<body></body>
The <body> element. This contains all the content that you want to show to web
users when they visit your page, whether that's text, images, videos, games,
playable audio tracks or whatever else.

31. Commonly used (TAG’s)
IMAGES:
Let’s turn our attention to the <img> element again:
As we said before, it embeds an image into our page in the position it appears. It does
this via the src (source) attribute. which contain the path of image file.
– We have also included at alt(alternative) attribute. In this attribute, you specify
descriptive text for users who cannot see the image, possibly because of the following
reasons:
1. They are visually impaired. Users with significant visual impairments often use tools called
screen readers to read out the alt text to them.
2. Something has gone wrong causing the image not to display. For example, try deliberately
changing the path inside your src attribute to make it incorrect. If you save and reload the
page, you should see something like this in place of the image:

32. Continue…
The keywords for alt text are "descriptive text". The alt text you write should provide the reader
with enough information to have a good idea of what the image conveys. In this example, our
current text of "My test image" is no good at all. A much better alternative for our Firefox logo
would be "The Firefox logo: a flaming fox surrounding the Earth."

33. How are HTML, CSS, and
JavaScript related?
– While HTML is a powerful language, it isn’t enough to build a professional
and fully responsive website. We can only use it to add text elements and
create the structure of the content.
– However, HTML works extremely well with two other frontend
languages: CSS (Cascading Style Sheets), and JavaScript. Together, they
can achieve rich user experience and implement advanced functions.
• CSS is responsible for stylings such as background, colors, layouts, spacing,
and animations.
• JavaScript lets you add dynamic functionality such as sliders, pop-ups, and
photo galleries.
– Think of HTML as a naked person, CSS as the clothing, and JavaScript as
movements and manner.

34. EXTENSIBLE HYPER-
TEXT MARKUP
LANGUAGE (XHTML)

35. INTRODUCTION
– XHTML stands for EXtensible HyperText Markup Language. It is the next
step in the evolution of the internet. The XHTML 1.0 is the first document
type in the XHTML family.
– XHTML is almost identical to HTML 4.01 with only few differences. This is a
cleaner and stricter version of HTML 4.01. If you already know HTML, then
you need to give little attention to learn this latest version of HTML.
– XHTML was developed by World Wide Web Consortium (W3C) to help web
developers make the transition from HTML to XML. By migrating to XHTML
today, web developers can enter the XML world with all of its benefits, while
still remaining confident in the backward and future compatibility of the
content.

36. Why Use XHTML?
– Developers who migrate their content to XHTML 1.0 get the following benefits −
• ]XHTML documents are XML conforming as they are readily viewed, edited, and validated with standard XML tools.
• XHTML documents can be written to operate better than they did before in existing browsers as well as in new browsers.
• XHTML documents can utilize applications such as scripts and applets that rely upon either the HTML Document Object
Model or the XML Document Object Model.
• XHTML gives you a more consistent, well-structured format so that your webpages can be easily parsed and processed by
present and future web browsers.
• You can easily maintain, edit, convert and format your document in the long run.
• Since XHTML is an official standard of the W3C, your website becomes more compatible with many browsers and it is
rendered more accurately.
• XHTML combines strength of HTML and XML. Also, XHTML pages can be rendered by all XML enabled browsers.
• XHTML defines quality standard for your webpages and if you follow that, then your web pages are counted as quality web
pages. The W3C certifies those pages with their quality stamp.
–Web developers and web browser designers are constantly discovering new ways to express their ideas through new
markup languages. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML
family is designed to accommodate these extensions through XHTML modules and techniques for developing new
XHTML-conforming modules. These modules permit the combination of existing and new features at the time of
developing content and designing new user agents..

37. EXAMPLE
– The above HTML code doesn't follow the HTML
rule although it runs. Now a day, there are
different browser technologies. Some browsers
run on computers, and some browsers run on
mobile phones or other small devices. The
main issue with the bad HTML is that it can't
be interpreted by smaller devices.
– So, XHTML is introduced to combine the
strengths of HTML and XML.
– XHTML is HTML redesigned as XML. It helps
you to create better formatted code on your
site.
– XHTML doesn't facilitate you to make badly
formed code to be XHTML compatible. Unlike
with HTML (where simple errors (like missing
out a closing tag) are ignored by the browser),
XHTML code must be exactly how it is specified
to be.

38. HTML VS XHTML
– There are some changes in XHTML as compared to HTML. These changes can be categorized in
FOLLOWING parts:
– XHTML Documents Must be Well-Formed
– Elements and Attributes Must be in Lower Case
– End Tags are Required for all Elements
– Attribute Values Must Always be Quoted
– Attribute Minimization
– Whitespace Handling in Attribute Values
– Script and Style Elements
– The Elements with id and name Attributes
– Attributes with Pre-defined Value Sets
– Entity References as Hex Values
– The <html> Element is a Must

39. XHTML Documents Must be Well-Formed
Well-formedness is a new concept introduced by XML. Essentially, this
means all the elements must have closing tags and you must nest them
properly.
– CORRECT: Nested Elements
– INCORRECT: Overlapping Elements

40. Elements and Attributes Must be in Lower Case
– XHTML documents must use lower case for all HTML elements and
attribute names. This difference is necessary because XHTML document
is assumed to be an XML document and XML is case-sensitive. For
example, <li> and <LI> are different tags.

41. End Tags are Required for all
Elements
– In HTML, certain elements are permitted to omit the end tag. But XML
does not allow end tags to be omitted.
– CORRECT: Terminated Elements
– INCORRECT: Unterminated Elements

42. Attribute Values Must Always be
Quoted
– All attribute values including numeric values, must be quoted.
– CORRECT: Quoted Attribute Values
– INCORRECT: Unquoted Attribute Values

43. Attribute Minimization
– XML does not support attribute minimization. Attribute-value pairs must
be written in full. Attribute names such as compact and checked cannot
occur in elements without their value being specified.
– CORRECT: Non Minimized Attributes
– INCORRECT: Minimized Attributes

44. Whitespace Handling in Attribute
Values
– When a browser processes attributes, it does the following −
• Strips leading and trailing whitespace.
• Maps sequences of one or more white space characters (including line
breaks) to a single inter-word space.

45. Script and Style Elements
– In XHTML, the script and style elements should not have “<” and “&” characters directly, if
they exist; then they are treated as the start of markup. The entities such as “<” and “&” are
recognized as entity references by the XML processor for displaying “<” and “&” characters
respectively.
– Wrapping the content of the script or style element within a CDATA marked section avoids
the expansion of these entities. An alternative is to use external script and style documents.

46. The Elements
with id and name Attributes
– XHTML recommends the replacement of name attribute with id attribute.
Note that in XHTML 1.0, the name attribute of these elements is formally
deprecated, and it will be removed in a subsequent versions of XHTML.

47. Attributes with Pre-defined Value Sets
– HTML and XHTML both have some attributes that have pre-defined and
limited sets of values. For example, type attribute of the input element.
In HTML and XML, these are called enumerated attributes. Under
HTML 4, the interpretation of these values was case-insensitive, so a
value of TEXT was equivalent to a value of text.
– Under XHTML, the interpretation of these values is case-sensitive so all
of these values are defined in lower-case.

48. Entity References as Hex Values
– HTML and XML both permit references to characters by using
hexadecimal value. In HTML these references could be made using
either &#Xnn; or &#xnn; and they are valid but in XHTML documents,
you must use the lower-case version only such as &#xnn;.

49. The <html> Element is a Must
– All XHTML elements must be nested within the <html> root element. All
other elements can have sub elements which must be in pairs and
correctly nested within their parent element. The basic document
structure is:

50. COMMON GATEWAY
INTERFACE (CGI)

51. Introduction to CGI
– The Common Gateway Interface (CGI) provides the middleware between
WWW servers and external databases and information sources.
– The World Wide Web Consortium (W3C) defined the Common Gateway
Interface (CGI) and also defined how a program interacts with a Hyper Text
Transfer Protocol (HTTP) server.
– The Web server typically passes the form information to a small application
program that processes the data and may send back a confirmation message.
– This process or convention for passing data back and forth between the server
and the application is called the common gateway interface (CGI).

52. Features of CGI
• It is a very well defined and supported standard.
• CGI scripts are generally written in either Perl, C, or maybe just a simple
shell script.
• CGI is a technology that interfaces with HTML.
• CGI is the best method to create a counter because it is currently the
quickest
• CGI standard is generally the most compatible with today’s browsers

53. Advantages of CGI
• The advanced tasks are currently a lot easier to perform in CGI than in
Java.
• It is always easier to use the code already written than to write your own.
• CGI specifies that the programs can be written in any language, and on
any platform, as long as they conform to the specification.
• CGI-based counters and CGI code to perform simple tasks are available
in plenty.

54. Disadvantages of CGI
– There are some disadvantages of CGI which are given below:
• In Common Gateway Interface each page load incurs overhead by
having to load the programs into memory.
• Generally, data cannot be easily cached in memory between page loads.
• There is a huge existing code base, much of it in Perl.
• CGI uses up a lot of processing time.

55. Common uses of CGI include
• Guestbooks
• Email Forms
• Mailing List Maintenance
• Blogs

56. EXTENSIBLE MARKUP
LANGUAGE (XML)

57. Introduction of XML
– XML stands for Extensible Markup Language. It is a text-based markup language
derived from Standard Generalized Markup Language (SGML).
– XML tags identify the data and are used to store and organize the data, rather
than specifying how to display it like HTML tags, which are used to display the
data.
– XML is not going to replace HTML in the near future, but it introduces new
possibilities by adopting many successful features of HTML.

58. Characteristics
There are three important characteristics of XML that make it useful in a
variety of systems and solutions :
• XML is extensible − XML allows you to create your own self-descriptive
tags, or language, that suits your application.
• XML carries the data, does not present it − XML allows you to store
the data irrespective of how it will be presented.
• XML is a public standard − XML was developed by an organization
called the World Wide Web Consortium (W3C) and is available as an
open standard.

59. XML Usage
A short list of XML usage says it all :
– XML can work behind the scene to simplify the creation of HTML documents for
large web sites.
– XML can be used to exchange the information between organizations and systems.
– XML can be used for offloading and reloading of databases.
– XML can be used to store and arrange the data, which can customize your data
handling needs.
– XML can easily be merged with style sheets to create almost any desired output.
– Virtually, any type of data can be expressed as an XML document.

60. What is Markup?
– XML is a markup language that defines set of rules for encoding documents in a
format that is both human-readable and machine-readable.
– So what exactly is a markup language? Markup is information added to a
document that enhances its meaning in certain ways, in that it identifies the
parts and how they relate to each other.
– More specifically, a markup language is a set of symbols that can be placed in
the text of a document to demarcate and label the parts of that document.

61. Continue…
Following example shows how XML
markup looks, when embedded in a
piece of text:
This snippet includes the markup
symbols, or the tags such as
<message>...</message> and <text>...
</text>. The tags <message> and
</message> mark the start and the end of
the XML code fragment. The tags <text>
and </text> surround the text Hello,
world!.

62. Is XML a Programming Language?
– A programming language consists of grammar rules and its own
vocabulary which is used to create computer programs. These programs
instruct the computer to perform specific tasks.
– XML does not qualify to be a programming language as it does not
perform any computation or algorithms.
– It is usually stored in a simple text file and is processed by special
software that is capable of interpreting XML.

63. Role of XML in Web Development
– Extensible markup Language or XML plays a significant role in the present world
of web development, it is perfectly useful for those who wish to make use of
web technologies for distributing information across the web.
– Like HTML, XML is also being used to format a document with a web browser.
– It is an influential and effectual tool to process a document’s contents and
therefore, creating own tags is possible with XML.
– It gels well with any operating system and maintains a great amount of
flexibility, which is very essential for the web development scenario.

64. Features of XML
Ease: Simplicity is the biggest advantage of using XML. Any computer can process the information and it is
simple to read and comprehend. XML follows the standards of W3C and the market leaders in the software
industry endorse it. Therefore, its openness is something to reckon with.
No limitation of tags: XML is not limited to the fixed set of tags. Whenever it is needed, new tags can be
developed.
Self-description: In case of the customary databases, the data administrator sets up schemas for maintaining data
records. There is no need of such definitions with XML documents as there are meta data with tags and other features. XML
present a foundation for author recognition and versioning at the basic level. Any XML tag can hold numerous characteristics as
in version or author.
Highly readable context information: One of the biggest advantages of XML over the plain
text format of HTML is its context information. Attributes, Tags, and element structure are present
context information that can be utilized for interpreting the significance of content, clever data
mining, agents, creating latest possibilities for extremely competent search engines, etc.

65. Continue…
Content is important- not how it is presented: XML’s motto is to elaborate the meaning of the
content and not the presentation of the same. If HTML stands for “how it appears” then XML means “what it signifies
and how it should appear.” To change and control the look and feel of a document or a website created with XML,
there is no need to alter the content of the document. It is possible to easily render numerous presentations or views
of the similar content. XML is supportive to Unicode and multilingual documents, which is essential for betterment of
the applications as per the international standard of web development.
Assists in data assessment and aggregation: XML document structure is designed in such a
way that the documents can be efficiently assessed and aggregated part by part. Another prolific advantage
XML is its ability to feature any possible type of data. The data might range from active components such as
ACTIVEX and Java applets or multimedia data such as video, image and sound.

66. WIRELESS MARKUP
LANGUAGE (WML)

67. Introduction to WML
– WML stands for Wireless Markup Language (WML) which is based on HTML and HDML.
– It is specified as an XML document type.
– It is a markup language used to develop websites for mobile phones.
– While designing with WML, constraints of wireless devices such as small display screens,
limited memory, low bandwidth of transmission and small resources have to be considered.
– WAP (Wireless Application Protocol) sites are different from normal HTML sites in the fact
that they are monochromatic (only black and white), concise and has very small screen
space, due to which content in the WAP sites will be only the significant matter, much like
how telegraph used to work in the olden days.
– The concept WML follows is that of a deck and card metaphor.
– A WML document is thought of as made up of many cards.
– Many cards can be inserted into a WML document, and the WML deck is identified by a
URL. To access the deck, the user can navigate using the WML browser, which fetches the
deck as required.

68. Features of WML
– Text and Images: WML gives a clue about how the text and images can be
presented to the user. The final presentation depends upon the user. Pictures
need to be in WBMP format and will be monochrome.
– User Interaction: WML supports different elements for input like password
entry, option selector and text entry control. The user is free to choose inputs
such as keys or voice.
– Navigation: WML offers hyperlink navigation and browsing history.
– Context Management: The state can be shared across different decks and can
also be saved between different decks.

69. Philosophy of WML

70. Problems Faced by a Web Application When
Used With a Mobile and Wireless
Environment:
1. HTTP:
– Bandwidth and delay: HTTP is not made for low bandwidth and high delay connections in mind.
HTTP protocol headers are large and redundant as HTTP is uncompressed and stateless.
– Caching: Caching is disabled by content providers as client companies cannot get feedback if a cache
is placed between a server and a client. Users suffer from downloading the same content repeatedly
from the server as HTTP is stateless.
– Posting: Sending some content from a client to a server will create additional problems if the said
client is disconnected at that moment.
2. HTML:
– HTML was designed for use in creating content for webpages of the World Wide Web (www). It was
meant only for desktop initially. Thus, when used in hand-held devices, some problems arise:
– Small display and low-resolution.
– Limited User Interfaces.
– Low-Performance CPU.

71. Continue…
– Enhancements needed for use of HTML in wireless environments:
• Image scaling
• Content Transformation: Documents in PDF or PPS should be transformed into the plain text as PDF occupies
more memory.
• Content Extraction: To avoid longer duration waits, some content like headlines can be extracted from the
document and presented to the user. This lets the user decide which information alone needs to be downloaded.
– Enhancements needed for use of HTTP in wireless environments:
• Connection Re-use: Client and server can be used the same TCP (Transmission Control Protocol) connection
for several requests and responses. Pipelining can be used to improve performance.
• Caching Enhancements: A cache could store cacheable response to reduce response time and bandwidth for
further responses. Caching can be done in the mobile client’s web browser itself by using a client proxy. A
network proxy can also be used on the network side.
• Bandwidth Optimization: HTTP supports compression and also negotiates the compression parameters and
compression styles. This will allow partial transmissions.

72. WML Script
– WML Script is the client-side scripting language of WML in Wireless Application
Protocol(WAP) and whose content is static. It is similar to JavaScript. It is
optimized for low power devices and is a compiled language. Some of the
standard libraries of WML Script are Lang, Float, String, URL, WML Browser,
Dialog, and WML Script Crypto Library.

73. WML Decks and Cards
– A main difference between HTML and WML is that the basic unit of
navigation in HTML is a page, while that in WML is a card. A WML file can
contain multiple cards and they form a deck.
– When a WML page is accessed from a mobile phone, all the cards in the
page are downloaded from the WAP server. So if the user goes to
another card of the same deck, the mobile browser does not have to
send any requests to the server since the file that contains the deck is
already stored in the wireless device.
– You can put links, text, images, input fields, option boxes and many other
elements in a card.

74. WML Structure

75. WML Elements

76. WML Program Structure
– The first line of this text says that this is
an XML document and the version is
1.0. The second line selects the
document type and gives the URL of the
document type definition (DTD).
– One WML deck (i.e. page ) can have
one or more cards as shown above. We
will see complete details on WML
document structure in subsequent
chapter.
– Unlike HTML 4.01 Transitional, text
cannot be enclosed directly in the
<card>...</card> tag pair. So you need
to put a content inside <p>...</p> as
shown above.

77. WAP Site Design Considerations
– Wireless devices are limited by the size of their displays and keypads. It's therefore very important to take
this into account when designing a WAP Site.
– While designing a WAP site you must ensure that you keep things simple and easy to use. You should
always keep in mind that there are no standard micro-browser behaviors and that the data link may be
relatively slow, at around 10Kbps. However, with GPRS, EDGE, and UMTS, this may not be the case for
long, depending on where you are located.
– The following are general design tips that you should keep in mind when designing a service:
• Keep the WML decks and images to less than 1.5KB.
• Keep text brief and meaningful, and as far as possible try to precode options to minimize the rather
painful experience of user data entry.
• Keep URLs brief and easy to recall.
• Minimize menu levels to prevent users from getting lost and the system from slowing down.
• Use standard layout tags such as <big> and <b>, and logically structure your information.
• Don't go overboard with the use of graphics, as many target devices may not support them.

78. Comparison of WML with HTML
– WML is used only for WAP sites on mobile phones and can be hosted only be WAP
hosts that support WML. HTML can be hosted by any web server.
– WML sites are monochrome, unlike HTML sites.
– Coding is similar in many aspects but a badly coded WAP site will definitely not run
as compared to a badly coded HTML site.
– It is must to close all WML tags as compared to the more lenient HTML coding.
– There are no alignment tags like the <center> tag in WML, as in HTML. Instead, <p
align=”center”> has to be used for aligning text in WML.
– There are problems when using old HTML tags like <br> which have no closing tag.
To get around this in WML, some tags have a “/” put on the end like <br />.
– Only WBMP format monochrome images are supported in WML whereas there is no
such restriction in HTML.

79. COMPACT HYPERTEXT
MARKUP LANGUAGE
(CHTML)

80. Introduction to C-HMTL
– Short for compact HTML, cHTML is a subset of HTML used for small
devices such as smartphones and PDAs.
– Some HTML features, such as tables, image maps, font styles/variations,
background colors, background images, frames, and style sheets are not
supported in cHTML.
– On cHTML devices, basic operations are performed by a combination of
four buttons rather than cursor movement, which is one reason why some
features (like image maps) are not supported.
– cHTML was developed for i-mode devices by Access Company, Ltd. Today,
cHTML enables Internet access on limited-functionality mobile devices, that
are increasingly popular in global markets including India and Southeast
Asia.

81. What is i-mode
– i-Mode, stands for Internet Mode is a microbrowser technology that supports text,
graphics, audio, and video for Web access over the Japanese cellular network. It
was introduced by a team led by Mari Matsunaga in February 1999 at NTT
DoCoMo
– Fortune Magazine recently selected Mari Matsunaga as one of the most
powerful women in business in Japan.
– i-Mode is one of the most successful services offering wireless web browsing
and e-mail services from mobile phones in Japan.
– Transmission between the handhelds and the i-Mode-enabled cell sites is via
packet mode, using packets of 128 octets at high-speed data transmission rates.

82. i-mode using C-HTML
– In consideration of the inherently limited bandwidth of the cellular network, i-Mode
employs Compact HTML (C-HTML), a simplified version of HTML similar to Wireless
Markup Language (WML) used in WAP networks and as well as DoCoMo proprietary
protocols ALP (HTTP) and TLP (TCP, UDP).
– i-Mode-compatible HTML websites are easy to navigate since all basic operations
can be performed using a combination of four buttons, cursor forward, cursor
backward, select, and back (return to previous page).
– There are functions that require two-dimensional navigation such as image maps
and functions that require more intensive processing such as frames and tables are
not included in the standard i-Mode HTML specifications.
– i-Mode-compatible HTML provides extended tags for special use on cell phones
such as the 'tel:' tag, which is used to hyperlink a telephone number and let users
initiate a call by clicking on a link.

83. Features
Following major features of HTML have not been included in i-Mode compatible
HTML, i.e., cHTML:
• Background colors and images
• Frames
• Image maps
• JPEG images
• Multiple character fonts and styles
• Style sheets
• Tables

84. cHTML compliance hardware
cHTML compliance hardware includes:
– Small memory − 128-512Kbytes RAM, and 512K-1Mbytes ROM.
– Low power CPU − 1-10 MIPS class CPU for embedded systems.
– Small display − 50x30 dots, 100x72 dots, and 150x100 dots.
– Restricted colors − mono-color (black and white).
– Restricted character fonts − only single font.
– Restricted input method − several control buttons and number buttons (0-9).