Web Page Introduction

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.

Types of Web pages Static page: –The contents of a web page is predefined by HTML tags. Example: david chao’s 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. –Yahoo’s Finance/Enter symbol/Historical prices

Technologies for Creating Dynamic Pages Client-side technology –JavaScript, VBScript Server-side technology –Microsoft.Net

Dynamic Page – Client-Side Script Example Demo: TimeNowClient.Htm New Page 1 The time is now document.write time() iHour=hour(time()) if iHour < 12 then document.write " good morning " else document.write " good afternoon " end if

Problems with Client-Side Script Source code revealed Compatibility problem –Mozilla –IE

Dynamic Web Pages – Server-Side Script Example Demo: TimeNow.aspx – – The time is now –<% –dim iHour –iHour=Now.Hour() –if iHour < 12 then –response.write(" good morning ") –else –response.write (" good afternoon ") –end if –%> – Note: –Need web server; cannot open by File/Open Page. –Work for both Mozilla and IE.

HyperText MarkUp Language A language used to define a web page. Other languages: –XML, XHTML, DHTML, etc.

Basic HTML Tags : large text : smallest text Reference tag: : Paragraph tag Image tag

Example David Chao ISYS363 HTML Demo Welcome to David Chao’s Home Page Click here to see a cake picture

Web Page Editors Word: –File/New –Under new document choose WebPage Composer FrontPage Others

Typical Web Page Contents Text: –Alignment, Size, Font, Bold Link Table List BookMark BackGround Picture Form mailto: Address

Other Features Frame: –Word: Format/Frame When creating a link: Target Frame Theme: –Word: Format/Theme Insert/Object –Calendar, worksheet, Chart

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:

Reference Tag Absolute reference –The reference includes the complete path to the linked document. –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.

Edit a Currently Opened Web Page With IE or Netscape: –File/Edit page –Copy components

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.

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

Typical Web Page Contents About Us Company organization Mission Products/Services Partner organizations Clients Information for users Links to relevant sites Contact Us