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. – Britain calls for direct talks with Iran

Other Markup Languages XML: Extensible Markup Language – a general-purpose markup language –User-defined tags: John Smith 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 My Favorite Book John Smith Peter Chen $45.00 This is a grerat book My Second Favorite Book Adam Smith $25.00 This is a second great book

Style Sheet Example btitle{ 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 Example Demo: TimeNowClient.Htm New Page 1 The time is now document.write time() iHour=hour(time()) if iHour < 12 then document.write " good morning " else document.write " good afternoon " end if

Problems with Client-Side Script Source code revealed Compatibility problem –Mozilla –IE

Dynamic Web Pages – Server-Side Script Example Demo: TimeNow.aspx – – The time is now –<% –dim iHour –iHour=Now.Hour() –if iHour < 12 then –response.write(" good morning ") –else –response.write (" good afternoon ") –end if –%> – Note: –Need web server; cannot open by File/Open Page. –Work for both Mozilla and IE.

Basic HTML Tags : large text : smallest text Reference tag: : Paragraph tag Image tag

Example David Chao ISYS363 HTML Demo Welcome to David Chao’s Home Page Click here to see a cake picture

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 mailto: Address

Reference Tag Absolute reference –The reference includes the complete path to the linked document. –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: News aggregation: Photo sharing: 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) Assignments My home page Easy as cake Assignment 1 First assignment Assignment 2 assignment 2

The Channel Element The element is used to describe the RSS feed. The element has three required child elements: – - Defines the title of the channel – - Defines the hyperlink to the channel – - Describes the channel Each element can have one ore more elements.

The Item Element Each element defines an article or "story" in the RSS feed. The element has three required child elements: – - Defines the title of the item – - Defines the hyperlink to the item – - 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 –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