HomeОбразованиеRelated VideosMore From: mmtuts

15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | HTML Tutorial | Basics of CSS

750 ratings | 86926 views
How to insert images using HTML and CSS | Learn HTML and CSS | HTML tutorial | Basics of CSS. In this lesson we will learn how to create an HTML image in our website page. We will learn how to insert images using HTML and we will learn how to insert images as a CSS background image, which also allow for us to create banners. ➤ GET ACCESS TO MY LESSON MATERIAL HERE! First of all, thank you for all the support you have given me! I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you! I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach. I hope you will find it helpful :) Material for this lesson: https://www.patreon.com/posts/html-15-download-15593802
Html code for embedding videos on your blog
Text Comments (85)
Kahli Marie (19 days ago)
did not help. My image never showed up
Amie Johnson (16 days ago)
I am new so don't know if this will help you, but i couldn't get anything to load until i realized i didn't put a ; after my url on the style sheet, worked afterwards
(22 days ago)
the eye is looking good!
vince sanchez (23 days ago)
Why did you not type the rootfolder15 example, ../rootfolder/img/
Katsuki Bakugo (1 month ago)
HEELLLPPP i am trying everything from changing the path to renaming the image. nothing i try works.
Yassine Alaoui (9 days ago)
make sure the image type is what u type after path ( path/name.type)
Kevin Trinh (1 month ago)
how do u rotate images?
Sergio Espejo (2 months ago)
amazing content
Nathan Diepeveen (2 months ago)
You might want to set the width to 100%.
Volkan Oz (2 months ago)
how is it that i can see the picktur after you mede a coment out of that code
Sergi-OG (2 months ago)
Guys to display the image don't type "jpg" or "gif" at the end of the name of the image inside the folder, just put the "jpg" or "gif" inside the html document.
Katsuki Bakugo (1 month ago)
i did that it still didnt work
Ahmad Huzaifah (2 months ago)
Thanks
Jordan Dauber (2 months ago)
Thank you that helped me alot i was struggling
HOSPITAL PARK (2 months ago)
Very well done series you have here. Surprised you don't have a LOT more views!
ahmad maryam (2 months ago)
Can Someone explain the 5:30 Math thing plzzz :)
Aziz almofaqer (2 months ago)
he divied the width and height by 4 to get the same exact image but smaller one
Cai Shang-Hao (3 months ago)
thanks!
Pixel Pavel (3 months ago)
lol didnt know about the alt search results, I thought it just types the text if the picture is missing.
Crg Mcd (1 month ago)
I learned it's for the blind apparently it reads a description of the image off to them. The more you know.
HardcoreWeeaboo AQW (3 months ago)
Hey! How do you so that image you had covers the entire screen (without changing the widht and height if it is possible?) Because if you have an image that covers the whole screen and then you zoom out, the picture doesnt cover the whole screen anymore. I want it to no matter how much you zoom out, the picture will always cover the whole thing, do you know that can be done?
Vmpere (1 month ago)
Use percentages instead of pixel widths. So it'd be width:100% and height:100%
Arfa tanzeem (4 months ago)
great which note pad are you using for this
mmtuts (4 months ago)
Atom
Richard Twum (4 months ago)
I don't understand the calculations done in website, Can you please explain sir?
How this program called?
Olivier White (10 days ago)
atom
LeFroxx (4 months ago)
oh youre such a great teacher
GoodToMyself (4 months ago)
Hello! Loving the series so far. This is the only episode I'm having trouble with as my image is not loading. I have it set up exactly as this video, with the exception of keeping the content like contact, portfolio and about me pages from previous videos. Any suggestions? Both HTML and CSS versions of this do not work for me. Thanks.
sherilyn silviani (5 months ago)
thank you so much for this video, you have no idea how much you've helped!
Rose Pat Leah (5 months ago)
Thanks 😘😂
Kaleem Adamjee (5 months ago)
kid talks without full stops. . . .
mmtuts (5 months ago)
Being provocative by calling a 28 year old a kid is not going to somehow make you sound older and wiser. Also there is an amazing feature on YouTube that allow you to pause videos in case you have trouble following along.
i did the first way, and its worked. But, the second way does not work. this my code; in HTML <img src="image3.png" alt="flower" class="img-thumb"/>. i think i type it correctly, but when i execute it, nothing is happen. any solution?
Esra 7:10 (5 months ago)
Thanks.
Daiz7788 (5 months ago)
Hi, I was wondering how you would insert multiple images. Say you have a folder named images and you have 4 images inside. How you would insert all the images into your webpage? Would you create an img tag for each one?
Yameen Irteza (22 days ago)
yupp you will have to create it for each of them unfortunately, but however you can style them altogether by a class or an id if you want, which will somewhat be time-effective.
Iran Becton (5 months ago)
is this the same method if you want include a image in the header ?
mmtuts (5 months ago)
Yes
Tashfia Tahsin (5 months ago)
Dope
Mounir Ps (6 months ago)
Sorry I didn't complete the video, because I have a severe cold and I couldn't look at your big eye background. thanks anyway :-(
Karen Francisco (6 months ago)
I can't see the picture? But i did the same thing you did :c
piano0011 Lee (8 months ago)
With the first method, can you move the pictures around?
MissCaramelSmoothie (9 months ago)
Ok, I'm really going to have to study margins, padding, borders, pixels, percentages, height and width. It seems like the sizing is tripping me up and I'm going to have to learn which size attributes to use and when and how many pixels/percentages.
Christoffer Gavin (9 months ago)
i want to know how i can move the image around? cus i want my image to be on top of a border that i have. can someone explain?
ChArgE (7 months ago)
<br>
Nicholas C. (10 months ago)
Man I love ur editor, what's the name,always put it in the desc thanks
mmtuts (10 months ago)
Atom :)
Lia Sue Kim (11 months ago)
I forgot to mention that you have beautiful eye
Lia Sue Kim (11 months ago)
i wonder if you could show me when you set the width of wrapper and when you publish website what is going to be outside 1000px; liquid layout is clear but fixed layout is not ? does it look empty outside 1000px box
Khairul Zuhairi (11 months ago)
your video just wow ! you make me amazed on how you teach people on this tutorial ! hope god bless you for this free tutorial ! love it so much !
baris karaer (11 months ago)
i get that it is very in depth but i cant really find any use for some aspects of this.
baris karaer (11 months ago)
mmtuts okay awesome. I am a cs student and these tutorials are on point. Thank you so much for the help :) keep up the great work.
mmtuts (11 months ago)
Now first of all, I just want to mention that it can be a bit overwhelming when you learn this much information this quickly. And it can be tough to remember it all at once. Over time as you start creating websites you slowly start learning more and more as you become more familiar with it. So don't worry if you can't remember it all straight away :) All these different stylings are just guides to show different effects/stylings you can apply to your content. They are not all required and you should just see them as tools :) Take "background-repeat: none;" for example. If you create a banner with a background image, and notice that because the image is weirdly scaled/sized the background repeats along one of the borders, then you can use this styling to prevent this. And the same goes for "background-size" which is very popular to use when creating background images. These are all just tools to help reach certain looks on your website :)
baris karaer (11 months ago)
absolutely. well, i have been following the tutorials since yesterday and some codes like width, height looks important but codes like background-repeat or background-size seems unnecessary. Its kinda complicated and i got confused at this point. Are these codes really important while we make a website ?
mmtuts (11 months ago)
baris karaer Care to elaborate? :)
Stoney_Eagle (11 months ago)
Now add a js that makes you scream if you click on it 😂
Kunal Behl (1 year ago)
why it isn't working on my browser chrome Em using latest version of this browser using sublime text editor n copying your same code!
mmtuts (1 year ago)
Try clearing your browsers cache. This often helps since the browser sometimes saves information about a website, which makes it longer about showing sudden new changes made in HTML and CSS.
Ivan Vrgoc (1 year ago)
Thanks! Great job with the videos
DeathDrive (1 year ago)
Great English!
aljaz mesec (1 year ago)
when i set the image and run the programm the picture is not shown.
Yassine Alaoui (9 days ago)
+Jacob Dreisbach make sure the image type is what u type after path ( path/name.type)
Jacob Dreisbach (1 month ago)
aljaz mesec same
Nosa Izevbigie (1 month ago)
SAME WITH ME. IVE DONE ALL MY POSSIBLE BEST ITS HELA FRUSTRATING
Crg Mcd (1 month ago)
Here to say the same and I can NOT find where to sort this issue, making my brains hurt hard!+Zyngi GT
Zyngi GT (4 months ago)
same
DARK ZERO 370 (1 year ago)
+mmtuts I don't know why, but when I set the background image I can't see that.Could you tell me why? I use Chrome right now
DARK ZERO 370 Issues required commonly, if you do a mistake check the img element did that is correct or not? <img src="image.png" alt="image"> set the image named like eye, friend, fun and much more. note: your image should be placed on your that you have saved html and css file rootfolder. It will be best for you! best of luck!
piano0011 Lee (10 months ago)
I am having the same problems but have found that IE is more stable....
Amon Ra II (1 year ago)
I saw a similar comment in a previous clip as well. I guess what a lot of people are confused about is that in Windows, the default setting of known file extensions is to hide them. For example: .jpg .txt .gif etc... are hidden since these are known file types by Windows. I think that when people try to change a file name, they also try to change its extension (for example they create a .txt file and try to change it to .html) and since the extension is hidden, windows will save it as something like index.html.txt rather than index.html To do that, you should go to "Folder Options" and untag "Hide extensions for known file types". Only then you can change the name and the extension at the same time. Hope it helps somebody out there.
Jonattan Escalante (1 year ago)
I'm sorry. Could you be more thorough? What do you mean rename it so it doesn't have .jpg. What are you renaming it to?
aljaz mesec (1 year ago)
hey i found the solution, you should click on the image and click open so that it opens it in atom, the rename it in your file so that it doesnt have the .jpg at the end
CenKa (1 year ago)
Great content like always!
Danny Black (1 year ago)
Hello. In my case when i use background-size : 100%; image was cuted at the bottom why ?
Tech New (1 year ago)
Your videos are very good. please make a video on live chat system
Haider Irshad (1 year ago)
I have been following your tutorials since quite a lot of time now... And i found them very usefull i have a request if you can launch a complete series of code igniter that would be greatest thing on the planet earth... Plz sir do it....
Suffi's Academy (1 year ago)
Sir can you give me your email... I have to talk you some personal please!
Mr. Sinha (1 year ago)
how many computer languages do you know except PHP and HTML?
Dopiez (1 year ago)
Nice
Thanks you ! Very good. (ô);
Frity (1 year ago)
Yay
AnonyMikz (1 year ago)
Wow! Nice audio

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.