Download presentation
Presentation is loading. Please wait.
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. <H1> Britain calls for direct talks with Iran </H1>
3
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
4
XML Example <?xml version = "1.0" ?>
<?xml:stylesheet type="text/css" href="books.css" ?> <Books> <Book> <btitle>My Favorite Book</btitle> <ISBN> </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> </ISBN> <AuthorName>Adam Smith</AuthorName> <Price> $25.00</Price> <Description>This is a second great book</Description> </Books>
5
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 {
6
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
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
<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>
9
Problems with Client-Side Script
Source code revealed Compatibility problem Mozilla IE
10
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>
11
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
12
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>
13
Web Page Editor MS Publisher DreamWeaver Others Website templates
Blank page DreamWeaver Others MS Word: Fie/Save As/Web page
14
Typical Web Page Contents
Text: Alignment, Size, Font, Bold Link Table List BookMark BackGround Picture Form mailto: Address
15
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.
16
Edit a Currently Opened Web Page
With IE or Netscape: File/Edit page Copy components
17
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
18
Typical Web Site Contents
About Us Company organization Mission Products/Services Partner organizations Clients Information for users Links to relevant sites Contact Us
Similar presentations
