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

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

462 ratings | 49601 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 (58)
I run arch BTW (3 days ago)
lol didnt know about the alt search results, I thought it just types the text if the picture is missing.
HardcoreWeeaboo AQW (15 days 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?
Arfa tanzeem (1 month ago)
great which note pad are you using for this
mmtuts (1 month ago)
Richard Twum (1 month ago)
I don't understand the calculations done in website, Can you please explain sir?
How this program called?
LeFroxx (1 month ago)
oh youre such a great teacher
GoodToMyself (1 month 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 (1 month ago)
thank you so much for this video, you have no idea how much you've helped!
Rose Pat Leah (2 months ago)
Thanks 😘😂
Kaleem Adamjee (2 months ago)
kid talks without full stops. . . .
mmtuts (2 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 (2 months ago)
Daiz7788 (2 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?
Iran Becton (2 months ago)
is this the same method if you want include a image in the header ?
mmtuts (2 months ago)
Tashfia Tahsin (2 months ago)
Mounir Ps (2 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 (3 months ago)
I can't see the picture? But i did the same thing you did :c
piano0011 Lee (5 months ago)
With the first method, can you move the pictures around?
MissCaramelSmoothie (6 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 (6 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?
Tobias Jeppesen (4 months ago)
Nicholas C. (7 months ago)
Man I love ur editor, what's the name,always put it in the desc thanks
mmtuts (7 months ago)
Atom :)
Lia Sue Kim (8 months ago)
I forgot to mention that you have beautiful eye
Lia Sue Kim (8 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 (8 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 (8 months ago)
i get that it is very in depth but i cant really find any use for some aspects of this.
baris karaer (8 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 (8 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 (8 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 (8 months ago)
baris karaer Care to elaborate? :)
Stoney_Eagle (8 months ago)
Now add a js that makes you scream if you click on it 😂
Kunal Behl (9 months 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 (9 months 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 (9 months ago)
Thanks! Great job with the videos
DeathDrive (10 months ago)
Great English!
aljaz mesec (11 months ago)
when i set the image and run the programm the picture is not shown.
The king of dark (28 days ago)
DARK ZERO 370 (11 months 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 (6 months ago)
I am having the same problems but have found that IE is more stable....
Amon Ra II (9 months 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 (10 months 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 (11 months 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 (11 months 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?
WantToBePals (1 year ago)
Thanks you ! Very good. (ô);
Supine (1 year ago)
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.