HTML Example - A Shooting Game

, .... 41 35. E-commerce: Amazon.co.uk 36. Communitites: last.fm/user/petterww 37. Example 2 Flash movies A Flash Movie that runs within a Web browser plug-in embedded with HTML Flash Movies written separately A Flash SWF file is downloaded along with a Web page from a Web server, but the Flash itself runs on the users computer44 38. Campaigns: Get the glass 45 39. Example 3 Dynamic HTML Manipulating the HTML and browser with JavaScript Rich interfaces and AJAX Enabled web applications46 40. Web applications: Google calendar 41. The Cloud 42. New type of services 43. Prosumer 44. Data portability 45. Personalisation 46. Intelligent web APIs 47. Intelligent web Mashups 48. New platforms 49. New platformsGame console integration 50. New platformsAndroid, Wave, Chrome OS, Friend connect 51. Augmented reality + Profile 52. Mobile trends 1. Features that make sense in a Mobile phone. 2. Move towards applications (away from pages.) 53. Learning, creating, testing and sharing 54. Learning, creating, testing and sharing ...in a fragmented ubiquitous digital landscape that builds on top of existing layers of technology. 55. From browser to server return 56. What is the Internet? A computer network is a collection of computers that can exchange data via a telecommunication mechanism An internet is a network of computer networks The Internet (capital I) is one large, globally accessible internet 64 57. HTTP versus HTML HTTP governs how files move over the web HTML defines structure of Web documents HTML docu- mentsWeb ServerUsers Web Browser e.g. www.kingston.ac.uk e.g. k123456.kingston.ac.uk 65 58. Why is the Internet important? The third most important invention in the computing history The Computer, the Microprocessor, The Internet Worldwide communication, access to info, to people and business Easy to use66 59. History 1960 ARPAnet 1990 World Wide Web, Tim Berners-Lee created a set of technologies that allowed information to be linked together through links in documents (HTML) 1992 Mark Andreessen created the first Web browser Mosaic 1994 World Wide Web Consortium 67 60. Web Browsers Web browsers are software programs that allow users to access certain types of Internet files in an interactive environment Microsofts Internet Explorer and Netscapes Communicator The Uniform Resource Locator (URL) is the unique address associated with the Web page and is displayed in the browser window, e.g. (http://www.kingston.ac.uk/index.html) Navigation through hyperlinks which can reference other Web pages, e-mail addresses and files68 61. Web Server A computer, running special software, which is always connected to the Internet Typing and URL in the Web browser or clicking in a link sends a request to the server that hosts this information The server sends back the requested files and displays them in the Web browser69 62. Document Formatting WYSIWYG What You See Is What You Get Use visual tools to format the document e.g. Word for Windows Mark-up Languages Use special codes to specify the functionality of the content in a document70 63. HTML Stands for Hyper-Text Mark-up Language It is a Mark-up language and the files are compiled and presented on demand, usually by a web browser However it is not a programming language Note: there are Mark-up languages that are also programming languages71 64. HTML (cont) HTML documents are plain text (not case sensitive) files with embedded markup codes (tags) Any simple text editor could be used to create and edit HTML file The file should be saved with extension .htm or .html 72 65. HTML versions Originally developed at CERN as part of the WWW project managed by Tim-Berners- Lee The first browser was Mosaic, by Marc Andreessen who went on to found Netscape The grey days of incompatibility followed until recently... 73 66. XHTML 1.1 stands for EXtensible HyperText Markup Language Largely based on HTML 4.01 Defines HTML as an XML application 74 67. What is a Tag? The mark-up codes in HTML are called tags A tag may be used to describe an element of a list or the heading of a section Actually their functionality is much wider and we will attempt to introduce the most basic ones today75 68. Just one Second ! Is there any point in writing plain HTML when Microsoft Frontpage is out in the wild ? It produces very wasteful code It doesnt always give you exactly what you want. 76 69. What do these tags look like? (1) Tag names are included in < > The text to be formatted is included in text Tags can be nested text77 70. What do these tags look like? They may also have attributes Tags must always have a matching closing tag 78 71. Structure of a Tag

Welcome to CO1052

tagattribute attributeend name namevaluetag 79 72. The Mother of all Tags Tags in XHTML are case sensitive BUT not in HTML The most basic tag is the one that specifies the document type. The whole of an HTML document must be included betweenand 80 73. The Document Type To adhere to the XHTML 1.1 standard, the first line of the document must be the appropriate document declaratione.g. (see next week lecture)81 74. Inside the document A document must have a head and title element given by the nested tags: Here goes the title The head section is followed by the body everything happens here section. The body is where everything happens 82 75. HTML/XHTML Document - example Example of a title This is an example of h1 heading