1 / 28

Web Page Introduction

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.

gay-morrow
Télécharger la présentation

Web Page Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Page Introduction

  2. 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 presentationusing markup, which is intermingled with the primary text. • <H1> Britain calls for direct talks with Iran </H1>

  3. 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

  4. 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>

  5. 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; }

  6. 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

  7. Technologies for Creating Dynamic Pages • Client-side technology • JavaScript, VBScript • Server-side technology • Microsoft .Net • PHP • Java

  8. 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>

  9. Problems with Client-Side Script • Source code revealed • Compatibility problem • Mozilla • IE

  10. 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>

  11. 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

  12. 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>

  13. Web Page Editors • Word: • File/New • Under new document choose WebPage • Composer • FrontPage • Others

  14. Typical Web Page Contents • Text: • Alignment, Size, Font, Bold • Link • Table • List • BookMark • BackGround • Picture • Form • Email: mailto:emailAddress

  15. 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.

  16. Edit a Currently Opened Web Page • With IE or Netscape: • File/Edit page • Copy components

  17. 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.

  18. 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

  19. Typical Web Site Contents • About Us • Company organization • Mission • Products/Services • Partner organizations • Clients • Information for users • Links to relevant sites • Contact Us

  20. 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.

  21. 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.

  22. 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.

  23. 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>

  24. The Channel Element • The <channel> elementis 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.

  25. 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

  26. 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.

  27. 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.

  28. Adding a RSS Feed to Your Page • Click Firefox RSS icon • Select the RSS feed • Copy/Paste to your web page

More Related