Kingston University HTML Programming and Internet Tools module introduction

1,290 views
1,257 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,290
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Kingston University HTML Programming and Internet Tools module introduction

  1. 1. HTML Programming and Internet Tools CO1052 / CO2052 Feb 2010 | p.warnsberg@kingston.ac.uk | www.twitter.com/petterw
  2. 2. http://www.linkedin.com/in/petterw Petter Warnsberg
  3. 3. Contact me • Contact me – I live in Room SB318 (Sopwith Building) – email: P.Warnsberg@kingston.ac.uk and include “HTML” in the subject line – “office hours” Mondays 11:00-12:30, – www.petterw.com • For Course URL: – http://sites.google.com/site/kuhtml/ 8
  4. 4. Contact Module leader Vincent Lau • Contact Dr Lau – Live in Room SB215 (Sopwith Building) – email: V.Lau@kingston.ac.uk and include “HTML” in the subject line 9
  5. 5. A Few Administrative Points • In StudySpace, you can find information such as: – Module Guide – Lecture notes – Practical exercises – Assignments • Outline marking schemes – Useful links and references – Discussion Boards 10
  6. 6. Structure of the Course Day Time Class type Room Week nos. Teaching weeks 1,2,3,7,11 and 12 Thursday 9:00-10:00 Lecture CLT Week 9 is “enhancement week”, activities TBC ... Teaching weeks Thursday 10:15-11:00 Lecture JG1009 1,2,3,7,11 and 12 Teaching weeks Thursday 11:00-12:00 Practical JG1009 1,2,3,7,11 and 12 Teaching weeks Thursday 10:15-12:00 Practical JG1009 4, 5, 6, 8 and 10
  7. 7. 2008/9 (Semester 1) results • ≈ 45 students – Passed at first attempt: 30 (≈ 67%) – Average mark ≈ 46% • Highest mark 94% (3 students > 90%) • Seek helps asap if needed 12
  8. 8. Week No Date Session 1 4th Feb 10 Lecture 1 & Workshop: Module introduction, Introduction to HTML/XHTML Lecture 2: Tags 2 11th Feb Workshop: Exercise set 1: Tags Lecture 3 : CSS and CSS Layouts, Introduce individual coursework Part 1 3 18th Feb Workshop: Exercise set 2: Tables and lists 4 25th Feb Workshop: Exercise set 3: CSS 5 4th Mar Workshop: Exercise set 4: CSS Layouts Workshop: Exercise set 5: Images 6 11th Mar Test 1 (on first part of the module, during practical class), Part 1 individual coursework folder submission (on 15/Mar) Lecture 4: Best practice 7 18th Mar Test Results & Discussion, Introduce individual coursework Part 2 Workshop: Exercise set 6: Validation 8 25th Mar Workshop: Exercise set 7: Forms 9 15th Apr Enhancement Week – No Lectures or Practical 10 22nd Apr Workshop: Exercise set 8: Build a Webpage Lecture 5: JavaScript and jQuery 11 29th Apr Workshop: Exercise set 9: JavaScript Lecture 6: Web design 12 6th May Test 2 (on all part of the module, during practical class), Part 2 individual coursework folder submission (on 10/May) Workshop clinic 10th May – 14th May Revision week – No Lectures or Practical 17/May/10 Group Project Submission
  9. 9. Assessments • Please READ Module Guide – Penalty for late submissions! – If needed, negotiate an extension in advance • In-class tests 30% – Test 1 11th March – Test 2 6th May 14
  10. 10. Assessments • Individual Work folder 40% – Part 1 submit on 15th March – Part 2 submit on 10th May • Group Mini-Project 30% – Submit on 17th May 15
  11. 11. Plagiarism • Guidelines can be found at: http://student.kingston.ac.uk/C6/Plagiarism/default.aspx • Formal Hearing – If found guilty • First offence – 0 given, FZ grade recorded • Second offence – may terminate registration 16
  12. 12. Reading list For this module:  P. Carey, “Creating Web Pages with HTML, XHTML, and XML”, Thomson Course Technology, 2006.  D. Gosselin, "Introductory XHTML", Thomson Course Technology, 2003. 17
  13. 13. Reading list  D. Oliver and M. Morrison, "Teach Yourself HTML and XHTML in 24 Hours", SAMS, 2003. Good reference book in the subject matter (applications based): P. K. Yuen and V. Lau, "Practical Web Technologies", Addison-Wesley, 2003. 18
  14. 14. Web Resources Good internet resources:  World Wide Web Consortium  http://www.w3c.org/  W3 Schools  http://www.w3schools.com/  Tutorials  http://net.tutsplus.com 19
  15. 15. This is digital media
  16. 16. The technology that drives digital media
  17. 17. evolution
  18. 18. Each generation of online technology builds on previous generations
  19. 19. Example:
  20. 20. physical network layer:
  21. 21. hardware layer: servers & computers
  22. 22. network layer: TCP/IP
  23. 23. protocols layer: HTTP
  24. 24. server software layer: Apache, IIS
  25. 25. data layer: databases, XML
  26. 26. browser layer:
  27. 27. content structure layer: XHTML
  28. 28. content style layer: CSS
  29. 29. dynamic layer: Document Object Model + JavaScript
  30. 30. extension layer: Media (Video, audio) Interactivity (Flash, Silverlight) Functionality (Add-Ins, Extensions)
  31. 31. Web development 1. HTML/CSS 2. Frontend scripting 3. Backend development 4. Content management 5. Server administration 6. Flash development 7. Content and assets
  32. 32. Content of module HTML Best practice Describe the content so that Make it great: machines knows what it is -Usability -Accessibility CSS -Production workflow Style the content so that -Validation humans can easily take it in -Debugging -Web design JavaScript Make it interactive so that it becomes more intuitive, faster and obvious to humans
  33. 33. Example 1 • A typical web page contains: – HTML instructions – Style sheets • Colors, fonts, sizes, styles etc. • Images, animated GIF images, objects, … html_example.htm – Javascripts 40
  34. 34. Example 1 – HTML code (see example on StudySpace) <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head><title> A Shooting Game - ex09-09.htm </title></head> <style> .tx01St={font-family:arial;font-size:18pt;font-weight:bold} .butSt{background-color:#dddddd;font-family:arial;font-weight:bold; font-size:18pt;color:#880000;width:60px;height:40px} .butSt1{background-color:#aaffaa;font-family:arial;font-weight:bold; font-size:18pt;color:#880000;width:110px;height:40px} </style> <body style="background:#dddddd;font-family:arial;font-size:20pt; color:#000088;font-weight:bold"> <div style="position:absolute;top:15px;left:150px">HTML Example - A Shooting Game</div> <img src="line1.gif" style="position:absolute; top:50px;left:150px;width:380px;height:6px" />, .... …… 41
  35. 35. E-commerce: Amazon.co.uk
  36. 36. Communitites: last.fm/user/petterww
  37. 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 user’s computer 44
  38. 38. Campaigns: Get the glass 45
  39. 39. Example 3 – Dynamic HTML • Manipulating the HTML and browser with JavaScript – Rich interfaces and AJAX – Enabled web applications 46
  40. 40. Web applications: Google calendar
  41. 41. The Cloud
  42. 42. New type of services
  43. 43. Prosumer
  44. 44. Data portability
  45. 45. Personalisation
  46. 46. Intelligent web – APIs
  47. 47. Intelligent web – Mashups
  48. 48. New platforms
  49. 49. New platforms Game console integration
  50. 50. New platforms Android, Wave, Chrome OS, Friend connect
  51. 51. Augmented reality + Profile
  52. 52. Mobile trends 1. Features that make sense in a Mobile phone. 2. Move towards applications (away from pages.)
  53. 53. Learning, creating, testing and sharing
  54. 54. Learning, creating, testing and sharing ...in a fragmented ubiquitous digital landscape that builds on top of existing layers of technology.
  55. 55. From browser to server return
  56. 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. 57. HTTP versus HTML • HTTP governs how files move over the web • HTML defines structure of Web documents HTML docu- ments Web Server User’s Web Browser e.g. www.kingston.ac.uk e.g. k123456.kingston.ac.uk 65
  58. 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 use 66
  59. 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. 60. Web Browsers • Web browsers are software programs that allow users to access certain types of Internet files in an interactive environment • Microsoft’s Internet Explorer and Netscape’s 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 files 68
  61. 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 browser 69
  62. 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 document 70
  63. 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 languages 71
  64. 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. 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. 66. XHTML 1.1 • stands for EXtensible HyperText Markup Language • Largely based on HTML 4.01 • Defines HTML as an XML application 74
  67. 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 today 75
  68. 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 doesn’t always give you exactly what you want. 76
  69. 69. What do these tags look like? (1) • Tag names are included in < > • The text to be formatted is included in <tagname> text </tagname> • Tags can be nested <b><i>text</i></b> 77
  70. 70. What do these tags look like? • They may also have attributes <img id="flower" /> • Tags must always have a matching closing tag 78
  71. 71. Structure of a Tag <p id="title">Welcome to CO1052</p> tag attribute attribute end name name value tag 79
  72. 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 between <html> and </html> 80
  73. 73. The Document Type • To adhere to the XHTML 1.1 standard, the first line of the document must be the appropriate document declaration e.g. (see next week lecture) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> 81
  74. 74. Inside the document • A document must have a head and title element given by the nested tags: <head> <title>Here goes the title</title> </head> • The head section is followed by the body <body> everything happens here </body> section. • The body is where everything happens 82
  75. 75. HTML/XHTML Document - example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html> <head> <title> Example of a title </title> </head> <body> <h1>This is an example of h1 heading</h1> </body> </html> 83
  76. 76. So How to Type your HTML Code then? • Use simple ‘text’ editors, such as notepad – And don’t forget to save file with file extension .htm or .html • Use ‘HTML Editor’ such as HTML-Kit • Use WYSIWYG authoring software such as Dreamweaver from Macromedia 84
  77. 77. Using notepad • Follow start > All programs > Accessories > Notepad 85
  78. 78. Using HTML-Kit • HTML Editor 86
  79. 79. Using Dreamweaver • WYSIWYG authoring software 87
  80. 80. Publish your own index.html page http://sites.google.com/site/kuhtml
  81. 81. Keep on trucking p.warnsberg@kingston.ac.uk | http://twitter.com/petterw

×