1. A really fairly simple guide to: mobile browser-based application development (part 1) Chris Greenhalgh G54UBI / 2011-02-21 1Chris Greenhalgh (cmg@cs.nott.ac.uk)

2. 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 (cmg@cs.nott.ac.uk)

3. See also Separate slides on setting up an Android emulator, using the browser and serving static web pages 3Chris Greenhalgh (cmg@cs.nott.ac.uk)

4. 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 (cmg@cs.nott.ac.uk)

5. 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 (cmg@cs.nott.ac.uk)

6. HTML… 6Chris Greenhalgh (cmg@cs.nott.ac.uk)

7. A simple HTML page 7 Hello Hello http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Hello.html Chris Greenhalgh (cmg@cs.nott.ac.uk)

8. A simple HTML page 8 Hello Hello Document Type Document HTML Header Metadata (title) HTML page content Element (heading) Character data Chris Greenhalgh (cmg@cs.nott.ac.uk)

9. 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 (cmg@cs.nott.ac.uk)

10. A slightly more complicated page Hello Hello Some 10-point text, Bold http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Element.html 10Chris Greenhalgh (cmg@cs.nott.ac.uk)

11. 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 (cmg@cs.nott.ac.uk)

12. 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 (cmg@cs.nott.ac.uk)

13. 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 (cmg@cs.nott.ac.uk)

14. 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 (cmg@cs.nott.ac.uk)

15. From elements to views… 15 p style “font-size: 10” “Some 10-point text,” b “Bold” Chris Greenhalgh (cmg@cs.nott.ac.uk)

16. 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 (cmg@cs.nott.ac.uk)

17. 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 (cmg@cs.nott.ac.uk)

18. 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 (cmg@cs.nott.ac.uk)

19. 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 (cmg@cs.nott.ac.uk)

20. 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 http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloMobile.html http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloMobile.html 20Chris Greenhalgh (cmg@cs.nott.ac.uk)

21. 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 (cmg@cs.nott.ac.uk)

22. Other resources The WWW Consortium, http://www.w3.org/http://www.w3.org/ HTML 4.01 specification, http://www.w3.org/TR/html401/ http://www.w3.org/TR/html401/ Online tutorials, e.g. – http://www.w3schools.com/ http://www.w3schools.com/ 22Chris Greenhalgh (cmg@cs.nott.ac.uk)