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 PresentationTRANSCRIPT
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>
Markup Languages • Hyper Text MarkUp Language (HTML) • XML: Extensible Markup Language
– User-defined tags:• <AuthorName>John Smith</AuthorName>• Ex: c:\inetpub\wwwroot\facoritebook.xml
– Cascade Style Sheet, CSS
• HTML5: – HTML,+ XML + improving support for the latest
multimedia– cross-platform mobile applications– <!DOCTYPE html>
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– Java EE– Open source:
• PHP, Perl, Ruby, Python, etc.
Basic HTML Tags
• <html> </html>• <title> </title>• <body> </body>• <h1> </h1>: large text• <h6> </h6>: smallest text• Reference tag:
• <a href=“cake.jpg”>
• <p> </P>: Paragraph tag• <img> Image tag
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/
• 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