A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / Chris Greenhalgh

Content What is a mobile browser? What’s in a web page? HTML – Common file structure – What is an element? – From elements to view – Common elements and attributes Browser input files View size on mobile devices 2Chris Greenhalgh

See also Separate slides on setting up an Android emulator, using the browser and serving static web pages 3Chris Greenhalgh

What is a mobile browser? Browser application 5: Creates view & 6: Handles user input HTML, images, … 4 & 6: Runs “client-side” scripts (e.g. Javascript) 2: or client reads file on phone Mobile phone Web Server 3: Server handles HTTP request  e.g. handling form submission and 3c: returns response  e.g. document HTML, images, … 3b: Runs “Server-side” scripts (e.g. PHP) 3a: Reads files on server 2: Client makes HTTP request e.g. get URL 1: Enter URL… network 4Chris Greenhalgh

What’s in a web page…? Document Structure and content (HTML) Styling (CSS) Behaviour (Javascript) On-loading behaviour Event- triggered behaviour Images and other media (JPG, PNG, …) Embedded pages and objects Not considered here 5Chris Greenhalgh

HTML… 6Chris Greenhalgh

A simple HTML page 7 Hello Hello Chris Greenhalgh

A simple HTML page 8 Hello Hello Document Type Document HTML Header Metadata (title) HTML page content Element (heading) Character data Chris Greenhalgh

html* body*head* A simple HTML page seen as tree 9 title* h1 Hello Document Type Document element Header (head) element Metadata (title) element Content (body) element Element (heading) Character data * Required elements Chris Greenhalgh

A slightly more complicated page Hello Hello Some 10-point text, Bold 10Chris Greenhalgh

An example element 11 Begin tag Child Character data Some 10-point text, Bold Child element End tag Element name Attribute name Element value Note: end tags are only used for some elements in HTML (but for all elements in XHTML and XML) Chris Greenhalgh

Example element as tree 12 p style“font-size: 10” Attributes: Has attribute Has child “Some 10-point text,” b “Bold” “Paragraph” “Bold” Chris Greenhalgh

HTML generic structure Text document describing a “tree” of data – Comprising “elements” with “attributes” and “children”, including other elements and “character data” – like XML, based on SGML – Several versions including HTML4, XHTML, and HTML5 13Chris Greenhalgh

HTML, structure, content and style The tags describe: – the logical structure of the document E.g. “heading”, “paragraph”, “link” – Some elements of style, but this is NOT recommended in general E.g. “ bold text ” The attributes describe: – More about each element, e.g. font style, link URL The character data is the visible content 14Chris Greenhalgh

From elements to views… 15 p style “font-size: 10” “Some 10-point text,” b “Bold” Chris Greenhalgh

HTML specifications Each version of HTML specifies – What the elements are – What attributes each element can (or must) have – Which elements can have children, and if so which child elements they can have Each browser may also support slightly different elements and/or attributes, or support them in slightly different ways Details are out of scope for this course 16Chris Greenhalgh

Some common HTML elements …, …, … - Headings … - Paragraph … - an arbitrary section (“division”) - line-break - horizontal rule (line) … … - Un-numbered list and one list item LABEL - hyperlink (“Anchor”) - image - a button 17Chris Greenhalgh

Special HTML Attributes Every content element can have the following special attributes: – id – specifies a unique identity (name) for the element, that can be referred to elsewhere No two elements can have the same ID – class – specifies a “class” name for the element, generally used to identify a particular visual appearance to be specified elsewhere Any number of elements can have the same class 18Chris Greenhalgh

Browser input files Image file(s).png,.jpg, … Script file(s).js Style file(s).css External… Inline… … Hello… HTML file.html,.htm So there could just be an HTML file, or there could be several other linked files as well 19Chris Greenhalgh

View size on mobile devices By default most mobile browsers pretend to have screen width of about 900 pixels – Which is why the example pages look small when viewed on the emulator A meta tag in the HTML page header can tell the mobile browser to use its “real” width, which is 320 (CSS) pixels on most mobiles: – – See Chris Greenhalgh

Conclusions HTML is used to specify the (tree) structure and content of a web page – There is a standard document structure – There are standard elements and attributes You should now be able to – Read and roughly understand an HTML file – Create and edit simple static HTML files 21Chris Greenhalgh

Other resources The WWW Consortium, HTML 4.01 specification, Online tutorials, e.g. – Chris Greenhalgh