Scribd
Upload
2 views14 pages

web

The document outlines a series of web development tasks involving HTML, CSS, JavaScript, and PHP. It includes creating basic web pages, adding images and lists, styling with CSS, form validation, and database interaction. Each task is accompanied by code examples demonstrating the required functionality.

Uploaded by

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

web

The document outlines a series of web development tasks involving HTML, CSS, JavaScript, and PHP. It includes creating basic web pages, adding images and lists, styling with CSS, form validation, and database interaction. Each task is accompanied by code examples demonstrating the required functionality.

Uploaded by

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

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>

You might also like