1 / 21

Web Page Introduction

Learn about static and dynamic web pages, HTML5, multimedia, geolocation, and XML with stylesheets. Discover different technologies, HTML tags, and tools for creating and editing web pages.

pdrew
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. 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 • Standard • The World Wide Web Consortium (W3C) • HTML 5: <!DOCTYPE html>

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

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

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

  9. HTML 5 New INPUT types with build-in validationhttp://www.w3schools.com/html/html_form_input_types.asp • INPUT type="number" • INPUT type="range” • Other types: • email, url, tel, etc Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">

  10. HTML5 Multimediahttp://www.w3schools.com/html/html_media.asp • Video • Audio • Youtube • Etc.

  11. HTML5 Geolocationhttp://www.w3schools.com/html/html5_geolocation.asp • Latitude • Logitude • Static map

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

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

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

  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 WIXhttp://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

More Related