Web Page Introduction

What is a web page? A web page is a text file containing 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

Markup Languages Hyper Text MarkUp Language (HTML) XML: Extensible Markup Language – a general-purpose markup language –User-defined tags: John Smith Ex: c:\inetpub\wwwroot\facoritebook.xml –Cascade Style Sheet, CSS XHTML: Extensible HyperText Markup Language –XHTML is the successor to HTML – HTML + XML HTML5: –HTML,+ XML + improving support for the latest multimedia –cross-platform mobile applications

XML with Stylesheet 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

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 DreamWeaver and many others –With support to develop dynamic page with script languages 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 in document, Table List BookMark BackGround –Page layout/Page Color Picture Form mailto: Address

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