Web Basics

1
Web Basics

• ISYS546

2
Basic Tools

• Web server
• Default directory, default home page
• Virtual directory
• Web page editor
• Front Page
• Web page languages
• HTML, XML
• Client-side script language
• VBScript, JavaScript, DOM
• Server-side language VB.NET, ASP.NET

3
Dynamic Page Client-Side Script ExampleDemo
TimeNowClient.Htm
lthtmlgt ltheadgt lttitlegtNew Page 1lt/titlegt lt/headgt ltb
odygt ltpgtThe time is now ltscript
languagevbscriptgt document.write
time() lt/scriptgt lt/pgt ltscript languagevbscriptgt i
Hourhour(time()) if iHour lt 12
then document.write "lth1gtgood morninglt/h1gt" else
document.write "lth1gtgood afternoonlt/h1gtltbrgt" end
if lt/scriptgt lt/bodygt lt/htmlgt
4
Dynamic Web Pages Server-Side Script Example

• Demo TimeNow.aspx
• ltbodygt
• ltpgtThe time is now lttime()gtlt/pgt
• ltpgtThe time is now lt response.write time()gtlt/pgt
• lt
• dim iHour
• iHourhour(time())
• if iHour lt 12 then
• response.write lth1gtgood morninglt/h1gtltbrgt"
• else
• response.write "lth1gtgood afternoonlt/h1gtltbrgt"
• end if
• gt

5
Client-Side vs Server-Side Scripting

• Client-side scripting
• The browser requests a page.
• The server sends the page to the browser.
• The browser sends the page to the script engine.
• The script engine executes the script.
• Server-side scripting
• The browser requests a page.
• The server sends the page to the engine.
• The script engine executes the script.
• The server sends the page to the browser.
• The browser renders the page.
• Demo ShowSum.htm, Web Form

6
HTML Introduction

• Heading section
• ltheadgt, lttitlegt, ltmetagt, ltscriptgt, etc.
• Body section
• ltbodygt, ltpgt, lth1gt to lth6gt, ltagt, ltbrgt
• Formatting ltbgt, ltIgt, ltugt, ltcentergt
• Comment lt!-- comment --gt
• List ltulgt
• Image
• Table lttablegt, lttrgt a new row in table, lttdgt a
  new cell in a table row.
• Form ltformgt, ltinputgt, ltselectgt, lttextareagt

7
Webpage Editor

• FrontPage demo
• Visual Studio .Net
• Web Forms tab
• HTML tab

8
META Tag

• The meta tag allows you to provide additional
  information about the page that is not visible in
  the browser
• ltmeta nameAuthor contentD Chaogt
• ltmeta nameKeywords contentapple,
  orange,peachgt
• Redirection
• ltmeta http-equivrefresh content3urlhttp//w
  ww.sfsu.edugt
• 3 is number of seconds.
• Demo using FrontPage

9
TABLE Tag
lttable border"1" width"100"gt lttrgt lttd
width"25"gtlt/tdgt lttd width"25"gtnbsplt/tdgt
lttd width"25"gtnbsplt/tdgt lttd
width"25"gtnbsplt/tdgt lt/trgt lttrgt lttd
width"25"gtnbsplt/tdgt lttd
width"25"gtnbsplt/tdgt lttd
width"25"gtnbsplt/tdgt lttd
width"25"gtnbsplt/tdgt lt/trgt lt/tablegt
10
FORM Tag

• Form attribute
• Action Specify the URL of a program on a server
  or an email address to which a forms data will
  be submitted.
• Method
• Get the forms data is appended to the URL
  specified by the Action attribute as a
  QueryString.
• Post A prefered method for database processing.
  Forms data is sent separately from the URL.
• Name Forms name
• Demo TestFormGet.Htm, TestFormPost.Htm

11
QueryString

• A QueryString is a set of namevalue pairs
  appended to a target URL.
• It can be used to pass information from one
  webpage to another.
• To create a QueryString
• Add a question mark (?) immediately after a URL.
• Followed by namevalue pairs separated by
  ampersands ().
• Example
• ltA Hrefhttp//my.com/Target.htm?CustIDC1Cname
  Chaogt

12
Creating a QueryString

• Entered with a URL
• http//dchaolaptop/testFormGet.aspx?cidc2cnameb
  bb
• As part of a URL specified in an anchor tag.
• ltA Hrefhttp//my.com/Target.htm?CustIDC1Cname
  Chaogt
• Via a form sent to the server with the GET method.

13
SCRIPT Tag

• Client-side script
• ltSCRIPT LANGUAGE VBSCRIPTgt
• lt!--
• statements
• --gt
• lt/SCRIPTgt
• Server-side script
• ltscript languageVB runatservergt
• statements
• lt/scriptgt

14
Document Object Model
15
Window Object

• The Window object represents a Web browser
  window.
• Properties
• window.status, window.defaultstatus
• window.document, window.history, window.location.
• Window.name
• Methods
• window.open (url, name, Options)
• Options menubarno, statusno, toolbarno, etc.
• window.close
• window.alert(string)
• window.prompt(string)
• Window.focus
• Etc.

16
Document Object

• The document object represents the actual web
  page within the window.
• Properties
• background, bgColor, fgColor, title, url,
  lastModified, domain, referrer, cookie,
  linkColor, etc.
• Ex. document.bgColorsilver
• Methods
• Document.write (string)
• Document.open, close
• Demo (testDoc.htm, docProp.htm)

17
Navigator Object

• The navigator object provides information about
  the browser.
• Properties
• Navigator.appNamebrowser name
• Navigator.appCodeName browser code name
• Navigator.appVersion
• Navigator.platform the operating system in use.

18
Location Object

• Allows you to change to a new web page from
  within a script code.
• Properties
• Host, hostname, pathname
• Href full URL address
• Search A URLs queryString
• Methods
• location.reload()
• To open a page location.href URL

19
Testing Location Object
lthtmlgt ltscript languagevbscriptgt function
openNew() sitewindow.prompt("enter
url") window.open (site) location.href"showformd
ata.htm" end function lt/scriptgt ltheadgt ltmeta
http-equiv"Content-Type" content"text/html
charsetwindows-1252"gt ltmeta name"GENERATOR"
content"Microsoft FrontPage 4.0"gt ltmeta
name"ProgId" content"FrontPage.Editor.Document"gt
lttitlegtNew Page 1lt/titlegt lt/headgt ltbodygt
ltpgtltinput type"button" value"Button" name"B3"
onclick"openNew()"gtlt/pgt lt/bodygtlt/htmlgt Note
TestLocation.Htm
20
History Object

• Maintain a history list of all the documents that
  have been opened during current session.
• Methods
• history.back()
• history.forward()
• history.go() ex. History.go(-2)
• Demo testDocOpenClose.htm

21
Testing the History Object
lthtmlgt ltscript languagevbscriptgt lt!-- sub
clearVB() document.write ("hello, this is a new
page") window.alert("Press any key to
continue") document.open() document.write
("lth1gtThis is another new pagelt/h1gt") document.clo
se window.alert("Press any key to go
back") history.go(-2) end sub --gt lt/scriptgt ltheadgt
lttitlegtNew Page 1lt/titlegt lt/headgt ltbodygt ltpgtthis
is old infolt/pgt ltscript languagevbscriptgt documen
t.write ("ltpgtthis is another old
infolt/pgt") lt/scriptgt ltpgtltinput type"button"
value"clear" name"B3" onCLick"clearVB()"gt ltpgtn
bsplt/pgt lt/bodygt lt/htmlgt
22
Client-side Scripting with the Browser Object
Model
lthtmlgt ltheadgt ltmeta http-equiv"Content-Type"
content"text/html charsetwindows-1252"gt ltmeta
name"GENERATOR" content"Microsoft FrontPage
4.0"gt ltmeta name"ProgId" content"FrontPage.Edito
r.Document"gt ltscript languageJavaScript1.3gt windo
w.status "TestDomScript.Htm" lt/scriptgt lttitlegtNe
w Page 1lt/titlegt lt/headgt ltbodygt ltscript
languagevbscriptgt document.write("you are
using" navigator.appName) document.write("lt/pgt"
) emailwindow.prompt("Enter email
") window.alert ("your enail is"
email) sitewindow.prompt("enter
url") window.open (site) document.open() docum
ent.write("today is " Date()) lt/scriptgt lt/bodygt
lt/htmlgt
23
HTML Tags and Events

• Link ltagt lt/agt click, mouseOver, mouseOut
• Image ltimggt abort(loading is interrupted),
  error, load.
• Area ltareagt mouseOver, mouseOut
• Body ltbodygt blur, error, focus, load, unload
• Frameset blur, error, focus, load, unload
• Frame blur, focus
• Form submit, reset
• Textbox, Text area blur, focus, change, select
• Button, Radio button, check box click
• List blur, focus, change

24
Event Handler

• Event handler name on event name
• Ex. onClick
• Three ways of writing handler
• 1. Within the tag
• ltinput type button name button1 value
  click here onCLick window.alert(you click
  me)gt
• 2. Event function onCLickclickHandler()
• 3. Event procedure as in VB.
• Sub button1_onCLick()