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. Unordered lists • Unordered lists <ul>...</ul> • <li>...</li> for the list elements • each item has a bullet some normal text <ul> <li>apples</li> <li>oranges</li> <li>pears</li> <li>bananas</li> </ul>

28. Ordered lists • Ordered lists <ol>...</ol> • <li>...</li> for the list elements • each item has a number some normal text <ol> <li>apples</li> <li>oranges</li> <li>pears</li> <li>bananas</li> </ol>

29. Definition lists • <dl></dl>The enclosing tags • <dt></dt> The definition term • <dd></dd> The definition <dl> <dt>MIME</dt> <dd> Multipurpose... </dd> <dt>FTP</dt> <dd> File transfer... </dd> <dt>TCP</dt> <dd> Transmission... </dd> </dl>

30. Nested lists • A list may contain another list • The inner list is nested inside the outer list <body> <ol> <li>apples</li> <ul> <li>red</li> <li>green</li> </ul> <li>oranges</li> <li>pears</li> <li>bananas</li> </ol> </body>

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

32. Horizontal lines • To insert a horizontal line to divide up parts of a document we use the empty tag <hr> • Attributes: align, size (in pixels), width (in pixels or percentage), noshade <body> <h1>Chapter 1</h1> <hr align="center" size="3" width="50%" noshade> <h2>Introduction</h2> </body>

33. 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;

34. Links • The link (anchor) element <a>...</a> provides hypertext links between • different documents (using a URL)‏ • different parts of an individual document • User selection of the link (hot spot) results in • retrieval and display of the designated document • movement to relevant part of same document <body> The Department of <ahref="http://www.doc.gold.ac.uk/index.html"> Computer Science</a> is a very .... </body>

35. Link with URL Example: • The href attribute gives the URL of the target page • The text between the tags is highlighted – selecting it activates the link <body> The Department of <ahref="http://www.doc.gold.ac.uk/index.html"> Computer Science</a> is a very .... </body>

36. Relative addressing • The previous example gave the full path name, known as the absolute address <a href="research.html">Research</a> <a href=“./pub.html">Publications</a> <a href="../../index.html">Computer Science home</a> • The ‘root’ directory for the link is assumed to be the directory containing the parent page of the link

37. Images • Images are included using the empty tag <img> • Example: <img src="mypicture.gif" alt="my picture"> • The src attribute specifies the file containing the image • absolute or relative path names can be used (see notes for links)‏ • The alt attribute specifies the text to be displayed if the image is not viewed • some users choose not to display images (for faster download)‏ • also used for compatibility with older browsers

38. Image attributes • The size attributes control the size of the image <img src="cat.gif" height="60" width="90" align=“top” alt="cat"> • The align attribute controls the vertical location of the image, relative to the line of text • align="top" top of image aligned with top of text • align="middle" centre of image aligned with centre of text • align="bottom" bottom of image aligned with baseline of text • The align attribute also controls the horizontal location of the image, relative to the line of text • align="left" image aligned with left margin • align="right" image aligned with right margin

39. Links with images • A link element can include an image instead of text • both images and text can be included if required <body> Enter my world of cats <a href="cats.html"><img src="cat.gif" height="60" width="60"align="middle" alt="cat"></a> </body>

40. Colour • Colours are specified with hexadecimal numbers for the red, green and blue primary colours, preceded by a “#”. • To set the background colour of a web page <body bgcolor="#994422">

41. Colour – RGB Model • #ff0000 (red), • #00ff00 (green)‏ • #0000ff (blue)‏ • #ffff00 (yellow)‏ • ... • #3395ab (a pastel blue)‏

42. Colour • To set the colour of all text on a page <body text="#994422"> • In the body element, the colour of link text can be controlled with the following attributes: • link for an un-visited link • vlink for a visited link • alink for a link that is currently selected by the mouse • Example <body text="#000000" link="#0000ff">

43. Colour • To set the colour of an individual piece of text use the font element (or preferably stylesheets – see later) <body bgcolor="#3395ab"> Text in quotes <font color="#ff0000">"such as this"</font> has a different colour </body>

44. Colour names • Netscape and Internet Explorer allow textual names for colours instead of hexadecimal • This is OK provided the page is not looked at by a browser that does not support colour names • For example <body bgcolor="gray" text="black" link="blue">

45. Background patterns • Rather than a uniform color • You can give the background of web page a pattern as follow: <body background="tileimage.gif">

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

47. 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)‏

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

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

50. The input element: type="text" • 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>