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. – Britain calls for direct talks with Iran

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

XML Example My Favorite Book John Smith Peter Chen $45.00 This is a grerat book My Second Favorite Book Adam Smith $25.00 This is a second great book

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; }

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 Server-side technology –Microsoft.Net –PHP –Java

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

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 Editor MS Publisher –Website templates –Blank page DreamWeaver Others –MS Word Open a new document Save As: Web Page

Creating Web Page with MS Word Text: –Alignment, Size, Font, Bold Link –Existing page, place is document, Table List BookMark BackGround –Page layout/Page Color Picture Form mailto: Address

Creating Web Page with MS Publisher File/Web Site –Select template Choose website pages –Product list Product detail Insert Format File/Web page preview

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 Site Contents About Us Company organization Mission Products/Services Partner organizations Clients Information for users Links to relevant sites Contact Us