Hello everyone. In this chapter we're going to learn about images. We're going to learn how to change the image, how we can change each its permissions, and how we can change the pitch the ground with a wall don't use the background color, or background image or the background of some old age. Then we're going to learn how to align images relative to text and help us all attributes and what is its usage. Okay, let us start with our first example. Now we have the simple page just displaying an image.

Now let us see its source code. Okay, simply use all mg stands for image, then source equals your image. Now this is very important to understand with some information that you need to live, there is the word, I can type here, different types of styles. Again, I can upload my image to web, then take its full cost luggage fee www.is, the 4.3 dot com slash Muscovado gbg, for example, or I can write its full costs. But of course this will be a problem whenever you upload your website to the internet, or if you go to open your page from Amazon nation. So the best way is to put your images in the same post office The HTML file of course, if you don't use ponders lucky, sometimes I create the folder token just then you simply IP source equals images slash and use forward slash, Muscovado TV some operating systems or case sensitive like Unix, Linux.

So it matters whether you wrote you can use capital or small anyway for us. Now I use the image take and I have the image that I need to include in the seal force of HTML file. So now I have my final version appearing like this. This is how we use the image. Okay, in second example, we're going to learn how to align images like it appears By default, it's exactly like the case. And this is very good thing to learn that you can combine your tags without any problem.

So I have used the Align equals ellipse to align lip, which is a report, then online, simple then online, like we have learned the same thing, but with taste. If our content was an image, like what we have included in the previous example. Now saved example, we're going to learn how we can change its dimensions, like images appears. They appear in the same dimension of the original image, but what if I need to change it's with a knife. For example, if I have Specific space that I need to report. So in this case, you simply add attributes for width and height.

So I have changing the default width and height of the original image and maybe 304 hundred. And as you can see, I have also use the Align equals center in order to center align the image. So in this example, we're learning also how we can combine different tags and attributes. Now, if you need to change the background color it's simple. No, this is Non metallic is in order to change your background color, you simply add BG color background color to the body, and right here any color that you want. Okay, so as you can see because my background color is blue, and I'm using my text which appears blank by default, so that it doesn't appear.

So you have an exercise here. Please create the text This is normal text with different phone color is different foam faced with different size and different effect and make it look better than this. But simply in this example, we'll learn how to modify our big round to make it What if I need to change it to make it an image like this Simply use the ground like this, instead of physical, just use it to view the ground. And here include the path of the image that you need to use. Of course, there are some effects that you can use in order to make it appear only once it doesn't have to repeat. Once there is a trick here, you can use a big image so that it feels and to propose your space.

You can use CSS, which is another course that I'm teaching also in order to modify these effects. Okay, in this example, we have learned how to deploy power the ground to be a damage and in the same way, you must Put your image like this, it's a relative pause the two can read and is accessible by the human eye. Now our final example, now we need to use images and texts together, how we can use them together. So, as you can see, we have totally different effects. No need to see how this looks like okay. Now I use an image, this is its source and I have used here something going on.

Now how this is used now for images for example, if doesn't float for any reason, or if the image link is broken. So in this case, the alt attribute whatever is written in the alt attribute appears in the state of the image and also appears whenever the images still loading. If you have, for example, a connection problem, or your internet is so slow, so this alt attribute will be displaying continue image is loaded. Now, whenever I use the attribute, align equals bottom, then this means whatever tech is, I'm including here is going to appear with bottom line as you can see here, this is the bottom line. And here it's middle, aligned, and here, it's top align. So as you can see here, it's just changed over alignment view this is align equals middle, this is aligned equals top okay we have also Align Left and right well this will have this effect as you can see whether the image is going to appear on the left or is going to appear on the right.

So, as you can see, now you have image is appearing on the left and here image is appearing on the right. And the contrary holds ethics. So, simply use these attributes align equals in align equals right. Okay, so in this chapter, we have learned how to align images, how to change its dimensions and we have created different On the ground effects, whether it's color or an image, and we'll have learned also how to use different alignments to the page and how we can use. Okay guys, this is the end of chapter five. And we have learned here about injuries.

Thank you. See you next time.