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 –User-defined tags: John Smith Ex: c:\inetpub\wwwroot\facoritebook.xml –Cascade Style Sheet, CSS 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 –Java EE –Open source: PHP, Perl, Ruby, Python, etc.

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

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

Online Resources for Learning HTML w3schools.com – Example: –Learn HTML5

Web Page Editors DreamWeaver and many others –With support to develop dynamic page with script languages MS Word Open a new document Save As: Web Page Internet free editor: –Wix free website builder –

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

Creating Website Using WIX Need an account Create –Choose a template –View –Edit: Customize design Page/Design/Add Save/preview My Account: –Saved website

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

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