Presentation on theme: "The world wide web Chapter 4. Learning outcomes Explain in general terms how web documents are transferred across the Internet and What processes are."— Presentation transcript:
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 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
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, 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. tells the server where to find the file
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
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.
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 users identity if they are authorised to access a particular resources
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.
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.
Introduction to HTML
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
Internet - Services & 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 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.
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. My Memoirs A pair of tags plus their content constitute an 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 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
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)
A basic document Every document should start with the following line There are three required elements, defined by the tags, and My Home Page Welcome
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
Block elements Block elements define sections of text, usually preceded by a blank line - paragraph... - 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 region 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
Headings Chapter 1 1. Introduction This is the introduction 2. Next section This is the next section 2.1 A subsection This 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: 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 for a full list of rules Elements must not overlap each other we cannot have: we can have:
Inline descriptive elements Descriptive elements affect the appearance of text depending on how the text is described emphasis, usually with italics strong, usually with bold citation, usually in italics usually results in monotype spacing A fascinating subject that I must understand
Inline explicit style elements bigger font than surrounding text smaller font than surrounding text italics strikethrough subscripts superscripts delimits text for stylesheet control delimits blocks of text for stylesheet control
Inline explicit style elements 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.
Ordered and Unordered Lists some normal text apples oranges pears bananas some normal text apples oranges pears bananas
Comments Comments are delimited by Comments may span multiple lines
Special characters Some characters such as, " and & have special meanings. To prevent them being interpreted as HTML code, they must be written as follows: < > " & Blank space is normally ignored in HTML. To include a space in your document use: A < fascinating > subject that I m u s t understand
The Department of Computing is a very.... Link: Links and Images images: src attribute specifies the file containing the image alt attribute specifies the text to be displayed if the image is not viewed
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
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)
Forms text checkbox radio (buttons) select (options) textarea password button submit reset hidden file image Input types
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 action attribute specifies a server program that processes the form data (often as a URL)
Text, checkbox and Radio button Tell us what you think Name Address The type attribute specifies the type of user input The name attribute gives an identifier to the input data How did you hear about this web site? A friend Search engine How did you hear about this web site? A friend Search engine
The input element: type="submit/reset and select element Thank you How do you rate this site? Good Bad Ugly
Tables main element table row table header table data Name A B Morgan D P Jones Course Fishing Sailing Year 8 5
The align and width attributes 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 Name Course Year Last Init. Morgan AB Fishing 5
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 element puts a title above the table
Table attributes Course Data Name Course Year A B Morgan Fishing 5
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.
Framesets The frameset 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 Frames 1
Noframes Frames 1 Something here for browsers not supporting frames Some browsers cannot process frames. Alternative content should be provided using the noframes element
Styles Styles can be defined Inline styles Global styles Stylesheets (Cascading stylesheets) Inline styles Styles
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 a single type of element Anonymous classes can be applied to any type of element
Simple classes A Simple Heading some text... some text
Anonymous classes A Simple Heading some text... some text
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 or element. Div and span elements become part of the document In particular, each can have class and id attributes
Divisions Styles can be applied to blocks of HTML code using div A Simple Heading some text...
Spans spans are similar to divisions A Simple Heading some text...
Summary By now you should be able to use: Tables Frames Stylesheet – CSS Inline style Embedded style External style
Typical exam question explain why is it important to separate the content from the style. what is CSS? State three ways in which styles can be used. And explain the advantages and disadvantages of each one.
Next Look at the disadvantages of html XML Well formed vs valid xml document XHTML vs HTML DHTML