Lecture 1
Upcoming SlideShare
Loading in...5

Lecture 1






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Lecture 1 Lecture 1 Presentation Transcript

  • COMP2040 Module II Web Programming Lecture 1 – Overview and HTML
  • Concepts of Client-Side and Server-Side Scripting
  • Web page the old way
  • 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.
  • 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)
  • 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
  • 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
  • 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.
  • 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
  • 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
  • The three tier architecture
    • HTML
    • JS
    • PHP
    • JSP
    • ASP
    • MySQL
    • Oracle
    • MS-SQL
  • About COMP2040 Module II
    • You will learn
      • HTML
      • JSP
      • JavaScript and DOM
      • XML/CSS
      • Cookies and Sessions
      • MySql Interface
      • AJAX
  • And ….
    • There are 7 assignments
    • One assignment per week
    • Assignments must be submitted on time otherwise they will not be graded
  • HTML Hypertext Markup Language
  • 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.
  • 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>”); ?>
  • 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
  • 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
  • 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
    • 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
  • 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 http://www.ncdesign.org/html/010page.htm - refresh
  • 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
  • Some Basic Uses of Tags
    • Bold
    • Italics
    • Horizontal Lines
    • Headers
    • Paragraphs and Line Breaks
    • Text alignment
  • 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
  • Hypertext
    • Anchored links
      • Email
    • Internal document navigation
    • Structuring links
      • Relative vs Absolute
      • Absolute (complete URL) must be used for external links
  • Multimedia
    • Inline images
      • Transparent GIFs
      • Interlaced vs Non-interlaced
      • Animated GIFs
      • Alignment
    • Hyperlinked images
    • Sound
    • Video
  • Advanced Text Techniques
    • Fonts
    • Colours
    • Special characters
  • 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
  • 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
  • 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 http://www.w3.org/MarkUp/ and http://www.w3.org/TR/html4/ , where W3C is a large consortium that defines standards on the Web
  • Before you go
    • You need to complete assignment 1 before start of next lecture