Download presentation
Presentation is loading. Please wait.
1
Electronic Commerce HTML
John Wordsworth Department of Computer Science The University of Reading Room 129, Ext 6544 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=" <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=" 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 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 Wordsworth</a> is in room 137, but is usually only in the University on Mondays and Thursdays.</p> April 2002 3CSG1
11
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=" onMouseOver="self.status='This is the HTML 4.01 specification'; return true"> <i>HTML 4.01 Specification</i> </a> 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. April 2002 3CSG1
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
