HTML Tutorial 3 – Adding Images & Backgrounds To Your HTML Website

HTML Tutorial 3 – Adding Images & Backgrounds To Your HTML Website

July 12, 2019 35 By Bernardo Ryan



hey YouTube it's ed Johnson here until there is the third part of our HTML tutorials today I'm going to be showing you how to add images to your websites so let's get started okay so the first thing you want to do is you want to create a folder mind website you can call yours whatever you want and inside the folder you want image or images that you want to add to your website mine's just called image and it's an example image and so now you want to open up notepad I'm going to maximize it and I'm going to type in the HTML standard tags you should have learned these if you watch my previous videos if not refer back to the ten and this will make a lot more sense so the HTML behead and the title tag the title that you want and close the head tag and open the body tag and now the new tag IMG SRC equals open speech marks now we'll go back to the folder where the images and as you can see it's called image and it's a dot it's a PNG extension file so we're going to put in the SRC image image dot PNG clay speech marks and close the tag and this is and you want to save it you want to make sure it's saved in the website folder so the same location you will make sure it's saved as the same location as the image so index dot HTML or whatever you want or HTML and now I'm going to open that HTML document that we've created here opens up in Firefox and as you can see there's the image it's there plain to see and now I'm going to show you what happens if you don't save it in the correct location so if we save if say we save this to the desktop where the image isn't the image isn't present and open it up you'll get an error and it says it con it can't find the image because it's not in the desktop location it's in a totally different folder so that's what happens if save it to the wrong place simply can't find an image that it wants to load up and that's what happens and I'm going to show you how to add a border now and border equals open speech marks however many you want a number px px stands with pixels close beachmarks and close the tag and open up the HTML document oh it hasn't worked it hasn't worked because we're saving it to the desktop still and we want to save it to the website folder and wh TMR Said's that um and refresh and as you can see you've got a five pixel width border a default color for the border it's black we're going to change the border to 20 pixels just to give you another example refresh your page and there you go 220 pixels around the image file you've got so that's how to add a solo image how to add a single image now I'm going to show you how to add a background image this is my background so you can add whatever text or whatever content you want here and in the body tag you want body space background equals open speech marked and the image file again so in our case it's image dot PNG it can be jpg PNG gif jpg and there's a whole range of them and click refresh and as you can see the background image has repeated itself again and again and there's the text this is my background and so that's how to add images in and background images to your file thanks for watching guys please subscribe for more videos soon