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 Example
btitle
ISBN
Authors
Price
{
display:block;
font-family: Aerial, Helvetica;
font-weight: bold;
font-size: 20pt;
color: #9370db;
text-align: center;
}
{
display:block;
font-family: Aerial, Helvetica;
font-weight: bold;
font-size: 12pt;
color: #c71585;
text-align: left;
}
{
display:inline;
font-family: Aerial, Helvetica;
font-style: italic;
font-size: 10pt;
color: #9370db;
text-align: left;
}
{
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 WIX
http://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:
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
Descargar

Creating Web Page