1 / 60

Chapter 16

Chapter 16. The World Wide Web. The World Wide Web. The World Wide Web ( Web ) is an infrastructure of distributed information combined with software that uses networks as a vehicle to exchange that information.

graceland
Télécharger la présentation

Chapter 16

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. Chapter 16 The World Wide Web

  2. The World Wide Web The World Wide Web (Web) is an infrastructure of distributed information combined with software that uses networks as a vehicle to exchange that information. A Web page is a document that contains or references various kinds of data, such as text, images, graphics, and programs. Web pages also contain links to other Web pages so that the user can “move around.” It’s these links that turn text documents into hypertext.

  3. The World Wide Web A Web site is a collection of related Web pages connected by links. The Internet makes the communication possible, but the Web makes that communication easier, more productive, and more enjoyable.

  4. Web Browser A browseris a software tool that issues the request for the Web page we want and displays it when it arrives. We often talk about “visiting” a Web site, as if we were going there. In truth, we specify the information we want, and it is brought to us.

  5. Web Browser Figure 16.2 A browser retrieving a Web page

  6. URLs A hostname is the core part of a Uniform Resource Locator, or URL, which uniquely identifies the page you want out of all of the pages stored anywhere in the world.

  7. URLs The four parts of a URL are: protocol hostname path filename E.g. http://www.yorku.ca/yorkweb/index.htm http is the protocol used to transfer all Web pages.

  8. Search Engines Search Engine: A website that helps you find other websites. For example, Yahoo and Google are search engines. You enter keywords and the search engine produces a list if links to potentially useful sites. There are two types of searches: Keyword searches Concept-based searches

  9. Instant Messaging Instant messaging (IM): An application that allows people to send and receive messages in real time. Both sender and receiver must have an IM app running. Most IM applications use a proprietary protocol that dictates the precise format and structure of the messages that are sent across the network to the receiver. Instant messages are not secure!

  10. Cookies Cookie: A small text file that a web server stores on your local computer’s hard disk. A cookie contains information about your visit to the site. Cookies can be used to determine number of unique visitors to the site, to customize the site for your future visits, to implement shopping carts that can be maintained from visit to visit. Cookies are not dangerous!

  11. HTML Web pages are created (or built) using a language called the Hypertext Markup Language, or HTML. The term markup language comes from the fact that the primary elements of the language take the form of tagsthat we insert into a standard text file to annotate the information stored there.

  12. HTML • Since web pages are standard text files they can be created with any text editor. • The files are saved with the file extension .html (or .htm) so browsers will apply the rules to the text.

  13. HTML – a brief history • 1980 - Tim Berners-Lee began development of HTML at CERN . • 1991 - First specification for HTML published. • 1995 - Request for Comments 1866 specifies HTML 2.0. • 1996 - World Wide Web Consortium (W3C) maintains specifications for HTML. • 1999 - HTML 4.01 published. • 2004 - development began on HTML5.

  14. XHTML – the present • HTML5 is not yet widely supported, but more importantly, many web designers have regretted the conflation of Structure and Presentation in HTML. • The separation of these has been achieved by using XHTML to specify Structure, and Cascading Style Sheets (CSS) to specify Presentation.

  15. What Is XHTML? • XHTML stands for EXtensible HyperText Markup Language. • XHTML is almost identical to HTML 4.01. • XHTML is a stricter and cleaner version of HTML. • XHTML is HTML defined as an XML application. • XHTML is a W3C Recommendation of January 2000. • XHTML is supported by all major browsers.

  16. Structure of an XHTML document • An XHTML document consists of 3 main parts: • the DOCTYPE declaration • the <head> section • the <body> section

  17. Structure of an XHTML document <!DOCTYPE …> <html> <head> <title>appears in the Title Bar</title> </head> <body> … </body> </html>

  18. XHTML • The <!DOCTYPE> declaration is mandatory in XHTML. • This declaration refers to a Document Type Definition (DTD) which specifies the rules for the markup language, so that the browsers render the content correctly. • For example: • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  19. XHTML Different Doctypes • XHTML 1.0 Strict • This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. • XHTML 1.0 Transitional • This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. • XHTML 1.0 Frameset • This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content. • XHTML 1.1 • This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).

  20. XHTML • Some important differences between HTML and XHTML: • XHTML elements must be properly nested. • XHTML elements must always be closed. • XHTML elements must be in lowercase. • XHTML documents must have one root element.

  21. XHTML Tags A tag consists of a keyword enclosed in angle brackets. (<. . . >) Tags are most often used in pairs, with a start tag such as <body> and an end tag such as </body> surrounding the text to which they apply. A tag pair, along with its enclosed text, is called an element.

  22. A sample document “Raw” XHTML. Tags are blue. <html> <head> <title>CSE 1520</title> </head> <body> <h1> Welcome to the Website for CSE 1520 </h1> <p> This is our first foray onto the World Wide Web. We are trying to learn how to create pages that can become part of the WWW. We hope to learn about elements of Structure, including: - headings - paragraphs - tables </p> </body> </html>

  23. HTML The same file displayed in a browser.

  24. XHTML Note that the browser determines how the page should be displayed based on the tags. It ignores the way we format the XHTML source document. Tabs, carriage returns, extra spaces, and blank lines are called “whitespace” and are ignored by the browser. The browser takes into account the width and height of its window. When you resize the browser window, the contents of the Web page are reformatted to fit the new size.

  25. The body element in the sample page contains 2 other elements: <h1>…</h1> is a heading element. <p>…</p> is a paragraph element. <body> <h1> Welcome to the Website for CSE 1520 </h1> <p> This is our first foray onto the World Wide Web. We are trying to learn how to create pages that can become part of the WWW. We hope to learn about elements of Structure, including: - headings - paragraphs - tables </p> </body> Basic Markup in XHTML 25

  26. Basic Markup in XHTML Headings in a document. There are six predefined heading levels in XHTML: h1, h2, h3, h4, h5, and h6. The heading level determines the size of text, and the vertical spacing below the text. Paragraphs (<p> . . . </p>) specify text that should be treated as a single paragraph. A paragraph always starts on a new line. Paragraphs are followed by vertical spacing. 26

  27. Basic Markup in XHTML To cause text to start on a new line without vertical spacing, use the line break element: <br/> This empty element uses a single tag instead of a pair. To conform to the rule that all tags must be closed, the “ /” (space slash) are added to empty tags. 27

  28. Lists in XHTML We often want to display a list of items. The <ul>…</ul> pair creates an unorderedlist, the <ol>…</ol> pair creates an orderedlist, and the <li>…</li> pair distinguishes each list item.

  29. A sample list <ul> <li>a list item</li> <li>another list item</li> <li>and another list item</li> </ul> This XHTML code will produce…

  30. A sample list • …this list in the browser.

  31. Tables In XHTML, tabular data can be displayed by using a table comprised of rows of details. <table>…</table> tags surround the table <tr>…</tr> tags surround a row <td>…</td> tags define each detail (data)

  32. Tables <tablesummary=“Sample Table”> <tr> <td>col1 row1</td> <td>col2 row1</td> </tr> <tr> <td>col1 row2</td> <td>col2 row2</td> </tr> </table>

  33. Tables XHTML requires that web pages be compatible with non-visual browsers. In the case of tables this means that a <table> tag must include a summaryattribute. <table summary=“Brief Description”> The text in the summary provides a description of the table to users of non-visual browsers. 33

  34. Tables The sample table as displayed in a browser.

  35. Images An image can be incorporated into a Web page using the <img/> tag. This is another example of an empty element since it does not surround text, but instead indicates a point at which to insert the picture.

  36. Images To specify where to find the picture to be inserted, the <img/> tag uses the mandatory srcattribute. <imgsrc=“path/filname.gif” alt=“alternate text” /> Note the other mandatory attribute - alt, which provides text to be displayed whenever the image cannot be. 36

  37. Tag Attributes Note the syntax of tag attributes. The attribute name is followed by the equals sign (=), and then the attribute value, which is enclosed in quotes. Either double or single quotes may be used.

  38. Links A link is specified using the element a, which stands for anchor. The tag includes an attribute called href that specifies the URL of the destination document. For example: <ahref = "http://www.cse.yorku.ca/course/1520alt"> CSE1520 Alternate Web Site </a>

  39. Links Our example: <ahref = "http://www.cse.yorku.ca/course/1520alt"> CSE1520 Alternate Web Site</a> Notes: The URL is enclosed in quotes. The link text between the tags is displayed in the browser, usually in underlined blue. However, this can be changed.

  40. Cascading Style Sheets CSS

  41. CSS Style Rules • Style Rules tell the browser how a particular part of a web page is to be presented. • Presentation refers to aspects of the display related to the text, like font, colour, size, etc. • For example: • body {background-color: yellow;} • h1 {color: blue;} • p {font-family: verdana; font-size: smaller;}

  42. Applying Style Sheets • There are 3 levels at which style rules can be set : • External level • Styles are saved in a separate file (.css) • The XHTML document links to the style sheet. • Document level • Styles are grouped within a <style>…</style> element, which is placed in the <head> element. • Inline level • Style rules are set as the value of the style attribute of a specific element.

  43. External level • If our example styles are saved in YandB.css, then we can link it to an XHTML document this way: • <linkrel=“stylesheet” type=“text/css” href=“YandB.css” /> • The document will now have a yellow background, level 1 headings will have blue text, and paragraphs will use a Verdana font, one decrement smaller than normal.

  44. Document level • Another way to apply styles to a document is to include them in the head. • <head> • <title>CSE 1520</title> • <style> • body {background-color: yellow;} • h1 {color: blue;} • p {font-family: verdana; font-size: smaller;} • </style> • </head>

  45. Inline level • <body style= “background-color: yellow;”> • <h1 style= “color: blue;”>Welcome to the Website for CSE 1520</h1> • <p style= “font-family: verdana; font-size: smaller;”> • This is our first foray onto the World Wide Web. <br /> • We are trying to learn how to create pages that • can become part of the WWW. </p> • We hope to learn about elements of Structure, including: • <ul> • <li>headings </li> • <li>paragraphs </li> • <li>tables </li> • </ul> • </body>

  46. Applying Style Sheets • The advantages of applying style sheets at the External level, make it the current favourite. • Styles can be applied to the whole, or part(s) of a website without having to copy/paste them to multiple documents. • Modifying the presentation of the whole site, or any part of it, requires changes to only 1 file.

  47. Interactive Web Pages

  48. Interactive Web Pages When HTML was first developed, there was no way to interact with the text and graphics presented in a Web page. As users clamored for a more dynamic web, new technologies were developed to accommodate these requests. Many of the new ideas were offshoots of the newly developed Java programming language.

  49. Java Applets A Java applet is a program that is designed to be embedded into an HTML document using the applet tag. <appletcode="MyApplet.class" width=“250”height=“150” > </applet > The program is transferred over the Web, along with the text and graphics.

  50. Java Applets The browser has a built-in interpreter that executes the applet, allowing the user to interact with it. Consider the difficulties inherent in this situation. How can we expect a program that was written on one type of computer to run on possibly many other types of computers?

More Related