web page introduction
DESCRIPTION
Web Page Introduction. What is a web page?. A hypertext that contains clickable links. A web page is a text file containing H yper T ext M arkUp L anguage (HTML) tags and/or other markup language tags. - PowerPoint PPT PresentationTRANSCRIPT
Web Page Introduction
What is a web page?
• A hypertext that contains clickable links.• A web page is a text file containing Hyper Text
MarkUp Language (HTML) tags and/or other 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>
Other Markup Languages • XML: Extensible Markup Language
– a general-purpose markup language– User-defined tags:
• <AuthorName>John Smith</AuthorName>• Ex: c:\inetpub\wwwroot\facoritebook.xml
• XHTML: Extensible HyperText Markup Language – XHTML is the successor to HTML– HTML + XML
• DHTML: Dynamic HTML– is a collection of technologies used together to create
interactive and animated web sites by using a combination of a client-side scripting language (such as JavaScript), a presentation definition language (Cascading Style Sheets, CSS), and a Document Object Model.
– Ex:C:/Inetpub/wwwroot/docProp.htm
XML 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, VBScript
• Server-side technology– Microsoft .Net– PHP– Java
Dynamic Page – Client-Side Script ExampleDemo: TimeNowClient.Htm
<html><head><title>New Page 1</title></head><body><p>The time is now <script language=vbscript>
document.write time()</script></p><script language=vbscript>iHour=hour(time())if iHour < 12 then
document.write "<h1>good morning</h1>"else
document.write "<h1>good afternoon</h1><br>"end if</script></body></html>
Problems with Client-Side Script
• Source code revealed
• Compatibility problem– Mozilla– IE
Dynamic Web Pages – Server-Side Script Example
• Demo: DemoTime VB project– <body>– <form id="form1" runat="server">– <div>– <p>The time is now <% response.write(Now.TimeOfDay())%></p>– <%– dim iHour– iHour=Now.Hour()– if iHour < 12 then– response.write("<h1>good morning</h1><br>")– else– response.write ("<h1>good afternoon</h1><br>")– end if– %>– </div>– </form>– </body>
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 ISYS363 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>
Web Page Editors
• Word:– File/New– Under new document choose WebPage
• Composer
• FrontPage
• Others
Typical Web Page Contents
• Text:– Alignment, Size, Font, Bold
• Link• Table• List• BookMark• BackGround• Picture• Form• Email: mailto:emailAddress
Reference Tag• Absolute reference
– The reference includes the complete path to the linked document.
• <a href=“c:\cake.gif”>
– Cause problem when the referenced page changes location.
• Relative reference– Relative position of page folders
• Cause problem when the web page changes location and the referenced page does not.
Edit a Currently Opened Web Page
• With IE or Netscape:– File/Edit page– Copy components
Access Database Page
• Select a table or a query, and click: – File/Save As/Data Access Page
• Page wizard
• Copy/Paste to a page editor.
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
Typical Web Site Contents
• About Us• Company organization• Mission• Products/Services• Partner organizations• Clients• Information for users• Links to relevant sites• Contact Us
Web Blog
• Blogs provide commentary or news on a particular subject such as food, politics, or local news; some function as more personal online diaries.
• A typical blog combines text, images, and links to other blogs, web pages, and other media related to its topic.
• The ability for readers to leave comments in an interactive format is an important part of many blogs.
• Most blogs are primarily textual, although some focus on art (artlog), photographs (photoblog), sketchblog, videos (vlog), music (MP3 blog), audio (podcasting) and are part of a wider network of social media.
What Is RSS?
• RSS stands for Really Simple Syndication.
• RSS is a method that uses XML to distribute web content on one web site, to many other web sites.
• RSS allows fast browsing for news and updates.
Why Use RSS?
• RSS is useful for web sites that are updated frequently, like news sites
• Without RSS, users will have to check your site daily for new updates. This may be too time-consuming for many users. With an RSS feed (RSS is often called a News feed or RSS feed) they can check your site faster using an RSS aggregator (a site or program that gathers and sorts out RSS feeds).
• Since RSS data is small and fast-loading, it can easily be used with services like cell phones or PDA's.
An Example of RSS Document (MyRss.XML)<?xml version="1.0" encoding="ISO-8859-1" ?>
<rss version="2.0"><channel> <title>Assignments</title> <link>http://userwww.sfsu.edu/~dchao</link> <description>My home page</description> <image> <url>http://userwww.sfsu.edu/~dchao/CAKE.JPG</url> <title>Easy as cake</title> <link>http://userwww.sfsu.edu/~dchao</link> </image> <item> <title>Assignment 1</title> <link>http://userwww.sfsu.edu/~dchao/ISYS5812A1F06.htm</link> <description>First assignment</description> </item> <item> <title>Assignment 2</title> <link>http://userwww.sfsu.edu/~dchao/ISYS5812A2F06.htm</link> <description>assignment 2</description> <enclosure url="http://userwww.sfsu.edu/~dchao/FLYAWAY.JPG" type="image/jpeg" length="5332" /> </item></channel></rss>
The Channel Element
• The <channel> element is used to describe the RSS feed.
• The <channel> element has three required child elements:– <title> - Defines the title of the channel – <link> - Defines the hyperlink to the channel– <description> - Describes the channel
• Each <channel> element can have one ore more <item> elements.
The Item Element
• Each <item> element defines an article or "story" in the RSS feed.
• The <item> element has three required child elements:– <title> - Defines the title of the item – <link> - Defines the hyperlink to the item– <description> - Describes the item
RSS Reader
• An RSS Reader is used to read RSS Feeds.• RSS readers are available for many different
devices and OS.– Example: SharpReader
• The Mozilla Firefox browser has a built-in RSS Reader. If you go to a web site that offers RSS feeds, you will see the Firefox RSS icon in the address bar. Click on the icon to view a list of the different feeds. Choose the feed you want to read.
Publish RSS
• To publish RSS feed:– 1. Name your RSS file. Notice that the file must
have an .xml extension.– 2. Validate your RSS file (a good validator can
be found at http://www.feedvalidator.org).– 3. Upload the RSS file to your web directory on
your web server.– 4. Submit your RSS feed to the RSS Feed
Directories.
Adding a RSS Feed to Your Page
• Click Firefox RSS icon
• Select the RSS feed
• Copy/Paste to your web page