Electronic Commerce HTML John Wordsworth Department of Computer Science The University of Reading J.B.Wordsworth@rdg.ac.uk Room 129, Ext 6544 April 2002 3CSG1
Lecture objectives Understand the notion of a markup language: element hierarchy, tags, attributes, and content. Describe some of the facilities of HTML: headings, paragraphs, lists, links, images, tables, frames. Describe the use of a scripting language. April 2002 3CSG1
A bit of HTML <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>Electronic Commerce</title> </head> <body bgcolor="yellow"> <h1>Electronic Commerce</h1> <p>The increasing use . . . The subjects to be discussed include: <ul> <li>tiered structure of e-commerce systems</li> </ul> </p> </body> </html> April 2002 3CSG1
HTML elements Hierarchy of elements: HTML (html) heading (head) title (title) body (body) heading level 1 (h1) paragraph (p) bulleted list (ul) list item (li) Tags: opening <body>, closing </body> Attributes <body bgcolor="yellow"> Content: everything between the opening and closing tags April 2002 3CSG1
Function of HTML elements To announce the structure of the HTML document, and the properties of the things in it: This is a bulleted list (ul) This is a link to another document (a) To say how the browser is to present the element in the browser window: Do this in bold (b) Do this in italic (i) April 2002 3CSG1
Links To move elsewhere in this document, use the anchor element: <li><a href="#dd">Database Design</a></li> <h2><a name="dd">Database Design</a></h2> To link to another document, use the anchor element: <p><a href="http://www.w3.org/TR/HTML401/"> <i>HTML 4.01 Specification</i></a></p> <li><a href="jbwec.html">Electronic Commerce</a> </li>> April 2002 3CSG1
Images To get a picture into the document, use the image element: <h1><img src="hs.gif"></h1> <img src="hs1.gif" width=300 heigth=500> <img src="http://www.rdg.ac.uk/Uni_web_colour.jpg"> April 2002 3CSG1
Tables <table border="1"> <thead> <tr> <th>Abbrev.</th><th>Authors</th> <th>Titles</th><th>Publication details</th> </tr> </thead> <tbody> <tr><td><b>DDS</b></td><td>Deitel ...</td> <td><i>e-Business ... </i></td> <td>Prentice Hall ... </td></tr> ... </tbody> </table> April 2002 3CSG1
Frames (1) <frameset cols="30%, 70%" frameborder="1"> <frame name="fixed" src="jbwci.html"> <frame name="dynamic" src="jbwdb.html"> <noframes> <ul> <li><a href="jbwdb.html">Database Design</a></li> <li><a href="jbwec.html">Electronic Commerce</a></li> <li><a href="jbwse.html">Software Engineering</a></li> </ul></p> <p><a href="mailto:J.B.Wordsworth@rdg.ac.uk"> John Wordsworth</a> . . .</p> </noframes> </frameset> April 2002 3CSG1
Frames (2) jbwci.html <h1>Courses</h1> <p><a href="jbwdb.html" target="dynamic">Database Design</a></p> <p><a href="jbwec.html" target="dynamic">Electronic Commerce</a></p> <p><a href="jbwse.html" target="dynamic">Software Engineering</a></p> <h1>Contact information</h1> <a href="mailto:J.B.Wordsworth@rdg.ac.uk">John Wordsworth</a> is in room 137, but is usually only in the University on Mondays and Thursdays.</p> April 2002 3CSG1
JavaScript A programming language imbedded in an HTML document and interpreted by the Web browser Variables, functions, objects, event-handling … Standardised as ECMAScript <head> <script language="JavaScript"></script> </head> ... <a href="http://www.w3.org/TR/HTML401/" onMouseOver="self.status='This is the HTML 4.01 specification'; return true"> <i>HTML 4.01 Specification</i> </a> April 2002 3CSG1
Key points HTML is a markup language; it uses tags to identify the elements that make up a Web page. HTML supports the use of various types of content: text, images, and links to other Web pages. HTML tables can be used to present information. HTML allows the use of frames to help manage the browser window in a user-friendly fashion. JavaScript can be used to add dynamic content to a page. April 2002 3CSG1