HTML ASSIGNMENT
HTML ASSIGNMENT
<!DOCTYPE html>
<head>
<title>The House of Computer Science</title>
<style>
body {
font-family: 'Times New Roman', Times, serif, sans-serif;
margin: 0;
padding: 0;
background-color: #f8ecec;
border: double;
}
.header {
background-color: #FFB6C1;
text-align: start;
font-size: 30px;
font-weight: bold;
padding: 20px;
}
.nav {
background-color: #ca9763;
text-align: left;
padding: 10px 0;
border: double;
}
.nav a {
margin: 0 8px;
font-weight: bold;
}
.container {
display: flex;
background-color: #ffffff;
}
.content {
flex: 3;
padding: 5px;
border-right: 1px solid black;
}
.sidebar {
flex: 1;
background-color: #ffffff;
padding: 5px;
}
.footer {
text-align: left;
padding: 10px;
background-color: #FFB6C1;
border: double;
}
</style>
</head>
<body>
<div class="header">
THE HOUSE OF COMPUTER SCIENCE
</div>
<div class="nav">
<a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/home.html">HOME</a> I
<a href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/aboutUs.html"
target="_blank">ABOUT US</a> I
<a href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/faculty.html"
target="_blank">FACULTY</a> I
<a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/admission.html"
target="_blank">ADMISSION POLICY</a> I
<a href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/course.html"
target="_blank">COURSES</a> I
<a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/feeStructure.html"
target="_blank">FEE STRUCTURE</a> I
<a href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/download.html"
target="_blank">DOWNLOAD</a> I
<a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/contactUs.html"
target="_blank">CONTACT US</a>
</div>
<div class="container">
<div class="content">
<h2>OUR GOAL</h2>
<p>
The Department of Computer Science (<b>DoCS</b>), in an
exceptionally very less timeframe, has set up a solid and developing
worldwide standing for both teaching and training modern, market-
oriented, competitive technology-oriented subjects in the field of
Computer Science. It has extended impressively throughout the most recent
couple of years, fusing new projects both at the undergraduate and expert
levels. The Department is outfitted with best-in-class labs, and there is
an accentuation on giving appropriate assets where required. Our goal is
to altogether plan for our graduate’s future professions in industry or
exploration.
</p>
<p>
This is cultivated by giving them openness to applicable
equipment, latest technology skills, and programming methods. All degree
program courses are consistently assessed to guarantee that significant
arising advances are covered and that our graduates stay in front of the
development bend.
</p>
<p>
We are producing skilled persons to meet the global
challenges. Bringing even the needy ones into the mainstream of
education, the institute is including social, ethical, technical, and
industrial sense of etiquette. Under the mature vision of SKILL
Management, the institute is embellishing the future builders of the
nation with qualitative and quantitative training dimensions. The
graduates of the institute, in the industrial area, is an irrefutable
proof of the technical sound that we are providing.
</p>
</div>
<div class="sidebar">
<ul>
<li><a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/home.html">HOME</a></li>
<li><a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/aboutUs.html"
target="_blank">ABOUT US</a></li>
<li><a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/faculty.html"
target="_blank">FACULTY</a></li>
<li><a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/admission.html"
target="_blank">ADMISSION POLICY</a></li>
<li><a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/course.html"
target="_blank">COURSES</a></li>
<li><a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/feeStructure.html"
target="_blank">FEE STRUCTURE</a></li>
<li><a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/download.html"
target="_blank">DOWNLOAD</a></li>
<li><a
href="file:///C:/Users/Lenovo/Desktop/WEB%20Ass/contactUs.html"
target="_blank">CONTACT US</a></li>
</ul>
</div>
</div>
<div class="footer">
© The House of CS 2023
</div>
</body>
</html>
AboutUs:
<!DOCTYPE html>
<head>
<title>About Us</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
header {
color: rgb(0, 0, 0);
padding: 20px;
}
section {
padding: 20px;
background-color: white;
text-align: left;
}
</style>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<section id="about-us">
<h2>Our Story</h2>
<p>Welcome to our university! We are dedicated to providing high-
quality education and fostering a community of learners and
innovators.</p>
<h3>Mission</h3>
<p>Our mission is to empower students with knowledge, skills, and
values to thrive in a dynamic world.</p>
<h3>Vision</h3>
<p>We envision a future where our graduates lead with integrity,
creativity, and a commitment to positive change.</p>
<h3>Values</h3>
<ul>
<li>Excellence in Education</li>
<li>Innovation and Research</li>
<li>Community Engagement</li>
<li>Inclusivity and Diversity</li>
</ul>
</section>
</body>
</html>
Faculty:
<!DOCTYPE html>
<head>
<title>Faculty Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
header {
background-color: #e7f087;
color: rgb(0, 0, 0);
padding: 5px;
}
section {
padding: 10px;
background-color: white;
margin: 20px;
}
</style>
</head>
<body>
<header>
<h1>Our Faculty</h1>
</header>
<section id="faculty">
<h2>Meet Our Esteemed Faculty Members</h2>
<div>
<h3>Prof. Tayyab Ul Hannan</h3>
<p>Professor of Computer Science</p>
<p>Email: [email protected]</p>
</div>
<div>
<h3>Prof. Saadi</h3>
<p>Professor of Mathematics</p>
<p>Email: [email protected]</p>
</div>
</section>
</body>
</html>
Admission Policy:
<!DOCTYPE html>
<head>
<title>Admission Policy</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
header {
background-color: #004080;
color: white;
padding: 5px;
}
section {
padding: 20px;
background-color: white;
text-align: left;
}
</style>
</head>
<body>
<header>
<h1>Admission Policy</h1>
</header>
<section id="admission-policy">
<h2>Our Admission Policy</h2>
<p>We welcome students from all backgrounds and are committed to
providing equal opportunities for all.</p>
<h3>Eligibility Criteria</h3>
<p>Applicants must meet the following criteria to be considered
for admission:</p>
<ul>
<li>Completion of high school or equivalent education.</li>
<li>Minimum GPA of 2.5 on a 4.0 scale.</li>
<li>Submission of all required documents, including
transcripts and letters of recommendation.</li>
<li>Satisfactory performance in entrance exams.</li>
</ul>
<h3>Application Process</h3>
<p>The application process involves the following steps:</p>
<ol>
<li>Complete the online application form.</li>
<li>Submit required documents.</li>
<li>Pay the application fee.</li>
<li>Attend an interview (if applicable).</li>
<li>Receive admission decision notification.</li>
</ol>
<h3>Contact Information</h3>
<p>For more details, please contact our admissions office:</p>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</section>
</body>
</html>
Courses:
<!DOCTYPE html>
<head>
<title>Courses</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
header {
background-color: #02284d;
color: white;
padding: 10px;
}
section {
padding: 20px;
background-color: white;
margin: 30px;
text-align: left;
}
.course { margin-bottom: 50px; }
</style>
</head>
<body>
<header><h1>Our Courses</h1></header>
<section id="courses">
<div class="course">
<h3>Introduction to Computer Science</h3>
<p>Learn the fundamentals of computer science.</p>
</div>
<div class="course">
<h3>Advanced Mathematics</h3>
<p>Explore advanced topics in mathematics.</p>
</div>
<div class="course">
<h3>Business Management</h3>
<p>Gain insights into business management principles.</p>
</div>
<div class="course">
<h3>Environmental Science</h3>
<p>Study the impact of human activities on the
environment.</p>
</div>
</section>
</body>
</html>
Fees Structure:
<!DOCTYPE html>
<head>
<title>Fees Structure</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
header {
background-color: #380140;
color: white;
padding: 10px;
}
section {
padding: 30px;
background-color: white;
margin: 10px;
text-align: left;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #000000;
}
th, td {
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<header>
<h1>Fees Structure</h1>
</header>
<section id="fees-structure">
<h2>Our Fees Structure</h2>
<table>
<tr>
<th>Program</th>
<th>Tuition Fees (per semester)</th>
<th>Other Fees</th>
</tr>
<tr>
<td>Bachelor of Science (B.Sc.)</td>
<td>Rs50,000</td>
<td>Rs500</td>
</tr>
<tr>
<td>Bachelor of Arts (B.A.)</td>
<td>RS40,500</td>
<td>Rs450</td>
</tr>
<tr>
<td>Master of Science (M.Sc.)</td>
<td>Rs60,000</td>
<td>Rs600</td>
</tr>
<tr>
<td>Master of Arts (M.A.)</td>
<td>Rs5,500</td>
<td>Rs550</td>
</tr>
</table>
<p>Note: Other fees include library fees, lab fees, and student
services fees.</p>
</section>
</body>
</html>
Download:
<!DOCTYPE html>
<head>
<title>Download Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
padding: 20px;
text-align: center;
}
.download-link {
display: block;
margin: 20px 0;
background-color: #004080;
color: white;
padding: 10px 20px;
font-size: 16px;
}
.download-link:hover {
background-color: #003366;
}
</style>
</head>
<body>
<div class="container">
<h1>Download Resources</h1>
<p>Click on the links below to download the resources.</p>
<a href="" class="download-link">Download Code of Conduct</a>
<a href="" class="download-link">Download Dress Code</a>
<a href="" class="download-link">Download Other Required File</a>
</div>
</body>
</html>
Contact Us:
<!DOCTYPE html>
<head>
<title>Contact Us</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
}
section {
padding: 20px;
background-color: white;
margin: 20px;
text-align: left;
}
</style>
</head>
<body>
<header>
<h1>Contact Us</h1>
</header>
<section id="contact-us">
<h2>Get in Touch</h2>
<p>If you have any questions or need further information, please
feel free to contact us:</p>
<p>Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
<p>Address: Superior university Faisalabad</p>
</section>
</body>
</html>
Anchor tags:
<!DOCTYPE html>
<head>
<title>Student Record</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid black;
text-align: center;
padding: 8px;
background-color: #D2B48C;
border: double;
}
th {
background-color: #FFFFFF;
}
h1, h2 {
text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<h1>understanding of anchor tag</h1>
<hr>
<h2>STUDENT RECORD </h2>
<table>
<tr>
<th>subjects</th>
<th>marks</th>
</tr>
<tr>
<td>math</td>
<td>70</td>
</tr>
<tr>
<td>computer</td>
<td>70</td>
</tr>
<tr>
<td>eng</td>
<td>70</td>
</tr>
<tr>
<th>total</th>
<th>210</th>
</tr>
</table>
</body>
</html>