Scribd
Upload
5 views

webExperimentt 2

The document outlines an experiment for creating a multi-page website using HTML and CSS, detailing the objectives, theoretical concepts, and coding procedures. It covers three types of CSS: inline, internal, and external, with examples provided for each. The document includes HTML code for various pages such as Home, Projects, and Contact, along with a CSS stylesheet for styling the website.

Uploaded by

mk2863107
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

webExperimentt 2

The document outlines an experiment for creating a multi-page website using HTML and CSS, detailing the objectives, theoretical concepts, and coding procedures. It covers three types of CSS: inline, internal, and external, with examples provided for each. The document includes HTML code for various pages such as Home, Projects, and Contact, along with a CSS stylesheet for styling the website.

Uploaded by

mk2863107
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

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>&copy; 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

You might also like