1. The World Wide Web 1 Course Structure Unit 1. The World Wide Web 1.1 Using the Web 1.2 What's in the Web 1.3 Writing Web Pages

2. The World Wide Web 2 What is Internet? Internet is a computer network that connects millions of computers across a number of countries World Wide Web refers to that portion of the computers on the Internet that can communicate with each other using a computer-network protocol called HTTP ISP (Internet Services Provider) is a company that provides access to the Internet

3. The World Wide Web 3 Client and Server In a client-server setup, a client application ( e.g. use browser to view Web pages ) requests information from a server application (e.g. a Web page you wish to view) A Web site exists on a computer (a server) that has a Web address

4. The World Wide Web 4 URL A Web address is also known as a URL (Uniform Resource Locator) A URL specifies the location of a Web site (or of a page within the site), and a URL usually begins with an element that identifies the communication protocol to be used to access the file the URL identifies In URLs, a protocol identifier is followed by a colon (":"), a pair of slashes ("//"), and then the name of the server, such as www.cityu.edu.hk

5. The World Wide Web 5 Communication Protocol A communication protocol is a generally agreed upon set of standards and rules that machines follow when they communicate with each other. The most common protocol identifier found in URLs is http (HyperText Transfer Protocol) Other protocol identifiers are file and ftp, etc.

6. The World Wide Web 6 Search Engine A search engine is a program that allows one to search for keywords in files at one or more Internet sites. Users can search the Web efficiently for documents and pages containing specific words or phrases, & the results of such a search is a list of Web pages the engine has found (referred to as "hits"), arranged in order of decreasing relevance How to Search? => section 1.1.4

7. The World Wide Web 7 Types of Search Sites Sites that feature a search engine : it maintains indexes or databases of the addresses (updated regularly and automatically) of virtually all of the pages and documents on the Web Sites that feature a Web directory : is a Web directory similar to a telephone directory, in that it organizes information available on the Web into different categories & subcategories Popular search engines include Yahoo, Lycos, Excite, and Altavista

8. The World Wide Web 8 Commerce on the Web Internet Services Providers (ISPs) Advertising Commercial Transactions

9. The World Wide Web 9 Hypertext Hypertext is a non-sequential information, consisting of linked pieces of text or other media joined together by a network. The hypertext reader navigates through the network of information through a nonlinear path, choosing when to follow a link

10. The World Wide Web 10 HTML It stands for HyperText Markup Language Web browsers allow us to view Web pages, “written” in HTML (a formatting language) HTML consists of special formatting notation, called tags, that tell the browser how to display a Web page’s content Files contain.html or.htm extension

11. The World Wide Web 11 Tags in HTML Each tag is enclosed inside a pair of angle brackets (“ ”) Some (but not all) tags come in beginning and ending pairs that follow the syntax and

12. The World Wide Web 12 The Main Components My First Web Page

13. The World Wide Web 13 Physical style tags It tells browsers to use certain font styles Bold Italics Monospace(fixed width) Underline Subscript Superscript

14. The World Wide Web 14 Example of Physical style tags … This is bold This is underlined This is Subscript see example

15. The World Wide Web 15 Logical Style tags It allows browsers to decide how to display the text Emphasized text /STRONG>Strongly emphasized text Text in citation /SAMP> Text in a computer screen output sample

16. The World Wide Web 16 Example of Logical Style tags … This is strongly emphasized text see example

17. The World Wide Web 17 Size and Color tags To set the background color : or To set the font color : or To set the font size, range from 1 (smallest) to 7 (largest) : see example the RGB (Red, Green, Blue) value : RRGGBB

18. The World Wide Web 18 Named Color Color nameRGB valueColor nameRGB value aqua#00FFFFnavy#000080 black#000000olive#808000 blue#0000FFpurple#800080 fuschia#FF00FFred#FF0000 gray#808080silver#C0C0C0 green#008000teal#008080 lime#00FF00white#FFFFFF maroon#800000yellow#FFFF00

19. The World Wide Web 19 Background Image To set the background images : see example file name of the image

20. The World Wide Web 20 Headings & Preformatted Text Seven levels of heading tags, range from 1 (largest) to 7 (smallest) This is Heading 1 text You can make browsers use the formatting you designate by using the PRE (preformatted) tag : …… see example

21. The World Wide Web 21 Horizontal Lines Create horizontal lines using the tag The appearance can be adjusted by SIZE, WIDTH and ALIGN WIDTH can be a number (in pixels) or a percentage (the width relative to the page) An extra attribute – NOSHADE – indicate a plain line with no shade see example

22. The World Wide Web 22 Lists Two kinds of Lists : ordered lists (or numbered) and unordered lists Ordered Lists : Item 1 Item 2 Item 3 Unordered Lists : Item 1 Item 2 Item 3 see example

23. The World Wide Web 23 Paths Paths are the addresses of the locations of a computer or the address of a document or file we want to include in our Web page A Uniform Resource Locator (URL) gives the location of a file on the WWW and also identifies the Internet services, such as FTP or the WWW, that will handle the file http://personal.cityu.edu.hk/dco10101/index.html ProtocolNetwork LocationPathFile Name

24. The World Wide Web 24 Example of Paths http://www.microsoft.com/products/product1.html www.microsoft.com name of Web Server with the last segment adhere to the DNS (Domain Name System), e.g..com,.edu,.gov,.net,.org products the directory hierarchy from the server level to the directory in which the file is located product1.html the actual file or document to be retrieved

25. The World Wide Web 25 Absolute & Relative Paths Absolute path : is one where the complete path is specified use whenever the file you want to access is not in a local subdirectory Relative path : specifies a location that is relative to the current location of the file containing the link Use whenever the file you want to access is in the same directory as the file containing the link

26. The World Wide Web 26 Links in HTML Use the anchor tags ( ) to create link in HTML Example of Relative Path : Freshman Advisor Example of Absolute Path : Carnegie Technology Education see example

27. The World Wide Web 27 Internal Links To create links to other places in the same page : Section of Jim's Office …… Click to Jim’s Office. see example

28. The World Wide Web 28 Embedding image Use the IMG (Image) tag to embed image to the HTML page Extra attributes : HEIGHT, WIDTH and ALT (is used to provide alternative text for browsers that don’t support images, or for people who have image loading turned off) * You can provide a relative or an absolute path for the image to be embedded see example

29. The World Wide Web 29 Tables in HTML Tables can be used to display tabular data column 1 name column 2 name row1, col1 data row1, col2 data row2, col1 data row2, col2 data row3, col1 data row3, col2 data : table row, : table header, : table data see example

30. The World Wide Web 30 Tables in HTML Some other attributes to be used in table : etc. see example

31. The World Wide Web 31 Images in Internet GIFJPEGPNG Color Depth8-bits24-bits8-bits, 24-bits or 32-bits CompressionLosslessLossyLossless Support transparency YNY Support animation YNN

32. The World Wide Web 32 CityU’s personal web server The University Personal Web Server (http://personal.cityu.edu.hk/) is intended to let all staffs and students of CityU to put up their own personal Web pageshttp://personal.cityu.edu.hk/ In order to use this service, you should have a valid UNIX account in the Computing Services Centre Detailed User Guide : http://personal.cityu.edu.hk/UserGuide/ http://personal.cityu.edu.hk/UserGuide/

33. The World Wide Web 33 Web page creation process Evaluate the Web page (correctness and appearance) Implement the Web page by writing it incrementally in small steps Plan the look of the page and the links neededDefine the Web page content