electronic commerce html

April 2002 3CSG1 1

Electronic CommerceHTML

John WordsworthDepartment of Computer ScienceThe University of [email protected] 129, Ext 6544

mailto:[email protected]




April 2002 3CSG1 2

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 3

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 4

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 5

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 6

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 7

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 8

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 9

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:[email protected]">John Wordsworth</a> . . .</p></noframes></frameset>

April 2002 3CSG1 10

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:[email protected]">John Wordsworth</a> is in room 137, but is usually only in the University on Mondays and Thursdays.</p>

April 2002 3CSG1 11

JavaScript

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

A programming language imbedded in an HTML document and interpreted by the Web browser

Variables, functions, objects, event-handling …

Standardised as ECMAScript

April 2002 3CSG1 12

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.

electronic commerce html

Documents