1. Web Page Introduction

2. What is a web page? A hypertext that contains clickable links. A web page is a text file containing Hyper Text MarkUp Language (HTML) tags and/or other markup language tags. –A markup language combines text and extra information about the text's structure or presentation using markup, which is intermingled with the primary text. – Britain calls for direct talks with Iran

3. Other Markup Languages XML: Extensible Markup Language – a general-purpose markup language –User-defined tags: John Smith Ex: c:\inetpub\wwwroot\facoritebook.xml XHTML: Extensible HyperText Markup Language –XHTML is the successor to HTML – HTML + XML DHTML: Dynamic HTML – is a collection of technologies used together to create interactive and animated web sites by using a combination of a client-side scripting language (such as JavaScript), a presentation definition language (Cascading Style Sheets, CSS), and a Document Object Model. –Ex:C:/Inetpub/wwwroot/docProp.htm

4. XML Example My Favorite Book 1-34567-04-01 John Smith Peter Chen $45.00 This is a grerat book My Second Favorite Book 1-34567-04-02 Adam Smith $25.00 This is a second great book

5. Style Sheet Example btitle{ display:block; font-family: Aerial, Helvetica; font-weight: bold; font-size: 20pt; color: #9370db; text-align: center; } ISBN{ display:block; font-family: Aerial, Helvetica; font-weight: bold; font-size: 12pt; color: #c71585; text-align: left; } Authors{ display:inline; font-family: Aerial, Helvetica; font-style: italic; font-size: 10pt; color: #9370db; text-align: left; } Price{ display:block; font-family: Aerial, Helvetica; font-size: 12pt; color: #ff1010; text-align: left; } Description { display:block; font-family: Aerial, Helvetica; font-size: 12pt; color: #ff1010; text-align: left; }

6. 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

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

8. 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

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

10. 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.

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

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

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

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

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

16. 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:

17. 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.

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

19. 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.

20. 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

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