web page introduction. what is a web page? a hypertext that contains clickable links. a web page is...
Post on 19-Dec-2015
218 views
TRANSCRIPT
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: TimeNow.aspx– <body>– <p>The time is now <%=Now.TimeOfDay()%></p>– <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– %>– </body>
• Note: – Need web server; cannot open by File/Open Page.– Work for both Mozilla and IE.
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
Social Media
• Social media describes the online technologies and practices that people use to share content, opinions, insights, experiences, perspectives, and media themselves. Social media can take many different forms, including text, images, audio, and video. The social media sites typically use tools like message boards, forums, podcasts, bookmarks, communities, wikis, weblogs etc.
• Web 2.0 refers to a perceived or proposed second generation of internet-based services—such as social networking sites, wikis, that emphasize online collaboration and sharing among users.
Examples of Social Media
• Wikis: Wikipedia
• Social networking: MySpace and Facebook
• Video sharing: YouTube
• Virtual Reality: Second Life
• Events: http://upcoming.yahoo.com/
• News aggregation:
• Photo sharing: http://flickr.com/
• Livecasting:
• Online gaming: World of Warcraft
Web 2.0
• Web 2.0 refers to a perceived or proposed second generation of internet-based services—such as social networking sites, wikis, that emphasize online collaboration and sharing among users.
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.
Web Syndication
• Web syndication is a form of syndication in which a section of a website is made available for other sites to use.
• RSS: Really Simple Syndication
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