Web Design Practical List by TSZ

Web design Practical list by TSz
CREATED BY BHARGAV05..
Questions pdf:-
WD-PL.pdf 343 kB
Practical list 01:-

1. Write a simple HTML Script to display the message “Welcome to UKA TARSADIA
UNIVERSITY”Change background color , change font size,font color , font face.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
font-family: Arial;
font-size: 20px;
color: navy;
}
</style>
</head>
<body>
<div>
<h1>Welcome to UKA TARSADIA UNIVERSITY</h1>
</div>
</body>
</html>
2. Create a HTML document giving details of your [Name, Age], [Address, Phone] and
[Register Number, Class] aligned in proper order using alignment attributes of
Paragraph tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Personal Details</title>
</head>
<body>
<h1>My Personal Info</h1>
<p>
<b>Name</b>: cool boys
<br>
<b>Age</b>: 18
<br>
<b>Address</b>: private bay area way, etc..
<br>
<b>Phone</b>: +916745346599
<br>
<b>Register Number</b>: 9925545411
<br>
<b>Class</b shared by tsz>: college sem3
</p>
</body>
</html>
3. Print a paragraph that is a description of a book, include the title of the book as
well as its author. Names and titles should be underlined, adjectives should be
italicized and bolded.
<!DOCTYPE html>
<html>
<head>
<title>Book Description</title>
</head>
<body>
<p>The exciting book <u>Harry Potter and the Sorcerer's Stone</u> by <u>J.K. Rowling</u>
tells the story of a young <i><b>brave</b></i> wizard named Harry Potter. In the <i>
<b>magical</b></i> world of the book, Harry is sent to attend the <u>Hogwarts School of
Witchcraft and Wizardry</u> where he meets new friends and faces <i><b>dangerous</b></i>
challenges. Harry's life changes completely when he learns that he is destined to fight
an evil villain named Voldemort. Fans of <i><b>fantasy</b></i> fiction will love this
<i><b>imaginative</b></i> tale of a young hero finding his place in an enchanting world.
</p>
</body>
</html>
4. Display an image that when clicked will link to itself and will display the image in
the browser by itself.
<!DOCTYPE html>
<html>
<head>
<title>Clickable Image</title>
2
</head>
<body>
<a href="image.jpg" target="_blank">
<img src="image.jpg" alt="Sample Image">
</a>
</body>
</html>
5. Create some links to various search engines (Google, Yahoo, Facebook, Instagram,
etc).
<!DOCTYPE html>
<html>
<head>
<title>Search Engine Links</title>
</head>
<body>
<p>
<a href="https://www.google.com" target="_blank">Google</a> |
<a href="https://www.yahoo.com" target="_blank">Yahoo</a> |
<a href="https://www.facebook.com" target="_blank">Facebook</a> |
<a href="https://www.instagram.com" target="_blank">Instagram</a> |
<a href="https://www.twitter.com" target="_blank">Twitter</a> |
</p>
</body>
</html>
Complete code.
1. Define HTML.
2. How many types of URL in src attribute?what is the main
difference?
3. What is the main difference between and ?
4. What is the main difference between and ?
Here are the answers to your questions:
1. HTML stands for HyperText Markup Language. It is the standard markup language
used for creating web pages and web applications. HTML defines the structure and
content of a web page using HTML elements that represent headings, paragraphs,
lists, links, images etc.
2. There are two types of URLs that can be used in the src attribute - relative and
absolute. The main difference is:
3
- Relative URL - Points to a file relative to the current page, e.g. src="image.jpg".
Does not include the full path.
- Absolute URL - Contains the full URL path to the file, e.g.
src="https://www.example.com/images/image.jpg". Fully qualified from root domain.
3. The main difference between <b> and <strong> is:
- <b> stands for bold and is used to make text bold stylistically.
- <strong> stands for strong importance and is used to mark text as important
semantically. It displays as bold by default but screen readers use it to flag important
content.
4. The main difference between <i> and <em> is:
- <i> stands for italic and is used for italic styling of text.
- <em> stands for emphasis and is used to stress emphasis on text semantically. It
displays as italic by default but screen readers use it to flag emphasized words.
Practical list 02:-

1. Create a table to show your class time table.
```
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<table>
<head>
<style>
table,th,td{
border:3px solid black;
border-collapse:collapse;
}
th,td{
padding:10x;
}
table{
width=100%;
}
body{
4
</style>
</head>
</table>
<table>
<caption>Time table</caption>
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Tursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<td>8:30 to 9:30</td>
<td>IT4003
JRS
CR-02</td>
<td>IT4002
BRP
CR-02</td>
<td style="background-color:green;">IT4002
AMS/SMP
LAB 2-D</td>
<td>IT4004
AMS
CR-02</td>
RMM
LAB 2-D</td>
<td>SELF STUDY/GROUP STUDY</td>
</tr>
<tr>
<td>9:30 to 10:30</td>
<td>IT4002
BRP
CR-02</td>
<td>EC4008
SJN
CR-02</td>
<td>EC4008
SJN
CR-02</td>
<td>IT4003
JRS
CR-02</td>
5
RMM
LAB 2-D</td>
</tr>
<tr>
<td>10:30 to 11:15</td>
</tr>
<tr>
<td>
11:15 to 12:15
</td>
BRP/SMP
LAB 2-D</td>
<td>IT4004
AMS
CR-02</td>
<td>IT4002
BRP
CR-02</td>
<td>IT4006
RMM
CR-02</td>
<td>IT4002
BRP
CR-02</td>
</tr>
<tr>
<td>12:15 to 1:15</td>
KJL/SMP
LAB 2-D</td>
<td>IT4003
JRS
CR-02</td>
<td>IT4004
AMS
CR-02</td>
<td>EC4008
SJN
CR-02</td>
<td>IT4003
JRS
CR-02</td>
</tr>
<tr>
<td>1:15 to 1:30</td>
</tr>
<tr>
6
<td>1:30 to 2:30</td>
<td>NSS
CR-02</td>
<td style="background-color:green;">EC4008
SJN/SMP
LAB 2-D</td>
<td>DM
HAV
CR-02</td>
<td>DM
HAV
CR-02</td>
<td>IT4004
AMS
CR-02</td>
<td style="background-color:lightblue;"></td>
</tr>
<tr>
<td>2:30 to 3:30</td>
<td>NSS
HAV
CR-02</td>
<td style="background-color:green;">EC4008
AMS/SMP
LAB 2-D</td>
<td style="background-color:lightblue;"></td>
</tr>
</tbody>
</table>
</table>
</html>
```
2. Write HTML table code.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
7
<tr>
<th>Name</th>
<th>Maths</th>
<th>Science</th>
<th>English</th>
<th>Physics</th>
<th>General Knowledge</th>
</tr>
<tr>
<td>David</td>
<td>75</td>
<td>80</td>
<td>85</td>
<td>90</td>
<td>95</td>
</tr>
<tr>
<td>Richard</td>
<td>80</td>
<td>75</td>
<td>70</td>
<td>65</td>
<td>60</td>
</tr>
<tr>
<td>John</td>
<td>85</td>
<td>90</td>
<td>80</td>
<td>75</td>
<td>70</td>
</tr>
<tr>
<td>Tony</td>
<td>80</td>
<td>75</td>
<td>95</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>Scott</td>
<td>75</td>
<td>90</td>
<td>85</td>
<td>80</td>
<td>95</td>
</tr>
</table>
</body>
</html>
8
3. Design HTML table code.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border:1px solid black;
}
</style>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<table align="center" style="width:25%;">
<tr>
<td style="width:50px" colspan="2" bgcolor="green"> </td>
<td style="width:50px" colspan="2" bgcolor="lightblue"> </td>
<td style="width:50px" colspan="2" rowspan="2" bgcolor="yellow"> </td>
<td style="width:50px" colspan="2" bgcolor="blue"> </td>
</tr>
<tr>
<td style="width:50px" colspan="2" bgcolor="lightpink"> </td>
<td style="width:25px" colspan="2" bgcolor="red"> </td>
</tr>
<tr>
<td style="width:50px" colspan="2" bgcolor="orange"> </td>
</tr>
<tr>
</tr>
<tr>
<td style="width:50px" colspan="2" bgcolor="green"></td>
<td style="width:25px"colspan="1" bgcolor="red"> </td>
<td style="width:25px" colspan="1" bgcolor="darkred"> </td>
<td style="width:50px" colspan="2" bgcolor="blue" ></td>
</tr>
9
</body>
</head>
</html>
4. insert an image and create a link such that clicking on image takes user to other
page.
(use ai tool for answer)
<!DOCTYPE html>
<html>
<head>
<title>Image Link</title>
</head>
<body>
<a href="https://www.example.com">
<img src="image.jpg" alt="Sample Image">
</a>
</body>
</html>
5. Create a web page, showing an ordered list of all third semester Courses.All
subject sub points(nested list) redirect on next page.
<!DOCTYPE html>
<html>
<head>
<title>3rd Semester Courses</title>
</head>
<body>
<h1>Third Semester Courses</h1>
<ol>
<li>Data Structures
<ol>
<li><a href="ds-arrays.html">Arrays</a></li>
<li><a href="ds-linkedlists.html">Linked Lists</a></li>
<li><a href="ds-stacks.html">Stacks</a></li>
<li><a href="ds-queues.html">Queues</a></li>
</ol>
</li>
<li>Computer Networks
<ol>
<li><a href="cn-overview.html">Overview</a></li>
<li><a href="cn-protocols.html">Protocols</a></li>
<li><a href="cn-layers.html">OSI Layers</a></li>
</ol>
</li>
<li>Operating Systems
<ol>
10
<li><a href="os-intro.html">Introduction</a></li>
<li><a href="os-memory.html">Memory Management</a></li>
<li><a href="os-scheduling.html">Scheduling</a></li>
</ol>
</li>
<li>Microprocessor Programming
<ol>
<li><a href="mp-asm.html">Assembly Language</a></li>
<li><a href="mp-interfacing.html">Interfacing</a></li>
</ol>
</li>
</ol>
</body>
</html>
1. Define HTML tag.

2. Write tag Element.
3. Define List tag.
4. Types of list tag.
Here are the full answers for each question:
1. HTML tags are used to create HTML elements that define the structure and
content of a web page. HTML tags are enclosed in angle brackets < > and usually
consist of an opening and closing tag. For example: <h1>Heading</h1> (1 mark)
2. The main parts of an HTML tag element are:
- Opening tag: Consists of tag name enclosed in < >

- Content: The text or other elements between opening and closing tag
- Closing tag: Same as opening tag but with a / before the tag name
For example:
<h1>This is heading content</h1> (1 mark)
3. List tags in HTML are used to create bulleted or numbered lists to organize
and structure content. The main list tags are:
- <ul> - Unordered/bulleted list

- <ol> - Ordered/numbered list
- <li> - List item (1 mark)
11
4. The types of list tags in HTML are:
- Unordered list (<ul>) - Used for bulleted lists

- Ordered list (<ol>) - Used for numbered lists
- List item (<li>) - Used for each item within both ordered and unordered lists.
Practical list 03:-
1. Create a web page which should generate following output: In this frame put
images.
( her class code)
<!DOCTYPE html>
<html>
<body>
<iframe
src="https://www.adobe.com/express/create/media_147b85d9e4cb15b95023a74537b8dd2058027f26
f.png?width=750&format=png&optimize=medium" title="zingagi ke 4 din">
</iframe>
<iframe src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQCNgJu00XUUX6_m6i_IY2QJRfgHjuc_0atqA&usqp=CAU" title="abhi gina mat likte
ja">
</iframe>
</body>
</html>
i m not sure this code is right ya no !!

<!DOCTYPE html>
<html>
12
<head>
<title>
frame
</title>
</head>
<frameset cols="50%,50%">
<frame src="img1.html">
<frame src="image2.html">
</frameset>
</html>
-----
img1.html
<html>
<head>
<title>
frame
</title>
</head>
<body>
<h1>Frame 1</h1>
<img src="https://world-schools.com/fr/wp-content/uploads/sites/13/2023/05/IMG-Academy-
cover-WS-1536x768.webp"
</body>
</html>
---
image2.html
<html>
<head>
<title></title>
</head>
<body>
<h1>Frame 2</h1>
<img src="https://images.unsplash.com/photo-1575936123452-b67c3203c357">
</body>
</html>
2.
<!DOCTYPE html>
<html>
<body>
<iframe
src="https://www.adobe.com/express/create/media_147b85d9e4cb15b95023a74537b8dd2058027f26
f.png?width=750&format=png&optimize=medium" title="zingagi ke 4 din">
</iframe>
<iframe src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQCNgJu00XUUX6_m6i_IY2QJRfgHjuc_0atqA&usqp=CAU" title="abhi gina mat likte
ja">
</iframe>
</body>
</html>
13
3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Babu Madhav Institute of Information Technology</title>
<style>
body, h1, p {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: rgb(81, 0, 88);
color: #fff;
text-align: center;
padding: 20px 0;
}
header h1 {
font-size: 36px;
margin-bottom: 10px;
}
nav {
text-align: center;
background-color: rgb(81, 0, 88);
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 15px;
font-size: 18px;
}
nav a:hover {
text-decoration: underline;
}
.container {
max-width: 960px;
14
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
font-size: 24px;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<header>
<h1>Babu Madhav Institute of Information Technology</h1>
<p>Your gateway to IT education and excellence</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Programs</a>
<a href="#">Admissions</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<img src="https://www.utu.ac.in/bmiit/images/BMIIT-Header-1.jpg" alt="bmiit" width="960"
height="345">
<style>
h3 {
font-size: 60px;
}
h4 {
font-size: 40px;
}
</style>
<h3 align="center">Welcome to BMIIT</h3>
<p>Babu Madhav Institute of Information Technology,
popularly known as BMIIT is premier institute of Uka Tarsadia University which offers
three
courses of Bachelor of Science in Information Technology B.Sc. (IT),
Four Years Bachelor of Science in Information Technology B.Sc. (IT) (Honours) and
Masters of Science in Information Technology M.Sc. (IT);
and named after its beloved donor respected Shri Babubhai Madhavbhai Patel a great human
being and renowned businessman from USA.</p>
<h4 align="center">Recent Event</h4>
15
<img src="https://www.utu.ac.in/bmiit/Images2018-19/Creative_Institute_Award_2021.jpg"
alt="bmiit" width="300" height="350">
<img src="https://www.utu.ac.in/bmiit/Images2018-19/NCAT2.jpg" alt="bmiit" width="300"
height="350">
<img src="https://www.utu.ac.in/images2023/RoboFest%203%20copy.jpg" alt="bmiit"
width="300" height="350">
</div>
</body>
</html>
1.What is Doctype?
2.Types of Doctype?
3.What is Frame?
4.What is Link?
Here are the full answers for each question (1 mark each):
1. DOCTYPE stands for Document Type Declaration. It is an instruction at the top of

an HTML document that tells the browser what version of HTML is being used so
that the browser can render the page correctly. The DOCTYPE declaration refers to a
Document Type Definition (DTD) which specifies the rules and syntax for that HTML
version. (1 mark)
2. The common types of doctype declarations are:
- HTML5: <!DOCTYPE html>

- HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
3. Frames allow you to divide the browser window into multiple sections (frames)
that each can load a separate HTML document. The <frame> tag defines one of
these window sections that will contain a separate document. Attributes like src,
name, etc. can specify the document to load in that frame. (1 mark)
4. The <link> tag in HTML is used to link an external resource like a CSS stylesheet or
favicon icon to the HTML document. This specifies a relationship between the HTML
page and the external resource. Common attributes are href for the resource URL, rel
for the relationship (like stylesheet), and type for the content type. This allows styling,
icons, etc. to be loaded separately from the HTML content. (1 mark)
16
Practical list 04:-
1. Write a CSS Code which change the Shape of Square into Circle when User Move
the mouse over square.
<html>
<head>
<style>
.square {
width: 100px;
height: 100px;
background: red;
}
.square:hover {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
2. CSS create display a text on top of an image using an overlay.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.5;
background-color: black;
}
17
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1480365501497-199581be0e66" alt="Image"
class="image">
<div class="overlay"></div>
<div class="text">Hello World</div>
</div>
</body>
</html>
3. Write a HTML code , CSS create a scrollable container that will snap on elements
when scrolling.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.item {
flex: 0 0 100%;
scroll-snap-align: start;
}
.item:nth-child(even) {
background: #ddd;
}
</style>
</head>
<body>
<div class="item">Item 1</div>
</div>
18
</body>
</html>
4. Using HTML, CSS creates a zoom in zoom out animation.

<!DOCTYPE html>
<html>
<head>
<style>
.zoom {
display: inline-block;
transition: transform 0.2s; /* Add smooth transition */
}
.zoom:hover {
transform: scale(1.2); /* Zoom in on hover */
}
</style>
</head>
<body>
<img class="zoom" src="https://images.unsplash.com/photo-1480365501497-199581be0e66"
alt="Zoomable Image" height="500px" width="600px">
</body>
</html>
5. Design a web page using CSS our college website. (Login Page,Registration
Page,News & Events,Contact Us).
I'M using chatgpt this code
index.html (Login Page):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>College Website - Login</title>
</head>
<body>
<header>
<h1>Welcome to Our College</h1>
</header>
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
19
<p>Don't have an account? <a href="registration.html">Register here</a></p>
</div>
<footer>
<p>© 2023 Our College</p>
</footer>
</body>
</html>
registration.html (Registration Page): TSz code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=".css">
<title>College Website - Registration</title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
header {
background-color: #0074cc;
color: #fff;
text-align: center;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
}
footer {
text-align: center;
padding: 10px;
color: #fff;
}
/* Styling for forms */
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
20
}
input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border-radius: 5px;
}
button {
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
<body>
<header>
<h1>Register for Our College</h1>
</header>
<h2>Registration Form</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password" required>
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="index.html">Login here</a></p>
</div>
<footer>
<p>© 2023 Powered by bhargav05</p>
</footer>
</body>
</html>
newsevents.html (News & Events Page): TSZ code

<!DOCTYPE html>
<html>
<head>
21
<title>College Website - News & Events</title>
</head>
<body>
<header>
<h1>News & Events</h1>
</header>
<h2>Latest News</h2>

</div>
<footer>
<p>© 2023 Our College</p>
</footer>
</body>
</html>
contact.html (Contact Us Page): Tsz code

<!DOCTYPE html>
<html>
<head>
<title>College Website - Contact Us</title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
header {
color: #fff;
text-align: center;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
footer {
text-align: center;
padding: 10px;
color: #fff;
22
}
address {
margin-top: 20px;
font-style: normal;
}
/* Styling for contact form */
form {
margin-top: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
}
textarea {
resize: vertical;
}
button {
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
<body>
<header>
<h1>Contact Us</h1>
</header>
<h2>Contact Information</h2>
<address>
<p><strong>Our College</strong></p>
<p>123 College Street</p>
<p>City, State ZIP Code</p>
<p>Email: contact@ourcollege.com</p>
<p>Phone: (123) 456-7890</p>
</address>
<h2>Contact Form</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
23
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
<footer>
<p>© 2023 Powered by bhargav05</p>
</footer>
</body>
</html>
----
(use google and ebooks)
1. What is CSS?
2. Types of CSS?
3. Write down Syntax of CSS?
4. How to apply comments in CSS?
5. How to link external CSS with html file?
1. CSS stands for Cascading Style Sheets. It

is a style sheet language used for describing the presentation of a document
written in a markup language
such as HTML or XML. CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
2. There are three types of CSS:
Internal CSS: This is the simplest type of CSS and is embedded directly in
the HTML document.
External CSS: This is a more modular approach to CSS where the style rules
are stored in a separate file.
Inline CSS: This is the least common type of CSS and is used to apply styles
to individual HTML elements.
3. The syntax of CSS is very simple and consists of selectors, properties, and
values.
Selectors: Selectors are used to select the HTML elements that the style
rules will be applied to.
Properties: Properties are the names of the CSS attributes that can be
styled.
Values: Values are the specific values that are assigned to the properties.
24
Here is an example of CSS syntax:
h1 {
color: red;
font-size: 20px;
}
This CSS rule will set the color of all h1 elements to red and the font size to 20px.
1. Comments in CSS are used to provide explanations or notes about the code.
Comments are not interpreted by the browser, so they do not affect the way
the page is displayed.
To add a comment in CSS, you can use the following syntax:
/* This is a comment */
1. To link an external CSS file with an HTML file, you can use the following syntax:
<link rel="stylesheet" href="style.css">
Practical list 05:-

1. Write a java script to click button display current date and time.
<!DOCTYPE html>
<html>
<head>
<title>Current Date and Time</title>
</head>
<body>
<h1>Current Date and Time</h1>
<button id="showDateTimeButton">Show Date and Time</button>
<p id="dateTime"></p>
</body>
</html>
function showDateTime() {
var now = new Date();
25
var date = now.getDate();
var month = now.getMonth() + 1;
var year = now.getFullYear();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var dateTime = date + "/" + month + "/" + year + " " + hour + ":" + minute + ":" +
second;
document.getElementById("dateTime").innerHTML = dateTime;
}
var button = document.getElementById("showDateTimeButton");
button.onclick = showDateTime;
2. Write a javascript to enter number greater than or less than.

<!DOCTYPE html>
<html>
<head>
<title>Enter Number Greater Than or Less Than</title>
</head>
<body>
<h1>Enter Number Greater Than or Less Than</h1>
<input type="number" id="number">
<input type="number" id="min">
<input type="number" id="max">
<button onclick="checkNumber()">Check</button>
</body>
</html>
function checkNumber() {
var number = document.getElementById("number").value;
var min = document.getElementById("min").value;
var max = document.getElementById("max").value;
if (number < min) {
alert("The number must be greater than or equal to " + min);
} else if (number > max) {
alert("The number must be less than or equal to " + max);
} else {
alert("The number is within the required range");
}
}
3. Write a java script to create login page and display open new window.(Apply
Criteria)
<!DOCTYPE html>
<html>
26
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<input type="text" id="username">
<input type="password" id="password">
<button onclick="login()">Login</button>
</body>
</html>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "admin" && password == "password") {
window.open("new_window.html", "_blank");
} else {
alert("Invalid username or password");
}
}
4. Display Alert/ For Prompt Message Program.

<!DOCTYPE html>
<html>
<head>
<title>Alert and Prompt Messages</title>
</head>
<body>
<h1>Alert and Prompt Messages</h1>
<button id="alertButton" onclick="alertMessage()">Alert Message</button>
<button id="promptButton" onclick="promptMessage()">Prompt Message</button>
</body>
</html>
function alertMessage() {
alert("This is an alert message.");
}
function promptMessage() {
var name = prompt("What is your name?");
alert("Hello, " + name + "!");
}
5. Design employee registration form.Write down javascript for registration page for
checking validation.of each and every input control.(Apply Javascript validation).
27
<!DOCTYPE html>
<html>
<head>
<title>Employee Registration Form</title>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var address = document.getElementById("address").value;
if (name == "") {
alert("Please enter your name.");
return false;
}
if (!email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)) {
alert("Please enter a valid email address.");
return false;
}
if (phone == "") {
alert("Please enter your phone number.");
return false;
}
if (address == "") {
alert("Please enter your address.");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Employee Registration Form</h1>
<form onsubmit="return validateForm()" action="submit.php" method="post">
<input type="text" id="name" placeholder="Name" required>
<input type="email" id="email" placeholder="Email" required>
<input type="tel" id="phone" placeholder="Phone" required>
<input type="text" id="address" placeholder="Address" required>
<button type="submit">Submit</button>
</form>
</body>
</html>
( use code ai - get answers )

1.What is java script?
2.Syntax of javascript?
3. How to apply comment in javascript?
4.List all data types in java script?
28
1. JavaScript is a lightweight, interpreted programming language that adds
interactivity to web pages. It is one of the three core technologies of the World
Wide Web, along with HTML and CSS. JavaScript is used to create interactive
elements such as menus, buttons, and forms, and to make web pages more
dynamic.
1. The syntax of JavaScript is similar to that of other programming languages such

as C and Java. It uses keywords, variables, operators, and statements to control
the flow of execution.
Here are some of the basic syntax rules of JavaScript:
Statements must be terminated with a semicolon (;).
Variables must be declared before they can be used.
Expressions are evaluated from left to right.
Comments can be used to explain the code.
1. There are two ways to apply comments in JavaScript:
Single-line comments: Single-line comments start with two forward slashes (//)
and continue to the end of the line.
Multi-line comments: Multi-line comments start with a forward slash and
asterisk (/*) and end with an asterisk and forward slash (*/).
1. JavaScript has seven data types:
Strings: Strings are sequences of characters.
Numbers: Numbers represent numeric values.
Booleans: Booleans represent logical values, such as true or false.
Null: Null represents the absence of a value.
Undefined: Undefined represents a variable that has not been assigned a value.
BigInt: BigInts are integers that can represent very large values.
Symbols: Symbols are unique values that are used to identify objects.
Objects: Objects are collections of data and methods.
29

Web Design Practical List by TSZ

Uploaded by

Copyright:

Available Formats

You might also like

Web Design Practical List by TSZ

Uploaded by

Document Information

Original Description:

Original Title

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

Web Design Practical List by TSZ

Uploaded by

Copyright:

Available Formats

Web design Practical list by TSz

Practical list 01:-

3. The main difference between <b> and <strong> is:

4. The main difference between <i> and <em> is:

Practical list 02:-

2. Write HTML table code.

1. Define HTML tag.

2. The main parts of an HTML tag element are:

- Opening tag: Consists of tag name enclosed in < >

<h1>This is heading content</h1> (1 mark)

- <ul> - Unordered/bulleted list

- Unordered list (<ul>) - Used for bulleted lists

Practical list 03:-

i m not sure this code is right ya no !!

1. DOCTYPE stands for Document Type Declaration. It is an instruction at the top of

2. The common types of doctype declarations are:

- HTML5: <!DOCTYPE html>

2. CSS create display a text on top of an image using an overlay.

4. Using HTML, CSS creates a zoom in zoom out animation.

registration.html (Registration Page): TSz code

newsevents.html (News & Events Page): TSZ code

contact.html (Contact Us Page): Tsz code

1. CSS stands for Cascading Style Sheets. It

To add a comment in CSS, you can use the following syntax:

<link rel="stylesheet" href="style.css">

Practical list 05:-

2. Write a javascript to enter number greater than or less than.

4. Display Alert/ For Prompt Message Program.

( use code ai - get answers )

1. The syntax of JavaScript is similar to that of other programming languages such

You might also like