Web Page Introduction
16
Web Page Introduction
description
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. - PowerPoint PPT Presentation
Transcript of 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.
– <H1> Britain calls for direct talks with Iran </H1>
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
XML, Extensible Markup Language• User-defined tags:
– <AuthorName>John Smith</AuthorName>– Ex: c:\inetpub\wwwroot\facoritebook.xml– Cascade Style Sheet, CSS
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>
Style Sheet Examplebtitle {
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– Others
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>
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>
Online Resources for Learning HTML
• w3schools.com – http://www.w3schools.com/default.asp
• Example:– Learn HTML5
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/
–
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
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
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
• Creating web pages using editor
• Transfer web pages to web server:– FTP, File Transfer Program
