Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 Web Page Introduction

2 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

3 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

4 Technologies for Creating Dynamic Pages Client-side technology – JavaScript Server-side technology – Microsoft.Net – PHP – Java – Others

5 Hyper Text MarkUp Language, HTML History: – http://en.wikipedia.org/wiki/HTML http://en.wikipedia.org/wiki/HTML Standard – The World Wide Web Consortium (W3C) HTML 5:

6 HTML Tags (Elements) Heading section –,,,, etc. Body section –, – : large text – : smallest text – Reference tag: – : Paragraph tag – Image tag – Table:, : a new row in table, : a new cell in a table row. – Form:,,

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

8 Online Resources for Learning HTML w3schools.com –http://www.w3schools.com/default.asphttp://www.w3schools.com/default.asp Example: –Learn HTML5

9 HTML 5 New INPUT types with build-in validation http://www.w3schools.com/html/html_form_input_types.asp INPUT type="number" INPUT type="range” Other types: – email, url, tel, etc Age: Satisfaction:

10 HTML5 Multimedia http://www.w3schools.com/html/html_media.asp Video Audio Youtube Etc.

11 HTML5 Geolocation http://www.w3schools.com/html/html5_geolocation.asp Latitude Logitude Static map

12 Google Maps http://www.w3schools.com/googleapi/default.asp Maps basic Maps overlays

13 XML, Extensible Markup Language User-defined tags: – John Smith –Ex: c:\inetpub\wwwroot\facoritebook.xml –Cascade Style Sheet, CSS Demo: –C:\Inetpub\wwwroot\favoritebookStyle.xml

14 XML with Stylesheet Example My Favorite Book 1-34567-04-01 John Smith Peter Chen $45.00 This is a grerat book My Second Favorite Book 1-34567-04-02 Adam Smith $25.00 This is a second great book

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

16 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 http://www.wix.com/ –

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

18 Creating Website Using WIX http://www.wix.com/ Create –Choose a template –View: Desktop view/Mobile view –Edit button: Desktop editor/Mobile editor –Save –Preview Back to Editor button My Account: –Saved websites

19 Edit button: Desktop editor/Mobile editor Page: rearrange the order, add page, page transition Design: background, colors Add: –text, image, gallery, media, etc. –Apps: Google map, form, HTML (website or HTML code) –Social Wix App market

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

21 Publishing Web Pages Web server –Default directory, default home page Creating web pages using editor Transfer web pages to web server: –FTP, File Transfer Program


Download ppt "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."

Similar presentations


Ads by Google