The world wide web

1. Chapter 4 The world wide web

2. Learning outcomes • Explain in general terms how web documents are transferred across the Internet and • What processes are triggered when you click on hyperlink • Code web pages using HTML and XHTML using style sheets. • Explain why it is advisable to use XHTML rather than HTML • Describe some technologies available for dynamic web pages

3. Essential Reading • Joe Casad, Teach yourself TCP/IP, Ch. 17 • William Buchanan, Mastering The Internet, Ch. 6-8 • Introductory materials on HTML & XHTML either a text book such as • John Shelly, HTML AND CSS explained, or • http:/www.webMonkey.com • http://www.w3schools.com

4. Additional reading • William Buchanan, Mastering The Internet, Ch. 9-10 • Andrew Tanenbaum, Computer Networks, Ch. 7.3 • Douglas Comer, Computer Netwoks and Networking, ch. 32-33 • Chuck Masciano and Bill Kennedy, HTML and XHTML the definitive guide, for reference • http://www.pcnetworkadvisor.com • Mike Lewis, “Understanding Javascript”, June-Jully 2000

5. How the web works • The client-server model • Client and server operate on machines which are able to communicate through a network • The server waits for requests from a clients • Server receives a requests from a client • Performs a the requested work • Or lookup the requested data • And send a response to the client • Servers: file servers, web servers, name servers • Clients: browsers, email clients

6. url format • <scheme>://<server-domain-name>/<pathmane> • <scheme> which protocol to use • http: in general • file: which tells the client document is in a local machine • ftp: file transfer protocol • <server-domain-name> identifies the server system • i.e. www.doc.gold.ac.uk • <pathname> tells the server where to find the file • http://doc.gold.ac.uk/~username/index.html

7. Web browsers and servers • A browser: is a program that can retrieve files from the world wide web and render text, images, or sounds encoded in the files. • i.e. IE, Nescape, Mozilla • A web server: is an application which waits for client requests, fetches requested documents from disk and transmits them the client. • i.e Apache

8. What happened when you click on hyperlink? • Determine URL and extract domaine name. • Use the name server to get IP address (DNS) • Make a TCP connect to port 80 • And send a request for a web page once the server has accepted to connection. • The server send the file and releases the TCP connection • The client displays the document.

9. Other possibilities • The steps in the previous slide are for displaying a static web page from a remote machine. • Other possibilities are: • Page is loaded from a local system • no tcp connection • url begin with file://... • The page is dynamically generated by a client-side script • No tcp connection • The page is dynamically generated by a server-side script: • The server may carry out other functions • Secure server • Check user’s identity if they are authorised to access a particular resources

10. Stateless connection • Both client and server release TCP connection after a page has been transferred. • HTTP1.0 is stateless • Connections are not persistent • There is no indication to the server whether new transactions involve the same client • HTTP 1.1 is persistent • By keeping track of the client IP addresses • However, there is no way of identifying a repeated visits to the site by the same user. • Futhermore, ISPs reallocate IP addresses to dial-up customers as new user dial in.

11. Cookies • Request the browser to store a small data file (cookie) on the users hard disk. • Which can serve to identify users only. • For instance it could contain a key into a database on the server machine. • Most browsers nowadays allow you to decide whether or not you want cookies on your machine.

12. Introduction to HTML

13. What is an HTML File? • HTML stands for HyperText Markup Language • An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor

14. Internet - Services • Email & MIME (Multipurpose Internet Mail Extensions)text (text/html), image, video, etc. • Telnet & ssh • FTP – File Transfer Protocol • Gopher • IRC – Internet Relay Chat • Newsgroups • WWW – World Wide WebHTTP (Hypertext transfer protocol) uses a Question-Answer-Scheme, i.e. a browser sends a request und gets a response from a server. Note the server does not send out anything without a request.

15. Markup languages • Suppose we have a document containing only plain text • We tag certain parts of the document to indicate what they are and how they should be formatted • This procedure is called marking-up the document • Tags are usually paired: • e.g. <title>My Memoirs</title> • A pair of tags plus their content constitute an element • Un-paired tags are called empty tags

16. Markup languages • Physical vs Semantic markup • physical refers to appearance (style) on the page • semantic refers to structure and meaning • HTML is the HyperText Markup Language • HTML is based on SGML (Standard Generalised Markup Language) which is more complex • HTML has a fixed set of tags but is constantly evolving, but newer versions are downward compatible

17. Markup languages • HTML places primary emphasis on structure • paragraphs, headings, lists, images, links, …. • HTML places secondary emphasis on style (CSS)‏ • fonts, colours, …. • HTML does not label the meaning of the text (XML)‏

18. A basic document • Every document should start with the following line <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> • There are three required elements, defined by the tags <html>, <head> and <body> <html> <head> <title>My Home Page</title> </head> <body> <h1>Welcome</h1> </body> </html>

19. Basic structure elements • first and last tags • The HEAD section • must come before the BODY section • contains generic information about the document • Elements specified in the HEAD section can include • title, link, script, style • The BODY section • contains the content of the document (text, images etc) • this content is structured by other tags

20. Block elements • Block elements define sections of text, usually preceded by a blank line • <p></p> - paragraph • <h1></h1>...<h6></h6> - headings • <pre></pre> - preserve (original format)‏ • <blockquote></blockquote> - indented text • <div></div> - division • used to identify a section of the document that may be subject to special formatting (for example, using stylesheets).

21. Paragraphs <p>here is a piece of text that has been placed inside a paragraph</p> <p align="center">Here is another paragraph</p> Paragraphs: <p>...</p> • force a break between the enclosed text and the text surrounding it • the tagged region of text may be subject to special formatting <p align="center">Here is another paragraph</p> • align is an attributeof the paragraph tag • center is the value of the align attribute

22. Headings • Six levels of importance <h1>...<h6> • Use headings to divide document into sections <html> <head> <title>Headings</title> </head> <body> <h2>Chapter 1</h2> <h3>1. Introduction</h3> This is the introduction <h3>2. Next section</h3> This is the next section <h4>2.1 A subsection</h4> This is a subsection </body> </html>

23. Element relationships • The elements marked by tags form a hierarchy • The root element is html (marked by <html>...</html>)‏ • It usually has two children: head and body • each of these are further subdivided • There are rules for which elements can contain other elements • e.g. headers cannot contain headers • see http://www.w3.org/ for a full list of rules • Elements must not overlap each other • we cannot have: <h1>...<a..> ... </h1>...</a> • we can have: <h1>...<a..> ... </a>...</h1>

24. Inline descriptive elements Descriptive elements affect the appearance of text depending on how the text is described • <em></em>emphasis, usually with italics • <strong></strong>strong, usually with bold • <cite></cite>citation, usually in italics • <code></code> usually results in monotype spacing <body> A <em>fascinating</em> subject that I <strong>must</strong> understand </body>

25. Inline explicit style elements • <boldface></boldface> • <big></big> bigger font than surrounding text • <small></small> smaller font than surrounding text • <i></i> italics • <s></s> strikethrough •  subscripts •  superscripts • <span></span> delimits text for stylesheet control • <div></div> delimits blocks of text for stylesheet control

26. Inline explicit style elements <font> attributes • face- name of font (must be installed)‏ • "arial", "times", "verdana", "helvetica" • size - absolute size (1-7), or relative to previous text • "2", "5", "7", "+1", "-2"... • color- hexadecimal RGB, or a named color • "3399dd", "blue", "red" • weight - boldness from 100, 200, ..., 900 • "100", "300", "900" • e.g. <font face="arial" size="+1" color="pink" weight="300">

27. Ordered and Unordered Lists some normal text <ol> <li>apples</li> <li>oranges</li> <li>pears</li> <li>bananas</li> </ol> some normal text <ul> <li>apples</li> <li>oranges</li> <li>pears</li> <li>bananas</li> </ul>

28. Comments • Comments are delimited by <!-- and --> <!– this is a comment --> • Comments may span multiple lines <body> <!-- this is a comment --> </body>

29. Special characters <body> A <em> &lt;fascinating &gt; </em> subject that I <strong>m&nbsp;u&nbsp;s&nbsp;t</strong> understand </body> • Some characters such as <, >, " and & have special meanings. • To prevent them being interpreted as HTML code, they must be written as follows: &lt; &gt; &quot; &amp; • Blank space is normally ignored in HTML. To include a space in your document use: &nbsp;

30. Links and Images Link: <body> The Department of <ahref="http://www.doc.gold.ac.uk/index.html"> Computing </a> is a very .... </body> images: <img src="mypicture.gif" alt="my picture"> src attribute specifies the file containing the image altattribute specifies the text to be displayed if the image is not viewed

31. Colour – RGB Model • #ff0000 (red), • #00ff00 (green)‏ • #0000ff (blue)‏ • #ffff00 (yellow)‏ • ... • #3395ab (a pastel blue)‏ <body bgcolor="#994422"> <body text="#994422"> <body background="tileimage.gif">

32. Forms • Server-based programs may return data to the client as a web page • Client-side scripts can read input data • To validate the data, prior to sending to server • To use in local processing which may output web page content that is displayed on the client

33. Example applications • Questionnaires to provide feedback on a web site • e-commerce, to enter name, address, details of purchase and credit-card number • request brochures from a company • make a booking for holiday, cinema etc. • buy a book, cd, etc • obtain a map giving directions to a shop • Run a database query and receive results (an important part of e-commerce)‏

34. Forms Input types • text • checkbox • radio (buttons)‏ • select (options)‏ • textarea • password • button • submit • reset • hidden • file • image

35. The method and action attributes • The method attribute specifies the way that form data is sent to the server program • GET appends the data to the URL • POST sends the data separately • The action attribute specifies a server program that processes the form data (often as a URL)‏ <body> <form method="POST" action="comments.php"> <h2>Tell us what you think</h2> <!-- etc --> </form> </body>

36. Text, checkbox and Radio button • The type attribute specifies the type of user input • The name attribute gives an identifier to the input data <form method="POST" action="comments.php"> <h2>Tell us what you think</h2> Name <input name="name" type="text“ size="20"><br> Address <input name="address" type="text" size="30"> </form> How did you hear about this web site?<br> A friend <input type="checkbox" name=“name" value="friend"><br> Search engine <input type="checkbox" name=“name" value="engine"><br> How did you hear about this web site?<br> A friend <input type="radio" name=“name" value="friend"><br> Search engine <input type="radio" name=“name" value="engine"><br> <!– etc -->

37. The input element: type="submit/reset“ and select element Thank you<br> <input type="submit" name="send" value="Send"> <input type="reset" name="clear" value="Clear"><br> How do you rate this site?<br> <select name="rating"> <option>Good <option selected>Bad <option>Ugly </select>

38. Tables <table border="1"> <tr> <th>Name</th> <td>A B Morgan</td> <td>D P Jones</td> </tr> <tr> <th>Course</th> <td>Fishing</td> <td>Sailing</td> </tr> <tr> <th>Year</th> <td>8</td> <td>5</td> </tr> <tr> </table> • <table> main element • <tr> table row • <th> table header • <td> table data

39. The align and width attributes <table border="1" align="center"> <tr> <th colspan="2" width="60%">Name</th> <th rowspan="2">Course</th> <th rowspan="2">Year</th> </tr> <tr> <th>Last</th> <th>Init.</th> </tr> <tr> <td>Morgan</td> <td>AB</td> <td>Fishing</td> <td align="center">5</td> </tr> <!– etc --> • The align attribute determines the position of the text within a cell • The width attribute determines the width of the row relative to the table

40. Table attributes Table attributes • align alignment relative to the page • width in pixels or percentage of page width • border - width of border (pixels)‏ • cellspacing separation between cells (pixels)‏ • cellpadding - space around data inside cell (pixels)‏ • bgcolor - background colour (inside cells)‏ Furthermore • The <caption> element puts a title above the table

41. Table attributes <table border="3" align="center" cellspacing="6" cellpadding="6" bgcolor="cyan"> <caption> <h2>Course Data</h2> </caption> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <!– etc -->

42. Frames and Framesets • A frameset partitions a web browser window so that multiple web documents can be displayed simultaneously. • Example application: To maintain a permanently visible directory of links within your site, while also displaying one or more selected documents from the site.

43. Framesets <html> <head><title>Frames 1</title></head> <frameset cols="140,*"> <frame name="navF" src="navigation.html"> <frame name="mainF" src="intro.html"> </frameset> </html> • Theframeset element replaces the body element • frameset has attributes cols or rows, defined in terms of pixels, percentage(%) or unspecified (*) • this splits the window into two or more columns or rows

44. Noframes • Some browsers cannot process frames. Alternative content should be provided using the noframes element <html> <head><title>Frames 1</title></head> <frameset cols="140,*"> <frame name="navF" src="navigation.html"> <frame name="mainF" src="intro.html"> </frameset> <noframes> <body> Something here for browsers not supporting frames </body> </noframes> </html>

45. Styles • Styles can be defined • Inline styles • Global styles • Stylesheets (Cascading stylesheets) <h1 style="color:#2255ff; border:ridge">Inline styles</h1> <head> <title>Styles</title> <style> <!-- h1 { color: red; border: thin; groove; text-align:center; } --> </style> </head> <link rel="StyleSheet" type="text/css" href="URL">

46. Classes • Simple style rules change the appearance of all instances of the associated element • A class is a style definition that may be applied as and when we choose • if we don't want the styles, we don't have to use them • Simple classes are applied to asingle type of element • Anonymous classes can be applied to any type of element

47. Simple classes </head> <style> <!-- h1.fred { color: #eeebd2; background-color: #d8a29b; border: thin groove #9baab2; } --> </style> </head> <body> <h1 class="fred">A Simple Heading</h1> <p>some text . . . some text</p> </body>

48. Anonymous classes </head> <style> <!-- .fred { color: #eeebd2; background-color: #d8a29b; border: thin groove #9baab2; } --> </style> </head> <body> <h1 class="fred">A Simple Heading</h1> <p class="fred">some text . . . some text</p> </body>

49. Divisions and spans • Rather than applying styles to an element itself, we wrap the element in • a div element (usually for block elements), or • a span element (usually for inline elements)‏ • Any required formatting can then be applied to the <div> or <span> element. • Div and span elements become part of the document • In particular, each can have class and id attributes

50. Divisions <head> <style> <!-- .myclass { color: blue; background: cyan; text-decoration: underline; border: thin groove red; } --> </style> </head> <body> <div class="myclass"> <h2>A Simple Heading</h2> <p>some text . . . </p> </div> </body> • Styles can be applied to blocks of HTML code using div