IMAGE REDIRECTS TO COLLEGE WEBSITE
<!DOCTYPE html>
<html>
<head>
<title>College Website Link</title>
</head>
<body>
<a href="https://www.srmist.edu.in/" target="_blank">
<img src="https://via.placeholder.com/150x100.png?text=SRM" alt="SRM" style="float:left; margin-
right: 20px;">
</a>
<p>Click the SRM image to visit the SRM website.</p>
</body>
</html>
Image link with external css for layout
<!DOCTYPE html>
<html>
<head>
<title>External CSS Image Link</title>
<style>
.container {
display: flex;
align-items: center;
img {
margin-right: 20px;
width: 150px;
</style>
</head>
<body>
<div class="container">
<a href="https://www.google.com" target="_blank">
<img src="https://via.placeholder.com/150" alt="Google">
</a>
<p>Click the image to open Google.</p>
</div>
</body>
</html>
IMAGE STYLED WITH BORDER AND HOVER EFFECT
<!DOCTYPE html>
<html>
<head>
<title>CSS Hover Image Link</title>
<style>
img {
float: left;
margin-right: 20px;
width: 150px;
border: 3px solid #333;
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.1);
border-color: blue;
</style>
</head>
<body>
<a href="https://www.wikipedia.org" target="_blank">
<img src="https://via.placeholder.com/150" alt="Wikipedia">
</a>
<p>Hover over the image to zoom. Click to open Wikipedia.</p>
</body>
</html>
CIRCULAR IMAGE LINK USING CSS
<!DOCTYPE html>
<html>
<head>
<title>Circle Image Link</title>
<style>
.container {
display: flex;
align-items: center;
.circle-img {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin-right: 20px;
border: 4px solid #555;
.circle-img img {
width: 100%;
height: 100%;
object-fit: cover;
</style>
</head>
<body>
<div class="container">
<a href="https://www.youtube.com" target="_blank" class="circle-img">
<img src="https://via.placeholder.com/150x150.png?text=YouTube" alt="YouTube">
</a>
<p>Click the circular image to go to YouTube.</p>
</div>
</body>
</html>
CLICKABLE IMAGE REDIRECT WITH CSS STYLING
<!DOCTYPE html>
<html>
<head>
<title>Image Link Example</title>
<style>
.image-link {
display: inline-block;
border: 3px solid #4CAF50;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s;
.image-link:hover {
transform: scale(1.1);
img {
width: 300px;
height: auto;
display: block;
</style>
</head>
<body>
<h2>Click the Image to Visit Example Website</h2>
<a href="https://www.example.com" target="_blank" class="image-link">
<img src="https://via.placeholder.com/300x200.png?text=Click+Me" alt="Clickable Image">
</a>
</body>
</html>
ANCHOR TAGS
MULTIPLE LINKS TO POPULAR SITES
<html>
<body>
<h2>Useful Links</h2>
<a href="https://www.google.com" target="_blank">Google</a><br>
<a href="https://www.youtube.com" target="_blank">YouTube</a><br>
<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>
</body>
</html>
SIMPLE INTERNAL LINKING WEB PAGE
<!DOCTYPE html>
<html>
<head>
<title>Simple Internal Links</title>
</head>
<body>
<h2>Navigation</h2>
<ul>
<li><a href="#section1">Go to About</a></li>
<li><a href="#section2">Go to Services</a></li>
<li><a href="#section3">Go to Contact</a></li>
</ul>
<h3 id="section1">About</h3>
<p>This is the About section of the page. It gives information about the website or the person.</p>
<h3 id="section2">Services</h3>
<p>This section lists the services provided by the company or website.</p>
<h3 id="section3">Contact</h3>
<p>This is the contact section. You can add phone numbers, emails, or address here.</p>
</body>
</html>
TO CREATE A WEB PAGE WITH PINK BACKGROUND WITH RED MARQUEE
<!DOCTYPE html>
<html>
<head>
<title>Moving Message with CSS</title>
<style>
body {
background-color: pink;
marquee {
color: red;
font-size: 20px;
font-weight: bold;
</style>
</head>
<body>
<marquee>Welcome to My Web Page!</marquee>
</body>
</html>
SHOW MESSAGE ON BUTTON CLICK
<!DOCTYPE html>
<html>
<head>
<title>Alert Example</title>
<script>
function showMessage() {
alert("Hello! Welcome to JavaScript.");
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
AN ORDERED LIST OF THIRD SEMESTER SUBJECTS
<!DOCTYPE html>
<html>
<head>
<title>3rd Semester Subjects</title>
<script>
function showSubjects() {
document.getElementById("list").innerHTML = `
<ol>
<li>Data Structures</li>
<li>DBMS</li>
<li>Web Programming</li>
<li>JavaScript</li>
<li>Computer Networks</li>
</ol>
`;
}
</script>
</head>
<body>
<h2>Click to View 3rd Semester Subjects</h2>
<button onclick="showSubjects()">Show Subjects</button>
<div id="list"></div>
</body>
</html>
