The image tag

Have you ever made a picture collage? It does look good, right?

We can also make our webpages more interactive by adding images to it using <img> tag.

Denotation: <img/>

Location: It’s placed inside the body tag.

Usage: Let’s help you add an image to the page.

The tag is used like this:

<img src=”image’s path”/>

src is an attribute to include the image’s path

An attribute Provides additional information about your html tag.

The page would look like this

FYI: The image’s path can also be an image URL.

 <body>
	<img src="www.google.com/images/spyderman.png"/>
</body>

Let’s move on to learn another special tag.

Don’t get confused, attributes are explained in detail in a later section. Let’s try this.

<body>
	<img src="KumfuPanda.png"/>
	<p>I ain't happy :/ </p>
</body>

FYI: For simplicity we’ve saved all our images and files in the same folder. Hence just the image name was included.

The division tag

A simple straight webpage, will it look good and be appealing? Of course not. Hence, the div tag comes into the picture

Denotation: <div> </div>

Location: It’s placed inside the body tag.

Usage: Let’s get you to divide the page into sections. Let’s give this a try:

<body>
	Can I meet my other half? Please. 
	<div>
	<p>Don't worry, I'll meet you soon</p>
	</div>
</body>

Click/run to see the output

The title tag

What’s there in the title?

Just like the title of Mr. or Ms. adds meaning to your name, similarly you might have noticed the text in your browser window?. That’s the use of a title tag.

Denotation: <title> </title>

Location: It’s placed inside the head tag.

Visibility: Not on the main page

Usage: Lets you provide special instructions to the browser.

Curious to see how it works? Try doing this:

<head>
<title>Can you see me? I am title</title>
</head>

Check your browser window, you’ll be able to see the text written inside <title> tag

FYI: <title> tag is very helpful for search engines.

The anchor tag

Foodies, if we had a connecting door to the kitchen, directly from our room, wouldn’t that be fun? Similarly, to embed other web pages’ links to your web page, an anchor tag is used.

Denotation: <a> </a>

Location: It’s placed inside the body tag.

Usage: Linking between web pages.

Here is, how you can use it:

 <body>
	<a href=”https://pyprogramming.org/>I think you should try clicking this</a>
</body>

href– is another attribute used to define the link. I Think you should try clicking this, Click this.

Write A Comment