Scribd
Upload
7 views18 pages

HTML Programing 2nd Sem

The document contains a series of programming tasks related to HTML, CSS, and JavaScript. It includes creating a class timetable, a resume, a college webpage, and a login page with validation. Each task demonstrates the use of various web development techniques, including inline, internal, and external CSS, as well as JavaScript for form validation.

Uploaded by

majet96742
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
7 views18 pages

HTML Programing 2nd Sem

The document contains a series of programming tasks related to HTML, CSS, and JavaScript. It includes creating a class timetable, a resume, a college webpage, and a login page with validation. Each task demonstrates the use of various web development techniques, including inline, internal, and external CSS, as well as JavaScript for form validation.

Uploaded by

majet96742
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

PART-A

1. Create your class time table using table tag.

Ans. #include <stdio.h>

int main()

printf("-------------------------------------------------------------\n");

printf("| Time | Monday | Tuesday | Wednesday | Thursday | Friday |\n");

printf("-------------------------------------------------------------\n");

printf("| 9-10 AM | Math | Physics | Math | Chemistry| English |\n");

printf("| 10-11 AM | English | Math | English | Physics | Chemistry|\n");

printf("| 11-12 PM | Physics | English | Chemistry | Math | Math |\n");

printf("| 12-1 PM | Break | Break | Break | Break | Break |\n");

printf("| 1-2 PM | Chemistry| CS | CS | CS | Physics |\n");

printf("| 2-3 PM | CS | Chemistry| Physics | English | CS |\n");

printf("-------------------------------------------------------------\n");

return 0;

2. create your resume using HTML, use text, link, size, color and lists.

Ans. <!DOCTYPE html>

<html>

<head>

<title>My Resume</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;
margin: 40px;

.container {

background-color: white;

padding: 25px;

border-radius: 10px;

max-width: 800px;

margin: auto;

box-shadow: 0 0 10px #ccc;

h1 {

color: #2c3e50;

h2 {

color: #34495e;

a{

color: #2980b9;

text-decoration: none;

ul, ol {

margin-left: 20px;

.section {

margin-bottom: 20px;

.highlight {
color: #e74c3c;

font-weight: bold;

</style>

</head>

<body>

<div class="container">

<h1>John Doe</h1>

<p>Email: <a href="[Link]

<p>LinkedIn: <a href="[Link]


target="_blank">[Link]/in/johndoe</a></p>

<p>GitHub: <a href="[Link]


target="_blank">[Link]/johndoe</a></p>

<div class="section">

<h2>Objective</h2>

<p>To obtain a challenging position in a reputable organization where I can utilize my skills
and grow professionally.</p>

</div>

<div class="section">

<h2>Education</h2>

<ul>

<li><span class="highlight">[Link] in Computer Science</span> – XYZ University (2021 -


2025)</li>

<li>12th Grade – ABC School (2019 - 2021)</li>

<li>10th Grade – ABC School (2017 - 2019)</li>

</ul>

</div>
<div class="section">

<h2>Technical Skills</h2>

<ul>

<li>Languages: C, C++, Java, Python, HTML, CSS, JavaScript</li>

<li>Web Development: HTML5, CSS3, [Link]</li>

<li>Database: MySQL, MongoDB</li>

<li>Tools: Git, VS Code, Postman</li>

</ul>

</div>

<div class="section">

<h2>Projects</h2>

<ol>

<li><strong>Personal Portfolio Website:</strong> A responsive personal website built using


HTML, CSS, and JavaScript.</li>

<li><strong>Library Management System:</strong> Console-based C++ application to


manage books and users.</li>

<li><strong>Weather App:</strong> Real-time weather app using OpenWeatherMap API


and JavaScript.</li>

</ol>

</div>

<div class="section">

<h2>Hobbies</h2>

<ul>

<li>Coding</li>

<li>Blogging</li>

<li>Reading Tech Articles</li>


<li>Playing Chess</li>

</ul>

</div>

<div class="section">

<h2 style="color: green;">Declaration</h2>

<p>I hereby declare that all the information given above is true to the best of my
knowledge.</p>

</div>

</div>

</body>

</html>

3. Use external css to format your time table created.

Ans. <!DOCTYPE html>

<html>

<head>

<title>Class Timetable</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>

<h2>Class Timetable</h2>

<table>

<tr>

<th>Time</th>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

<th>Thursday</th>
<th>Friday</th>

</tr>

<tr>

<td>9-10 AM</td>

<td>Math</td>

<td>Physics</td>

<td>Math</td>

<td>Chemistry</td>

<td>English</td>

</tr>

<tr>

<td>10-11 AM</td>

<td>English</td>

<td>Math</td>

<td>English</td>

<td>Physics</td>

<td>Chemistry</td>

</tr>

<tr>

<td>11-12 PM</td>

<td>Physics</td>

<td>English</td>

<td>Chemistry</td>

<td>Math</td>

<td>Math</td>

</tr>

<tr>
<td>12-1 PM</td>

<td colspan="5">Break</td>

</tr>

<tr>

<td>1-2 PM</td>

<td>Chemistry</td>

<td>CS</td>

<td>CS</td>

<td>CS</td>

<td>Physics</td>

</tr>

<tr>

<td>2-3 PM</td>

<td>CS</td>

<td>Chemistry</td>

<td>Physics</td>

<td>English</td>

<td>CS</td>

</tr>

</table>

</body>

</html>

4. Use all the css (inline, internal, external) to format college web page that you have created.

Ans. <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<title>CHIKITI MAHAVIDYALAYA</title>

<!-- External CSS -->

<link rel="stylesheet" type="text/css" href="[Link]">

<!-- Internal CSS -->

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 0;

header {

background-color: #34495e;

color: white;

padding: 20px;

text-align: center;

nav {

background-color: #2c3e50;

padding: 10px;

text-align: center;

}
nav a {

color: white;

margin: 15px;

text-decoration: none;

font-weight: bold;

nav a:hover {

color: #f1c40f;

section {

padding: 20px;

footer {

background-color: #34495e;

color: white;

text-align: center;

padding: 10px;

</style>

</head>

<body>

<!-- Header -->

<header>
<h1>CHIKITI MAHAVIDYALAYA </h1>

<p style="font-size: 18px; color: #ecf0f1;">Empowering Education for the Future</p> <!-- Inline
CSS -->

</header>

<!-- Navigation Menu -->

<nav>

<a href="#">Home</a>

<a href="#">Courses</a>

<a href="#">Admissions</a>

<a href="#">Contact</a>

</nav>

<!-- Main Section -->

<section>

<h2>About Our College</h2>

<p>Chikiti mahavidyalya is one of the premier institutions offering world-class education for
both +2 &degree.</p>

<h3>Departments</h3>

<ul>

<li>+2 science</li>

<li>+2 Arts</li>

<li>BSC</li>

<li>BA</li>

<li>BCA</li>

</ul>
<h3>Quick Links</h3>

<ul>

<li><a href="[Link] target="_blank">Admission Portal</a></li>

<li><a href="[Link] target="_blank">Exam Results</a></li>

</ul>

<div style="background-color: #dff9fb; padding: 15px; border-left: 4px solid #3498db;">

<strong>Note:</strong> Admissions are open for the 2025–2026 academic year.

</div>

</section>

<!-- Footer -->

<footer>

<p>&copy; 2025 chikitimahavidyalaya. All rights reserved.</p>

</footer>

</body>

</html>

5. Write a HTML program to create your college website using for mobile device.

Ans. <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CHIKITI MAHAVIDYALAYA</title>

<style>

/* Reset some basic styles */


*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: Arial, sans-serif;

line-height: 1.6;

background-color: #f2f2f2;

header {

background-color: #2c3e50;

color: white;

padding: 20px;

text-align: center;

nav {

background-color: #34495e;

display: flex;

flex-wrap: wrap;

justify-content: center;

nav a {
color: white;

padding: 15px;

text-decoration: none;

text-align: center;

flex: 1 0 100%; /* stack items vertically on small screens */

nav a:hover {

background-color: #1abc9c;

main {

padding: 20px;

section {

margin-bottom: 20px;

background-color: white;

padding: 15px;

border-radius: 8px;

footer {

background-color: #2c3e50;

color: white;

text-align: center;

padding: 15px;
}

@media (min-width: 600px) {

nav a {

flex: 1 0 20%; /* horizontal layout on wider screens */

</style>

</head>

<body>

<!-- Header -->

<header>

<h1>CHIKITI MAHAVIDYALAYA </h1>

<p>Empowering Future Innovators</p>

</header>

<!-- Navigation -->

<nav>

<a href="#">Home</a>

<a href="#">Departments</a>

<a href="#">Admissions</a>

<a href="#">Gallery</a>

<a href="#">Contact</a>

</nav>

<!-- Main Content -->


<main>

<section>

<h2>About Us</h2>

<p>chikiti mahavidyalaya is a top-ranked institution offering +2 & +3 & BCA.</p>

</section>

<section>

<h2>Departments</h2>

<ul>

<li>Computer Science & Engineering</li>

<li>Electronics & Communication</li>

<li>Mechanical Engineering</li>

<li>Civil Engineering</li>

</ul>

</section>

<section>

<h2>Contact</h2>

<p>Email: <a
href="[Link]

<p>Phone: +91-123005-5551</p>

</section>

</main>

<!-- Footer -->

<footer>

<p>&copy; 2025 chikitimahavidyalaya. All rights reserved.</p>

</footer>
</body>

</html>

PART-B
1. Write an HTML/Javascript to create login page with validation.
Ans. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.login-container {
background: white;
padding: 30px 40px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 300px;
}

.login-container h2 {
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
}

.form-group input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}

.error {
color: red;
font-size: 0.9em;
margin-bottom: 10px;
}

.btn {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}

.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>

<div class="login-container">
<h2>Login</h2>
<div id="error" class="error"></div>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Enter username" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter
password" />
</div>
<button type="submit" class="btn">Login</button>
</form>
</div>

<script>
const loginForm = [Link]('loginForm');
const errorDiv = [Link]('error');

[Link]('submit', function(event) {
[Link](); // Prevent form from submitting normally

// Get input values


const username = [Link]('username').[Link]();
const password = [Link]('password').[Link]();

// Clear previous errors


[Link] = '';

// Basic validation
if (!username || !password) {
[Link] = 'Please fill in both fields.';
return;
}

// Example hardcoded credentials


const validUsername = 'admin';
const validPassword = 'password123';

if (username === validUsername && password === validPassword) {


alert('Login successful!');
// Redirect or perform further actions here
} else {
[Link] = 'Invalid username or password.';
}
});
</script>

</body>
</html>

You might also like