1. HTML Programming and Internet Tools CO1052 / CO2052
Feb 2010 | p.warnsberg@kingston.ac.uk | www.twitter.com/petterw

2. http://www.linkedin.com/in/petterw
Petter Warnsberg

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. This is digital media

20. The technology that
drives digital media

21. evolution

22. Each generation of online
technology builds on
previous generations

23. Example:

25. physical network layer:

26. hardware layer:
servers & computers

27. network layer: TCP/IP

28. protocols layer: HTTP

29. server software layer:
Apache, IIS

30. data layer:
databases, XML

31. browser layer:

32. content structure layer: XHTML

33. content style layer: CSS

34. dynamic layer: Document Object
Model + JavaScript

35. extension layer:
Media (Video, audio)
Interactivity (Flash, Silverlight)
Functionality (Add-Ins,
Extensions)

37. Web development
1. HTML/CSS
2. Frontend scripting
3. Backend development
4. Content management
5. Server administration
6. Flash development
7. Content and assets

38. 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

39. 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

40. 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

41. E-commerce: Amazon.co.uk

42. Communitites: last.fm/user/petterww

43. 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

44. Campaigns: Get the glass 45

45. Example 3 – Dynamic HTML
• Manipulating the HTML and browser with
JavaScript
– Rich interfaces and AJAX
– Enabled web applications
46

46. Web applications: Google calendar

48. The Cloud

49. New type of services

50. Prosumer

51. Data portability

52. Personalisation

53. Intelligent web – APIs

54. Intelligent web – Mashups

55. New platforms

56. New platforms
Game console integration

57. New platforms
Android, Wave, Chrome OS, Friend connect

58. Augmented reality + Profile

59. Mobile trends
1. Features that make sense in a Mobile phone.
2. Move towards applications (away from pages.)

60. Learning, creating, testing and sharing

61. Learning, creating, testing and sharing
...in a fragmented ubiquitous digital landscape that
builds on top of existing layers of technology.

62. From browser to server return

63. 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

64. 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

65. 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

66. 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

67. 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

68. 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

69. 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

70. 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

71. 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

72. 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

73. XHTML 1.1
• stands for EXtensible HyperText Markup
Language
• Largely based on HTML 4.01
• Defines HTML as an XML application
74

74. 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

75. 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

76. 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

77. What do these tags look like?
• They may also have attributes
<img id="flower" />
• Tags must always have a matching closing
tag
78

78. Structure of a Tag
<p id="title">Welcome to CO1052</p>
tag attribute attribute end
name name value tag
79

79. 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

80. 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

81. 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

82. 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

83. 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

84. Using notepad
• Follow start > All programs > Accessories > Notepad
85

85. Using HTML-Kit
• HTML Editor
86

86. Using Dreamweaver
• WYSIWYG authoring software
87

87. Publish your own index.html page
http://sites.google.com/site/kuhtml

88. Keep on trucking
p.warnsberg@kingston.ac.uk | http://twitter.com/petterw