Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
Student Name: manjeet singh
Enrollment No: 590016205
Experiment No.: 2
Experiment Name: Building Basic Web Pages with HTML and CSS
Date: 29/01/2025
Objec5ve: Create a simple, mulC-page website using HTML for structure and CSS for styling.
Theory/Concepts:
1. CSS:
• Abbrevia5on : Cascading Style Sheets.
• Types of CSS used in the experiment:
1. Inline CSS.
2. Internal CSS.
3. External CSS.
• Inline CSS:
Inline CSS is a method of applying styles directly to an HTML element using the < style> aPribute
within the tag.
Syntax:
<p style="color: blue; font-size: 20px;”>Text</p>
• Internal CSS:
Internal CSS is a method of applying styles within the <style> tag inside the <head> secCon of an
HTML document. These styles apply only to that specific HTML file. Syntax:
<!DOCTYPE html>
<html>
1
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
<head>
<style>
p { color: red; font-size: 18px; }
</style>
</head>
<body>
<p>Text</p>
</body>
</html>
• External CSS:
External CSS is a method of applying styles using a separate CSS file (e.g., styles.css) that is linked
to the HTML document with the <link> tag.
Syntax: Styles.css:
p { color: green; fontsize:
20px;
Linking External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Text</p>
</body>
</html>
Procedure:
1. Inline css in Homepage.html
2
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
2. Internal css in Projects.html
3. External css in Contacts.html and style.css
Code:
1-Home.html
<title>My Portfolio - Home</title>
<link rel="stylesheet" href="style.css"> <!-- External CSS File -->
</head>
<body>
<header>
<div class="container">
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="about.html">About Me</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="hero">
<div class="container">
<img src="./WhatsApp Image 2024-08-13 at 10.35.20 PM (1).jpeg" height="250px"
width="250px">
<h2>I'm a Web Developer</h2>
<p>Designing beautiful websites and digital experiences.</p>
<a href="projects.html" class="cta-button">View My Projects</a>
</div>
</section>
3
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
<section id="contact">
<div class="container">
<h2>Contact Me</h2>
<form action="submit_form.java" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit" class="cta-button">Send Message</button>
</form>
</div>
</section>
</body>
</html>
3. Contact.html
<!-- CONTACT PAGE (contact.html) -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/Volumes/My space/Work/html/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, iniCal-scale=1.0">
<Ctle>Contact Me</Ctle>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/Volumes/My space/Work/html/index.html">About</a></li>
<li><a href="/Volumes/My space/Work/html/projects.html">Projects</a></li>
<li><a href="/Volumes/My space/Work/html/contact.html">Contact Me</a></ li>
4
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
</ul>
</nav>
</header>
<main>
<secCon>
<h1>Contact Me</h1>
<p>Feel free to reach out using the form below:</p>
<form acCon="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
<buPon type="submit">Submit</buPon>
</form>
</secCon>
</main>
<footer>
<p>© My Porjolio</p>
</footer>
</body>
</html>
Project.html-2
<title>My Projects</title>
<link rel="stylesheet" href="style.css"> <!-- External CSS File -->
</head>
<body>
<header>
<div class="container">
<h1>My Projects</h1>
5
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
<nav>
<ul>
<li><a href="HomePage.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="Projects.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="projects">
<div class="container">
<h2>My Projects</h2>
<div class="projects-grid">
<div class="project">
<img src="project1.jpg" alt="Project 1">
<h3>Gym Website</h3>
<p>A Gym website which is both for user and management purposes.</p>
<a href="#" class="btn">View Project</a>
</div>
<div class="project">
<img src="project2.jpg" alt="Project 2">
<h3>Quiz Application</h3>
<p>A quiz application created using Java, with a database connection to
conduct quizzes.</p>
<a href="#" class="btn">View Project</a>
</div>
</div>
</div>
</section>
<section id="audio">
<div class="container">
<h2>My Audio</h2>
<audio controls>
<source src="audio/Naina_Barse_Re.mp3" type="audio/mp3">
Your browser does not support the audio element.
6
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
</audio>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact Me</h2>
<form action="submit_form.java" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit" class="cta-button">Send Message</button>
</form>
</div>
</section>
</body>
</html>
Contact.html
<title>Contact - My Portfolio</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swa
p" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <!-- Link to your styles.css -->
</head>
<body>
<header>
<div class="container">
<h1>Contact Me</h1>
<nav>
<ul>
<li><a href="HomePage.html">Home</a></li> <!-- Link to the Home page ->
7
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="Projects.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="contact">
<div class="container">
<h2>Get In Touch</h2>
<p>If you have any questions or would like to collaborate, feel free to reach out
to me. I'm always open to new opportunities!</p>
<form action="submit_form.java" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
<button type="submit" class="cta-button">Send Message</button>
</form>
<h3>Contact Info:</h3>
<p>Email: <a
href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: <a href="tel:+919661101880">+91 9661101880</a></p>
</div>
</section>
<footer>
<p>© 2025 Manjeet Singh | All rights reserved.</p>
</footer>
</body>
</html>
8
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
About.html
<>
<title>About Me - My Portfolio</title>
<link rel="stylesheet" href="style.css"> <!-- Link to your styles.css -->
</head>
<body>
<header>
<div class="container">
<h1>About Me</h1>
<nav>
<ul>
<li><a href="HomePage.html">Home</a></li> <!-- Link to the Home page ->
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="Projects.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="about">
<div class="container">
<h2>Hi, I'm Manjeet Singh</h2>
<p>I'm a passionate web developer who specializes in creating dynamic and
user-friendly websites. I have a deep understanding of front-end and back-end
technologies, including HTML, CSS, JavaScript, Java, and Python. My goal is to create
digital experiences that engage and inspire users. I am constantly learning and evolving
to stay ahead in this ever-changing field.</p>
<h3>My Skills:</h3>
<ul>
<li>Web Development (HTML, CSS, JavaScript)</li>
<li>Backend Development (Java, Python)</li>
<li>Responsive Design</li>
<li>UI/UX Design</li>
<li>Database Management</li>
</ul>
9
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
<h3>My Journey:</h3>
<p>After completing my degree in Computer Science, I began working as a web
developer and have been fortunate to work on various projects that challenge my skills
and creativity. I am always looking for opportunities to collaborate and push the
boundaries of what I can create.</p>
</div>
</section>
<footer>
<p>© 2025 Manjeet Singh | All rights reserved.</p>
</footer>
</body>
</html>
Style.css
/* styles.css */
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
background-color: #f7f7f7;
color: #333;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
header {
background-color: #af7c4c;
color: white;
10
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
padding: 20px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
header h1 {
text-align: center;
font-size: 2rem;
font-weight: 600;
margin: 0;
}
nav ul {
text-align: center;
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #ffcc00;
}
#hero {
background: url('C:/Users/mk286/Desktop/html/WhatsApp%20Image%202024-08-
13%20at%2010.35.20%20PM%20(1).jpeg') center/cover no-repeat;
padding: 100px 0;
color: rgb(138, 48, 48);
11
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
text-align: center;
}
#hero h2 {
font-size: 3rem;
font-weight: 600;
}
#hero p {
font-size: 1.2rem;
margin: 20px 0;
}
.cta-button {
background-color: #d3e0be;
color: #333;
padding: 15px 30px;
text-decoration: none;
font-weight: 600;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.cta-button:hover {
background-color: #e6b800;
}
#about, #resume, #user-image, #projects, #contact, #audio {
padding: 80px 0;
text-align: center;
}
#about h2, #resume h2, #user-image h2, #projects h2, #contact h2, #audio h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
#about p, #resume p, #projects p, #contact p {
12
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
}
#projects .projects-grid {
display: flex;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.project {
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 30%;
padding: 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project img {
width: 100%;
border-radius: 8px;
}
.project h3 {
font-size: 1.5rem;
margin-top: 20px;
}
.project p {
font-size: 1rem;
margin-bottom: 20px;
}
.project .btn {
13
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-decoration: none;
font-weight: 600;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.project:hover {
transform: translateY(-10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.project .btn:hover {
background-color: #45a049;
}
#audio audio {
width: 50%;
border-radius: 10px;
margin-top: 20px;
}
#video video {
width: 50%;
border-radius: 10px;
margin-top: 20px;
}
#contact form {
max-width: 600px;
margin: 0 auto;
}
#contact label {
font-size: 1.1rem;
margin-bottom: 10px;
display: block;
14
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
#contact input, #contact textarea {
width: 100%;
padding: 15px;
margin-bottom: 20px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}
#contact button {
background-color: #4CAF50;
color: white;
padding: 15px 30px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#contact button:hover {
background-color: #45a049;
}
15
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
16
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
17
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
18
Batch: MCA-SPZ-CYBER-SECURITY-II-B2_Web Technologies
Result:
The webpage was successfully created and displayed.
19
