<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click to Remove Picture | DEEPAKRAJTech</title>
</head>
<body>
<center>
<h1>Click to Remove Picture</h1>
<img src="https://picsum.photos/300" alt="Technology" border="1" onclick="this.style.display='none';" style="cursor: pointer; ">
</center>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World Bold & Italic</title>
</head>
<body>
<b><i>Hello world</i></b>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html>
<head>
<title>Warning Page | DEEPAKRAJTech</title>
<style>
body {
background-color: red;
color: white;
text-align: center;
margin-top: 100px;
font-family: Arial, sans-serif;
}
.blinking {
font-size: 80px;
font-weight: bold;
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
marquee {
font-size: 30px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="blinking">WARNING</div>
<marquee behavior="scroll" direction="left">Read the message</marquee>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout Frame | DEEPAKRAJTech</title>
<style>
table {
border-collapse: collapse;
font-family: sans-serif;
font-size: 22px;
}
table, th, td {
border: 4px solid white;
}
.blinking {
animation: blink-text 1s step-start infinite;
}
@keyframes blink-text {
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<table width="100%" cellpadding="16">
<tr bgcolor="#f97316">
<th colspan="3">
<p>
Name : DEEPAK RAJ Mishra, Address : Sultanpur Uttar Pradesh India
228001
</p>
</th>
</tr>
<tr bgcolor="#ffe5e0">
<td>
<h3>Qualification</h3>
<ul>
<li>ADCA</li>
<li>CCC</li>
<li>BCA</li>
<li>O Level</li>
<li>A Level</li>
</ul>
</td>
<td colspan="2">
<h3>Favorite Website</h3>
<ul>
<li><a href="https://deepakrajtech.com">DEEPAKRAJTech</a></li>
<li>
<a href="https://www.youtube.com/@deepakrajtech">YouTube</a>
</li>
<li>
<a href="https://www.instagram.com/deepakrajtech/">Instagram</a>
</li>
<li>
<a href="https://www.facebook.com/deepakrajtech/">Facebook</a>
</li>
<li><a href="https://www.google.com/deepakrajtech/">Google</a></li>
</ul>
</td>
</tr>
<tr align="center" bgcolor="#fff0eb">
<td width="33%">
<marquee><b>DEEPAKRAJTech | BCA | NIELIT O Level | Follow @deepakrajtech for
more updates!</b></marquee>
</td>
<td width="33%">
<p class="blinking"><b>Subscribe to DEEPAKRAJTech</b></p>
</td>
<td width="34%">
<img src="https://picsum.photos/150" alt="Technology" />
</td>
</tr>
</table>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Polynomial Expression | DEEPAKRAJTech</title>
<style>
p{
font-family: sans-serif;
font-size: 48px;
text-align: center;
}
</style>
</head>
<body>
<p>
a<sup>0</sup> + a<sup>1</sup> x + a<sup>2</sup> x<sup>2 </sup> + a<sup>3</ sup> x<sup>3</sup>
</p>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Colorful Lines | DEEPAKRAJTech</title>
<style>
body {
font-size: 22px;
font-family: sans-serif;
text-align: center;
background-color: black;
}
hr {
height: 4px;
}
</style>
</head>
<body>
<p style="color: red;">This line is red.</p>
<hr color="red">
<p style="color: blue;">This line is blue.</p>
<hr color="blue">
<p style="color: green;">This line is green.</p>
<hr color="green">
<p style="color: orange;">This line is orange.</p>
<hr color="orange">
<p style="color: purple;">This line is purple.</p>
<hr color="purple">
<p style="color: brown;">This line is brown.</p>
<hr color="brown">
<p style="color: yellow;">This line is yellow.</p>
<hr color="yellow">
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About My City - Sultanpur</title>
<style>
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
padding: 30px;
}
h1 {
color: blue;
font-size: 48px;
text-align: center;
}
.landmark1 {
color: magenta;
font-family: monospace;
font-size: 24px;
}
.landmark2 {
color: green;
font-family: cursive;
font-style: italic;
font-size: 24px;
}
.landmark3 {
color: purple;
font-family: 'Times New Roman', Times, serif;
text-decoration: underline;
font-size: 24px;
}
.blinking {
color: red;
font-size: 24px;
font-weight: bold;
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {
opacity: 0;
}
}
marquee {
margin-top: 40px;
font-size: 20px;
color: darkblue;
}
</style>
</head>
<body>
<h1>Sultanpur</h1>
<hr>
<p class="landmark1">1. Paarijaat Tree</p>
<p class="landmark2">2. Bijethua Mahaviran Temple</p>
<p class="landmark3">3. Sitakund</p>
<p class="blinking">Disha Computer Education</p>
<marquee>Welcome to Sultanpur! A city of dreams and diversity.</marquee>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Anchor Tag Demo | DEEPAKRAJTech</title>
</head>
<body>
<h1 id="top">HTML Anchor Tag Examples</h1>
<hr>
<!-- 1. Web link that opens in a new window -->
<p><strong>1. Link that opens in a new tab/window:</strong><br>
<a href="https://www.google.com" target="_blank">Open Google in New Window</a></p>
<!-- 2. Web link that opens in the same window -->
<p><strong>2. Link that opens in the same window:</strong><br>
<a href="https://www.google.com" target="_self">Open Google in Same Window</a></p>
<!-- 3. C Reference within the same document -->
<p><strong>3. Jump to top of the same page:</strong><br>
<a href="#top">Go to Top C</a></p>
<!-- 4. Reference to some image -->
<p><strong>4. Clickable link to an image:</strong><br>
<a href="krishna_2.jpg" target="_blank">Click here to view image1.jpg</a></p>
<!-- 5. Making an image a hyperlink to display second image -->
<p><strong>5. Clickable image that opens another image:</strong><br>
<a href="krishna_2.jpg" target="_blank">
<img src="krishna_1.jpg" alt="Click to view another image" width="200">
</a></p>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example | DEEPAKRAJTech</title>
</head>
<body>
<h2>My Favorite Drinks</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Black Tea</li>
<li>Green Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html>
<head>
<title>Personal Data Form | DEEPAKRAJTech</title>
</head>
<body>
<h2>Personal Information Form</h2>
<form action="#" method="post">
<label for="name">Full Name:</label><br>
<input type="text" id="name" name="fullname" required><br><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="password" required><br><br>
<label for="email">Email ID:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br><br>
<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob" name="dob"><br><br>
<label for="city">Select City:</label><br>
<select id="city" name="city">
<option value="">--Select--</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Kolkata">Kolkata</option>
</select><br><br>
<label>Hobbies:</label><br>
<input type="checkbox" name="hobby" value="Reading">Reading
<input type="checkbox" name="hobby" value="Traveling">Traveling
<input type="checkbox" name="hobby" value="Coding">Coding<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
▶️
Watch Now on YouTube
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEEPAKRAJTech | My First Web Page</title>
</head>
<body>
<h1>Welcome to My First Web Page</h1>
<p>This is my very first paragraph in HTML. I'm learning how to create web
pages using HTML and it's really exciting!</p>
<p>HTML stands for HyperText Markup Language and it's used to design the
structure of web pages on the internet.</p>
</body>
</html>
▶️
Watch Now on YouTube