Ganesh UI Lab

MANAV RACHNA UNIVERSITY,
FARIDABAD
Department of CSE
Name: Mareti ganesh ram Course: B.Tech CSE Csti
Semester: 3 Roll no:2K22CSUN01239
Session: 2023-24
Subject: USER INTERFACE-1(CSW102B)
------------------------------------------------------------------------------------------------------------------------------------------------------------
LAB-01
Students will be able to design HTML pages with basic tags. : Students will be able to design HTML pages with List, images
and hyperlinks.
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to My Basic HTML Page</h1>
<p>This is a paragraph of text.</p>
<p>Here's another paragraph with <em>italicized</em> text.</p>
<hr>
<p>And one more paragraph with <strong>bold</strong> text.</p>
</body>
</html>
as < >, < >, < >, < >, < , < >, and< >
<!DOCTYPE html>
<html>
<head>
<title>HTML Page with Lists, Images, and Hyperlinks</title>

</head>
<body>
<h1>Welcome to My HTML Page</h1>
<h2>List Example</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Image Example</h2>
<img src="C:\Users\Admin\Desktop\diya.jpeg" alt="sujith">
<h2>Hyperlink Example</h2>
<p>Visit <a href="https://www.example.com">Example.com</a></p>
</body>
</html>
Lab-02
: Students will be able to design HTML pages with tables and Frames. Students will be able to design HTML
pages with creating HTML Forms.
<!DOCTYPE html>
<html>
<head>
<title>Table Frame</title>
</head>
<body>
<h2>Sample Table</h2>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<title>Content Frame</title>
</head>
<body>
<h2>Content Goes Here</h2>
<p>This is the content frame where you can add your content.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Page with Forms</title>
</head>
<body>
<h1>HTML Form Example</h1>
<form action="form_handler.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Lab-03
Students will be able to design HTML5 page with asic HTML5 elements. Students would be able to design
HTML 5.0 form.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Page with Form</title>
</head>
<body>
<h1>HTML5 Page with Form</h1>
<form action="form_handler.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" autofocus required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message" required></textarea><br><br>
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color"><br><br>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" value="1"><br><br>
<label for="fruit">Select a Fruit:</label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
<option value="Grapes">
</datalist><br><br>
<label for="key">Key Pair Generation:</label>
<keygen id="key" name="key" keytype="rsa" size="40"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Lab-04
Students would be able to add navigation links using HTML 5.0
<html>
<head>
<title>Life at Manav Rachna University</title>
<img src="F:\c lan\university.png" width="100" height="100"/>
</head>
<body style="background-color: skyblue;"> 
<p style="background-image:url('Pictures/Screenshot (16).png');">
<h1>A roller coaster of emotions at MR</h1>
<p style="color:Chocolate">
College life marks a significant phase of personal and academic development for young adults. It's a time of transition
from the structured environment of high school to the newfound freedom and responsibilities of adulthood.
</p>
<p style="font-family:Ariel">
One of the central aspects of college life is academic pursuit. In college, students have the unique opportunity to delve
deeper into subjects they are passionate about. The diversity of courses and majors allows students to explore a wide range of
fields, fostering intellectual curiosity and critical thinking.
</p>
<b>
College life is a period of profound personal growth. For many students, it's the first time they're away from the
comfort of their homes and the watchful eyes of their families. This newfound independence provides the chance to make
decisions for oneself, manage finances, and establish a sense of identity.
</b>
<br>
<br>
<i>
Social interactions play a pivotal role in college life. The college environment brings together individuals from various
cultural, ethnic, and socioeconomic backgrounds. This diversity fosters tolerance, empathy, and an understanding of global
perspectives.
</i>
<br>
<video width="320" height="240" controls>
<source src="F:\GANESHRAM storage\MY EDITINGS\water.mp4" type="video/mp4">
<source src="F:\GANESHRAM storage\MY EDITINGS\water.ogg" type="video/ogg">
</video>
<br>
<h2>!! BYE See You Again !!</h2>
</p>
</body>
</html>
Lab-05
Student will be able to demonstrate CSS elements with CSS 3 to create Web pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devicewidth, initial-scale=1.0"> <title>CSS3 Example</title>
<style>
/* Basic styling for the entire page */ body { font-family: Arial, sans-serif;
background-color: #f0f0f0; margin: 0; padding: 0;
}
/* Styling for the header */ header { background-

color: #333; color: white; text-align: center;
padding: 20px;
}
/* Styling for a class */ .content-box { border:
1px solid #ccc; padding: 20px; background-color:
#fff; margin: 20px;
}
/* Styling for an ID */ #special-text {

color: #ff5733; font-size: 24px;
}
/* Styling for a pseudo-class (hover) */ a:hover { text-decoration: underline;

}
/* Styling for CSS3 transition */
.transition-box { width: 100px; height:

100px; background-color: #3498db; transition:
width 0.5s, height 0.5s, backgroundcolor 0.5s;
/* Styling for CSS3 animation */
@keyframes slide-in { from { transform: translateX(-100%);

} to {
transform: translateX(0);
.animated-box { width: 100px; height: 100px;

background-color: #e74c3c; animation: slide-in 1s ease; }
</style>
</head>
<body>
<header>
<h1>CSS3 Example Page</h1>
</header>
<div class="content-box">
<p>This is a basic content box.</p>
<p class="special-text" id="special-text">This text is special!</p>
<p><a href="#">Hover over me</a> to see the underline effect.</p>
</div>
<div class="content-box transition-box">

<p>This box has a transition effect on hover.</p>
</div>
<div class="content-box animated-box">
<p>This box uses CSS3 animation.</p>
</div>
</body>
</html>
Lab-06
Student will be able to implement Box Model and transformation with CSS 3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devicewidth, initial-scale=1.0">
<title>CSS3 Box Model and Transformations Example</title>
<style>
/* Basic styling for the entire page */ body { font-

family: Arial, sans-serif; background-color: #f0f0f0; margin:
0; padding: 0;
}
/* Styling for the container */
.container { width: 300px; margin: 20px auto;

background-color: #fff; padding: 20px; border: 2px solid #333;
box-shadow: 5px 5px 10px #888888;
}
/* Styling for the box with transformations */
.transform-box {
width: 100px; height: 100px; background-color: #3498db;

margin: 20px; padding: 10px; border: 2px solid #2980b9;
transform: rotate(45deg) scale(1.5); transition: transform 0.5s ease-in-out;
}
/* Hover effect for the transform-box */
.transform-box:hover { transform: rotate(0deg) scale(2);

}
</style>
</head>
<body>
<div class="container">
<h1>CSS3 Box Model and Transformations</h1> <p>This is a basic container demonstrating the CSS3 Box Model
and Transformations.</p>
<div class="transform-box">
<p>Transformed Box</p>
</div>
</div>
</body>
</html>

Ganesh UI Lab

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ganesh UI Lab

Uploaded by

Copyright:

Available Formats

MANAV RACHNA UNIVERSITY,

<title>Basic HTML Page</title>

<h1>Welcome to My Basic HTML Page</h1>

<p>This is a paragraph of text.</p>

<p>Here's another paragraph with <em>italicized</em> text.</p>

<p>And one more paragraph with <strong>bold</strong> text.</p>

<title>HTML Page with Lists, Images, and Hyperlinks</title>

<h1>Welcome to My HTML Page</h1>

<img src="C:\Users\Admin\Desktop\diya.jpeg" alt="sujith">

<p>Visit <a href="https://www.example.com">Example.com</a></p>

</html> <!DOCTYPE html>

<h2>Content Goes Here</h2>

<title>HTML Page with Forms</title>

<h1>HTML Form Example</h1>

<form action="form_handler.php" method="post">

<input type="text" id="name" name="name" required><br><br>

<input type="email" id="email" name="email" required><br><br>

<textarea id="message" name="message" rows="4" cols="50" required></textarea><br><br>

<input type="submit" value="Submit">

<title>HTML5 Page with Form</title>

<h1>HTML5 Page with Form</h1>

<form action="form_handler.php" method="post">

<input type="text" id="name" name="name" placeholder="Enter your name" autofocus required><br><br>

<input type="email" id="email" name="email" placeholder="Enter your email" required><br><br>

<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message" required></textarea><br><br>

<label for="color">Favorite Color:</label>

<input type="color" id="color" name="color"><br><br>

<input type="number" id="quantity" name="quantity" min="1" max="10" value="1"><br><br>

<label for="fruit">Select a Fruit:</label>

<input list="fruits" id="fruit" name="fruit">

<label for="key">Key Pair Generation:</label>

<keygen id="key" name="key" keytype="rsa" size="40"><br><br>

<input type="submit" value="Submit">

<title>Life at Manav Rachna University</title>

<img src="F:\c lan\university.png" width="100" height="100"/>

<p style="background-image:url('Pictures/Screenshot (16).png');">

<h1>A roller coaster of emotions at MR</h1>

<video width="320" height="240" controls>

<source src="F:\GANESHRAM storage\MY EDITINGS\water.mp4" type="video/mp4">

<source src="F:\GANESHRAM storage\MY EDITINGS\water.ogg" type="video/ogg">

<h2>!! BYE See You Again !!</h2>

<meta name="viewport" content="width=devicewidth, initial-scale=1.0"> <title>CSS3 Example</title>

/* Styling for the header */ header { background-

/* Styling for an ID */ #special-text {

/* Styling for a pseudo-class (hover) */ a:hover { text-decoration: underline;

/* Styling for CSS3 transition */

.transition-box { width: 100px; height:

/* Styling for CSS3 animation */

@keyframes slide-in { from { transform: translateX(-100%);

.animated-box { width: 100px; height: 100px;

<h1>CSS3 Example Page</h1>

<p>This is a basic content box.</p>

<p class="special-text" id="special-text">This text is special!</p>

<p><a href="#">Hover over me</a> to see the underline effect.</p>

<div class="content-box transition-box">

<div class="content-box animated-box">

<p>This box uses CSS3 animation.</p>

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

<title>CSS3 Box Model and Transformations Example</title>

/* Basic styling for the entire page */ body { font-

/* Styling for the container */

.container { width: 300px; margin: 20px auto;

/* Styling for the box with transformations */