WebApp Helper


Make a web app!

Open the “PageMakerHelper tool,” then use the tool to play with the example code below and at the other links provided…

I made the page you're reading now with this very same tool! With jQueryMobile and a nudge you can copy/paste all kinds of interesting and useful things together. (You'll find a better "page-maker helper tool there too, but to see how code is "wrapped" use mine and then compare left and right panels. To be more authentic learn to use a tool like DiffMerge.

Dear Beginners, "A Web app is like a ship full of Matryoshka dolls!"

For best results try this page with a mobile browser, Chrome, Firefox, or Safari. Comment on my blog.

This is all part of a bigger plan:
context theory
Creative Commons Licence
Mobile WebApp Helper by Richard C. Fouchaux
is licensed under a Creative Commons Attribution 3.0 Unported License.
Permissions beyond the scope of this license may be available at rcfouchaux.ca.

Footer content


Page One… to know

Page Maker

Basic content formatting

<h2>Things you should know…<h2>

<h3>Code for headers, paragraphs</h3>

<h4>when you're done, learn buttons.…</h4>

Page one paragraph. You will use lists and buttons

Version 1.3.1 was released spring 2013, easier copy/paste

Introduction Demo Showcase

Page Two


Get the code for the “all the same” buttons

		<button>button coded as button</button>
		<a>button coded as anchor</a>
		<input type="submit" value="button"></input>
		<a href="#Page03">Page 3</a>

Get the code for the “Try these” buttons

		<div data-role="controlgroup" data-type="horizontal" data-mini="true">
		<a data-ajax="false" href="buttons-icons.html" data-role="button">Icons</a>
		<a data-ajax="false" href="buttons-inline.html" data-role="button">In-line</a>
		<a data-ajax="false" href="buttons-grouped.html" data-role="button">Grouped</a>
		<a data-ajax="false" href="buttons-themes.html" data-role="button">Theming</a>


Anchor tags (links) <a data-role="button" href=… become buttons. Input-based buttons, links in toolbars and button elements are auto-enhanced, no data-role required. *Use it with <a> anyway ( <a data-role="button"> ) because sometimes it fails to create a button when mixed with other data- attributes.

All of these look the same:

<a href="#Page03">Page 3</a> <a>button coded as anchor</a>


Buttons Control Groups

Footer content


Page 3 Links



<a target="_blank" href="https://_somewhere_outside_my_site/">Link or Button Text<a>
Link or Button Text

<a data-role="button" target="_blank" href="https://_somewhere_outside_my_site/">Link or Button Text<a> Link or Button Text

Footer content