• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lecture 1
 

Lecture 1

on

  • 905 views

 

Statistics

Views

Total Views
905
Views on SlideShare
905
Embed Views
0

Actions

Likes
0
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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