Web Page Introduction
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. <H1> Britain calls for direct talks with Iran </H1>
Other Markup Languages XML: Extensible Markup Language a general-purpose markup language User-defined tags: <AuthorName>John Smith</AuthorName> 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
XML Example <?xml version = "1.0" ?> <?xml:stylesheet type="text/css" href="books.css" ?> <Books> <Book> <btitle>My Favorite Book</btitle> <ISBN>1-34567-04-01</ISBN> <Authors> <AuthorName>John Smith</AuthorName> <AuthorName>Peter Chen</AuthorName> </Authors> <Price> $45.00</Price> <Description>This is a grerat book</Description> </Book> <btitle>My Second Favorite Book</btitle> <ISBN>1-34567-04-02</ISBN> <AuthorName>Adam Smith</AuthorName> <Price> $25.00</Price> <Description>This is a second great book</Description> </Books>
Style Sheet Example btitle { display:block; font-family: Aerial, Helvetica; font-weight: bold; font-size: 20pt; color: #9370db; text-align: center; } ISBN { font-size: 12pt; color: #c71585; text-align: left; Authors { display:inline; font-style: italic; font-size: 10pt; Price { color: #ff1010; Description {
Types of Web pages Static page: Dynamic 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 PHP Java
Dynamic Page – Client-Side Script Example Demo: TimeNowClient.Htm <html> <head> <title>New Page 1</title> </head> <body> <p>The time is now <script language=vbscript> document.write time() </script> </p> iHour=hour(time()) if iHour < 12 then document.write "<h1>good morning</h1>" else document.write "<h1>good afternoon</h1><br>" end if </body> </html>
Problems with Client-Side Script Source code revealed Compatibility problem Mozilla IE
Dynamic Web Pages – Server-Side Script Example Demo: DemoTime VB project <body> <form id="form1" runat="server"> <div> <p>The time is now <% response.write(Now.TimeOfDay())%></p> <% dim iHour iHour=Now.Hour() if iHour < 12 then response.write("<h1>good morning</h1><br>") else response.write ("<h1>good afternoon</h1><br>") end if %> </div> </form> </body>
Basic HTML Tags <html> </html> <title> </title> <body> </body> <h1> </h1>: large text <h6> </h6>: smallest text Reference tag: <a href=“cake.jpg”> <p> </P>: Paragraph tag <img> Image tag
Example <html> <title>David Chao ISYS363 HTML Demo</title><p> <body> <h1>Welcome to David Chao’s Home Page</h1> <hr> <a href=“cake.jpg”>Click here to see a cake picture</a><p> </body> </html>
Web Page Editor MS Publisher DreamWeaver Others Website templates Blank page DreamWeaver Others MS Word: Fie/Save As/Web page
Typical Web Page Contents Text: Alignment, Size, Font, Bold Link Table List BookMark BackGround Picture Form Email: mailto:emailAddress
Reference Tag Absolute reference Relative reference The reference includes the complete path to the linked document. <a href=“c:\cake.gif”> 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
Publishing Web Pages Web server Creating web pages using editor Default directory, default home page Virtual directory Creating web pages using editor Transfer web pages to web server: FTP, File Transfer Program
Typical Web Site Contents About Us Company organization Mission Products/Services Partner organizations Clients Information for users Links to relevant sites Contact Us