Your SlideShare is downloading. ×
Lecture 1
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lecture 1


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. COMP2040 Module II Web Programming Lecture 1 – Overview and HTML
  • 2. Concepts of Client-Side and Server-Side Scripting
  • 3. Web page the old way
  • 4. Web Browsers
    • Work by using a protocol called H yper T ext T ransport P rotocol (HTTP) to request files from a web server.
    • Specially encoded text document contains special markup written in H yper T ext M arkup L anguage (HTML).
    • The browser then converts this HTML into an appropriate readable format.
    • Browsers can also display multimedia elements and document types.
  • 5. Scripting Languages
    • Client Side Scripting (run in the browser)
      • Java script, VB script
    • Client Side Application Programs (run as an independent program in the client machine)
      • Java Applets, Plug-ins
    • Server Side Scripting (run the server – not really true in JSP case the server is only a container)
      • ASP, JSP, PHP
    • Server Side Application Programs (run as an independent program in the server)
      • CGI (Perl, C, Shell, etc)
  • 6. About Client Side Scripting
    • Run inside the browser
    • Browser dependent
      • Same program may behave differently on different browser
      • May run on one browser and may not run on another
        • E.g. VBscripts only works in IE and not in Firefox
  • 7. Advantages/Disadvantages of Client Side Scripting
    • Can validate user input offline
      • E.g. Validate check-digit of Hong Kong ID
    • Can trap Windows Events
      • onMouseOver, onMouseOut
      • onFocus, onBlur
    • Can be a offline HTML and Script
      • Scripting WITHOUT a Web Server
    • Cannot hook up to a shared database on the server
  • 8. About Server Side Scripting
    • Handled by web server
    • Need different Servers for different Server Side Scripting
      • ASP only available in IIS
      • Need a Container (Tomcat or J2EE server) for JSP
    • PHP in Apache
      • PHP may work in IIS after customization.
  • 9. Advantages/Disadvantages of Server Side Scripting
    • Cannot trap Windows Events
      • onMouseOver, onMouseOut, onFocus, onBlur
    • Cannot be a offline HTML and Script
      • Must use a Web Server
    • Can hook up to a shared database on the server
  • 10. There are advantages for Client Side Scripting and Service Side Scripting
    • Applications usually use Service Side Scripting to Generate Client Side Scripting
      • E.G. A JSP program generate a JavaScript
      • Microsoft Windows Systems usually use ASP to generate VBscripts
    • And there are tools that help you code both Client Side Script and Service Side Script
      • e.g. DreamWeaver
  • 11. The three tier architecture
    • HTML
    • JS
    • PHP
    • JSP
    • ASP
    • MySQL
    • Oracle
    • MS-SQL
  • 12. About COMP2040 Module II
    • You will learn
      • HTML
      • JSP
      • JavaScript and DOM
      • XML/CSS
      • Cookies and Sessions
      • MySql Interface
      • AJAX
  • 13. And ….
    • There are 7 assignments
    • One assignment per week
    • Assignments must be submitted on time otherwise they will not be graded
  • 14. HTML Hypertext Markup Language
  • 15. Why Even Bother With HTML ?
    • A basic understanding can help:
      • Debug your web page much faster
      • Better understand inherited code
      • Overcome limitations of web applications
        • Microsoft FrontPage
        • Macromedia Dreamweaver
      • Accommodate HTML evolution
        • XHTML, XML etc.
  • 16. And …
    • The outputs generated by ASP, JSP and PHP to be displayed on a browser are HTML tags
    • Using HTML you use <html>This is a web page</html>
    • Using PHP you use <?php echo(“<html>This is a web page</html>”); ?>
  • 17. Creating HTML Documents
    • You need:
      • an HTML or text editor
        • e.g. Notepad (Windows)
      • to create a plain-text file
      • to get the file on a server or move the file to the proper folder if you are using xampp/tomcat
      • and to view the file with a browser
  • 18. HyperText Markup Language
    • Is a set of markup symbols or codes inserted in a text file intended for display on a Web browser page
    • The markup tells the Web browser how to display a Web page's words and images
    • Each individual markup code is referred to as an element (tag)
    • Tags are special codes that can convert ordinary text into hypertext
  • 19. HTML Control characters < > The generic form of a tag is <tag_name> text </tag_name> For example: will display as <I>This is italic</I> This is italic Uses a combination of tags, attributes, & values to generate its results open tag close tag <body bgcolor=“FFFFFF”> tag attribute value
  • 20.
    • Web page structure and layout
      • Defined by html page
      • Use of tags (usually in pairs ) and attributes
    Basic HTML Web Page Tags Start Tag End Tag
  • 21. The <HEAD> Tag
    • It can include other tags to provide useful information about the document, such as:
      • <TITLE> specifies the document title
      • <STYLE> specifies style sheets used within the document
      • <META> allows Web authors to specify to search engines how they want their documents to be indexed
      • <BASE> specifies a base address of the HTML documents
      • <LINK> provides relationships between documents
      • More information can also be found at - refresh
  • 22. Web Page Properties
      • Use BODY Attributes
        • BACKGROUND=&quot;# … &quot; - b ackground Image
        • BGCOLOR=&quot;# … &quot; - b ackground c olo u r
        • LINK=&quot;# … &quot; - c olo u r c ode for Links
        • VLINK=&quot;# … &quot; - c olo u r or Visited Links
        • TEXT=&quot;# … &quot; - c olo u r c ode for Text
        • &quot;# … “ = Hexadecimal code
        • NB. Use of Browser-safe colours
  • 23. Some Basic Uses of Tags
    • Bold
    • Italics
    • Horizontal Lines
    • Headers
    • Paragraphs and Line Breaks
    • Text alignment
  • 24. The Importance of HTML Standards
    • WWW growth due to standards
      • Non-profit
      • Role of W3C (WWW Consortium)
    • Commercialization  “Browser Wars”
      • Resulted in browser incompatibilities
      • Difficult for web developers
    • Need to develop to lowest common browser feature set
      • i.e. NOT Microsoft IE v7 compatible only
      • Would exclude Mac, Linux and Netscape users
  • 25. Hypertext
    • Anchored links
      • Email
    • Internal document navigation
    • Structuring links
      • Relative vs Absolute
      • Absolute (complete URL) must be used for external links
  • 26. Multimedia
    • Inline images
      • Transparent GIFs
      • Interlaced vs Non-interlaced
      • Animated GIFs
      • Alignment
    • Hyperlinked images
    • Sound
    • Video
  • 27. Advanced Text Techniques
    • Fonts
    • Colours
    • Special characters
  • 28. T ables
    • One of the most important HTML functions
    • Very versatile
      • Often used to overcome layout limitations
    • Visible or hidden?
    • Advanced html-coded uses are very time consuming
  • 29. F rames
    • Avoid using and will not cover
    • Declining in use, especially with large media organizations
      • Can be fiddly to setup
      • Arguable benefit – high res. monitors
      • Browser incompatibilities
    • All of the frame advantages can be done using AJAX
  • 30. Lab time
    • More detail of the HTML tags are in the lab exercise 1
    • Please go through Lab 1 slowly before you try to do assignment 1
    • For reference on HTML, please refers to and , where W3C is a large consortium that defines standards on the Web
  • 31. Before you go
    • You need to complete assignment 1 before start of next lecture