1 / 22

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

A really fairly simple guide to: mobile browser-based application development (part 1). Chris Greenhalgh G54UBI / 2011-02-21. 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

cleave
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  4. What is a mobile browser? Mobile phone 1: Enter URL… 4 & 6: Runs “client-side” scripts (e.g. Javascript) 3b: Runs “Server-side” scripts (e.g. PHP) 2: Client makesHTTP requeste.g. get URL 5: Creates view & 6: Handlesuserinput Browser application Web Server network 3: Server handles HTTP request  e.g. handling formsubmissionand 3c: returns response  e.g. document 2: or clientreads file on phone 3a: Readsfiles on server HTML, images, … HTML, images, … Chris Greenhalgh (cmg@cs.nott.ac.uk)

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

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

  7. A simple HTML page http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Hello.html • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Hello</title> </head> <body><h1>Hello</h1> </body></html> Chris Greenhalgh (cmg@cs.nott.ac.uk)

  8. A simple HTML page Document Type • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> • <html> • <head> • <title>Hello</title> • </head> • <body> • <h1>Hello</h1> • </body> • </html> Document HTML Header Metadata (title) HTML page content Element (heading) Character data Chris Greenhalgh (cmg@cs.nott.ac.uk)

  9. A simple HTML page seen as tree Document Type Document element • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> html* Content (body) element head* body* Header (head) element title* Element (heading) h1 Metadata (title) element Hello Hello Character data Character data * Required elements Chris Greenhalgh (cmg@cs.nott.ac.uk)

  10. A slightly more complicated page http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/Element.html • <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Hello</title> </head> <body> <h1>Hello</h1> • <p style="font-size: 10"> Some 10-point text, <b>Bold</b> </p> </body></html> Chris Greenhalgh (cmg@cs.nott.ac.uk)

  11. An example element Element name Attribute name Element value • <p style="font-size: 10"> • Some 10-point text, • <b> Bold </b> • </p> Begin tag Child Character data Child element End tag 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 Attributes: “Paragraph” p style “font-size: 10” “Bold” “Some 10-point text,” b “Bold” Has attribute Has child 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 Chris 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. “<b>bold text</b>” • The attributes describe: • More about each element, e.g. font style, link URL • The character data is the visible content Chris Greenhalgh (cmg@cs.nott.ac.uk)

  15. From elements to views… 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 Chris Greenhalgh (cmg@cs.nott.ac.uk)

  17. Some common HTML elements • <h1>…</h1>, <h2>…</h2>, … - Headings • <p>…</p> - Paragraph • <div>…</div> - an arbitrary section (“division”) • <br> - line-break • <hr> - horizontal rule (line) • <ul><li>…</li>…</ul> - Un-numbered list and one list item • <a href=“URL”>LABEL</a> - hyperlink (“Anchor”) • <imgsrc=“URL” alt=“TEXT”/> - image • <input type=“button” value=“Go!”/> - a button Chris 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 Chris Greenhalgh (cmg@cs.nott.ac.uk)

  19. Browser input files Image file(s).png, .jpg, … HTML file .html, .htm Inline… External… <imgsrc=“…”> Script file(s).js <script>…</script> <script src=“…“></script> <… style=“…”> <link rel="stylesheet" href=“…”> <H1>Hello…</H1> <frame src=“…”> Style file(s).css So there could just be an HTML file, or there could be several other linked files as well Chris 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: • <meta name="viewport" content="width=device-width"> • See http://www.cs.nott.ac.uk/~cmg/G54UBI/mobile/HelloMobile.html Chris 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 Chris Greenhalgh (cmg@cs.nott.ac.uk)

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

More Related