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

754
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
754
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 http://www.ncdesign.org/html/010page.htm - 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 http://www.w3.org/MarkUp/ and http://www.w3.org/TR/html4/ , 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

×