Scribd
Upload
41 views9 pages

Web Tech Assignment

The document outlines practical assignments for a Web Technologies course, focusing on creating a website template and a portfolio using HTML, CSS, and JavaScript. It includes code snippets for both the website template and the portfolio, detailing the structure and styling of each. Additionally, it provides JavaScript functionality for form submission in the portfolio project.

Uploaded by

badboy893637
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
41 views9 pages

Web Tech Assignment

The document outlines practical assignments for a Web Technologies course, focusing on creating a website template and a portfolio using HTML, CSS, and JavaScript. It includes code snippets for both the website template and the portfolio, detailing the structure and styling of each. Additionally, it provides JavaScript functionality for form submission in the portfolio project.

Uploaded by

badboy893637
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

ITM(SLS) BARODA UNIVERSITY

SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY


Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

Practical-4
Aim: Create the following website template using html and CSS.

Output:
In html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Template</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="header">
<h1>Website Title</h1>
<p>Welcome to the website!</p>
</div>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="content">
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar content.</p>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>

Name: Rabari Dhruv 1 Enrollment no:24C21073


ITM(SLS) BARODA UNIVERSITY
SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY
Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

<li><a href="#">Link 3</a></li>


</ul>
</div>
<div class="main-content">
<h2>Main Content</h2>
<p>This is the main content area. You can add paragraphs, images, or any other
content here.</p>
<p>Use CSS to style this section and practice layout techniques.</p>
</div>
</div>
<div class="footer">
<p>Footer content goes here. &copy; 2024 Your Website</p>
</div>
</body>
</html>

In CSS ([Link])

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.header {
background-color: green;
color: white;
text-align: center;
padding: 20px 0;
}

.nav {
background-color: black;
}

.nav ul {

Name: Rabari Dhruv 2 Enrollment no:24C21073


ITM(SLS) BARODA UNIVERSITY
SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY
Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

.nav ul li {
display: inline;
margin: 0 15px;
}

.nav ul li a {
color: white;
text-decoration: none;
}

.content {
display: flex;
margin: 20px;
}

.sidebar {
width: 25%;
background-color: #fff;
padding: 15px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar ul {
list-style: none;
padding: 0;
}

.sidebar ul li {
margin: 10px 0;
}

.sidebar ul li a {
text-decoration: none;

Name: Rabari Dhruv 3 Enrollment no:24C21073


ITM(SLS) BARODA UNIVERSITY
SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY
Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

color: blue;
}

.main-content {
width: 75%;
background-color: #fff;
padding: 15px;
margin-left: 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.footer {
background-color: black;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}

Output:

Practical-5

Name: Rabari Dhruv 4 Enrollment no:24C21073


ITM(SLS) BARODA UNIVERSITY
SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY
Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

Aim: Create the following portfolio using html, CSS and Javascript
Input:
In html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Welcome to My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About Me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

</header>

<main>
<section id="about">
<h2>About Me</h2>
<p>Hi, I'm a passionate web developer eager to create stunning and efficient websites!
</p>
</section>

<section id="projects">
<h2>Projects</h2>
<div class="project-grid">
<div class="project-card">
<h3>Project 1</h3>
<p>A simple HTML, CSS, and JavaScript project</p>

Name: Rabari Dhruv 5 Enrollment no:24C21073


ITM(SLS) BARODA UNIVERSITY
SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY
Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

<button onclick="alert('Details about Project 1')">Details</button>


</div>
<div class="project-card">
<h3>Project 2</h3>
<p>An interactive web application</p>
<button onclick="alert('Details about Project 2')">Details</button>
</div>
</div>
</section>

<section id="contact">
<h2>Contact Me</h2>
<form id="contactForm">
<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>
<button type="submit">Send</button>
</form>
</section>
</main>

<footer>
<p>&copy; 2024 My Portfolio. All rights reserved.</p>
</footer>

<script src="[Link]"></script>
</body>
</html>

In CSS ([Link])
/* General Styling */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

Name: Rabari Dhruv 6 Enrollment no:24C21073


ITM(SLS) BARODA UNIVERSITY
SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY
Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}

header {
background-color: green;
color: white;
padding: 20px;
text-align: center;
}

header nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 10px 0;
}

header nav ul li {
margin: 0 15px;
}

header nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
}

main {
padding: 20px;
}

section {
border: 2px solid #ccc;
padding: 15px;
margin-bottom: 40px;
}

Name: Rabari Dhruv 7 Enrollment no:24C21073


ITM(SLS) BARODA UNIVERSITY
SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY
Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

#about p {
font-size: 1.2rem;
}

.project-grid {
display: flex;
gap: 20px;
justify-content: left;

padding: 20px;
}

.project-card {
border: 1px solid #ccc;
padding: 20px;
background-color: white;
text-align: center;
width: 200px;
}

.project-card button {
margin-top: 10px;
background-color: green;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}

footer {
background-color: black;
color: white;
text-align: center;
padding: 10px 0;
}

Name: Rabari Dhruv 8 Enrollment no:24C21073


ITM(SLS) BARODA UNIVERSITY
SCHOOL OF COMPUTER SCIENCE ENGINEERING AND TECHNOLOGY
Course Name: Web Technologies: HTML, CSS, JavaScript, PHP
Course Code: C2111C

In Javascript ([Link])
[Link]("contactForm").addEventListener("submit", function (event) {
[Link]();
const name = [Link]("name").value;
const email = [Link]("email").value;
alert(`Thank you, ${name}! Your message has been sent to ${email}.`);
});

Output:

Name: Rabari Dhruv 9 Enrollment no:24C21073

You might also like