CIT853: INTERNET CONCEPTS AND WEB DESIGN

UNIT 1: OVERVIEW OF THE INTERNET

Sure, here is a summary of the main points of the internet concepts and web design
unit 1, focusing on the examinable points:

1. Introduction
 The internet is a network of networks that allows computers worldwide to
communicate.
 It was developed based on packet-switching technology to overcome limitations of
circuit-switching networks.
 ARPANET, created by the US Department of Defense, is considered the
predecessor to the internet.
2. Internet Concepts
 Domain Names and IP Addresses:
o Domain names are user-friendly names for identifying computers on the internet
(e.g., [invalid URL removed]).
o IP addresses are unique numerical identifiers assigned to each device on the
network (e.g., 172.16.0.1).
o Domain Name System (DNS) translates domain names to IP addresses and vice
versa.
o ICANN (Internet Corporation for Assigned Names and Numbers) manages the
assignment of domain names and IP addresses.
 Information Routing:
o Routers are responsible for directing data packets across the internet based on their
IP addresses.
o Routing tables help routers determine the most efficient path for data transmission.
 The Internet Model (DoD Model):
o A four-layered model for internet communication (Application, Host-to-Host, Internet,
Network Access).
o Corresponds to the OSI model but with some differences in functionality distribution
across layers.
o TCP/IP protocol suite is a key part of the DoD model, with TCP and IP protocols
residing at different layers.
3. Application Layer Protocols

1
 Common application layer protocols include:
o HTTP (Hypertext Transfer Protocol): for web browsing and data transfer between
web servers and clients.
o Telnet: for remote terminal access to other computers.
o FTP (File Transfer Protocol): for transferring files between computers.
o SMTP (Simple Mail Transfer Protocol): for sending and receiving emails.
o SNMP (Simple Network Management Protocol): for network device management
and information gathering.
Examiner's Tips:
 Understand the differences between domain names and IP addresses and their
roles.
 Grasp the concept of routing and the function of routers in the internet.
 Be familiar with the four layers of the DoD model and their corresponding
functionalities.
 Recognize common application layer protocols and their purposes.

UNIT 2: INTRODUCTION TO THE WEB

1.0 Introduction
 The World Wide Web (WWW) is a collection of interconnected documents on the
internet.
 It uses Hypertext Transfer Protocol (HTTP) to display hypertext and images.
 Web documents are formatted in Hypertext Markup Language (HTML).
3.0 Main Content
 3.1 Basic Web Application Architecture
o Web applications (webapps) are accessed with a web browser over a network.
o They are built on a client-server architecture with three tiers:
 Tier 1: Web browser (client) - fetches and displays web pages.
 Tier 2: Web server (middleware) - processes requests and delivers web pages.
 Tier 3: Database server - stores application data.
o Communication between tiers happens through Hypertext Transfer Protocol (HTTP).
 3.1.1 The Web Browser (Client)
o Software application to display and interact with web pages.
o Most common browsers are: MS Internet Explorer, Mozilla Firefox, Apple Safari,
Netscape, and Opera.
o Browsers understand HTML and some scripting languages like JavaScript.
 3.1.2 The Web Server (Middleware)
o Receives requests from browsers and delivers web pages.
2
o Popular web servers include:
 Apache HTTP Server (free, open-source)
 Internet Information Services (IIS) (Microsoft product)
 3.1.3 Database Server
o Stores and manages application data.
o Popular database management systems (DBMS) include: Oracle, Sybase, Informix,
SQL Server, Db2, and Interbase.
 3.2 Client/Server Computing
o Explains the separation of functionalities between client (presentation) and server
(processing and storage).
 3.2.1 Layers
o Describes division of code modules within a single machine.
o Thin Client: No application code on the client, relies on the server for everything.
o Fat Client: Has 1 to 3 layers of application code, can operate somewhat independently
of the server.
 3.2.2 Tiers
o Describes division of code modules across multiple machines in a distributed network.
o Three tiers:
 Tier 1: Presentation Tier (PT) - interacts with the user.
 Tier 2: Application Tier (AT) - handles business logic and data access.
 Tier 3: Database Tier (DT) - stores database or data source.
o Tiers improve security and scalability for large web applications.
4.0 Conclusion
 The Web is a powerful tool for accessing and sharing information globally.
6.0 Tutor-Marked Assignment (Sample Questions)
 Explain the three-tier architecture of a web application.
 Describe the functionalities of a web browser and a web server.
 Differentiate between a thin client and a fat client.
 Discuss the advantages and disadvantages of a three-tier architecture.
MODULE 2: WEB DESIGN
Unit 1: Introduction to Web Design
1.0 Introduction
 Web applications can be structured into tiers, with the first tier being the front-end which
uses markup languages for scripting.
2.0 Objectives
 Upon completing this unit, you should be able to:
o Explain markup language for client-side programming
o Describe front-end scripting tools
o Identify container and empty HTML tags
3
o Recognize various formatting tags
o Design a simple static web page
3.0 Main Content
 Web Pages:
o Files with .htm or .html extension containing HTML and potentially other server-side
code.
o Two types: static and dynamic.
 Static: Only contain HTML tags, displaying information that does not change based on
user requests.
 Dynamic: Content alters based on user requests and preferences. Relies on client-side
and server-side code.
 Common Gateway Interface (CGI):
o A standard for communication between web documents and CGI scripts you write.
o CGI scripts are programs conforming to this communication standard.
o CGI itself is not a language; scripts can be written in any programming language.
 Markup Language:
o Standard Generalized Markup Language (SGML) is a standard for defining markup
languages for documents.
o Provides an abstract syntax that can be implemented in various concrete syntaxes (e.g.,
angle brackets used as tag delimiters).
o SGML is a system for defining markup languages. Authors use markup to represent
structural, presentational, and semantic information alongside content.
o HTML is an example of a markup language.
 Hypertext Markup Language (HTML):
o The standard language for creating web pages.
o Provides tags that enhance the look of documents using graphics, fonts, and colors.
o Basic building blocks of an HTML page are created with a text editor and viewed using
a web browser.
 Text editors: Notepad or WordPad (Windows), SimpleText (Mac), VI or Emacs (UNIX)
o Tools needed for web design alongside HTML:
 Hypertext Transfer Protocol (HTTP): communication protocol on the web using a client-
server model.
 Web Clients/Browsers: interpret HTML documents, displaying text, videos, audio, and
graphics.
 Hyperlinks: links to other parts of web documents. When clicked, they forward requests
to the server, which responds with the appropriate document to display on the user's
screen.
 Uniform Resource Locator (URL): the address/file specifier that locates documents
requested through hyperlinks. It can also be used to point to queries, images, or
commands.
 Format: scheme://host-domain/path/dataname (e.g., http://www.who.int)
 First part: indicates the protocol to use (e.g., http)
4
 Second part: identifies the domain name or internet address where the information is
located.
 File Extensions Used in Web Design:
Extension Data Type
html/htm HTML Text
txt ASCII Text
gif Composed Graphics
jpeg/jpg Composed Graphics
mpeg/mpg Digital Video
avi Digital Video
wav/au Digital Video

 Elements of HTML Structure:

o An HTML document is composed of tags or elements classified as container and empty
tags.
 Container Tags:
o Composed of both opening (<TAG>) and closing (</TAG>) tags.
o Wrap and format text within the document, holding the text between the two tags.
o Examples: <HTML>, <HEAD>, <TITLE>, <BODY>
 Empty Tags:
o All other HTML tags fall into this category.
o Have only an opening tag, with no closing tag.
o Perform an action on their own, not acting on blocks of text.
o Examples: <HR> (horizontal rule), <BR> (line break), <!- Text --> (comment)
Self-Assessment Exercise 1
 Identify four text editors and their providers.
 List five file extensions and their use in web applications.
 Describe container tags and empty tags with relevant examples.
 Testing a Web Application:
1. Open a text editor (e.g., Notepad).
2. Navigate to Start/All Programs/Accessories/Notepad.
3. Type your HTML code.
4. Save the code with the extension .htm or .html.
5. The file name will acquire an icon

UNIT 2: ADDING GRAPHICS TO WEB PAGES

1.0 Introduction
 This unit covers adding graphics, hypertext links, forms, and tables to web pages using
HTML.
3.0 Main Content
3.1 Working with Web Graphics
 There are two main graphic file formats for web pages:
5
o GIF (Graphics Interchange Format): Suitable for images with limited color palettes (256
colors or less).
o JPEG (Joint Photographic Experts Group): Offers higher image quality and supports
more colors (up to 16.7 million) but loses some clarity with compression.
 Web graphics can be obtained by:
o Creating them in a graphics application and saving them as GIF or JPEG.
o Downloading public domain graphics.
o Scanning photographs.
o Using digital cameras.
3.2 Embedding Graphics in Web Pages
 The <IMG> tag inserts images into web pages.
 Two path types are used to specify the image location:
o Relative Path URL: Used when the image file is in the same folder as the HTML
document.
 Format: <IMG SRC="image URL"> (e.g., <IMG SRC="openImage.gif">)
o Absolute Path URL: Used when the image file is located on a remote site or a different
folder.
 Format: <IMG SRC="path/filename"> (e.g., <IMG
SRC="http://www.openuniversity.com/lectures/openImage.gif"> or <IMG SRC="c:\My
Document\lectures\openImage.gif">)
3.3 Other Image Tag (<IMG>) Attributes
 ALT Attribute: Provides a description of the image for users who cannot see it (e.g.,
<IMG SRC="openImage.gif" ALT="National Open University Logo">).
 ALIGN Attribute: Specifies the alignment of the image (top, middle, bottom).
o Format: <IMG SRC="image URL" ALIGN="direction">
3.4 Creating Hypertext and Hypermedia Links
 Links are created using the <A> (anchor) tag.
 Format: <A HREF="URL"> Text describing link</A>
 HREF Attribute: Specifies the hyperlink URL (usually underlined and a different color).
 Link creation examples:
o Linking to documents on the same computer (e.g., Next and Back buttons).
 Format: <A HREF="products.html">Product Information</A>
o Linking to documents on the internet.
 Format: <A HREF="http://www.openuniversity.com/admission.html">Admission
Information</A>
o Linking to other parts of the same document (sections).
 Format: <A HREF="#section name">Link to another section of the document</A>
 <BASE> Tag: Used when web pages are stored in subfolders.
o Format: <BASE HREF="absolute URL"> (placed within <HEAD> tags)

3.5 Sure, the examinable points on Form Elements are:

6
 HTML form elements: These are elements that allow users to enter information in a
web form. They include text fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.
 <FORM> tag: This tag defines a form on a web page. It has attributes like METHOD

(specifies how data is sent - GET or POST) and ACTION (specifies the URL of the
script to process the data).
 METHOD attribute: This attribute defines how form data is transferred to the server. It

can have the following values:

o GET: Data is sent appended to the URL, visible in the address bar, limited data size.
o POST: Data is sent as a separate stream, invisible in the address bar, allows for
more data.
 ACTION attribute: This attribute specifies the URL of the script that will process the

form data.
 Text Fields and Text Area:
o <TEXTAREA>: This element creates a multi-line text input field. It has attributes like

ROWS (specifies the number of rows) and COLS (specifies the number of columns).

o <INPUT TYPE="TEXT">: This element creates a single-line text input field. It has
attributes like NAME (specifies the name of the field), SIZE (specifies the width of the
field), and MAXLENGTH (specifies the maximum length of the input).
o Password Field: This is similar to the text field but hides the characters as they are
typed (usually with asterisks). It uses the <INPUT TYPE="PASSWORD"> tag.
 Checkboxes: These allow users to select multiple options. They are created using
the <INPUT TYPE="CHECKBOX"> tag. The CHECKED attribute can be used to set a
default checked option.
 Radio Buttons: These allow users to select only one option from a set of options.
They are created using the <INPUT TYPE="RADIO"> tag. They all need to have the
same NAME attribute.
 Reset Button: This button resets all the form elements to their default values. It is
created using the <INPUT TYPE="RESET"> tag.
 Submit Button: This button submits the form data to the server for processing. It is
created using the <INPUT TYPE="SUBMIT"> tag.

7
 The document also covers creating pop-up and scrolling menus using the <SELECT>
tag and creating tables in HTML documents using tags like <table>, <tr>, <td>,
and <th>.

UNIT 3: CASCADING STYLE SHEETS (CSS)

Key Concepts:
 CSS Syntax: A CSS rule consists of a selector (HTML element), property (style
attribute), and value (desired style).
o Example: h1 { color: red; } (changes all h1 elements to red)
 Grouping Selectors: Separate selectors with commas to apply the same style to
multiple elements.
o Example: h1, h2, h3 { color: blue; }

 Class Selector: Define styles for specific classes within HTML elements.
o Example: <p class="right">Right-aligned text</p>

 Global Style Class: Define a style that applies to all elements with a certain class.
o Example: .important { font-weight: bold; }

 ID Selector: Assign a unique style to an element using the ID attribute (can only be
used once per document).
o Example: #unique-element { color: green; }

 CSS Comments: Add comments to explain your code using /* comment here */.

Inserting CSS:
 External Style Sheet: Ideal for applying styles to multiple pages.
o CSS code is written in a separate .css file.
o Link the CSS file to the HTML document using the <link> tag in the <head> section.
 Internal Style Sheet: Used for styles specific to a single page.
o Defined within the <style> tag in the <head> section of the HTML document.
 Inline Styles: Not recommended due to tight coupling of content and presentation.
o Defined using the style attribute within the HTML element tag.
Benefits of CSS:
 Separates content (HTML) from presentation (CSS) for better maintainability.
 Improves accessibility by allowing for different style presentations (e.g., screen
reader, print).
 Enables consistent styling across multiple pages.
Additional Notes:
8
 The document covers how to create an internal style sheet with background color
and element styling.
 Self-assessment exercises ask students to practice with external styles and adding
comments.
UNIT 4: CASCADING STYLE SHEET PROPERTIES
 CSS and Style Sheets:
o Web pages can be influenced by more than one style sheet at a time.
o Reasons for using multiple style sheets:
 Modularity: Break down large style sheets into smaller, reusable ones using @import.
 Author/Reader Balance: Both authors (web developers) and readers (users with their
own styles) can influence a webpage's presentation through style sheets.
 Style Sheet Precedence Rules:
o Resolve conflicts between style sheets with different priorities.
o Precedence order (highest to lowest):
1. !important rule (rarely used)
2. Author's rules (override browser defaults)
3. More specific selectors (e.g., ID selector has higher priority than element
selector)
4. Last rule declared (in case of a tie)
Imported style sheets are cascaded based on import order.
CSS 1: @import statements must be at the beginning of the style sheet.
3.1 Style Sheet Properties
 Style sheets define the look and feel of web pages by assigning values to style
properties.
 Each property has a specific format for its allowed values.
3.2.1 Notation for Property Values
 Property value options are listed with a specific syntax using keywords, lengths,
percentages, URLs, colors, etc.
 Brackets [] indicate grouping, parentheses () for function calls.
 Modifiers like * (repeat zero or more times), + (repeat one or more times), etc., can be
used with values.
3.2.2 Common Style Sheet Properties
 Font Properties
o font-weight: Sets the weight (boldness) of the font.
o font-style: Specifies the font face type (italic, normal, etc.).
o font-size: Defines the font size (absolute or relative units).
o font-family: Sets the typeface family for the font.
 Text Properties
o word-spacing: Adds space between words (in addition to default spacing).
9
o letter-spacing: Adds space between letters (in addition to default spacing).
o text-decoration: Applies decorations to text (underline, overline, etc.).
o text-transform: Transforms text (uppercase, lowercase, capitalize).
o vertical-align: Aligns elements vertically (baseline, subscript, superscript).
o text-align: Positions paragraphs horizontally (left, right, center, justify).
o text-indent: Sets the indentation of the first line of a paragraph.
o line-height: Specifies the distance between lines of text in a paragraph.
 Background Properties
o color: Sets the text color (foreground).
o background-image: Specifies an image for the background.
o background-repeat: Controls how a background image is tiled.
o background-position: Defines the position of the background image.
o background: A shorthand property for setting multiple background properties at once.
Sample with Self-Assessment Exercises (Answers are not provided)
The unit provides a sample HTML document and CSS code to demonstrate how to style
elements. It includes exercises that ask you to modify the CSS to achieve specific visual
effects.
4.0 Conclusion
 This unit covers CSS properties used to control the appearance of web pages, including
text, fonts, box models, borders, etc.
 It also explains how to define the order in which style sheet rules are applied
(precedence).
6.0 Tutor-Marked Assignment
 Task 1: Create a web page displaying names of colleagues using an external style
sheet.
o Include an H3 heading, a blue horizontal line, and an image of a favorite colleague.
 Task 2: Apply styles using an external CSS sheet to format the output from the Unit 3
assignment.
o Specify background color, font size, font family, text alignment, and margin.
Unit 5: Cascading Style Sheet Properties Continue
3.1 Box Property
 The CSS box model applies to all HTML elements.
 The box model consists of four parts: content, padding, border, and margin.
 The size of the margin, border, and padding are set using properties like margin,
padding, and border-width.
 These properties can take various values including lengths, percentages, and keywords
like thin, medium, and thick.
Exam Points:
 Be able to identify the parts of the CSS box model.
 Understand how to set the size of margins, padding, and borders using CSS properties.

10
 3.2 Classification Properties
 Classification properties define how an element is displayed and behaves.
3.2.1 display
 This property determines how an element is displayed on the page. Possible values
include:
o block: Opens a new box and starts on a new line.
o inline: Stays on the same line as surrounding content.
o list-item: Creates a bulleted or numbered list item.
o none: Hides the element.
Exam Points:
 Know the different values of the display property and how they affect the layout.
3.2.2 list-style
 These properties are used to style list items.
o list-style-type: Sets the bullet or numbering style (e.g., disc, circle, decimal).
o list-style-image: Sets a custom image for list item bullets.
o list-style-position: Controls the position of the list item marker relative to the content
(e.g., inside, outside).
 The list-style property is a shorthand for setting all three list style properties at once.
Exam Points:
 Understand how to use list-style properties to style list items.
Self-Assessment Exercises
 These exercises test your understanding of the concepts covered in the unit.
4.0 Conclusion
 This unit covers various CSS properties used to style and position elements on a web
page.
6.0 Tutor-Marked Assignment
 This assignment tests your ability to apply the learned CSS concepts to create a web
page.
Examiner Points:
 Be familiar with all the properties mentioned in the unit and how to use them in your
code.
 Be able to apply your knowledge to create web pages with desired layouts and styles.
MODULE 3: JAVASCRIPT AND VISUAL BASIC SCRIPT (VBSCRIPT)
Unit 1 Summary: JavaScript
Examinable Points:
 JavaScript Types: Client-side (runs in browser) and Server-side (runs on server).
 Placing Scripts:
o In <head> tag (prevents user-triggered errors during download).
o In <body> tag using an <script> tag with content.

11
o Within forms as event handlers (no <script> tag needed).
o In a separate .js file for clarity, sharing code, and hiding code.
 Comment Tags:
o // for single-line comments.
o /* */ for multi-line comments.
o Used for readability and explaining code sections.
o
 Hiding JavaScript from Old Browsers:
o Wrap script in HTML comment tags (ignored by older browsers).
 JavaScript Variables:
o Numeric (whole numbers or decimals).
o String (collection of characters).
o Boolean (True or False).
o Not strongly typed (type declaration not required).
o Case-sensitive names.
o Must start with a letter or underscore.
o Declared with var.
o No semicolon needed at statement end.
 JavaScript Operators:
o Binary (+,-,/,*,%): require two inputs.
o Unary (++,--,-): require one input.
o Comparison (==, !=, <, >, <=, >=): compare values and return true/false.
o Assignment (=): assigns values.
o Combined (+=, -=, *=, /=, %): shorthand for assignment and operation.
o Logical (&&, ||): combine conditional tests (AND/OR).
o Concatenation (+): joins text, numbers, and characters.
 JavaScript Control Flow:
o for loop: executes a block of code a set number of times.
o if...else statement: makes decisions based on conditions.
o while loop: executes a block of code as long as a condition is true.
Additional Notes:
 The document mentions alert, confirm, and prompt functions for displaying messages
and getting user input (not covered in this summary).
 The document includes self-assessment exercises that encourage you to modify code
and practice concepts.
Unit 2: JavaScript and Object Oriented Programming (OOP)
3.0 Main Content

12
 Object-Oriented Programming (OOP): It's a way of structuring programs using objects
that collaborate to solve problems. JavaScript supports OOP concepts but isn't strictly
object-oriented.
 Document Object: JavaScript provides a convenient object called document to access
and change webpage attributes and content.

 Objects in JavaScript:
o Creating objects:
 Use the new keyword and a constructor function (like Object(), Array(), or custom
functions).
 Custom constructor functions define properties and methods for specific object types.
o Example: Creating a Question object with question and answer properties.
 Functions in JavaScript:
o Predefined functions:
 parseInt(): Converts a string to an integer (if possible).
 parseFloat(): Converts a string to a decimal number (if possible).
 Both return NaN (Not-a-Number) if the conversion fails.
o User-defined functions:
 Allow creating reusable blocks of code for specific tasks.
 Defined using the function keyword followed by a name, parameters, and a function
body with statements to execute.
 Can be placed anywhere in the HTML document (ideally within <script> tags in the
<head> for earlier loading).
 JavaScript Events:
o Actions triggered by user interaction with a webpage (e.g., clicking buttons, moving the
mouse).
o Examples:
 Keyboard and mouse events (like onClick).
 Load events (like onLoad, onUnload).
 Form-related events (like onFocus).
o Event handlers: Special HTML tag attributes that specify JavaScript code to run when
an event occurs.
3.4 JavaScript Forms and Functions
 JavaScript enhances HTML forms by:
o Checking user input for errors.
o Displaying additional information to the user.
 Achieved through:
o Defining functions to handle form-related tasks.
o Using event handlers in HTML form tags to call these functions when specific events
occur (e.g., submitting a form).

13
 3.5 Event Handling
 Events trigger JavaScript code in response to user interactions.
 Handled using HTML event handler attributes in tags like <form>, <input>, <button>,
etc.
 Format: <HTMLTAG eventHandler="statement1; statement2; ...">
 Statements within quotes can call functions or perform actions.
3.6 Getting and Setting Text Field Values
 Access the value of a text field using the value property of the input object.
 Example: result = document.stuName.firstName.value (gets the value from the
firstName field in the stuName form).
 Set the value of a text field by assigning a string to the value property.
 Example: document.stuName.firstName.value = "Titi" (sets the value of the firstName
field to "Titi").
3.7 JavaScript Frames
 The window object has properties for managing frames (sections within a window).
o frames: An array containing other window objects representing frames within the current
window.
o parent: A reference to the parent frame or window.
o top: A reference to the top-level window in the frame hierarchy.
Self-Assessment Exercises
 Create a web page to calculate the circumference of a circle using a JavaScript
function.
 Create a web page with a form that takes a course code as input and displays the
corresponding course unit using JavaScript functions.
4.0 Conclusion
 JavaScript supports working with objects for efficient data organization and
manipulation.
6.0 Tutor-Marked Assignment
 Develop an order processing web application for a mobile phone shop using JavaScript
forms and functions.
Unit 3: Visual Basic Script
3.0 Main Content
 Discusses where to place VBScript in an HTML document:
o Head section (for functions)
o Body section (scripts executed during page load)
 Provides an example of script placement in both sections.
3.1 Where to Put the VBScript
 Script placement determines when the script executes.
 Options include:
o In the body (executes on page load)

14
o Triggered by user events (e.g., button click)
 Preferred method is to place all scripts together within the HTML document.
3.2 VBScript Data Types, Variables, and Operators
 3.2.1 Data Types
o VBScript has two fundamental data types: numbers and strings.
o Script usually figures out data type conversions.
o Conversion functions and data type functions are available for explicit control.
 3.2.2 Variables
o Store data that can change during program execution.
o VBScript has a single data type for variables called variant.
o Variables can be declared explicitly (using Dim) or implicitly (by use).
o Implicit declaration is not recommended (prone to errors).
o Variable naming rules:
 Start with a letter
 No periods
 Unique within scope
 Max length 255 characters
 3.2.3 Variants and Subtypes
o Variants can store different data types referred to as subtypes.
o Subtypes include integers, booleans, currency, dates, strings, etc.
o Assigning values to variables follows a specific format.
o Scope determines where a variable can be used (script-level or procedure-level).
o VBScript does not have built-in constants, but variables can be used for similar
functionality.
 3.2.4 VBScript Array Variables
o Arrays hold lists of single variables referenced by numerical indexes.
o Indexing starts at 0 (zero-based).
o Arrays are declared with Dim statement specifying the upper bound.
o Values are assigned using the index.
o VBScript supports multi-dimensional arrays (up to 60 dimensions).
o Dynamic arrays can resize during script execution using ReDim statement.
3.2.4.1 Self-Assessment Exercise 1 (Answers not provided)
3.2.4.2 Example 2: Working with VBScript Variables
 This example demonstrates variable declaration, use of constants, and calculations
within VBScript.
 It showcases retrieving form input values and displaying results using MsgBox.
3.2.4.3 Self-Assessment Exercise 2 (Answers not provided)
4.0 Conclusion

15
 Covers VBScript data types, variables, and program control statements.
5.0 Summary
 VBScript is a scripting language designed for HTML.
 It requires some understanding of HTML.
6.0 Tutor-Marked Assignment (Not included in summary)
 Develop order processing and stock view pages using VBScript.
Examinable Points:
 Understand how to place VBScript in an HTML document.
 Know the preferred method for including VBScript.
 Grasp VBScript data types, variables (declaration, naming rules, scope).
 Understand variants and subtypes.
 Be familiar with assigning values to variables and variable scope.
 Recognize multi-dimensional and dynamic arrays.
 Be able to work with form input values in VBScript.
UNIT 4: VBSCRIPT AND WEB PAGES:
1. Adding Objects to Web Pages:
 How to use the <OBJECT> and <PARAM> tags to add ActiveX controls to a web page.
 How to configure the properties of the ActiveX controls using the <PARAM> tag.
2. Linking VBScript with Objects:
 Properties: Characteristics of an object (e.g., caption, font size).
 Methods: Actions an object can perform (e.g., clicking a button).
 Events: Actions recognized by an object (e.g., clicking a button).
 How to use VBScript to set properties and respond to events of ActiveX controls.
3. Conditional Statements:
 Using If..Then..Else statements to execute code based on conditions.
 Using Select Case statements for multi-way branching based on a condition.
4. Controlling VBScript Routines:
 Looping statements:
o For..Next: Loops a specific number of times.
o For Each..Next: Loops through each member of a collection.
o Do..Loop: Loops until a condition is met.
5. Examples:
 The unit provides examples demonstrating how to use these concepts to interact with
ActiveX controls and display dynamic content on a web page.
Self-Assessment Exercises:
 Differentiate between properties, methods, and events.
 Create a web page to display phone models and prices based on a selected brand
(using Select Case).

16
 Add functionality to calculate total price based on quantity entered by the user (using
loops).
Conclusion:
 How VBScript objects enhance web page functionality.
Tutor-Marked Assignment:
 Modify a previous assignment to accept phone model, quantity, calculate subtotal,
taxes, and total cost, and display the results.
MODULE 4 EXTENSIBLE MARKUP LANGUAGE (XML)
Unit 1: XML Basics
3.0 Main Content
 Definition of XML: XML stands for Extensible Markup Language. It's a markup
language used for defining the structure of data.
 10 Primary XML Design Goals:
1. Easy to use over the internet
2. Support a wide variety of applications
3. Compatible with SGML
4. Easy to write programs to process XML documents
5. Minimize the number of optional features
6. Clear and understandable documents
7. Quickly prepared design
8. Exact and concise design
9. Easy to create documents
10. Keeping document size small is not a major concern
3.2 Benefits of XML
 Holds Data: XML stores data in a structured way for applications to use.
 Separates Structure from Formatting: XML separates content structure from
presentation, unlike HTML where formatting is mixed with content.
 Promotes Data Sharing: XML allows different applications to share data easily by
using a common XML structure.
 Human-Readable: XML documents can be understood by humans, unlike data stored
in databases.
 Free to Use: There is no cost to use XML. It can be written with simple text editors and
free authoring tools.
3.3 XML in Practice
 Content Management: XML is used in content management systems to store and
manage content for websites, documents, etc.
 Web Services: XML web services are applications accessible over the internet using
XML standards. They consist of SOAP (protocol), WSDL (description language), and
UDDI (directory).

17
 RDF/RSS Feeds: RDF is a framework for writing XML to describe information on the
web. RSS (based on RDF) is used to describe website content and allows users to
access summaries with links to the original content.
3.4 XML Documents
 An XML document consists of:
o Optional Prolog
o Document Element (usually containing nested elements)
o Optional comments or processing instructions
 XML Declaration:
o Specifies the document as XML
o Has attributes like version (required) and encoding (optional)
o Must appear on the first line with no preceding whitespace
 Processing Instructions:
o Used to pass parameters to applications for processing the XML document
o Begin with "<?xml" and end with "?>"
 Comments:
o Used to explain parts of the XML document for humans
o Begin with ""
 Document Type Declaration (DTD):
o Specifies the document element name
o May point to an external or internal Document Type Definition (DTD)
3.5 Elements
 An XML document must have at least one element (document element) containing
nested elements.
 Elements are denoted with tags (<tag>content</tag>).
 Nested elements are called children of the element containing them.
 Empty Elements:
o Don't contain other elements or text
o Closed with a forward slash at the end of the opening tag (e.g. <tag/>)
3.6 Attributes
 Elements can be further defined with attributes that appear inside the opening tag (e.g.
<tag attribute="value">).
3.7 CDATA
 CDATA sections are used for content that shouldn't be parsed by the XML parser (e.g.
content containing markup).
 Defined with <![CDATA[ content ]]>.
3.8 White Space
 XML defines specific rules for whitespace characters (tab, line-feed, carriage-return,
space).

18
 Whitespace within content is significant, within attributes is normalized (extra spaces
become single spaces), and between elements is ignored.
 The xml:space attribute can be used to instruct applications on how to handle
whitespace within content (respect or preserve).
3.9 XML Syntax Rules
 Well-formed XML documents must follow strict syntax rules:
o One and only one document element
o Every open tag must be closed (closed with </tag> or />)
o Elements must be properly nested
o Tag and attribute names are case-sensitive
o Attribute values must be enclosed in quotes (single or double)
 Special Characters:
o Certain characters (<, >, &, ", ') cannot be included directly in XML and must be
replaced with entity references (e.g. &lt; for <).
3.10 Creating a Simple XML File
 This section provides an example of a simple XML file describing people.
Examiner's points:
 Be able to define
UNIT 2: DOCUMENT TYPE DEFINITIONS (DTDS)
DTDs is used to define the structure of XML documents.
3.0 Well-formed vs. Valid
 Well-formed XML: Follows the syntax rules for XML documents.
 Valid XML: Conforms to a specific structure defined by a schema (DTD in this case).
 DTD: Validates XML documents by defining allowed elements and attributes.
3.1 The Purpose of DTDs
 DTDs provide a framework to validate XML documents.
 DTDs allow different organizations to share data files with a predefined structure.
3.2 Creating DTDs
 DTDs are created using a basic text editor.
 DTDs define:
o Allowed elements in an XML document
o Attributes and subelements elements can have
3.2.1 The Document Element
 Defines the root element of the document.
 Example: <!ELEMENT documents (document+)>
3.2.2 Child Elements
 Specifying how many times a child element can appear using modifiers:
o +: One or more times
o *: Zero or more times
19
o ?: Zero or one time
3.2.3 Other Elements
 Declared using the <!ELEMENT> tag.
 Example: Names of elements and their child elements.
3.2.4 Choice of Elements
 Indicate that one of several elements can appear as a child element.
 Example: <!ELEMENT img (name | id)>
3.2.5 Empty Elements
 Declared as <!ELEMENT element_name EMPTY>.
3.2.6 Mixed Content
 Elements can have elements and text intermingled.
 Example: <!ELEMENT body (#PCDATA | link | img)*>
3.2.7 Location of Modifiers
 Placement of modifiers within the declaration impacts how they apply.
3.2.8 Using Parentheses for Complex Declarations
 Parentheses are used to group elements for complex declarations.
 Example: <!ELEMENT person (name | (firstname,lastname))>
3.2.8.1 Declaring Attributes
 Declared using the <!ATTLIST> tag.
 Defines:
o Element name taking the attributes
o Attribute name
o Attribute type (CDATA, ID, etc.)
o Default value (if not included in the element)
o State (required, fixed value, or optional)
3.3 Validating an XML Document with a DTD
 DOCTYPE declaration in the XML document specifies the DTD for validation.
 Example: <!DOCTYPE beatles SYSTEM "Oyelade.dtd">
4.0 Conclusion
 Benefits of using DTDs:
o Ensure required elements are present
o Prevent undefined elements
o Enforce specific data structure
o Specify attribute usage and possible values
o Define default attribute values
6.0 Tutor-Marked Assignment
 Create an internal DTD for the given Authors.xml document.
 Use XML Spy to validate the document against the DTD.
20
 Unit 3: XML Schema Basics
Key Points:
 XML Schema: An XML document that defines the structure and content of other XML
documents.
 Elements and Attributes: Building blocks of XML documents. Schemas define valid
names and content for them.
 Well-Formed vs. Valid: A well-formed document follows XML syntax rules. A valid
document adheres to a specific schema.
 Simple vs. Complex Types:
o Simple types contain text only. (e.g., string, integer)
o Complex types can contain child elements and attributes.
 Data Types: Schemas define data types to ensure proper content (e.g., string, date).
 Validation: Process of checking if an XML document adheres to its schema.
Examinable Points:
 Differentiate between XML Schema and DTD limitations. (DTDs lack built-in data
types, user-defined types, and control over element occurrences.)
 Identify simple and complex types in a schema.
 Explain the purpose of XML Schema validation.
Self-Assessment Exercises:
 Define XML Schema and its purpose.
 Describe limitations of DTDs compared to XML Schemas.
 Distinguish between simple and complex XML schema types.
 Create a simple XML schema with three child elements and validate an XML instance
against it.
Additional Information:
 The unit provides a basic introduction to XML Schema.
 Later units will cover more advanced features.
TUTOR-MARKED ASSIGNMENT (Not directly related to XML Schemas):
This assignment involves binding data from an XML file (News.xml) to HTML elements
in a webpage (NewsDisplay.htm) using data islands. While not directly related to XML
Schemas, it demonstrates data manipulation between XML and HTML.
Steps to complete the assignment are provided within the unit itself.
Unit 4: XSLT Basics - Summary by Unit with Examinable Points
3.0 Main Content
 Extensible Stylesheet Language (XSLT) is used to transform XML documents.
 XSLTs are XML documents themselves and require an XML processor to work.
 An XSLT document consists of templates that define how to transform specific parts of
the source XML document.
Examinable Points:
 Understand the concept of XSLT and its purpose.

21
 Recognize the role of an XSLT processor in transforming XML documents.
 Identify the basic structure of an XSLT document.
3.1 The Transformation Process
 An XSLT looks at an XML document as a collection of nodes: root, element, attribute,
text, processing instruction, and comment.
 The XSLT processor matches templates in the XSLT document to nodes in the source
XML document.
 If a match is found, the corresponding template is applied; otherwise, a default template
is used.
Examinable Points:
 Understand the different types of nodes found in an XML document.
 Explain how XSLT templates match nodes in the source XML document.
 Describe the role of default templates in XSLT transformations.
3.2 An XSLT Stylesheet
 An XSLT stylesheet defines how an XML document is transformed.
 It consists of an XML declaration, namespace declaration, output method specification,
and templates.
 The output method determines the format of the transformed document (e.g., HTML,
XML).
3.3 xsl:template
 The xsl:template tag defines how to transform a specific node in the source XML
document.
 It uses an XPath expression in the match attribute to specify the node to be matched.
 The template body contains instructions on how to process the matched node and its
children.
Examinable Points:
 Understand the purpose of the xsl:template tag in XSLT.
 Use XPath expressions to match nodes in the source XML document.
 Write XSLT templates to perform basic transformations on XML elements and text.
3.4 xsl:value-of
 The xsl:value-of element is used to output the text value of a node in the source XML
document.
 It uses an XPath expression in the select attribute to specify the node whose value to
output.
Examinable Points:
 Explain how to use xsl:value-of to output the text content of XML elements.
 Utilize XPath expressions with xsl:value-of to select specific nodes for output.
3.5 Whitespace and xsl:text
 Whitespace in XSLT templates is generally output literally.
 The xsl:text element can be used to control whitespace output and insert text between
elements.
22
 Examinable Points:
 Be aware of how whitespace in XSLT templates affects the output.
 Use xsl:text to control whitespace and add text content during transformations.
3.6 Inserting Whitespace with xsl:text
 xsl:text can be used to insert spaces or line breaks between elements in the output.
Examinable Points:
 Understand how to use xsl:text to format the output of XSLT transformations.
3.7 Output Types
 The output format of an XSLT transformation is determined by the method attribute of
the xsl:output element.
 Common output methods include text, XML, and HTML.
Examinable Points:
 Identify different output methods available in XSLT.
 Specify the desired output format using the xsl:output element.
3.7.1 Literal Result Elements and Useful xsl:output Attributes
 Literal result elements are used to output XML tags directly in the transformed
document.
 The xsl:output element can be used to configure indentation, omit the XML declaration,
and specify the XML version of the output document.
Examinable Points:
 Understand the concept of literal result elements in XSLT.
 Configure the output of XSLT transformations using relevant xsl:output attributes.
3.7.2 HTML
 XSLT is commonly used to transform XML documents into HTML.
 The xsl:output element with the method attribute set to "html" specifies HTML output.
Examinable Points:
 Explain how XSLT can be used to generate HTML documents.
UNIT 5: MACROMEDIA DREAMWEAVER 8
3.0 Getting Started with Dreamweaver 8
 How to launch Dreamweaver:
o From the Start menu
o From the Desktop shortcut
 Dreamweaver Workspace overview (Figure 5.1)
3.1 Opening and Saving Documents
 Opening a recent document
 Creating a new document (HTML, PHP, XML, etc.)
 Dreamweaver Workspace Layouts (Figure 5.2)
3.2 Dreamweaver Workspace Elements
 Insert Bar (contains buttons for objects like images, tables, layers)
23
 Document Toolbar (provides options for different document views and common
operations)
 Standard Toolbar (contains buttons for common file and edit operations) (Not displayed
by default)
 Coding Toolbar (available in Code view for standard coding operations)
 Style Rendering Toolbar (hidden by default, allows previewing design in different media
types and enables/disables CSS styles)
 Document Window (displays the current document)
 Property Inspector (allows viewing and changing properties of selected objects/text)
 Tag Selector (shows the hierarchy of tags surrounding the current selection)
 Panel Groups (sets of related panels grouped together)
 Files Panel (manage files and folders)
3.3 The Elements of the Insert Bar
 Common category (images, tables)
 Layout category (tables, layers, frames)
 Forms category (create forms and insert form elements)
 Text category (text and list formatting tags)
 HTML category (HTML tags for horizontal rules, head content, tables, frames, scripts)
 Server-code categories (ASP, ASP.NET, CFML, JSP, PHP) (provide server-code
objects)
 Application category (insert dynamic elements)
 Flash elements category (insert Macromedia Flash elements)
 Favorites category (group and organize frequently used insert bar buttons)
3.4 The Document Window
 Design view (visual page layout and editing)
 Code view (hand-coding environment for writing and editing code)
 Dreamweaver provides basic code for most applications (users add details) (Figure 5.3)
3.5 Working with Dreamweaver
 File types:
o HTML (.html or .htm)
o CSS (.css)
o GIF (.gif)
o XML (.xml)
o XSL (.xsl or .xslt)
o CFML (.cfm)
o ASPX (.aspx)
o PHP (.php)
3.6 Creating New Files in Dreamweaver
 Steps to create a new document
3.7 Saving Files in Dreamweaver
 Steps to save a new document
 Recommendations for naming files and folders
24
 3.8 Opening Files in Dreamweaver
 Steps to open a file
Example 1: Creating a Simple Web Page
 Steps to create a simple HTML page with Dreamweaver (including saving the file)
 Code editing in Dreamweaver (code and design views) (Figure 5.4)
 Viewing the output in the design window (Figure 5.5)
 Running the program in a web browser (Figure 5.7)
4.0 Conclusion
 Dreamweaver is a web page editor that simplifies complex web development tasks.
6.0 Tutor-Marked Assignment
 Develop a website for an Online Gift Items Shop using Dreamweaver.

25