Introduction to Web Applications: HTML and Client-Side Code Fundamentals
This session aims to introduce fundamental concepts of web applications, focusing on HTML and client-side scripting. By the end of the week, participants will learn to create a static web page using HTML and add dynamic functionality with VBScript. Topics include the structure of HTML documents, basic tags, client-server architecture, and the request-response cycle. Participants will also explore dynamic processing methods and learn practical skills for form validation and enhancing user interactions within web applications.
Introduction to Web Applications: HTML and Client-Side Code Fundamentals
E N D
Presentation Transcript
Session Aims & Objectives • Aims • To introduce the fundamental ideas involved in web applications • Objectives,by end of this week’s sessions, you should be able to: • create a static web page, using HTML • add dynamic functionality, using VB Script
Web Hardware and Software network connection Client Server Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache)
Request-Response Cycle <html> <head> <title>Mark Dixon's web site</title> </head> <body background="BackGround.JPG"> <font size=+3><center><b><p>Mark Dixon's web site</b></center> <font size=+2> <p>Welcombe to my web server. Please select from the following list: <ul> <li><a href="./Soft131/Index.htm">Soft131: Introduction to programming for Multimedia and Internet applications.</a> </ul> </font> </body> </html> Response Request http://mdixon.soc.plym.ac.uk/ Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache)
HTML • Hyper-Text Markup Language • text files • edited with notepad • with tags, e.g. • bold: <b>This will be in bold</b> • italic: <i>This will be in italic</i> • work like brackets • start/open <b> • end/close </b> • reference: http://www.willcam.com/cmat/html/crossref.html
HTML page - Structure <html> <head> <title>Test</title> </head> <body> <p> This is a test <b>page</b>. </body> </html> head (info) body(content)
Example 1: Intro page <html> <head> <title>Mark Dixon's web site</title> </head> <body background="BackGround.JPG"> <font size=+3><center><b><p>Mark Dixon's web site</b></center> <font size=+2> <p>Welcombe to my web server. Please select from the following list: <ul> <li><a href="./Soft131/Index.htm"> Soft131: Introduction to programming for Multimedia and Internet applications.</a> </ul> </font> </body> </html>
Forms • Form • collection of input tags <HTML> <HEAD> <TITLE>Login</TITLE> </HEAD> <BODY> <FORM NAME="frmLogin"> <INPUT NAME="txtUserName" TYPE="input"><BR> <INPUT NAME="txtPassword" TYPE="password"><BR> <INPUT NAME="btnLogon" TYPE="button" VALUE="Logon" DISABLED="True"> </FORM> </BODY> </HTML>
Dynamic processing (what) • HTML is static • identical on each load • very limiting • Dynamic processing • client-side (browser) • quicker (no request-response cycle) • insecure (view source) • limited (can't access server-side databases) • server-side (server application) • slower • more powerful
Client-side processing (how) • Use <script> tags, to enclose • Script code • VB Script • Java Script <SCRIPT LANGUAGE=VBScript> <!-- MsgBox "Hello there!" --> </SCRIPT>
Example 2: Form validation <HTML> <HEAD> <TITLE>Login</TITLE> <SCRIPT LANGUAGE=VBScript> <!-- Sub txtUserName_OnKeyUp() If Document.frmLogin.txtUserName.Value = "" Then Document.frmLogin.btnLogon.Disabled = True Else Document.frmLogin.btnLogon.Disabled = False End If End Sub --> </SCRIPT> </HEAD> <BODY> <FORM NAME="frmLogin"> <INPUT NAME="txtUserName" TYPE="input"><BR> <INPUT NAME="txtPassword" TYPE="password"><BR> <INPUT NAME="btnLogon" TYPE="button" VALUE="Logon" DISABLED="True"> </FORM> </BODY> </HTML> Login
Reference • Inputs • Text • Password • Button • Submit • Events • OnClick • OnKeyUp • OnMouseOver
