Scribd
Upload
12 views10 pages

Advances Web

This document provides information about the examinations for the Bachelor of Science degree in Information Technology at the University. It outlines the details of the Advanced Web Design & Development examination, including the date and time, as well as sample questions that will be asked. The questions cover topics like creating an external CSS stylesheet to style various elements on an HTML page, using JavaScript to convert currencies, comparing HTML and machine code, and using form attributes in HTML.

Uploaded by

Jay Kibe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views10 pages

Advances Web

This document provides information about the examinations for the Bachelor of Science degree in Information Technology at the University. It outlines the details of the Advanced Web Design & Development examination, including the date and time, as well as sample questions that will be asked. The questions cover topics like creating an external CSS stylesheet to style various elements on an HTML page, using JavaScript to convert currencies, comparing HTML and machine code, and using form attributes in HTML.

Uploaded by

Jay Kibe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

UNIVERSITY EXAMINATIONS: 2021/2022

EXAMINATION FOR THE DEGREE OF BACHELOR OF SCIENCE


IN
INFORMATION
TECHNOLOGY BIT 4303 BAC
3105/ BISF 3104:
ADVANCED WEB DESIGN & DEVELOPMENT
FULL TIME/PART TIME/ DISTANCE
LEARNING ORDINARY EXAMINATION
DATE: JULY/AUGUST, 2022 TIME: 2 HOURS

QUESTION ONE (20 MKS)


a) Write code that can be used to create an external style sheet that can be used to perform
the following formatting on any HTML document it’s applied on. 10mks
<head>
<link rel="stylesheet" type="text/css" href="your-stylesheet.css">
</head>

i). All links in the document should be color blue, once visited the link turns yellow,
moving the cursor on the link turns it green, while any active link should be maroon in
color.
/* All links */
a{
color: blue;
}
/* Visited links */
a:visited {
color: yellow;
}

/* Hovered links */
a:hover {
color: green;
}

/* Active links */
a:active {
color: maroon;
}

ii). All paragraphs text should be color blue, font style should be
italics

/* All paragraphs */

p{

color: blue;

font-style: italic;
}

iii). The background for the whole page should be navy blue in color

/* Whole page */
body {

background-color: navy;
}

iv). All heading one should be color yellow and font size 12 points.

/* All heading one */

h1 {

color: yellow;

font-size: 12pt;
}

b) Write code to create a sample HTML page to demonstrate the formatting above features.
10mks
<!DOCTYPE html>
<html>
<head>
<style>
/* All links */
a{
color: blue;
}

/* Visited links */
a:visited {
color: yellow;
}

/* Hovered links */
a:hover {
color: green;
}

/* Active links */
a:active {
color: maroon;
}

/* All paragraphs */
p{
color: blue;
font-style: italic;
}

/* Whole page */
body {
background-color: navy;
}

/* All heading one */


h1 {
color: yellow;
font-size: 12pt;
}
</style>
</head>
<body>
<h1>Sample Heading</h1>
<p>This is a sample paragraph. The text should be blue and in italics.</p>
<a href="#">This is a sample link</a>
</body>
</html>

QUESTION TWO -15 MARKS


a) Write code to create a class and apply it to centre align all heading ones, change
paragraph color to green and paragraph font style to italics in the page below 7mks
<!DOCTYPE html>
<html>
<head>
<style>
.myClass h1 {
text-align: center;
}

.myClass p {
color: green;
font-style: italic;
}
</style>
</head>
<body>

<div class="myClass">
<h1>My Heading</h1>
<p>This is a paragraph.</p>
</div>

</body>
</html>

b) Write a java script function that allows the user to enter and convert Kenyan shillings into
US Dollars when a button is clicked on a web page. Rate is 1$ dollar 115 ksh. (8 mks )
<html>
<head>
<title>Converting KShs to USd</title>
</head>
<body>
<h1>This web will help you convert Kshs to Usd Dollars</h1>

<label for="kshs">Enter Kshs</label>


<input type="text" id="kshs" placeholder="Enter Kshs">

<button id="convert" onclick="convertKshToUsd()">Convert</button>


<input type="text" readonly id="usd">

</body>
<script>
function convertKshToUsd(){
let kshs = document.getElementById("kshs").value;
//parse the value into float
kshs = parseFloat(kshs);
if(isNaN(kshs)){
alert("Please enter a valid number");
document.getElementById("kshs").value = "";
return;
}else{
let usd = kshs / 115;
document.getElementById("usd").value = usd + " USD";
}
}

</script>
</html>

QUESTION THREE -15 MARKS


a) Describe the characteristics of PHP-MySQL Apache, combination that make it popular
for creating web pages today

Integrated Solution: PHP, MySQL, and Apache work seamlessly together, providing an
integrated solution for developers. PHP is used for server-side scripting, MySQL for
database management, and Apache as the web server.

Dynamic Web Content: This combination allows for the creation of dynamic and
interactive web pages. PHP can generate HTML content on the fly, based on queries to
the MySQL database.

Open Source: All three technologies are open source, meaning they are free to use and
have large, active communities contributing to their development and offering support.

Cross-Platform: PHP, MySQL, and Apache can run on various operating systems,
including Windows, Linux, and macOS, providing great flexibility.

Scalability and Performance: This combination is known for its scalability and
performance. As your website grows, PHP, MySQL, and Apache can handle increasing
loads, maintaining speed and efficiency.

Ease of Use: While powerful, PHP, MySQL, and Apache are also user-friendly. PHP is
relatively easy to learn, and there are many resources available for all three
technologies.

Reliability: The PHP-MySQL-Apache stack is proven and reliable, having been used in
web development for many years.

(7marks)
b) Compare and contrast the coding used in HTML with the coding used in lower level
languages such as machine code (8
marks)
Similarities
Instruction Set: Both HTML and machine code serve as instruction sets for computers, albeit in
different ways.
Syntax Rules: Both have specific syntax rules that must be followed for correct execution.

Purpose of Creation: Both HTML and machine code were created to solve specific problems in
the field of computing. HTML was designed to structure and present content on the web, while
machine code was developed to provide instructions that could be directly executed by a
computer’s hardware.

Standardization: Both HTML and machine code follow certain standards. HTML follows the
standards set by the World Wide Web Consortium (W3C), ensuring that it is consistently
interpreted by all web browsers. Similarly, machine code follows the instruction set architecture
(ISA) of the specific processor it is intended for, ensuring that it can be correctly executed.

Differences

Abstraction Level: HTML is a high-level language that is human-readable, while machine code
is a low-level language that is machine-readable.

Execution: HTML is interpreted by web browsers, while machine code is executed directly by
the computer’s processor.

Use Case: HTML is used for structuring and designing web pages, while machine code is used
for all types of software running on a computer.

Portability: HTML code is portable and can run on any device with a web browser, while
machine code is specific to a particular processor and operating system.

QUESTION FOUR 15 MARKS


a) State the function of ACTION and METHOD attributes of the <Form> tag and show
how they are used in a code (6
Marks)

ACTION attribute: The action attribute specifies the URL of the page that will process
the form data once it’s submitted. This can be a server-side script (like a PHP page), or
another HTML page. If the action attribute is not specified, the form data will be sent
to the same page that the form is on.

METHOD attribute: The method attribute specifies the HTTP method to use when
sending form data. The two most common methods are GET and POST. GET appends
the form data to the URL in name/value pairs, and is used for form submissions where
the user wants to bookmark the result. POST sends the form data as HTTP post
transaction, and is used for form submissions where the user does not want to see the
form data in the URL.
Here is an example of how these attributes can be used in a form:

HTML

<form action="/submit_form.php" method="post">

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last name:</label><br>

<input type="text" id="lname" name="lname"><br><br>

<input type="submit" value="Submit">

</form>

In this example, when the user clicks the “Submit” button, the form data will be sent to
“/submit_form.php” for processing, using the HTTP POST method.

b) Discuss the following java script statements ( 9 marks)


i) onBlur
ii) document.WriteIn
iii) onSubmit
onBlur
onBlur is an event handler in JavaScript that is used to specify a function that should be executed
when an element loses focus, typically an HTML form field or input element.
This event is commonly used to perform validation or other actions when a user moves away
from an input field.
Example:
<input type="text" id="myInput" onblur="validateInput()">
<script>
function validateInput() {
var inputValue = document.getElementById("myInput").value;
if (inputValue.length < 5) {
alert("Input must be at least 5 characters long.");
}
}
</script>
In this example, when the user enters text into the input field and then clicks away from it, the
validateInput function is triggered, checking if the input has a minimum length of 5 characters.
document.write:
document.write is a method in JavaScript that allows you to write content directly to the HTML
document, overwriting the entire content of the page if used after the page has loaded.
It's not commonly used for modern web development due to its limitations and potential to
disrupt the page's structure.
Example:
<script>
document.write("<h1>Hello, World!</h1>");
</script>
In this example, when the script is executed, it replaces the entire HTML content of the page
with the "Hello, World!" heading.
onSubmit
onSubmit is an event handler used in HTML forms that specifies a JavaScript function to execute
when the user submits a form.
This event is typically used for form validation or to process form data before it's sent to the
server.
Example:

html
Copy code
<form id="myForm" onsubmit="return validateForm()">
<input type="text" name="username" required>
<input type="password" name="password" required>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
var username = document.forms["myForm"]["username"].value;
var password = document.forms["myForm"]["password"].value;
if (username === "" || password === "") {
alert("Both fields must be filled out");
return false; // Prevent form submission
}
// Continue with form submission
return true;
}
</script>
In this example, when the user submits the form, the validateForm function is executed, checking
if both the username and password fields are filled out. If they are not, an alert is shown, and the
form submission is prevented (returning false). If the validation passes, the form is allowed to
submit (returning true).

You might also like