Scribd
Upload
15 views18 pages

WT Practical 1 To 5

Uploaded by

priyanshusinghkingg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views18 pages

WT Practical 1 To 5

Uploaded by

priyanshusinghkingg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Practical - 1

Aim: To design web pages for a college that includes descriptions of courses, departments, faculties, library,
etc., utilizing HTML elements such as hyperlinks (<a>), lists (<ul>, <ol>), and other relevant tags.

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
A website is a collection of web pages that provide information to users. HTML (HyperText Markup Language)
is used to create structured content on the web. In this practical:

• The <a> (anchor) tag is used to create hyperlinks, allowing users to navigate between sections of the
page or different web pages.

• Lists are used to organize information in a structured manner:

o Unordered Lists (<ul>): Displays items with bullet points.

o Ordered Lists (<ol>): Displays items with numbers.

By using these elements, we create an interactive and well-structured webpage for the college website.

Code :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>College Webpage</title>

</head>

<body>

<h1>Welcome to HMRITM </h1>

<ul>

<li><a href="#courses">Courses Offered</a></li>

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

<li><a href="#faculty">Faculty</a></li>
<li><a href="#library">Library</a></li>

</ul>

<h2 id="courses">Course Offered</h2>

<ul>

<li>B.Tech</li>

</ul>

<h2 id="departments">Departments</h2>

<ol>

<li>Computer Science</li>

<li>Information Technology</li>

<li>Electronics</li>

<li>Mechanical</li>

</ol>

<h2 id="faculty">Faculty</h2>

<p>Our faculty members are highly qualified and experienced in their respective fields..</p>

<h2 id="library">Library</h2>

<p>The library contains thousands of books and resources for students.</p>

<footer>

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

</footer>

</body>

</html>
Output:
Practical - 2
Aim: Write HTML code to develop a webpage having two frames that divide the webpage into two equal rows
and then divide the row into equal columns. Fill each frame with a different background color.

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), HTML, Web Browser (e.g., Google Chrome,
Mozilla Firefox)

Theory:
Frames allow multiple documents to be displayed within a single webpage. The <frameset> tag divides the
browser window into multiple resizable sections.

• The <frameset> tag: Defines a set of frames.

o The rows="50%,50%" attribute divides the webpage into two equal horizontal sections.

o The cols="50%,50%" attribute further divides each row into two equal columns.

• The <frame> tag: Specifies the HTML document or background color for each frame.

Frames are useful for navigational layouts but are now considered outdated in favor of CSS Flexbox/Grid for
better responsiveness.

Code :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Two Frames Webpage</title>

<style>

body {

margin: 0;

height: 100vh;

.frame {

display: flex;
flex-direction: column;

height: 100%;

.row {

flex: 1;

display: flex;

.column {

flex: 1;

.top-left {

background-color: lightblue;

.top-right {

background-color: lightgreen;

.bottom-left {

background-color: lightcoral;

.bottom-right {

background-color: lightgoldenrodyellow;

</style>

</head>

<body>

<div class="frame">

<div class="row">

<div class="column top-left">Top Left Frame</div>

<div class="column top-right">Top Right Frame</div>


</div>

<div class="row">

<div class="column bottom-left">Bottom Left Frame</div>

<div class="column bottom-right">Bottom Right Frame</div>

</div>

</div>

</body>

</html>

Output:
Practical - 3
Aim: To design a web page representing your hometown with an attractive background color, text color, an
image, and customized font styles using internal CSS.

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
Cascading Style Sheets (CSS) is used to style HTML elements. CSS allows customization of:

• Background color (background-color)

• Text color (color)

• Font styling (font-family, font-size)

• Image styling (border-radius, width, etc.)

There are three types of CSS:

1. Internal CSS (used in this practical) – defined within <style> tags in the HTML document.

2. External CSS – written in a separate .css file and linked to the HTML file.

3. Inline CSS – applied directly to HTML elements using the style attribute.

Using internal CSS, we enhance the visual appearance of the webpage while keeping the structure and styling
separate from content.

Code :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>My Hometown</title>

<style>

body {

background-color: #f0f8ff;

color: #333;
font-family: 'Arial', sans-serif;

text-align: center;

padding: 20px;

h1 {

color: #2c3e50; /* Darker text for heading */

p{

font-size: 18px; /* Increased font size for paragraphs */

img {

width: 30%; /* Responsive image */

height: auto;

border-radius: 10px; /* Rounded corners for image */

</style>

</head>

<body>

<h1>Welcome to My Hometown</h1>

<img src="
https://imgs.search.brave.com/Uu02N0VfKsBwpYug38KIhYqM5kXT3QqddVyQj4Z8udw/rs:fit:860:0:0:0/g:ce/aH
R0cHM6Ly93YWxs/cGFwZXJzLmNvbS9p/bWFnZXMvZmVhdHVy/ZWQvaGlsbC1waWN0/dXJlcy0ybmZjc2lz/Ym5j
d2U3MXl2Lmpw/Zw" alt="Beautiful view of my hometown">

<p>My hometown is a beautiful place known for its scenic landscapes and vibrant culture. It is a perfect blend
of nature and modernity.</p>

<p>Some popular attractions include:</p>

<ul>

<li>The Grand Park</li>

<li>The Historic Museum</li>

<li>The River Walk</li>


</ul>

</body>

</html>

Output:
Practical - 4
Aim: Use External, Internal, and Inline CSS to format the college web page that you created.
Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
CSS (Cascading Style Sheets) allows the separation of content and design, making webpages more structured
and aesthetically appealing.

Types of CSS:

1. External CSS (styles.css)

o Defined in a separate file and linked using <link rel="stylesheet" href="styles.css">.

o Ideal for styling multiple pages with consistent design.

2. Internal CSS (<style> tag)

o Defined within the <head> section of the HTML file.

o Used for styling a single page without affecting others.

3. Inline CSS (style attribute)

o Applied directly to an HTML element (<h1 style="color: red;">), overriding external and internal
styles.

o Used for quick modifications but not recommended for maintainability.

By combining all three types of CSS, we create a structured, reusable, and customizable college website layout.

Code:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>Experiment- 4 | Web Technology</title>

<link rel="stylesheet" href="exp-4.css" />


<style>

*{

margin: 0;

padding: 0;

box-sizing: border-box;

user-select: none;

font-family: "Poppins", sans-serif;

body {

display: flex;

flex-direction: column;

background: linear-gradient(to bottom right, #e600ff, #00aff0);

justify-content: center;

align-items: center;

min-height: 100vh;

::-webkit-scrollbar {

display: none;

header {

position: fixed;

top: 0;

left: 0;

width: 100%;

padding: 20px 50px;

display: flex;

justify-content: space-between;

align-items: center;

background-color: rgba(0, 0, 0, 0.5);


}

.navigation a {

position: relative;

font-size: 1.3em;

color: #fff;

text-decoration: none;

font-weight: 700;

margin-left: 40px;

.navigation a::after {

content: "";

position: absolute;

width: 100%;

height: 3px;

background: #00aff0;

border-radius: 5px;

left: 0;

bottom: -5px;

transform: scaleX(0);

transition: transform 0.5s;

.navigation a:hover::after {

transform: scaleX(1);

main {

width: 100%;

padding: 80px 20px;

text-align: center;

}
.section {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

min-height: 100vh;

width: 100%;

font-size: 2rem;

color: #fff;

.content {

background: rgba(0, 0, 0, 0.6);

padding: 20px;

border-radius: 10px;

max-width: 80%;

footer {

background: #000;

display: flex;

width: 100%;

padding: 1.2rem;

color: #fff;

justify-content: center;

align-items: center;

</style>

</head>

<body>

<header>
<h2 class="logo" style="font-size: 3em; color: #fff; user-select: none;">

HMRITM

</h2>

<div style="display: flex; justify-content: center; align-items: center">

<nav class="navigation">

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

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

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

<a href="#faculties">Faculties</a>

<a href="#library">Library</a>

</nav>

</div>

</header>

<main>

<section class="section" id="home">

<div class="content">

<h1>Welcome to HMR Institute of Technology & Management</h1>

<p>Your gateway to excellence in education and innovation.</p>

</div>

</section>

<section class="section" id="courses">

<div class="content">

<h2>Courses Offered</h2>

<ul>

<li>B.Tech in CSE, ECE, IT, AI & ML</li>

</ul>

</div>

</section>

<section class="section" id="departments">


<div class="content">

<h2>Departments</h2>

<ol>

<li>Computer Science</li>

<li>Electronics</li>

<li>Mechanical</li>

</ol>

</div>

</section>

<section class="section" id="faculties">

<div class="content">

<h2>Our Faculties</h2>

<p>Our experienced faculty members are from reputed universities and industries, ensuring quality
education.</p>

</div>

</section>

<section class="section" id="library">

<div class="content">

<h2>Library</h2>

<p>The library contains thousands of books, research papers, and digital resources for students and
faculty.</p>

</div>

</section>

</main>

<footer>

<p style="font-size: 1.3rem;">&copy; 2024, All rights reserved</p>

</footer>

</body>

</html>
Output:
Practical - 5
Aim: Create HTML Page with JavaScript which takes Integer number as input and tells whether the number is
ODD or EVEN

Tools Used: Text Editor (e.g., Visual Studio Code, Sublime Text), Web Browser (e.g., Google Chrome, Mozilla
Firefox)

Theory:
JavaScript (JS) is a scripting language that allows dynamic behavior on webpages. It can handle user input,
calculations, and event handling.

• The prompt() function is used to take user input (optional in this case).

• The modulus operator (%) is used to check divisibility:

o If number % 2 === 0, the number is even.

o Otherwise, it is odd.

• The getElementById() method is used to display results dynamically in the webpage.

• Event handling (onclick event) is used to execute JavaScript code when a button is clicked.

JavaScript enhances user interaction, making the webpage interactive rather than static.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Odd or Even Checker</title>
<script>
function checkNumber() {
let num = parseInt(document.getElementById("numInput").value);
if (isNaN(num)) {
alert("Please enter a valid number");
} else {
let result = (num % 2 === 0) ? "Even" : "Odd";
document.getElementById("result").innerText = "The number is " + result;
}
}
</script>
</head>
<body>
<h1>Odd or Even Checker</h1>
<input type="text" id="numInput" placeholder="Enter a number">
<button onclick="checkNumber()">Check</button>
<p id="result"></p>
</body>
</html>

Output:

You might also like