Sunday, April 20, 2025

HTML Images as Links

It's easy to use image as link to other web pages on internet. But first, how to set textual link ? To do that we will use a tag. In this case we are pointing to Google:

<a href="https://google.com">Google</a>

Http stands for Hyper Text Transfer ProtocolHttps means encrypted connection. Just http means unencrypted connection, that can be easily intercepted on internet. Today most of the sites provide https.

For example, this is how to point to Yahoo:

<a href="https://yahoo.com">Yahoo</a>

Ok, what about image as link. No problem. We will put image element inside a element, like this:

<a href="google.com"><img src="trol.jpg">Google</a>

Easy. We can have links inside ordered or unordered lists, too:

<ul>
	<li><a href="https://google.com">Google</a></li>
	<li><a href="https://yahoo.com">Yahoo</a></li>
</ul>

With CSS we will have a much better options styling our images and links. 

<!DOCTYPE html>

<html>
<head>
	<title>Security Tutorials</title>
</head>

<body>

	<h1>Links, Image as Link</h1>
	
	<a href="https://google.com">Google</a>
	
	<br><br>
	
	<a href="https://yahoo.com">Yahoo</a>
	
	<br><br>
	
	<a href="google.com"><img src="trol.jpg">Google</a>
	
	<br><br>
	
	<ul>
		<li><a href="https://google.com">Google</a></li>
		<li><a href="https://yahoo.com">Yahoo</a></li>
	</ul>
	
</body>
</html>

No comments:

Post a Comment

Tkinter Introduction - Top Widget, Method, Button

First, let's make shure that our tkinter module is working ok with simple  for loop that will spawn 5 instances of blank Tk window .  ...