1、The world wide web,Chapter 4,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
2、 Describe some technologies available for dynamic web pages,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.webM http:/,Add
3、itional 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:/ Mike Lewis, “Understanding Javascript”,
4、 June-Jully 2000,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
5、 response to the clientServers: file servers, web servers, name servers Clients: browsers, email clients,url format,:/which protocol to use http: in general file: which tells the client document is in a local machine ftp: file transfer protocol identifies the server system i.e. www.doc.gold.ac.uktel
6、ls the server where to find the file http:/doc.gold.ac.uk/username/index.html,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 wait
7、s for client requests, fetches requested documents from disk and transmits them the client. i.e Apache,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 t
8、he server has accepted to connection. The server send the file and releases the TCP connection The client displays the document.,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
9、 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 users identity if they are authorised to access a particular r
10、esources,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 clie
11、nt 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.,Cookies,Request the browser to store a small data file (cookie) on the users hard disk. Which can serve to identi
12、fy 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.,Introduction to HTML,What is an HTML File?,HTML stands for HyperText Markup Language An HTML file is a text file conta
13、ining 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,Internet - Services,Email & MIME (Multipurpose Internet Mail Extensions) text (text/html), image, video, et
14、c. Telnet & ssh FTP File Transfer Protocol Gopher IRC Internet Relay Chat Newsgroups WWW World Wide Web HTTP (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.,Ma
15、rkup languages,Suppose we have a document containing only plain textWe tag certain parts of the document to indicate what they are and how they should be formattedThis procedure is called marking-up the document Tags are usually paired: e.g. My Memoirs A pair of tags plus their content constitute an
16、 element Un-paired tags are called empty tags,Markup languages,Physical vs Semantic markup physical refers to appearance (style) on the page semantic refers to structure and meaningHTML is the HyperText Markup Language HTML is based on SGML (Standard Generalised Markup Language) which is more comple
17、xHTML has a fixed set of tags but is constantly evolving, but newer versions are downward compatible,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 meanin
18、g of the text (XML),A basic document,Every document should start with the following line,There are three required elements, defined by the tags , and ,My Home PageWelcome,Basic structure elements,first and last tags The HEAD section must come before the BODY section contains generic information abou
19、t 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,Block elements,Block elements define sections of text, usually preceded by a blank line- para
20、graph . - headings- preserve (original format)- indented text- division used to identify a section of the document that may be subject to special formatting (for example, using stylesheets).,Paragraphs,Paragraphs: . force a break between the enclosed text and the text surrounding it the tagged regio
21、n of text may be subject to special formatting Here is another paragraph align is an attribute of the paragraph tag center is the value of the align attribute,here is a piece of text that has been placed inside a paragraph Here is another paragraph,HeadingsChapter 11. IntroductionThis is the introdu
22、ction2. Next sectionThis is the next section2.1 A subsectionThis is a subsection ,Headings,Six levels of importance . Use headings to divide document into sections,Element relationships,The elements marked by tags form a hierarchy The root element is html (marked by .) It usually has two children: h
23、ead 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: . . . we can have: . . .,Inline descriptive elements
24、,Descriptive elements affect the appearance of text depending on how the text is describedemphasis, usually with italicsstrong, usually with boldcitation, usually in italicsusually results in monotype spacing, A fascinating subject that I must understand ,Inline explicit style elements,bigger font t
25、han surrounding textsmaller font than surrounding textitalicsstrikethroughsubscriptssuperscriptsdelimits text for stylesheet controldelimits blocks of text for stylesheet control,Inline explicit style elements, attributes face - name of font (must be installed) “arial“, “times“, “verdana“, “helvetic
26、a“ 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.,Unordered lists,Unordered lists . . for the list elements each item has a bullet,s
27、ome normal textapples oranges pears bananas ,Ordered lists,Ordered lists . . for the list elements each item has a number,some normal textapples oranges pears bananas ,Definition lists, The enclosing tagsThe definition termThe definition,MIMEMultipurpose.FTPFile transfer. TCPTransmission.,Nested lis
28、ts,A list may contain another list The inner list is nested inside the outer list,applesredgreenorangespearsbananas,Comments,Comments are delimited by Comments may span multiple lines,Horizontal lines,To insert a horizontal line to divide up parts of a document we use the empty tag Attributes: align
29、, size (in pixels), width (in pixels or percentage), noshade,Chapter 1Introduction ,Special characters,Some characters such as , “ and , A t understand ,Links,The link (anchor) element . provides hypertext links between different documents (using a URL) different parts of an individual document User
30、 selection of the link (hot spot) results in retrieval and display of the designated document movement to relevant part of same document, The Department of Computer Science is a very ,Link with URL,The href attribute gives the URL of the target page The text between the tags is highlighted selecting
31、 it activates the link, The Department of Computer Science is a very ,Example:,Relative addressing,The root directory for the link is assumed to be the directory containing the parent page of the link,Research Publications Computer Science home,The previous example gave the full path name, known as
32、the absolute address,Images,Images are included using the empty tag Example: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 no
33、t to display images (for faster download) also used for compatibility with older browsers,Image attributes,The size attributes control the size of the imageThe 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
34、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 ri
35、ght margin,Links with images,A link element can include an image instead of text both images and text can be included if required, Enter my world of cats ,Colour,Colours are specified with hexadecimal numbers for the red, green and blue primary colours, preceded by a “#”. To set the background colou
36、r of a web page,Colour RGB Model,#ff0000 (red), #00ff00 (green) #0000ff (blue) #ffff00 (yellow) . #3395ab (a pastel blue),Colour,To set the colour of all text on a page,In the body element, the colour of link text can be controlled with the following attributes: link for an un-visited link vlink for
37、 a visited link alink for a link that is currently selected by the mouse Example,Colour,To set the colour of an individual piece of text use the font element (or preferably stylesheets see later), Text in quotes “such as this“ has a different colour ,Colour names,Netscape and Internet Explorer allow
38、 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,Background patterns,Rather than a uniform color You can give the background of web page a pattern as follow:,Forms,Server-based programs may ret
39、urn data to the client as a web pageClient-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,Example applications,Questionnaires to provide feedback on a web sitee-commerce, t
40、o 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 shopRun a database query and receive results (an important part of e-commerce),Input types,text checkbox
41、radio (buttons) select (options) textarea password button submit reset hidden file image,The method and action attributes,Tell us what you think,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 acti
42、on attribute specifies a server program that processes the form data (often as a URL),The input element: type=“text“,Tell us what you thinkName Address ,The type attribute specifies the type of user input The name attribute gives an identifier to the input data,The input element: type=“checkbox“,How
43、 did you hear about this web site? A friend Search engine ,The name attribute is used to define a set of checkboxes The value attribute identifies the individual checkbox If the checked attribute is set the box is initially checked,The input element: type=“radio“,Radio buttons are similar to checkbo
44、xes, but only one can be selected To select a button by default, use the checked attribute (for one button only),How did you hear about this web site? A friend Search engine,The input element: type=“button“,Do you want to receive any further information:,The name attribute uniquely identifies a butt
45、on The value attribute gives a label to the button Actions can be associated with buttons using JavaScript see later,The input element: type=“submit/reset“,Thank you,type=“submit“ clicking this button sends the form data to the program (URL) specified in the action attribute of the form type=“reset“
46、 clicking this button clears all data entered so far,The input element: type=“password/file/hidden“,type=“password“ similar to type=“text“ except that the input is echoed with asterisks (so not visible) type=“file“ provides a file dialogue box to specify a file that is sent to the server type=“hidde
47、n“ similar to text input, but the value attribute is used to specify data that is to be sent to the server. Nothing appears on the screen. The data might be set by a server program to keep track of the details of a particular transaction.,The textarea element,Used for multi-line text input The size
48、of the input area is specified with the cols and rows attributes Any text placed inside the element appears in the input area (this can be deleted).,Please write your comments:put text here ,The select element,How do you rate this site?GoodBadUgly ,The select element provides a menu of options An op
49、tion can be selected by default using the selected attribute (otherwise the first in the list is initially selected),Tables,Tables provide a means of organising the layout of dataA table is divided into rows and columns: these specify the cells of the table,Tables, main elementtable rowtable headertable data,NameA B MorganD P JonesCourseFishingSailingYear85,Rows and Columns,Cells can span multiple columns and multiple rows with the colspan and rowspan attributes,NameCourseYearA BMorganFishing5D JJones8,
