Web Page Introduction

1
Web Page Introduction
2
What is a web page?

• A hypertext is a document contains clickable
  links.
• A web page is a text file containing Hyper Text
  MarkUp Language (HTML) tags and/or other markup
  language tags.

3
Types of Web pages

• Static page
• The contents of a web page is predefined by HTML
  tags.
• Example david chaos home page.
• Dynamic page
• A web page includes contents produced by a
  programming language when the page is opened.
• Examples
• Pages that display current date/time, visitor
  counter
• Yahoo home page
• Pages that display results based on a database
  query.
• Yahoos Finance/Enter symbol/Historical prices

4
Technologies for Creating Dynamic Pages

• Client-side technology
• JavaScript, VBScript
• Server-side technology
• Microsoft .Net

5
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
6
Problems with Client-Side Script

• Source code revealed
• Compatibility problem
• Mozilla
• IE

7
Dynamic Web Pages Server-Side Script Example

• Demo TimeNow.aspx
• ltbodygt
• ltpgtThe time is now ltNow.TimeOfDay()gtlt/pgt
• ltpgtThe time is now lt response.write(Now.TimeOfDay
  ())gtlt/pgt
• lt
• dim iHour
• iHourNow.Hour()
• if iHour lt 12 then
• response.write("lth1gtgood morninglt/h1gtltbrgt")
• else
• response.write ("lth1gtgood afternoonlt/h1gtltbrgt")
• end if
• gt
• lt/bodygt
• Note
• Need web server cannot open by File/Open Page.
• Work for both Mozilla and IE.

8
HyperText MarkUp Language

• A language used to define a web page.
• Other languages
• XML, XHTML, DHTML, etc.

9
Basic HTML Tags

• lthtmlgt lt/htmlgt
• lttitlegt lt/titlegt
• ltbodygt lt/bodygt
• lth1gt lt/h1gt large text
• lth6gt lt/h6gt smallest text
• Reference tag
• lta hrefcake.jpggt
• ltpgt lt/Pgt Paragraph tag
• ltimggt Image tag

10
Example
lthtmlgt lttitlegtDavid Chao ISYS363 HTML
Demolt/titlegtltpgt ltbodygt lth1gtWelcome to David
Chaos Home Pagelt/h1gt lthrgt lta hrefcake.jpggtClic
k here to see a cake picturelt/agtltpgt lt/bodygt lt/html
gt
11
Web Page Editors

• Word
• File/New
• Under new document choose WebPage
• Composer
• FrontPage
• Others

12
Typical Web Page Contents

• Text
• Alignment, Size, Font, Bold
• Link
• Table
• List
• BookMark
• BackGround
• Picture
• Form
• Email mailtoemailAddress

13
Other Features

• Frame
• Word Format/Frame
• When creating a link Target Frame
• Theme
• Word Format/Theme
• Insert/Object
• Calendar, worksheet, Chart

14
FrontPage Demo

• Controls
• Format
• Layer, Theme
• Behavior
• Select a control
• Select an action
• Select an event
• Insert
• Web Component
• Layer
• Intteractive button
• Inline frame
• Frame
• File/New/More page templates/Frames
• Form
• Controls
• Action
• Mailto

15
Reference Tag

• Absolute reference
• The reference includes the complete path to the
  linked document.
• lta hrefc\cake.gifgt
• Cause problem when the referenced page changes
  location.
• Relative reference
• Relative position of page folders
• Cause problem when the web page changes location
  and the referenced page does not.

16
Edit a Currently Opened Web Page

• With IE or Netscape
• File/Edit page
• Copy components

17
Access Database Page

• Select a table or a query, and click
• File/Save As/Data Access Page
• Page wizard
• Copy/Paste to a page editor.

18
Publishing Web Pages

• Web server
• Default directory, default home page
• Virtual directory
• Creating web pages using editor
• Transfer web pages to web server
• FTP, File Transfer Program

19
Typical Web Page Contents

• About Us
• Company organization
• Mission
• Products/Services
• Partner organizations
• Clients
• Information for users
• Links to relevant sites
• Contact Us