JIMMA UNIVERSITY
JIMMA INSTITUTE OF TECHNOLOGY
FACULITY OF COMPUTING
DEPARTEMENT OF COMPUTER SCIENCE
GROUP ASSIGNMENT
NAME: Tekalgn Kasahun
ID: EU0101/12-0
1. Create a basic HTML page with a title, a header, and two paragraphs. Use a meta
tag to define the character set as UTF-8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Programming</title>
</head>
<body>
<h1>Welcome </h1>
<p> first paragraph.</p>
<p> second paragraph.</p>
</body>
</html>
2. Add an image to an HTML page using the <img> tag. Include alternate text and
set the image dimensions
<img src=" image.jpg" alt=" image Image" width="300" height="200">
3. Develop an HTML document with an ordered list and an unordered list. Style one
list with a background color using inline CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML document </title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>First </li>
<li>Second </li>
<li>Third </li>
</ol>
<h2>Unordered List</h2>
<ul style="background-color: lightblue;">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
4. Design a web page with hyperlinks. Use the target attribute to open some links
in new tabs and others in the same tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hyperlinks </title>
</head>
<body>
<a href="https://gmail.com" target="_blank">Open in New Tab</a><br>
<a href="https://gmail.com" target="_self">Open in Same Tab</a>
</body>
</html>
5. Create an image map using the <map> tag and define clickable areas within an
image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Map</title>
</head>
<body>
<img src=" Image.jpg" alt=" Image" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="0,0,100,100" href="https:// Image.com" alt="Square">
<area shape="circle" coords="150,150,50" href="https:// Image.com" alt="Circle">
</map>
</body>
</html>
6. Create a CSS stylesheet to style an HTML document. Include examples of ID,
class, and universal selectors
#header {
color: blue;
.list-item {
font-weight: bold;
*{
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="header">Styled Header</h1>
<ul>
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
</ul>
</body>
</html>
7. Demonstrate the use of CSS background properties by adding a background
image, background color, and controlling the background repeat and position
body {
background-image: url('background.jpg');
background-color: lightgray;
background-repeat: no-repeat;
background-position: center;
}
8. Use the CSS box model to style a div. Add margins, borders, and padding, and
demonstrate how these properties interact
.box {
width: 200px;
height: 200px;
margin: 20px;
padding: 15px;
border: 5px solid black;
9. Write a JavaScript program to validate a form with fields for name and email.
Ensure the name is not empty and the email follows a valid format
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Validation</title>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<button type="submit">Submit</button>
</form>
<script>
function validateForm() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (name.trim() === "") {
alert("Name cannot be empty!");
return false;
if (!emailPattern.test(email)) {
alert("Invalid email format!");
return false;
return true;
</script>
</body>
</html>
10. Create a web page where clicking a button toggles the visibility of a paragraph
using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle paragraph Visibility</title>
</head>
<body>
<button onclick="toggleVisibility()">Toggle Paragraph</button>
<p id="paragraph">This is a paragraph.</p>
<script>
function toggleVisibility() {
const paragraph = document.getElementById('paragraph');
if (paragraph.style.display === "none") {
paragraph.style.display = "block";
} else {
paragraph.style.display = "none";
</script>
</body>
</html>
11. Develop a program that changes the background color of a web page based on
a dropdown menu selection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Background Color Changer</title>
</head>
<body>
<select onchange="changeBackground(this.value)">
<option value="white">White</option>
<option value="lightblue">Light Blue</option>
<option value="lightgreen">Light Green</option>
</select>
<script>
function changeBackground(color) {
document.body.style.backgroundColor =
color;
</script>
</body>
</html>
12. Write a PHP script to handle form submissions. Collect user input (name and
email), validate it, and display the data on the same page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Form</title>
</head>
<body>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST['name'];
$email = $_POST['email'];
if (!empty($name) && filter_var($email,
FILTER_VALIDATE_EMAIL)) {
echo "<p>Name: $name</p>";
echo "<p>Email: $email</p>";
} else {
echo "<p>Invalid input!</p>";
?>
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
13. Create a PHP script that uses an associative array to store and display a list of
countries and their capitals
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countries and Capitals</title>
</head>
<body>
<?php
$countries = [
"USA" => "Washington, D.C.",
"France" => "Paris",
"Japan" => "Tokyo"
];
foreach ($countries as $country => $capital) {
echo "<p>$country: $capital</p>";
?>
</body>
</html>
14. Develop a PHP program that connects to a MySQL database, retrieves data
from a table, and displays it in an HTML table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MySQL Data</title>
</head>
<body>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table border='1'><tr><th>ID</th><th>Name</th><th>Email</th></tr>";
while ($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["id"] . "</td><td>" . $row["name"] . "</td><td>" . $row["email"] .
"</td></tr>";
echo "</table>";
} else {
echo "0 results";
$conn->close();
?>
</body>
</html>
