HTML Programming and Internet Tools CO1052 /
CO2052


Feb 2010 | p.warnsberg@kingston.ac.uk |
www.twitter.com/petterw
http://www.linkedin.com/in/petterw




Petter Warnsberg
Contact me
• Contact me
  – I live in Room SB318 (Sopwith Building)
  – email: P.Warnsberg@kingston.ac.uk
    and include ...
Contact Module leader
         Vincent Lau
• Contact Dr Lau
  – Live in Room SB215 (Sopwith Building)
  – email: V.Lau@kin...
A Few Administrative Points
• In StudySpace, you can find information such
  as:
  –   Module Guide
  –   Lecture notes
  ...
Structure of the Course
   Day         Time        Class type   Room         Week nos.
                                   ...
2008/9 (Semester 1) results
•    45 students
    – Passed at first attempt: 30 ( 67%)
    – Average mark 46%
      • Highe...
Week No              Date       Session

   1               4th Feb 10     Lecture 1 & Workshop: Module introduction, Intr...
Assessments
• Please READ Module Guide
  – Penalty for late submissions!
  – If needed, negotiate an extension in
    adva...
Assessments
• Individual Work folder 40%
  – Part 1     submit on 15th March

  – Part 2     submit on 10th May

• Group M...
Plagiarism

• Guidelines can be found at:
 http://student.kingston.ac.uk/C6/Plagiarism/default.aspx


• Formal Hearing
  –...
Reading list

For this module:
   P. Carey, “Creating Web Pages with
    HTML, XHTML, and XML”, Thomson
    Course Techno...
Reading list
    D. Oliver and M. Morrison,
     "Teach Yourself HTML and
     XHTML in 24 Hours",
     SAMS, 2003.



Go...
Web Resources

Good internet resources:
 World Wide Web Consortium

   http://www.w3c.org/

 W3 Schools

   http://www...
This is digital media
The technology that
drives digital media
evolution
Each generation of online
  technology builds on
  previous generations
Example:
physical network layer:
hardware layer:
servers & computers
network layer: TCP/IP
protocols layer: HTTP
server software layer:
     Apache, IIS
data layer:
databases, XML
browser layer:
content structure layer:
       XHTML
content style layer: CSS
dynamic layer: Document
Object Model + JavaScript
extension layer:
     Media (Video, audio)
Interactivity (Flash, Silverlight)
    Functionality (Add-Ins,
          Extens...
Web development




1. HTML/CSS
2. Frontend scripting
3. Backend development
4. Content management
5. Server administratio...
Content of module
HTML                          Best practice
Describe the content so       Make it great:
that machines k...
Example 1
• A typical web page
  contains:
  – HTML instructions
  – Style sheets
    • Colors, fonts, sizes, styl
      e...
Example 1 – HTML code (see
  example on StudySpace)
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//...
E-commerce: Amazon.co.uk
Communitites: last.fm/user/petterww
Example 2 – Flash movies

• A Flash Movie that runs within a Web
  browser plug-in embedded with HTML
  – Flash Movies wri...
Campaigns: Get the glass   40
Example 3 – Dynamic HTML

• Manipulating the HTML and browser
  with JavaScript
  – Rich interfaces and AJAX
  – Enabled w...
Web applications: Google calendar
The Cloud
New type of services
Prosumer
Data portability
Personalisation
Intelligent web – APIs
Intelligent web – Mashups
New platforms
New platforms
      Game console integration
New platforms

Android, Wave, Chrome OS, Friend connect
Augmented reality + Profile
Mobile trends




1. Features that make sense in a Mobile
phone.
2. Move towards applications (away from
pages.)
Learning, creating, testing and sharing




...in a fragmented ubiquitous digital landscape
that builds on top of existing...
From browser to server return
What is the Internet?
• A computer network is a collection of
  computers that can exchange data via a
  telecommunication...
HTTP versus HTML
     • HTTP governs how files move over the web
     • HTML defines structure of Web documents


        ...
Why is the Internet important?
• The third most important invention in the
  computing history
  – The Computer, the Micro...
History
• 1960 ARPAnet
• 1990 World Wide Web, Tim Berners-Lee
  created a set of technologies that allowed
  information t...
Web Browsers
• Web browsers are software programs that allow
  users to access certain types of Internet files in an
  int...
Web Server
• A computer, running special software, which
  is always connected to the Internet
• Typing and URL in the Web...
Document Formatting
• WYSIWYG
  – “What You See Is What You Get”
  – Use visual tools to format the document
    e.g. Word...
HTML
• Stands for Hyper-Text Mark-up
  Language
• It is a Mark-up language and the files
  are compiled and presented on
 ...
HTML (cont…)
• HTML documents are plain text (not
  case sensitive) files with embedded
  markup codes (tags)

• Any simpl...
HTML versions
• Originally developed at CERN as part of
  the WWW project managed by Tim-
  Berners-Lee

• The first brows...
XHTML 1.1
• stands for EXtensible HyperText
  Markup Language

• Largely based on HTML 4.01

• Defines HTML as an XML appl...
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 t...
Just one Second !
• Is there any point in writing plain HTML
  when Microsoft Frontpage is out in the
  wild ?

• It produ...
What do these tags look like?
            (1)
• Tag names are included in < >

• The text to be formatted is included in
 ...
What do these tags look like?

• They may also have attributes
  <img id="flower" />

• Tags must always have a matching
 ...
Structure of a Tag


<p id="title">Welcome to CO1052</p>


tag           attribute        attribute
              end
name...
The Mother of all Tags
• Tags in XHTML are case sensitive
  – BUT not in HTML
• The most basic tag is the one that specifi...
The Document Type
• To adhere to the XHTML 1.1 standard, the
  first line of the document must be the
  appropriate docume...
Inside the document
• A document must have a head and title
  element given by the nested tags:
<head>
     <title>Here go...
HTML/XHTML Document -
                example
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://w...
So How to Type your HTML
       Code then?
• Use simple „text‟ editors, such as
  notepad
  – And don‟t forget to save fil...
Using notepad
• Follow start > All programs > Accessories > Notepad




                                                  ...
Using HTML-Kit
• HTML Editor




                           80
Using Dreamweaver
• WYSIWYG authoring software




                               81
Publish your own index.html page

http://sites.google.com/site/kuhtml
Keep on trucking

p.warnsberg@kingston.ac.uk | http://twitter.com/petterw
Kingston University HTML Programming and Internet Tools module introduction
Kingston University HTML Programming and Internet Tools module introduction
Kingston University HTML Programming and Internet Tools module introduction
Upcoming SlideShare
Loading in...5
×

Kingston University HTML Programming and Internet Tools module introduction

2,042

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
2,042
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Who is Petter?It is said that in the physical world only 7percent of what we communicate is verbal, 55 percent is the facial and body expressions while 38% is in the vocal cues.One’s identity is made up of the context you are in, the attributes you wear and what you chose to tell from your past.
  • The layers of technology that supports today&amp;apos;s online solutions have built up over time, an evolutionlong way since 95 when I built my first HTML website
  • Tencent Based on Trident (IE), big in ChinaMaxthon Big in China (200m dl)Flock – social browser
  • JavaScript, Flash, Search Engine
  • Traditional web development
  • .
  • Now it is all about conversation and “social”It has been called the conversation economy.What does that mean, what’s is the future waiting to be evenly distributed?And the conversation happens online all over the place in a range of channels through even wider selection of tools.Personal Social networksWhite label social networksBlogsPhotosVideosAudioMicroblogsSMSEmailsCollaborative toolsWikisEventsRecommendationsThe conversation is just the social media aspect of digital.Digital media enables so much more. The conversations might be a driving force but we have more needs than just engaging in conversations.There are lots and lots of digital channels and tools to be aware of and use as they seem fit.Image source www.theconversationprism.com
  • Producer/Consumer Facebook, Blog, Twitter, Forums, Youtube, Flickrcollage/cut-up/mash-up
  • And as people value their online profiles more...Battle of the social graph.Data portability started as a solution to the pain of signing up to all those sites and networks, adding your profile over and over again.Data portability aims to enable me to sign in everywhere with one password and only share media once in one place.Single sign-on“OpenID is a shared identity service, which allows Internet users to log on to many different web sites using a single digital identity, single sign-on, eliminating the need for a different user name and password for each site. OpenID is a decentralized, free and open standard that lets users control the amount of personal information they provide.”“OpenID is increasingly gaining adoption among large sites, with organizations like AOL, BBC, Google, IBM, Microsoft, MySpace, Orange, VeriSign, Yandex and Yahoo! acting as providers. In addition, OpenID can be used with Windows CardSpace” – WikipediaThe downside is if someone manages to get that one password of yours and get access to your complete online identity.OpenSocial from Google, similar to Facebook Connect“Create widgets with one set of tools.”Provides one API for building social applications that can be used across different websites. An open alternative to Facebook’s application platform.There are many websites implementing OpenSocial, including Engage.com, Friendster, hi5, Hyves, imeem, LinkedIn, MySpace, Ning, Oracle, orkut, Plaxo, Salesforce.com, Six Apart, Tianji, Viadeo, and XING.
  • http://dsc.discovery.com/sharks/frenzied-waters/
  • The value is in sharing, being part of...Guardian opens up their content“You can use the Open Platform to develop tools exploiting the depth and quality of the Guardian&amp;apos;s content “API – Application Protocol Interfacehttp://www.guardian.co.uk/open-platform
  • Bionic eyeData mashups,Physical world objects have information shadows in the virtual world.Combine these for richer eperiences.
  • GamesFarm Ville, 65m monthly active users on Facebook, 24m daily users
  • Microsoft does a lot. Bing is a good shot at it. Mostly playing catch-up.Web no longer the platform. The network is the world. To parts of it we still need windows into it.
  • Google are focusing on the infrastructure.Get the foundations right.The intel is in the data.Gears, to go offline, cheap windows to the cloud.&amp;quot;data is the Intel Inside&amp;quot; Big media companies to challenge by wanting to get paid
  • Our reality is already augmented and our bodies enhanced with technology. The penetration of mobile technology is dominant world wide.Google mobile operating system Android. Free for anyone who wants to install it on their hardware. Is based on Linux.1MM units sold in three days (10MM apps downloaded over the same period); mobile browser market share already 50% &amp;gt; Windows Mobile The iPhone has changes what people expect from mobile interfaces with it’s proximity sensors, touch sensitivity and easy to use interface.3 Skype Phone500K+ units in &amp;lt; 200 days. Leverage large Skype user base of 370MM (+51%Y/Y) + create a low-cost webenabled VoIP social networking, digital presence phone.Fire eagle – location awareness from YahooGoogle latitudeLet Fire eagle know where you are and have it displayed, broadcasted to where you have an online presence.
  • 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/ 3
    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 4
    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 5
    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 7
    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
    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 9
    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 10
    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 11
    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. 12
    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. 13
    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 14
    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 Make it great: that machines knows what -Usability it is -Accessibility -Production workflow CSS -Validation Style the content so that -Debugging humans can easily take it in -Web design JavaScript Make it interactive so that it becomes more intuitive, faster and obvious to
    33. 33. Example 1 • A typical web page contains: – HTML instructions – Style sheets • Colors, fonts, sizes, styl es etc. • Images, animated GIF images, objects, … html_example.htm – Javascripts 35
    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" />, .... …… 36
    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 39
    38. 38. Campaigns: Get the glass 40
    39. 39. Example 3 – Dynamic HTML • Manipulating the HTML and browser with JavaScript – Rich interfaces and AJAX – Enabled web applications 41
    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 ...in a fragmented ubiquitous digital landscape that builds on top of existing layers of technology.
    54. 54. From browser to server return
    55. 55. 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 58
    56. 56. 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 59
    57. 57. 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 60
    58. 58. 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 61
    59. 59. 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 62
    60. 60. 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 63
    61. 61. 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 64
    62. 62. 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 65
    63. 63. 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 66
    64. 64. 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... 67
    65. 65. XHTML 1.1 • stands for EXtensible HyperText Markup Language • Largely based on HTML 4.01 • Defines HTML as an XML application 68
    66. 66. 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 69
    67. 67. 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. 70
    68. 68. 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> 71
    69. 69. What do these tags look like? • They may also have attributes <img id="flower" /> • Tags must always have a matching closing tag 72
    70. 70. Structure of a Tag <p id="title">Welcome to CO1052</p> tag attribute attribute end name name value tag 73
    71. 71. 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> 74
    72. 72. 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"> 75
    73. 73. 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 76
    74. 74. 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> 77
    75. 75. 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 78
    76. 76. Using notepad • Follow start > All programs > Accessories > Notepad 79
    77. 77. Using HTML-Kit • HTML Editor 80
    78. 78. Using Dreamweaver • WYSIWYG authoring software 81
    79. 79. Publish your own index.html page http://sites.google.com/site/kuhtml
    80. 80. Keep on trucking p.warnsberg@kingston.ac.uk | http://twitter.com/petterw
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×