1 / 16

Web Page Introduction

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.

niel
Download Presentation

Web Page Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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 presentationusing markup, which is intermingled with the primary text. • <H1> Britain calls for direct talks with Iran </H1>

  3. Hyper Text MarkUp Language , HTML • History: • http://en.wikipedia.org/wiki/HTML • Standard • The World Wide Web Consortium (W3C) • HTML 5: <!DOCTYPE html> • Multimedia controls • Video, audio, canvas • Controls with build-in validation

  4. XML, Extensible Markup Language • User-defined tags: • <AuthorName>John Smith</AuthorName> • Ex: c:\inetpub\wwwroot\facoritebook.xml • Cascade Style Sheet, CSS

  5. XML with Stylesheet Example <?xml version = "1.0" ?> <?xml-stylesheet type="text/css" href="books.css" ?> <Books> <Book> <btitle>My Favorite Book</btitle> <ISBN>1-34567-04-01</ISBN> <Authors> <AuthorName>John Smith</AuthorName> <AuthorName>Peter Chen</AuthorName> </Authors> <Price> $45.00</Price> <Description>This is a grerat book</Description> </Book> <Book> <btitle>My Second Favorite Book</btitle> <ISBN>1-34567-04-02</ISBN> <Authors> <AuthorName>Adam Smith</AuthorName> </Authors> <Price> $25.00</Price> <Description>This is a second great book</Description> </Book> </Books>

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

  7. 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

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

  9. HTML Tags (Elements) • Heading section • <head>, <title>, <meta>, <script>, etc. • Body section • <body>, • <h1> </h1>: large text • <h6> </h6>: smallest text • Reference tag: <a href=“cake.jpg”> • <p>: Paragraph tag • <img> Image tag • Table: <table>, <tr>: a new row in table, <td>: a new cell in a table row. • Form: <form>, <input>, <select>

  10. Example <html> <title>David Chao 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>

  11. Online Resources for Learning HTML • w3schools.com • http://www.w3schools.com/default.asp • Example: • Learn HTML5

  12. Web Page Editors • DreamWeaver and many others • With support to develop dynamic page with script languages • http://www.adobe.com/solutions/html5.html • MS Word • Open a new document • Save As: Web Page • Internet free editor: • Wix free website builder • http://www.wix.com/

  13. 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

  14. Creating Website Using WIXhttp://www.wix.com/ • Create • Choose a template • View • Edit: Desktop/Mobile editor • Page: rearrange the order, add page, page transition • Design: background, colors • Add: • text, image, gallery, media, etc. • Social, Apps: Google map, • Save/preview • My Account: • Saved websites

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

  16. 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

More Related