Hello, guys, I am Shahzad Ahmed and welcome election number six. Today we are going to discuss about the anchor and the images. So how can you show your images? First of all, we are starting from the images. So you have to we are working on the index dot HTML file, because this is the file, we are working on it. So this is the title.

And these are the elements or sorry, these are the tags. And I can say this HTML is the element header element. Okay, we are defining our elements or anything in the body sections. First of all, how can you show your image and as you can see, I have this image. So how can you show the image on the web browser or sorry, on the web page. So, why I'm saying web page because, and that's what HTML is a file and I can say this is the webpage because this file You can execute this file on the browser.

Okay? So that's why I'm saying the webpage Okay. So now write your tag, tag, listen sign IMG IMG is a tag name. And now close your IMG. Okay, because you are starting your HTML, and now you are closing your HTML. But you don't need to close the image tags before the call, you can start your few tags, like IMG tags, and we will discuss about other tags.

So you don't need to close these tags. So just use the image tag First of all, and the property which is the SRC, that means we are saying that fetch where where is that image? Where is the actual image? I'm saying that this is the file and I have to To copy one image, so this is the image, I am pasting this image here. And now the image name is for suppose first and make sure you have to check that type of the image. So this is the J, JPEG jpg image.

So mostly you have a jpg, jpg, png, and other formats images. So this is a jpg image format, because the file and the image available in the same directory. So that's why I'm saying that just first dot jpg, okay, go to URL. Now, this is the file index dot HTML file. So as you can see, this is the index dot HTML file, go to your folder, click on the index dot HTML file, because this is that large file, so that's why it's showing us Okay. Okay, so this is a file.

This is the image possible, if you will, if you have a folder like images. And you can cut your file and you can paste your file here. So now your images, your image is not here. So go to your page, refresh the file. So now as you can see, it's not showing you image because as you can see failed to load resources where the JPG is not available, because your file is exist on the HTML folder, but your image is available inside the images folder. So how can you define the folder I'm saying that go to the images folder and find the first dot jpg, go to your page, refresh the go to your browser.

And now refresh the page. So now as you can see, it's showing us the image. So in this way you can show your images first of all and in this way if you have if you have any images available inside your enter directories you can define your directories for suppose, if you have another inner directory for suppose enter and your image available inside your image directory, refresh the page. So now we can see it's not showing us image because you are saying that image is available inside the images. And the image name is this bird in the images sections. There's not available the first dot jpg image.

So that's why I'm saying go to the image folder. And inside the image folder, we have another folder name inner. So I'm saying inner. In the inner folder, we have the first raw JPEG file or the image refresh the page. Now as you can see, it's showing us the image okay. So in this way you can create your images.

And now what is the anchor for suppose How can you join your two pages to webpages This is our official website. First of all, I have my this is the file as you can see it's a file, and it's showing us some information and payment options. This is another file. So how I have to define our or I have to link these file, right click inspect element. So as you can see, I'm using the anchor and I'm using the link of the file where is the file available? So don't worry about it.

I am going to explain each and everything. So in the HTML file, we have our index dot HTML file, we have our second dot html file. For suppose I am saying Sorry, get focused Second. Okay. Suppose I'm saying, one, I'm defining h1, and I'm saying this is my homepage. And I am defining anchor anchor href h ref.

Make sure double quotation equals two. And now I have to close my anchor. Right your patriot first of all I'm saying second, go to your page, refresh the page. Now as you can see, I have to break this. Via that means break the row. As you can see, it's showing me that second so this is your homepage.

And now I have to open this second page Now I am writing open the second page, just drag your second value prop here. So this is your second page, I am saying this is my second page, and I am defining the anchor href href correlation quotation, and I'm closing the anchor here. And now I'm staying home, go to your browser, refresh the page. So now if this is your home, this is your second page, and this is your first page, okay? It's saying second, go to the second page, and I'm saying go to the homepage. If I click this, it's not going to anywhere.

Why? Because I have to define where is the file in the index dot HTML file. I'm saying that we have a file name, second dot html Okay, now go to you. Okay, go to your page, refresh the page, and click on this file, click on this. So now as you can see, it's currently showing the second dot html page. Okay, it's working fine because you you have connected to files.

And now I'm seeing on the second dot html file, I'm saying we have that index dot HTML file. Go to your page, refresh the page. And now click on the home file. As you can see, now we are at the index dot HTML file. Click on the second we are at the second HTML file. So you can create your anchor or you can select anything like this.

First of all, you are two files available on the same directory sorry in the same directory. As you can see, you have your index HTML directory and you have your two files for suppose if Your second file is available inside the images folder. And now, go to your page refresh the page. Now click on the second link, it's saying that your file was not found or you will find an error 404 that means page not found, because you are saying because you are saying that this file index dot HTML file is available on the HTML folder. But you are saying on the same folder, you have your HTML dot second dot html file, but as you can see, you don't you do not have any second dot html file here you have the second HTML file in that images directory. So you have to define that go to the first of all, go to the images directory, then find the second dot html file.

Okay, so now Go to the page refresh, go to the page. Now click on that second so as you can see it's working fine. So in this way you can define your pages and go to your and and how can just go to you just click on the first of all go click on this second link now click on the homepage it's not finding the page because your second dot html folder available on the in the images directory but your index dot HTML file, just click on this and drag and drop here you are saying that in the images folder, you have your index dot HTML file. So as you can see here, you do not have any index dot HTML file your index dot HTML file available in the previous directory in which directory index dot HTML. So now I have to say that double dot That means I am saying that go to the previous directory and find the index dot HTML file.

Now this is that second. Now click on this link. It's saying it's showing you the home page click on the second is showing you the second page, click on the sharing the homepage. So in this way you can create your anchor and you can create your images. So I think this is enough for today. In the next lecture, we are going to cover some other topics related with HTML.

So thanks for watching.