WOLISO CAMPUS
DEPARTMENT OF COMPUTER SCIENCE
WEB PROGRAMMING PROJECT
[Link] SIRAJ UGR/72981/16
[Link] MOLAW UGR/72335/16
1/18/2026 [Link] TADESE UGR/73032/16
[Link] TEREFE UGR/73552/16
[Link] KEDIR UGR/72983/16
[Link] CHEMEDA UGR/72984/16
[Link] CHEMEDA UGR/72985/16
[Link] WUBISHET UGR/73766/16
SUBMITTED TO: MR. FIROMSA
1. Create a basic web page of the department of Computer Science using HTML language.
The topic of the web page should be corresponding to the name of the department (within
acceptable use).
❖ Create a web page containing information about you, your university, and the detail of the
department. [ History, vision, mission, management, student batches and programs etc.]
✓ Enter a suitable title for your page. Add some sub-titles for different sections of your text. For
example, you could have a subheading for where you live, your family, your interests, your
university etc.
❖ Format the text of your web page in different Font, Alignment styles.
✓Experiment with the font size, color, style (bold, italic, underline, etc.) and alignment (left,
center, right or indented.
❖ Add a picture to your web page.
✓ Experiment with different sizes of picture and different locations within your web page. Also,
experiment with different alignment and text wrappings.
❖ Your HTML documents should have the following characteristics: -
✓ Use of paragraphs.
✓ Use of one or more levels of section headers.
✓ Use of highlighting (bold, italics, etc.)
✓ Use lists.
✓ Use of internal links (to other parts of your document) and external links (to another website)
✓ And other tags discussed in the course …frames, tables…
❖ By using the above components/elements, you should be able to create your own attractive
home page.
Folder structure
WEBASSIGNMENT/
│
├── [Link]
├── [Link]
├── [Link]
├── ambo [Link]
├── guder [Link]
├── hachalu [Link]
├── mian [Link]
├── woliso [Link]
│
├── [Link]
[Link]
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Science Department – Ambo University</title>
<link href="[Link]
family=Poppins:wght@300;400;600;800&display=swap" rel="stylesheet">
<style>
*{ margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
line-height: 1.5;
}
body{ background:#0A0F24;
color:white;
overflow-x:hidden;
scroll-behavior:smooth;
transition:background .25s,color .25s;
}
p{
font-size: 20px;
line-height: 2;
}
:root{
--primary:#1746A0;
--gold:#D9B44A;
}
[Link]{
background:#FFFFFF;
color:#0A0F24;
}
.container{
width:90%;
max-width:1150px;
margin:auto;
}
header{
position:sticky;
top:0; z-index:99;
backdrop-filter:blur(12px);
background:rgba(10,15,36,0.55);
2
border-bottom:1px solid rgba(255,255,255,0.08);
padding:10px 0; box-shadow:0 4px 25px rgba(0,0,0,.4);
transition:background .25s;
}
[Link] header{
background:rgba(255,255,255,0.9);
border-bottom:1px solid rgba(0,0,0,0.06); }
.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
}
.header-left{
display:flex;
align-items:center;
gap:12px;
}
.header-left img{
width:55px;
height:55px;
border-radius:50%;
object-fit:cover;
border:2px solid var(--gold);
box-shadow:0 0 12px rgba(217,180,74,.25);
transition:.3s;
}
.header-left img:hover{
transform:scale(1.08) rotate(3deg);
}
.header-left h2{
font-size:1.4rem;
font-weight:700;
background:linear-gradient(90deg,var(--gold),var(--primary));
-webkit-background-clip:text;
color:transparent;
letter-spacing:1px;
}
nav ul{
display:flex;
gap:30px;
list-style:none;
}
3
nav ul li a{
text-decoration:none;
color:inherit;
font-weight:500;
font-size:.95rem;
padding-bottom:4px;
transition:.3s;
position:relative;
}
nav ul li a::after{
content:"";
position:absolute;
bottom:-2px;
left:0;
width:0%;
height:2px;
background:var(--gold);
transition:.3s ease;
}
nav ul li a:hover::after{
width:100%;
}
nav ul li a:hover{
color:var(--gold);
}
.theme-toggle{
cursor:pointer;
font-size:20px;
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:10px;
background:transparent;
border:1px solid rgba(255,255,255,.04);
transition:all .2s;
}
[Link] .theme-toggle{
border:1px solid rgba(0,0,0,.06);
}
.theme-toggle:hover{
transform:scale(1.06);
4
}
.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:70px 0;
}
.hero-left{
width:50%;
}
.hero-left h1{
font-size:2.6rem;
font-weight:800;
line-height:1.3;
}
.hero-left p{
margin-top:10px;
opacity:.85;
}
.hero-btns{
display:flex;
gap:15px;
margin-top:20px;
}
.btn{
padding:12px 20px;
border-radius:12px;
border:none;
background:linear-gradient(90deg,var(--primary),var(--gold));
color:white;
cursor:pointer;
font-size:1rem;
transition:.3s;
}
.btn:hover{ transform:translateY(-4px);
box-shadow:0 8px 20px rgba(65,227,255,.4);
}
.hero-right{ width:45%; }
.hero-right img{ width:100%; border-radius:20px; box-shadow:0 10px 40px rgba(0,0,0,0.5); }
.card{ background:#121A30; padding:25px; border-radius:15px; margin:25px 0; border:1px solid
#1F2D4A; transition:.3s; }
[Link] .card{ background:#FFFFFF; border:1px solid rgba(0,0,0,.06); }
5
.card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,0.4); }
.card h2{ font-size:1.7rem; margin-bottom:10px; }
.card ul{ margin-left:18px; }
.campus-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.campus-grid img{ width:100%; height:130px; border-radius:14px; object-fit:cover;
transition:.4s; }
.campus-grid img:hover{ transform:scale(1.08); box-shadow:0 10px 25px rgba(0,0,0,0.4); }
footer{ background:#374067; color:white; padding:25px; margin-top:40px; border-top:1px solid
#1F2D4A; transition:background .25s; }
[Link] footer{ background:#F6F7FB; color:#0A0F24; border-top:1px solid rgba(0,0,0,.06); }
footer a{ color:var(--gold); text-decoration:none; }
footer a:hover{ text-decoration:underline; }
footer .footer-inner{ max-width:1150px; margin:auto; display:flex; justify-content:space-
between; flex-wrap:wrap; }
footer .footer-inner div{ margin-bottom:15px; }
footer p{ opacity:.6; margin-top:15px; }
.footer{ padding-left: 350px; }
@media (max-width:900px){ .hero{ flex-direction:column-reverse } .hero-right{ width:100%;
margin-bottom:20px } .hero-left{ width:100% } .campus-grid{ grid-template-
columns:repeat(2,1fr) } nav ul{ display:none } }
</style>
</head>
<body>
<header>
<div class="container header-inner">
<div class="header-left">
<img src="ambo [Link]" alt="Ambo University Logo">
<h2>Ambo University</h2>
</div>
<nav>
<ul>
<li><a href="#aboutUs">About Us</a></li>
<li><a href="#university">University</a></li>
<li><a href="#department">Department</a></li>
<li><a href="#campuses">Campuses</a></li>
<li><a href="[Link]">Login</a></li>
</ul>
</nav>
6
<div>
<button class="theme-toggle" id="themeBtn" aria-label="Toggle theme">☀️</button>
</div>
</div>
</header>
<section class="hero container">
<div class="hero-left">
<h1>Welcome to the Computer Science Department</h1>
<p>Ambo University – Ethiopia</p>
<div class="hero-btns">
<a href="#department"><button class="btn">Explore</button></a>
<a href="[Link]"><button class="btn">Login</button></a>
</div>
</div>
</section>
<div class="container">
<div id="aboutUs" class="card">
<h2>About Us</h2>
<p> We are a group of passionate and driven female Computer Science students who believe
that technology is not just about writing code, but about creating solutions that shape the
future.<br> Our interest in this field comes from a deep desire to innovate, solve real-world
problems, and contribute meaningful digital experiences to our communities and beyond.<br>
Our journey in Computer Science is fueled by curiosity, discipline, and the courage to challenge
stereotypes. We continuously push ourselves to learn more, build better, and grow stronger in
both technical and professional skills.<br> We do not see limits in what we can achieve—we see
opportunities to lead, create, and inspire.<br>
We have developed strong expertise across multiple areas of technology, including UI/UX
design, front-end development, back-end systems, database management, and full-stack
application development.<br> From designing clean and user-friendly interfaces to building
secure and efficient server-side architectures, we take pride in delivering complete and high-
quality digital solutions.<br>
Above all, we are committed to continuous learning and collaboration. We aim to expand our
knowledge, take on more complex challenges, and become leaders in the technology space—
proving that women in Computer Science are not only participants in the digital world, but
powerful creators of it.</p>
7
</div>
<div id="university" class="card">
<h1>About Ambo University</h1>
<h2>History</h2>
<p>Ambo University is a public national university located in Ambo, Oromia Region, Ethiopia,
about 114 km west of Addis Ababa. It is recognized by the Ministry of Education and offers a
wide range of undergraduate, graduate, and doctoral programs.
Origins and Early History
The institution’s roots trace back to basic education that began in 1931 (1924 EC) when a school
was established in Ambo with a few classrooms built by French engineers and teachers offering
subjects like Amharic, Mathematics, and French.
In 1946 (1939 EC), the school became Ambo School of Agriculture, the first agricultural school in
Ethiopia, teaching subjects such as Animal Science and Crop Production.
Development Over Decades
Through the years, the institution went through many changes:
• It became Ambo Agriculture and Forestry Secondary School and later Ambo Institute of
Agriculture.
• It then progressed to Ambo Junior College of Agriculture, gaining a higher education status.
• By the early 2000s, it started offering undergraduate degrees in various fields.
Becoming a University
After years of growth and expansion, the college was officially promoted to a university college
in 2008 and then became Ambo University in 2009.
The government formally established Ambo University on May 11, 2011, under proclamation
Council of Ministers 212/2011.
Today
Ambo University now offers many undergraduate, graduate, and PhD programs across multiple
colleges and institutes.
It also has multiple campuses, including the main campus in Ambo, as well as Waliso, Awaro,
and Guder campuses.
</p>
<h2>Vision</h2>
8
<p>Ambo University envisions becoming a renowned university of choice in Eastern Africa by
2030, known for excellence in teaching, research, and community service.
This means the university aims to be a top-preferred institution in the region—one that
students, partners, and employers trust for high-quality education and meaningful impact. </p>
<h2>Mission</h2>
<p>Ambo University is dedicated to serving Ethiopian society and the world through the
discovery, development, and application of knowledge across a wide range of disciplines.
It is committed to providing quality, relevant, and cost-effective education at both
undergraduate and graduate levels, engaging in research and knowledge transfer, offering
short-term trainings and consultancy services, and delivering community service in a
professional and innovative way to meet the needs of its stakeholders.<br>
for other information go to ambo university website
<a href="[Link] University</a>
</p>
</div>
<div id="department" class="card">
<h2>Computer Science Department</h2>
<h3>History</h3>
<p>The department was established to strengthen Computing and ICT education in
Ethiopia.</p>
<h3>Vision</h3>
<p>To be a center of excellence in Computer Science education, research, and
innovation.</p>
<h3>Mission</h3>
<ul>
<li>Deliver high-quality computing education</li>
<li>Conduct impactful research</li>
<li>Produce ethical and skilled professionals</li>
</ul>
<h3>Programs</h3>
<ul>
<li>BSc in Computer Science</li>
<li>Weekend/Extension Programs</li>
<li>Short IT Trainings</li>
</ul>
<h3>Student Batches</h3>
<table style="width:100%; border-collapse: collapse; text-align:left; margin-top:10px;">
<thead>
<tr style="background:#1F2D4A;">
<th style="padding:10px; border:1px solid #2B3A5B;">Batch</th>
9
<th style="padding:10px; border:1px solid #2B3A5B;">Year</th>
<th style="padding:10px; border:1px solid #2B3A5B;">Number of Students</th>
</tr>
</thead>
<tbody>
<tr><td style="padding:10px; border:1px solid #2B3A5B;">I</td><td style="padding:10px;
border:1px solid #2B3A5B;">2025</td><td style="padding:10px; border:1px solid
#2B3A5B;">120</td></tr>
<tr><td style="padding:10px; border:1px solid #2B3A5B;">II</td><td style="padding:10px;
border:1px solid #2B3A5B;">2024</td><td style="padding:10px; border:1px solid
#2B3A5B;">115</td></tr>
<tr><td style="padding:10px; border:1px solid #2B3A5B;">III</td><td style="padding:10px;
border:1px solid #2B3A5B;">2023</td><td style="padding:10px; border:1px solid
#2B3A5B;">110</td></tr>
<tr><td style="padding:10px; border:1px solid #2B3A5B;">IV</td><td style="padding:10px;
border:1px solid #2B3A5B;">2022</td><td style="padding:10px; border:1px solid
#2B3A5B;">105</td></tr>
</tbody>
</table>
</div>
<div id="campuses" class="card">
<h2>Ambo University Campuses</h2>
<div class="campus-grid">
<img src="main [Link]" alt="Ambo Main Campus">Main Campus
<img src="waliso [Link]" alt="Woliso Campus">Waliso Campus
<img src="guder [Link]" alt="Guder Campus">Guder Campus
<img src="hachalu [Link]" alt="Awaro Campus">Hachalu Campus
</div>
</div>
</div>
<footer>
<div class="footer-inner">
<div>
<h3>Ambo University</h3>
<strong>Email:</strong> <a href="[Link]
<strong>Phone:</strong> <a href="[Link] 11 123 62017">+251 11 123 62017</a><br>
<strong>Website:</strong> <a href="[Link]
target="_blank">[Link]</a>
<p>Address: Ambo, Oromia, Ethiopia</p>
</div>
<div>
10
<h3>Quick Links</h3>
<p><a href="#aboutme">About Me</a></p>
<p><a href="#university">University</a></p>
<p><a href="#department">Department</a></p>
<p><a href="#campuses">Campuses</a></p>
<p><a href="[Link]">Login</a></p>
</div>
</div>
<p class="footer">© 2025 Ambo University — Computer Science Department</p>
</footer>
<script>
const themeBtn = [Link]('themeBtn');
const rootBody = [Link];
function setTheme(mode){
if(mode === 'light'){
[Link]('light');
[Link] = '🌙';
[Link]('ambo_theme','light');
} else {
[Link]('light');
[Link] = '☀️';
[Link]('ambo_theme','dark');
}
}
const saved = [Link]('ambo_theme') || 'dark';
setTheme(saved);
[Link]('click', ()=>{
const cur = [Link]('light') ? 'dark' : 'light';
setTheme(cur);
});
</script>
</body>
</html>
[Link]
11
:root{
--blue: #1746A0;
--gold: #D9B44A;
--bg: #0A0F24;
--card: #0f1628;
--muted: rgba(255,255,255,.8);
--accent: linear-gradient(90deg,var(--blue),var(--gold));
--white: #fff;
}
[Link]{
--bg:#F8FAFF; --card:#fff; --muted: rgba(0,0,0,.75); --white:#0A0F24;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
body{
min-height:100vh;display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,var(--bg),#07102a);color:var(--white);padding:20px;
}
p{
font-size:16px;line-height:1.5;
}
.card{
width:380px;background:var(--card);border-radius:18px;padding:26px;
box-shadow:0 18px 60px rgba(2,8,23,.6);border:1px solid rgba(255,255,255,.04);
animation:pop .6s ease;
}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.logo img{width:56px;height:56px;border-radius:10px}
h2{font-size:1.2rem;background:var(--accent);-webkit-background-
clip:text;color:transparent;margin-bottom:8px}
label{display:block;font-size:.92rem;margin-top:12px;color:var(--muted)}
input[type="text"], input[type="password"], select{
width:100%;padding:12px;border-
radius:10px;border:none;background:rgba(255,255,255,.03);color:var(--white);margin-top:6px;
}
input:focus, select:focus{outline:none;box-shadow:0 6px 20px rgba(23,70,160,.12)}
.gender-row{display:flex;gap:12px;margin-top:8px}
.gender-row label{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--muted)}
.row{display:flex;gap:10px}
12
.btn{
width:100%;padding:12px;margin-top:16px;border-
radius:10px;border:none;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;
box-shadow:0 12px 30px rgba(23,70,160,.12)
}
.btn:active{transform:translateY(1px)}
.btn-reset{background:transparent;border:1px solid rgba(255,255,255,.06);margin-
top:10px;color:var(--muted);padding:10px}
.small{font-size:.88rem;color:var(--muted);text-align:center;margin-top:12px}
.theme-switch{position:fixed;top:18px;right:18px;background:var(--card);padding:8px;border-
radius:999px;border:1px solid rgba(255,255,255,.03)}
.theme-switch button{background:transparent;border:none;color:var(--
muted);cursor:pointer;font-weight:700;padding:6px}
2. Include the login page that receives your information [Username, Password, Gender,
select your department from available department in the campus] and submit the form.
[Link]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Login – CS Department</title>
<link href="[Link]
family=Poppins:wght@300;400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="theme-switch" aria-hidden>
<button class="theme-toggle" id="themeBtn" aria-label="Toggle theme">☀️</button>
</div>
<div class="card" role="main">
<div class="logo">
<img src="ambo [Link]" alt="Ambo logo">
<div>
<h2>Student Login</h2>
<div style="font-size:.86rem;color:var(--muted)">Computer Science Department</div>
</div>
13
</div>
<form id="loginForm" onsubmit="handleSubmit(event)">
<label for="user">Username</label>
<input id="user" name="user" type="text" required autocomplete="username" />
<label for="pass">Password</label>
<input id="pass" name="pass" type="password" required autocomplete="current-password"
/>
<div style="margin-top:6px">
<label>Gender</label>
<div class="gender-row" role="radiogroup" aria-label="Gender">
<label><input type="radio" name="g" value="male" required> Male</label>
<label><input type="radio" name="g" value="female"> Female</label>
</div>
</div>
<label for="dept">Department</label>
<select id="dept" name="dept" required>
<option value="" disabled selected>Select Department</option>
<option>Computer Science</option>
<option>Information Systems</option>
<option>Information Technology</option>
</select>
<button type="submit" class="btn">Submit</button>
<button type="reset" class="btn-reset">Reset</button>
</form>
<div class="small"><a href="[Link]" style="color:var(--gold);text-decoration:none">←
Back to Home</a></div>
</div>
<script>
function applyTheme(t){
if(t === 'light'){ [Link]('light'); [Link]('au_theme','light');
[Link]('themeBtn').textContent='🌙'; }
else { [Link]('light'); [Link]('au_theme','dark');
[Link]('themeBtn').textContent='☀️'; }
}
const saved = [Link]('au_theme') || 'dark';
14
applyTheme(saved);
[Link]('themeBtn').addEventListener('click', ()=>{
const mode = [Link]('au_theme') === 'light' ? 'dark' : 'light';
applyTheme(mode);
});
function handleSubmit(e){
[Link]();
const user = [Link]('user').value;
const btn = [Link]('.btn');
[Link] = 'Logging in...';
[Link] = true;
setTimeout(()=>{
alert('Welcome, ' + (user || 'Student') + ' — demo login.');
[Link] = 'Submit';
[Link] = false;
},900);
}
</script>
</body>
</html>
[Link]
<?php
// Database configuration
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "Student_info"; // Change this to your database name
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Get login data from POST
$user = $_POST['username'] ?? '';
$pass = $_POST['password'] ?? '';
// Prepare and execute query
15
$sql = "SELECT * FROM users WHERE username=? AND password=?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ss", $user, $pass);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
echo "Login successful!";
// You can redirect or set session here
} else {
echo "Invalid username or password.";
}
$stmt->close();
$conn->close();
?>
3. Pick some of your favorite Web sites and try to identify
• static components
• dynamic components
➢ client-side
➢ JavaScript
➢ Java applet
➢ server-side
➢ CGI
➢ ASP Eg. [Link]
Website 1: [Link]
Static Components
Wikipedia logo
Page layout structure
Help and policy pages (About, Privacy Policy)
CSS styles and basic HTML templates
Dynamic Components
Client-Side
JavaScript
Search suggestions
Language selection menu
16
Collapsible sections in articles
Dark mode switching
Java Applet
Not used (obsolete technology)
Server-Side
CGI
Processing search requests
Retrieving articles from the database
Generating pages dynamically based on user requests
ASP
Not used (Wikipedia uses PHP)
Website 2: [Link]
Static Components
Logo and branding
Footer links (About, Contact, Terms)
Basic page layout
Dynamic Components
Client-Side
JavaScript
Video play and pause
Comments loading
Like and subscribe buttons
Infinite scrolling
Java Applet
Not used
Server-Side
CGI
Video streaming requests
User authentication
Recommendation system
ASP
Not used (YouTube uses other server-side technologies)
17