Heading, Anchor and Image Tag in HTML

Hello friends,

You all are welcome to this HTML series.

We have learned two things in our last session (iframes and file path).

These both are important things in HTML.

I hope that all of you have tried it on your system.

If you have faced any problem or difficulty while executing iframes or file paths you can inform us on forum.learnvern.com.

We will try to resolve your issues as soon as possible.

Our today’s topic is HTML heading, anchor, and Image tag.

We have used all these tags in our previous session,

But we are going to check these topics in-depth in today’s session.

So, let us start today’s session.

The very first is the heading of the HTML.

As we have seen, we have six types of heading available.

We have tags available from h1 to h6.

And every tag has to be given a fixed size available for us.

So, today we will check the size of these tags.

So, first, we will look upon the program.

In the program, we will run all the tags from h1 to h6.

For example, firstly, I am writing a text Hello, How are you?

Then I am copying this.

First, I am writing this under the h1 tag.

After that, I will write the same under the h2 tag.

Same in the h3

paste <close h3

h4< close h4

h5 < Paste <close h5

and then last run h6<close h6.

Because we have learned the block-level elements, we know that heading tags are block-level tags.

So, as it just got to the end, the new tag will get started from the new line due to that, we have not used the <br> tag.

Automatically h1, h2, h3 will start from the new line.

Now let me just run the program.

So, as we run this program,

you can see that the very first output, "Hello, How are you", is under the h1 tag,

the second is under h2,

then h3,

then h4,

then h5,

and the last is the smallest, the h6.

So, there is a particular size for all these fonts we can see here.

So, today we will see the size of these fonts.

In the slide,

Here is the note in the button that The Height of 1cm is usually 16 Pixels.

So, as we measure the height of the human body, we generally measure that in meters, centimeters, and feet. In the same way, the screen size when we look at the system screen or font size is measured in pixels.

After every pixel,

There is a second measurement method that is em.

So, as either, we use 100cm or 1m.

Here, the same way if we use 1 em, the size of 1 em is given 16 pixels.

I repeat,

If we are using 1 em, its pixel size is 16 pixels. 

Like, if we collect pixels one by one,

When it becomes 16 pixels, we will represent that as 1em.

So, here the size of our header tag has been written in two measures or two units.

The first one is in em & the second is in px.

So, here we will see that starting from 2em, our h1 tag starts.

In the output, we can see the font size of "Hello, How are you?" is 2 em.

So, here our font size is 2em.

If we check this font size in pixels, it will become 16 pixels.

Let us come on to the h2 tag after that.

In the h2 tag, the size is 1.5em (means .5 lesser) than 2 em and in pixels it is 24px.

The same way this is in 1.5em.

After reducing some parts, we are getting 1.17em which is 18.72 px that our h3 tag.

After that, h5 and h6.

So, these font sizes are important, if you are learning web development,

If you are appearing for an interview,

The question might arise, what is the size of the header tag?

What is the size of fonts?

So, in that case, this will be the answer.

You can learn this likewise as 2em, 1.5, 1.17, 1, 0.83, 0.67 & you can remember it in pixels like 32, 24, 18.72 and in the same way.

So, the main concept of the HTML heading is the vision to introduce you to all to what is the font size of which heading tag.

Let us move on further, that is the anchor tag.

As we have learned,

We have to use an anchor tag when we want to redirect to any URL.

So,

Let us say, for example,

I have to go to LearnVern’s website from my current webpage, what I will write is <a herf= after that I want the URL of LearnVern.

Here it is.

Then I will write >Go to LearnVern website, & save and reload.

So, here we have got the URL.

Now, what we will learn today is

First, we will learn about two attributes.

The first one is the href & the other is the target.

So, we have seen href, if we want to redirect to any URL so that URL address, we have to write in href tag.

So, currently,

We have to redirect to LearnVern’s website.

So under href attribute, we have given the path to learnVern’s website.

So, here is the href & the next is the target.

There are two things in the target.

If we want to load a new webpage from the current webpage, we will not write anything in the target.

Default LearnVern’s website will get loaded here.

But I want to open LearnVern’s website in a new tab rather than opening it in the current tab.

In that case, we have to write _blank (i.e keyword) under target to automatically go to the new tab.

If we want to load LearnVern’s website on the same page, we will not write anything.

But if we want to open that in a new tab, we have to write a target.

So, firstly let me remove this portion.

I am saving this & we are looking at only one attribute, that is href currently.

When I am clicking it, LearnVern's site opens up on the same webpage.

Now I am going back and saving it by writing target_blank, after reloading and clicking on the link our page opens up in a new tab.

So,

Here we learned that if we want to open on the same page, we will not write anything & if we want to open on another page, we have to define it as target_blank.

So, here you can see that this link has not been visited yet.

When we open this page freshly or reload it, the site will be shown in blue.

Blue colour means (Here are some appearance written for anchor tag) like if we have not clicked the link then, in that case, the link will show in this colour but as we just clicked on the link and it opens up.

Here, I am holding the link pressed by the mouse button then it is showing in red colour and after leaving it (I double-clicked that is why the pop-up was mentioned) goes to the new tab.

After visiting the site, the colour of the URL got changed to purple colour.

So,

Initially, our URL is blue and while clicking it turns red & then after clicking it turns purple.

So, these are the three stages of the appearance of the anchor tag; like when we have not visited the link, it is an Unvisited link as a freshly loaded page.

When we click, it is a Visited link and while we are clicking it & the URL is in red colour that is the Active link.

So,

When we type any URL in the anchor tag, the URL is shown in three stages.

First is Unvisited, second is visited & third is active as the freshly opened page is unvisited,

The visited link is we have loaded the page & the content is showing purple.

And while clicking the link and the red colour shown up is Active link.

So,

Today, we have seen two attributes in the anchor tag first href as we have seen before.

Also, we have seen the target, if we want to open in a new tab, we have to write _blank.

And how we can give the appearance to our HTML’s link as unvisited, visited and active.

After this, we have an Image tag.

This also we have seen previously,

But today we are going to visit it again for its attributes.

So, the first is when we have to show an image to our webpage, in that case, we use an image tag.

In the last session, we have seen how to use image tag type <img src=" " (source we have to give).

So currently, I am checking that the image of LearnVern we used last time is in the same folder or not.

So, learnvern.jpg and then load the page.

And here is the image.

So, my first attribute in the image tag is the src source. So, the very first attribute we have used is the source. The second attribute is Height & the third is Width. Usually, 

We use height and width simultaneously,

So, let us say I have to give the height of 100 pixels and width of 100 pixels to my image.

So, when I am loading it after applying,

here the size, height and width is shown as 100 pixels. Because the content in my image LEARNVERN is horizontally much longer.

So, when I took the width of 100 pixels.

It seems to shrink & if I want to make this large, I will make it 800 Pixels and then reload.

Now we can see this image widely.

So, these are our two attributes, Height and width.

There are two attributes: source, height and width & the last one is alter alt=.

Let us say that there is no image on the path that we have defined.

Then, in that case, what we have got is the broken image sign.

But if we do not want to show the broken image to the user and want to show a meaningful text to the user that here is an image present but not loading due to some reason, the alter attribute facilitates us when we are showing an image and it is not getting loaded, in that case, you can show and proper alternative message.

So, let us say I have shown LeanVern’s logo & the logo is not loading.

So, here I will write "here is Learnvern Logo" and then reload.

Currently, my image is loaded,

So I will change the path of the image here.

As I just deleted and reloaded it,

Then along with the broken image, a message is shown here that Learnvern Logo is here.

What a broken image represents is that there is an image but currently, it is not loading because of any reason.

Also, I can show a message here that there was an image but, I do not know what the image was, so I can get the message from whatever has written in alter tag that,

What is here in place of the image is the logo of LearnVern.

So,

Here the alt attribute gives us the facility to pass a meaningful message in place of the image if the image is not loading. 

So, these are our four attributes: Source, Height, Width and Alternative message.

Now,

The last is that we can use an image tag as a link.

So, as we know that if I want to use a link, we need to use the anchor tag.

So, in the anchor tag, we write the content.

So, like href” LearnVern’s website path” and here I am writing Learnvern then reloading.

Here we go.

Currently, I have written in the text but if I do not want text and want to click on LearnVern’s image and the website opens up, in that case, what I will do is,

Currently, I have the image in this folder, so here I am writing images/learnvern.jpg.

Let me reload the page.

So, here is my LearnVern’s logo.

I am just removing the height and width from this so that my logo will look proper.

So, on clicking on the image nothing happens but,

when I click the image the website opens.

But, I want to open the site by clicking on the logo not by clicking on the link.

So,

What I will do is I will remove the logo of LearnVern & I am writing all this in a single tag by cutting this image tag. That means I have written the image tag under the anchor tag, now reload.

So,

Now the link has been removed & when I am hovering over the logo you can see my cursor like a hand cursor which means my cursor is showing a pointer.

Now,

Here is the logo turned into a link,

So,

As I am simply clicking the logo, it will redirect me to LearnVern’s website .

Currently, this LearnVern’s image serves as a URL.

We have learned how to turn any image into a link.

It is a simple way,

Firstly add the URL which you want to redirect under <a tag.

So, I have added LearnVern’s URL, as I want to go on their website.

After that inside the a tag, we have to use an image tag where we will write content in words.

We can add any image here but just remember to alter the alt= tag.

So you get an alternative tag or a description that the image you are loading is not available & you will get a meaningful message in place of that.

So, this is our image tag and image tag’s attributes src, alt, width and height and how we use the image tag as a link.

In today’s session,

We have learned three things the heading tag,

the anchor tag and the image tag that we have learnt in-depth.

So, I hope you all must try it in your systems by creating the webpage and trying all these tags.

Observe and note the difference in heading tag

try anchor tag and image tag as a combination.

If you face any difficulty while performing the examples in the tutorial,

You can inform us on forum.learnvern.com.

We will try to revert as soon as possible.

In the next topic, we will discuss the HTML table.

See you there guys,

Thank you!