2612015 httpblogkerulnet 1

Android Apps Development

(Hybrid approach using HTML5 jQuery

Apache Cordova and Android SDK)

Khirulnizam Abd Rahman

blogkerulnet

About Khirulnizam Lecturer of Computer Science Faculty of

Information Science and Technology Selangor International Islamic University College (KUIS) ndashsince 2000

Certified HRDF Trainer

Codes in blogkerulnet

Avid Android developer since 2010 ndash MDeCICONApp 2010

Grants MDeC ICON 20102011 MDeCICONdap 2013

Apps in Google Play M-Mathurat ndash 200K ( bitlym-mathurat )

Peribahasa Dictionary ndash 20K ( bitlypbahasa)

mDictionary ndash open-sourced ( bitlym-dictionary )

2612015 httpblogkerulnet 2

Agenda Day 1

2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 3

Agenda Day 2

2612015 httpblogkerulnet 4

Android Devices

2612015 httpblogkerulnet 5

Android Story

httpwwwtechsavysinfo201107the-

android-story-an-android-infographic-

discussing-about-its-beginning-on-

going-changes-and-worldwide-market-

shareshtml

2612015 httpblogkerulnet 6

Agenda Day 2

2612015 httpblogkerulnet 4

Android Devices

2612015 httpblogkerulnet 5

Android Story

httpwwwtechsavysinfo201107the-

android-story-an-android-infographic-

discussing-about-its-beginning-on-

going-changes-and-worldwide-market-

shareshtml

2612015 httpblogkerulnet 6

Android Devices

2612015 httpblogkerulnet 5

Android Story

httpwwwtechsavysinfo201107the-

android-story-an-android-infographic-

discussing-about-its-beginning-on-

going-changes-and-worldwide-market-

shareshtml

2612015 httpblogkerulnet 6

Android Story

httpwwwtechsavysinfo201107the-

android-story-an-android-infographic-

discussing-about-its-beginning-on-

going-changes-and-worldwide-market-

shareshtml

2612015 httpblogkerulnet 6

Faq1 What is Android Android is a software stack for mobile devices

that includes an operating system middleware and key applications (platform) The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language

The kernel of most Android version is based on Linux 26 (30 for ICS)

Android architecture

2612015 httpblogkerulnet 7

Android Architecture

2612015 httpblogkerulnet 8

Faq2 Who develop

Android Initially developed by Andrew

(Andy) Rubin and his team in

Android Inc

Google acquired Android Inc

in 2005

Till Mac 2013 developed by

Google under Andy Rubin

(Senior Vice President of

Mobile)

2612015 httpblogkerulnet 9

Android

Global

Market

share

Source Strategy Analytics -

httpblogsstrategyanalyticsc

omWSSpost20131031And

roid-Captures-Record-81-

Percent-Share-of-Global-

Smartphone-Shipments-in-Q3-

2013aspx

2612015 httpblogkerulnet 10

Faq2 Who develop

Android Initially developed by Andrew

(Andy) Rubin and his team in

Android Inc

Google acquired Android Inc

in 2005

Till Mac 2013 developed by

Google under Andy Rubin

(Senior Vice President of

Mobile)

2612015 httpblogkerulnet 9

Android

Global

Market

share

Source Strategy Analytics -

httpblogsstrategyanalyticsc

omWSSpost20131031And

roid-Captures-Record-81-

Percent-Share-of-Global-

Smartphone-Shipments-in-Q3-

2013aspx

2612015 httpblogkerulnet 10

Android

Global

Market

share

Source Strategy Analytics -

httpblogsstrategyanalyticsc

omWSSpost20131031And

roid-Captures-Record-81-

Percent-Share-of-Global-

Smartphone-Shipments-in-Q3-

2013aspx

2612015 httpblogkerulnet 10

Faq3 How many versions

(distributions) Android has

2612015 httpblogkerulnet 11

Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml

2612015 httpblogkerulnet 12

Source httpdeveloperandroidcomresourcesdashboardplatform-versionshtml

2612015 httpblogkerulnet 12

Faq4 What is API Level

API Level is an integer value that uniquely

identifies the framework API revision offered

by a version of the Android platform

The Android platform provides a framework

API that applications can use to interact with

the underlying Android system

2612015 httpblogkerulnet 13

Faq5 What is Android

app Developer can develop application that runs

on top of Android

App is actually a simpler version of

application

Uses apk for the installer file extension

2612015 httpblogkerulnet 14

Apps samples

2612015 httpblogkerulnet 15

Faq5 What is Android

app Developer can develop application that runs

on top of Android

App is actually a simpler version of

application

Uses apk for the installer file extension

2612015 httpblogkerulnet 14

Apps samples

2612015 httpblogkerulnet 15

Apps samples

2612015 httpblogkerulnet 15

Apps

2612015 httpblogkerulnet 16

Faq6 What is Dalvik Virtual

Machine is it similar as JVM Author - Dan Bornstein

Dalvik VM implementing slightly different

architecture to JVM

Dalvik VM is a register-based

architecture

Being optimized for low memory and

slower processing speed

The VM was slimmed down to use less

space

2612015 httpblogkerulnet 17

DVM (for below Android 5)

2612015 httpblogkerulnet 18

ART

Android Runtime

2612015 httpblogkerulnet 19

Faq7 What is the language

used to develop Android app

Hybrid Approach HTML

CSS

JavaScript

Java

XML

SQL

2612015 httpblogkerulnet 20

Hybrid Approach

2612015 httpblogkerulnet 21

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

2612015 httpblogkerulnet 22

Faq8 What are tools needed

to develop Android App

Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Eclipse ADT Bundle

Android SDK

2612015 httpblogkerulnet 23

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

Faq6 What is Dalvik Virtual

Machine is it similar as JVM Author - Dan Bornstein

Dalvik VM implementing slightly different

architecture to JVM

Dalvik VM is a register-based

architecture

Being optimized for low memory and

slower processing speed

The VM was slimmed down to use less

space

2612015 httpblogkerulnet 17

DVM (for below Android 5)

2612015 httpblogkerulnet 18

ART

Android Runtime

2612015 httpblogkerulnet 19

Faq7 What is the language

used to develop Android app

Hybrid Approach HTML

CSS

JavaScript

Java

XML

SQL

2612015 httpblogkerulnet 20

Hybrid Approach

2612015 httpblogkerulnet 21

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

2612015 httpblogkerulnet 22

Faq8 What are tools needed

to develop Android App

Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Eclipse ADT Bundle

Android SDK

2612015 httpblogkerulnet 23

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

DVM (for below Android 5)

2612015 httpblogkerulnet 18

ART

Android Runtime

2612015 httpblogkerulnet 19

Faq7 What is the language

used to develop Android app

Hybrid Approach HTML

CSS

JavaScript

Java

XML

SQL

2612015 httpblogkerulnet 20

Hybrid Approach

2612015 httpblogkerulnet 21

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

2612015 httpblogkerulnet 22

Faq8 What are tools needed

to develop Android App

Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Eclipse ADT Bundle

Android SDK

2612015 httpblogkerulnet 23

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

ART

Android Runtime

2612015 httpblogkerulnet 19

Faq7 What is the language

used to develop Android app

Hybrid Approach HTML

CSS

JavaScript

Java

XML

SQL

2612015 httpblogkerulnet 20

Hybrid Approach

2612015 httpblogkerulnet 21

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

2612015 httpblogkerulnet 22

Faq8 What are tools needed

to develop Android App

Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Eclipse ADT Bundle

Android SDK

2612015 httpblogkerulnet 23

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

Faq7 What is the language

used to develop Android app

Hybrid Approach HTML

CSS

JavaScript

Java

XML

SQL

2612015 httpblogkerulnet 20

Hybrid Approach

2612015 httpblogkerulnet 21

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

2612015 httpblogkerulnet 22

Faq8 What are tools needed

to develop Android App

Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Eclipse ADT Bundle

Android SDK

2612015 httpblogkerulnet 23

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

Hybrid Approach

2612015 httpblogkerulnet 21

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

2612015 httpblogkerulnet 22

Faq8 What are tools needed

to develop Android App

Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Eclipse ADT Bundle

Android SDK

2612015 httpblogkerulnet 23

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

Hybrid Approach ndash consists

of HTML + jQuery (JavaScript CSS)

Apache Cordova (HTML to Android

Project)

Eclipse ADT ndash to generate APK

2612015 httpblogkerulnet 22

Faq8 What are tools needed

to develop Android App

Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Eclipse ADT Bundle

Android SDK

2612015 httpblogkerulnet 23

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

Faq8 What are tools needed

to develop Android App

Hybrid HTML knowledge

jQuery (JavaScript + CSS framework)

NodeJS

Apache Ant

Apache Cordova

Latest JDK

Eclipse ADT Bundle

Android SDK

2612015 httpblogkerulnet 23

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

Apache ANT

Apache Ant is a Java library and

command-line tool

to drive processes described in build

files as targets and extension points

dependent upon each other

The main known usage of Ant is the

build of Java applications

2612015 httpblogkerulnet 24

NodeJS

2612015 httpblogkerulnet 25

Nodejs contains a built-in library to

allow applications to act as a Web

server without software such as Apache

HTTP

Apache Cordova

Previously known as PhoneGap

use HTML5 and CSS3 for their rendering and JavaScript for logic

HTML5 provides better support for GPS camera video etc

includes basic plugins that allow access to the devices hardwarersquos

embeds HTML5 code inside a native WebView on the device using a foreign function interface to access the native resources of the device

2612015 httpblogkerulnet 26

IDE - Eclipse

2612015 httpblogkerulnet 27

Emulator

2612015 httpblogkerulnet 28

Dalvik Debugger

2612015 httpblogkerulnet 29

Faq8 Where to distribute my

App Playgooglecom

Sampung App Store

Amazon AppStore

Appzillnet

GetJarcom

Your own distribution channel

2612015 httpblogkerulnet 30

Emulator

2612015 httpblogkerulnet 28

Dalvik Debugger

2612015 httpblogkerulnet 29

Faq8 Where to distribute my

App Playgooglecom

Sampung App Store

Amazon AppStore

Appzillnet

GetJarcom

Your own distribution channel

2612015 httpblogkerulnet 30

Dalvik Debugger

2612015 httpblogkerulnet 29

Faq8 Where to distribute my

App Playgooglecom

Sampung App Store

Amazon AppStore

Appzillnet

GetJarcom

Your own distribution channel

2612015 httpblogkerulnet 30

Faq8 Where to distribute my

App Playgooglecom

Sampung App Store

Amazon AppStore

Appzillnet

GetJarcom

Your own distribution channel

2612015 httpblogkerulnet 30

Android Project Structure

Inside Android Project there should be

src ndash the Java codes are here

gen ndash generated automatically

assets ndash put your fonts videos sounds here

res ndash images layout and global variables

drawable-hdpi ndashfor high spec phones

drawable-ldpi ndashfor low spec phones

drawable-mdpi ndashfor medium spec phones

layout ndash all XML file for the screen(s) layout

values ndash global constant variables

2612015 httpblogkerulnet 31

2612015 httpblogkerulnet 32

AndroidManifest

AndroidManifestxml ndash apprsquos

permissions need to be registered here

ndash (eg app can access Internet phone

contacts camera etc must be

mentioned here)

2612015 httpblogkerulnet 33

ltxml version=10 encoding=utf-8gt

ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid

androidversionCode=7

androidversionName=17

package=netkerulmMathuratgt

ltapplication androidicon=drawableicon androidlabel=stringapp_name

androidtaskAffinity=mMathuratActivitygt

ltactivity androidname=mMathuratActivity

androidlabel=stringapp_name

androidscreenOrientation=portraitgt

ltintent-filtergt

ltaction androidname=androidintentactionMAIN gt

ltcategory androidname=androidintentcategoryLAUNCHER gt

ltintent-filtergt

ltactivitygt

ltactivity androidname=Aboutus class=Aboutus

androidlabel=Mengenai kami androidscreenOrientation=portraitgt

ltactivitygt

ltactivity androidname=Berterusan class=Berterusan

androidlabel=Mod pemanduan androidscreenOrientation=portraitgt

ltactivitygt

ltapplicationgt

ltuses-sdk androidminSdkVersion=7 gt

ltreceiver androidname=DetectIncomingCallgt

ltintent-filtergt

ltaction androidname=androidintentactionPHONE_STATE gt

ltintent-filtergt

ltreceivergt

ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt

ltuses-permission androidname=androidpermissionINTERNET gt

ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt

ltmanifestgt

2612015 httpblogkerulnet 34

DEMOs

2612015 httpblogkerulnet 35

LESS plan MORE do

- Mark Zuckerberg

Agenda Day 1

2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2612015 httpblogkerulnet 37

Web Client

Any web browser could be the web

client

2612015 httpblogkerulnet 38

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

2612015 httpblogkerulnet 32

AndroidManifest

AndroidManifestxml ndash apprsquos

permissions need to be registered here

ndash (eg app can access Internet phone

contacts camera etc must be

mentioned here)

2612015 httpblogkerulnet 33

ltxml version=10 encoding=utf-8gt

ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid

androidversionCode=7

androidversionName=17

package=netkerulmMathuratgt

ltapplication androidicon=drawableicon androidlabel=stringapp_name

androidtaskAffinity=mMathuratActivitygt

ltactivity androidname=mMathuratActivity

androidlabel=stringapp_name

androidscreenOrientation=portraitgt

ltintent-filtergt

ltaction androidname=androidintentactionMAIN gt

ltcategory androidname=androidintentcategoryLAUNCHER gt

ltintent-filtergt

ltactivitygt

ltactivity androidname=Aboutus class=Aboutus

androidlabel=Mengenai kami androidscreenOrientation=portraitgt

ltactivitygt

ltactivity androidname=Berterusan class=Berterusan

androidlabel=Mod pemanduan androidscreenOrientation=portraitgt

ltactivitygt

ltapplicationgt

ltuses-sdk androidminSdkVersion=7 gt

ltreceiver androidname=DetectIncomingCallgt

ltintent-filtergt

ltaction androidname=androidintentactionPHONE_STATE gt

ltintent-filtergt

ltreceivergt

ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt

ltuses-permission androidname=androidpermissionINTERNET gt

ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt

ltmanifestgt

2612015 httpblogkerulnet 34

DEMOs

2612015 httpblogkerulnet 35

LESS plan MORE do

- Mark Zuckerberg

Agenda Day 1

2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2612015 httpblogkerulnet 37

Web Client

Any web browser could be the web

client

2612015 httpblogkerulnet 38

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

AndroidManifest

AndroidManifestxml ndash apprsquos

permissions need to be registered here

ndash (eg app can access Internet phone

contacts camera etc must be

mentioned here)

2612015 httpblogkerulnet 33

ltxml version=10 encoding=utf-8gt

ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid

androidversionCode=7

androidversionName=17

package=netkerulmMathuratgt

ltapplication androidicon=drawableicon androidlabel=stringapp_name

androidtaskAffinity=mMathuratActivitygt

ltactivity androidname=mMathuratActivity

androidlabel=stringapp_name

androidscreenOrientation=portraitgt

ltintent-filtergt

ltaction androidname=androidintentactionMAIN gt

ltcategory androidname=androidintentcategoryLAUNCHER gt

ltintent-filtergt

ltactivitygt

ltactivity androidname=Aboutus class=Aboutus

androidlabel=Mengenai kami androidscreenOrientation=portraitgt

ltactivitygt

ltactivity androidname=Berterusan class=Berterusan

androidlabel=Mod pemanduan androidscreenOrientation=portraitgt

ltactivitygt

ltapplicationgt

ltuses-sdk androidminSdkVersion=7 gt

ltreceiver androidname=DetectIncomingCallgt

ltintent-filtergt

ltaction androidname=androidintentactionPHONE_STATE gt

ltintent-filtergt

ltreceivergt

ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt

ltuses-permission androidname=androidpermissionINTERNET gt

ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt

ltmanifestgt

2612015 httpblogkerulnet 34

DEMOs

2612015 httpblogkerulnet 35

LESS plan MORE do

- Mark Zuckerberg

Agenda Day 1

2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2612015 httpblogkerulnet 37

Web Client

Any web browser could be the web

client

2612015 httpblogkerulnet 38

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

ltxml version=10 encoding=utf-8gt

ltmanifest xmlnsandroid=httpschemasandroidcomapkresandroid

androidversionCode=7

androidversionName=17

package=netkerulmMathuratgt

ltapplication androidicon=drawableicon androidlabel=stringapp_name

androidtaskAffinity=mMathuratActivitygt

ltactivity androidname=mMathuratActivity

androidlabel=stringapp_name

androidscreenOrientation=portraitgt

ltintent-filtergt

ltaction androidname=androidintentactionMAIN gt

ltcategory androidname=androidintentcategoryLAUNCHER gt

ltintent-filtergt

ltactivitygt

ltactivity androidname=Aboutus class=Aboutus

androidlabel=Mengenai kami androidscreenOrientation=portraitgt

ltactivitygt

ltactivity androidname=Berterusan class=Berterusan

androidlabel=Mod pemanduan androidscreenOrientation=portraitgt

ltactivitygt

ltapplicationgt

ltuses-sdk androidminSdkVersion=7 gt

ltreceiver androidname=DetectIncomingCallgt

ltintent-filtergt

ltaction androidname=androidintentactionPHONE_STATE gt

ltintent-filtergt

ltreceivergt

ltuses-permission androidname=androidpermissionREAD_PHONE_STATE gt

ltuses-permission androidname=androidpermissionINTERNET gt

ltuses-permission androidname=androidpermissionVIBRATEgtltuses-permissiongt

ltmanifestgt

2612015 httpblogkerulnet 34

DEMOs

2612015 httpblogkerulnet 35

LESS plan MORE do

- Mark Zuckerberg

Agenda Day 1

2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2612015 httpblogkerulnet 37

Web Client

Any web browser could be the web

client

2612015 httpblogkerulnet 38

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

DEMOs

2612015 httpblogkerulnet 35

LESS plan MORE do

- Mark Zuckerberg

Agenda Day 1

2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2612015 httpblogkerulnet 37

Web Client

Any web browser could be the web

client

2612015 httpblogkerulnet 38

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

Agenda Day 1

2612015 ANDROID APP DEVELOPMENT (Hybrid) - blogkerulnet 36

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2612015 httpblogkerulnet 37

Web Client

Any web browser could be the web

client

2612015 httpblogkerulnet 38

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

Installing Web Editor

Use NotePad++

Or any HTML editor (such as

DreamWeaver)

2612015 httpblogkerulnet 37

Web Client

Any web browser could be the web

client

2612015 httpblogkerulnet 38

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

Web Client

Any web browser could be the web

client

2612015 httpblogkerulnet 38

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

Install the Web Server

Apache HTTPd ndash also available in

XAMPP

Download at

httpswwwapachefriendsorg

localhost

2612015 httpblogkerulnet 39

Web root

2612015 httpblogkerulnet 40

What is HTML

HyperText Mark-up Language

Marking up areas with angle brackets or

TAGs

2612015 httpblogkerulnet 41

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2612015 httpblogkerulnet 42

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 43

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2612015 httpblogkerulnet 44

Layout using DIV

ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt

ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt

ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt

ltdiv id=footergtCopyright copy W3Schoolscomltdivgt

2612015 httpblogkerulnet 45

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2612015 httpblogkerulnet 46

CSS syntax

p

color red

text-align center

2612015 httpblogkerulnet 47

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

What is HTML

HyperText Mark-up Language

Marking up areas with angle brackets or

TAGs

2612015 httpblogkerulnet 41

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2612015 httpblogkerulnet 42

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 43

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2612015 httpblogkerulnet 44

Layout using DIV

ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt

ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt

ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt

ltdiv id=footergtCopyright copy W3Schoolscomltdivgt

2612015 httpblogkerulnet 45

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2612015 httpblogkerulnet 46

CSS syntax

p

color red

text-align center

2612015 httpblogkerulnet 47

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

HTML Basics Structure

ltDOCTYPE htmlgtlthtmlgtltheadgtlttitlegtPage Titlelttitlegt

ltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

ltbodygt

lthtmlgt

Save as indexhtml

2612015 httpblogkerulnet 42

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 43

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2612015 httpblogkerulnet 44

Layout using DIV

ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt

ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt

ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt

ltdiv id=footergtCopyright copy W3Schoolscomltdivgt

2612015 httpblogkerulnet 45

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2612015 httpblogkerulnet 46

CSS syntax

p

color red

text-align center

2612015 httpblogkerulnet 47

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

Hyperlinks

ltDOCTYPE htmlgtlthtmlgtltheadgt

lttitlegtPage Titlelttitlegtltheadgt

ltbodygt

lth1gtThis is a Headinglth1gt

ltpgtThis is a paragraphltpgt

lta href=httpkerulnetgtThis is a linkltagt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 43

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2612015 httpblogkerulnet 44

Layout using DIV

ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt

ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt

ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt

ltdiv id=footergtCopyright copy W3Schoolscomltdivgt

2612015 httpblogkerulnet 45

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2612015 httpblogkerulnet 46

CSS syntax

p

color red

text-align center

2612015 httpblogkerulnet 47

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

Images

ltimg src=w3schoolsjpg alt=W3Schoo

lscom width=104 height=142gt

2612015 httpblogkerulnet 44

Layout using DIV

ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt

ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt

ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt

ltdiv id=footergtCopyright copy W3Schoolscomltdivgt

2612015 httpblogkerulnet 45

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2612015 httpblogkerulnet 46

CSS syntax

p

color red

text-align center

2612015 httpblogkerulnet 47

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

Layout using DIV

ltdiv id=headergtlth1gtCity Gallerylth1gtltdivgt

ltdiv id=navgtLondonltbrgtParisltbrgtTokyoltbrgtltdivgt

ltdiv id=sectiongtlth1gtLondonlth1gtltpgtLondon is the capital city of England It is the most populous city in the United Kingdomwith a metropolitan area of over 13 million inhabitantsltpgtltpgtStanding on the River Thames London has been a major settlement for two millenniaits history going back to its founding by the Romans who named it Londiniumltpgtltdivgt

ltdiv id=footergtCopyright copy W3Schoolscomltdivgt

2612015 httpblogkerulnet 45

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2612015 httpblogkerulnet 46

CSS syntax

p

color red

text-align center

2612015 httpblogkerulnet 47

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

CSS

Cascading Style Sheet

Added to HTML4 to provide styles in

HTML elements

2612015 httpblogkerulnet 46

CSS syntax

p

color red

text-align center

2612015 httpblogkerulnet 47

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

CSS syntax

p

color red

text-align center

2612015 httpblogkerulnet 47

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

Simple CSS example - internal

ltheadgtltstylegtbody

background-color linenh1

color maroonmargin-left 40px

ltstylegtltheadgt

2612015 httpblogkerulnet 48

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

CSS inline

lth1 style=colorbluemargin-left30pxgt

This is a headinglth1gt

2612015 httpblogkerulnet 49

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

CSS example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltstylegt

body

ltstylegt

ltheadgt

ltbody style=ldquobackground-color b0c4derdquogt

lth1gtMy CSS web pagelth1gt

ltpgtHello world This is a W3Schoolscom exampleltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 50

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

JavaScript

Script to add live interaction to HTML

ltDOCTYPE htmlgt

lthtmlgt

ltbodygt

lth1 onmouseover=stylecolor=red onmouseout=stylecolor=blackgtMouse over this textlth1gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 51

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

JavaScript Example

ltDOCTYPE htmlgt

lthtmlgt

ltheadgt

ltscriptgt

function myFunction()

var x = documentgetElementById(fname)

xvalue = xvaluetoUpperCase()

ltscriptgt

ltheadgt

ltbodygt

Enter your name ltinput type=text id=fname onblur=myFunction()gt

ltpgtWhen you leave the input field a function is triggered which transforms the input text to upper caseltpgt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 52

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

Mobile Web Page

Create folders in web root as below

2612015 httpblogkerulnet 53

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

Copy the template

cssjquerymobilemincss

jsjqueryminjs

jsjquerymobileminjs

indexhtml

The css and js files are available in the

jQuerymobile

2612015 httpblogkerulnet 54

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

Mobile Web page structureltDOCTYPE htmlgt

lthtmlgt

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

ltbodygt

ltdiv data-role=pagegt

ltdiv data-role=headergt

lth1gtPage Titlelth1gt

ltdivgtlt-- header --gt

ltdiv role=main class=ui-contentgt

ltpgtPage content goes hereltpgt

ltdivgtlt-- content --gt

ltdiv data-role=footergt

lth4gtPage Footerlth4gt

ltdivgtlt-- footer --gt

ltdivgtlt-- page --gt

ltbodygt

lthtmlgt

2612015 httpblogkerulnet 55

httpdemosjquerymobilecom145pages

Head segment

ltheadgt

lttitlegtPage Titlelttitlegt

ltmeta charset=utf-8gt

ltmeta name=viewport content=width=device-width initial-scale=1gt

ltlink href=cssjquerymobile-145mincss rel=stylesheet type=textcss gt

ltscript src=jsjquery-1111minjsgtltscriptgt

ltscript src=jsjquerymobile-145minjsgtltscriptgt

ltheadgt

2612015 httpblogkerulnet 56