15: How to Insert Images Using HTML and CSS | Learn HTML and CSS | Full Course For Beginners
HTML-код
- Опубликовано: 21 ноя 2017
- FIND MY 2023 COURSE HERE: • 1 | INTRODUCTION TO HT...
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: / lesson-material-42361704
NEW UPDATED 2023 COURSE AVAILABLE! 🙂
You can find it here: ruclips.net/video/v8jDnBYc0bs/видео.html&ab_channel=DaniKrossing
For those having trouble in seeing their image, place the folder where the image is located to the same folder of the html document you are trying to place the image on. Worked for me.
THANK YOU SOO MUCHH, EVEN THOUGH I don't know you
THANKS
Bless you
Thanks mfer.
Thank you
This is the best video that I've come across. All videos should be made this way. Straight to the point and well explained. Thank you.
thank you so much for this video, you have no idea how much you've helped!
Thanks a lot!! this videos had helped me so much! better than the coursera videos where they talk and talk introduction and never go to the point of teaching. You are a great teacher!
Thanks a lot Sir, these tutorials helped me a lot about Inserting Images and other functions using CSS! God Bless Sir and more power to your channel
OH MY GOD, THANK YOU!!!!!!!!!!!!
NOBODY WOULD FRIGGIN' EXPLAIN WHERE I NEEDED ALL MY FILES AND STUFF, AND IT HAS TAKEN ME ALMOST A WHOLE DAY TO FIGURE OUT HOW TO GET IMAGES IN THE BACKGROUND OF MY PAGE!!!!!!! THANK YOU, THANK YOU, THANK YOU!!!!!
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 !
Dude, there are good videos out there and i learned a lot, but yours is so well structured and how you split your videos... Thank you
Please help me. It works if I browse with Google chrome not Mozilla Firefox. Why
Thanks
no wrong
THANK YOU SOO MUCH!
I COULDNT FIGURE OUT HOW TO INCLUDE IMAGES SO THEY ARE RESIZEABLE BUT NOW I KNOW!
MY WEBSITE PROGRESS MIGHT HAVE BEEN AS GOOD AS DEAD WITHOUT YOU!
Best video ever. Thanks for that, this was so confusing to me
I am so happy I found this channel,I have struggled a lot before with inserting images but now I can after watching this video,your work is well structured and very helpful even to people like me who are new to coding...thank you so much
How well did you improve in html from the time you wrote this comment, I also just started today
This is my first video on your channel, you were great at explaining everything, now I can customise my images better. Thank you!!!
This is what I needed!! I'm making a scorebug, and I'm wanting to insert a pic of the Teams logo inside the box that has their score in it! Thank you so much!
Such a good tutorial thank you! Also I love the voice quality. You have a really clear voice.
You are getting me through my class! Thank you!
Very well done series you have here. Surprised you don't have a LOT more views!
just started learning programming at my late age. this tutorial is really helpful.
Thanks! Great job with the videos
Thanks a lot for this video, i search everywhere for this, you really helped me..
You're an awesome teacher. Thank you so much for the content as I have learnt a lot from them. God bless you so much.
Man you have helped me so much thanks ...You are doing some awesome job..
Wow, this helped me understand image styling a lot more Thanks a lot. Right now, I’m testing my web page using external style sheets with a link tag inserted in head is not connecting? Thanks I’d really appreciate your help?
That was exactly what I needed bro, thanks a lot
thanks this helped alot had to search through many videos to find how to do this !
Dude I love you it has taken me so long to figure what I was doing wrong (I was starting from user all the way to the pic and I needed to start from the file with my index). YES! Awesome!
This helped alot!!! thank you!
i was in the process of learning html and some basic css , while watching this videos , i already knew some of the stuff but with this videos it help me so much to understand it more and now i feel more fluent on html and css i understood the concept of it pretty quick, i learned python in 2/3 weeks with 2 to 3hours a day but still need to do projects to understand how it works more, while front-end i'd say its quite simple, but learning javaScript its my next goal, i want to understand backend development , i learned python and understand most of the concept of it, now is there tutorials on how to set up a database or user storage to store their "credentials" by that meaning like email and password and remembering it or storing it , i some what know the code for it but still need practice, i know how to get user input from python using username = input("Enter username:")
print("Username is: " + username) but also confused on how when you login it would ask for the password, would you add the python or javascript Script? and is javascript or python better for backend or php? checked out some of your other videos and saw you use php as your backend language, any update on another language you would use today instead of php?
Brother I thank you for your wonderful 👍🏻😊 explanatory video 📷
I just came across your video on RUclips as a beginninger in HTML and I think 💬🤔 I'm humble to learn from you brother 🥰✅
Bless you man, exactly what I needed. Really thank you.
Best instruction I have found so far, Thank You
what a nice video. Thank you!
After seeing almost 10-20 videos on how to add image................I found the solution in this video. Thankyou!!!
Great content like always!
Thanks a lot man, perfect explonation.
Really helpful , thank you !
Thankyou for saving my ass in my IT course :)
Please someone help me.The problem I am having is that or the concept I want to use is that I want to set a default image inside the placeholder for the image(an avatar per say) and I want it to be dynamic in such a way that the end user could click the default image and select their personal image choice and it could get shown in that specific part of the screen(an example would be like the facebook profile picture selector in which the user imports a picture onto the site and it shows in a specific part and is dynamic for changes)
guys as for me i made a very dumb mistake which made me suffer for almost a week, the mistake was
i saved the folder as "images" but when i wrote it down on my text editor i wrote "img"
a simple mistake of not paying close attention like this can be very frustrating
thank you for the video btw
I did the same thing. cost me 8 hours before I figured it out
Very clear thanks a million!
Cheers Daniel!
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
About the fourth of the image, It's about the resolution , if you have 1280x720 you divide 1280/4 = 320 width and 720 / 4 = 180 height
henceforth 320x180 its a 1/4 of the whole image ... It could be pretty basic and easy to understand , but I found it my way so I hope it helps someone.
Cheers
Thank you for your video. Can you explain why did you add it inside the wrapper?
is it possible to add an alt or some phrasing in the back end should the image not be supported from a browser? or can we only add alt in html?
Great video but I would like to add a correction. You said that we need to add a width and a height to the image but you were actually adding it to the div and not to the image. Thanks for the video!
Thank you for this video.
great video thanks for posting
THANK YOU SO MUCH! U SAVED MY SANITY
I can't find my image. I can't find my rootfolder. I already wrote everything in the src. C:/Users/Downloads/cats.jpg and tried everything I can think of. Still no image. Why?
Same problem
Enter the image in a new file then
Enter the website you created whith the
New file that you enter your image
This will work
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.
I’m having the same issue
Very helpful! cant thank you enough!
Hello I would like to add an image at the same level as the h2 Tag but can´t understand how to do it
Do I need a root folder in order to extract? Or can I just use a image thats saved on my laptop thats not in a folder?
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....
@MrKnowsItAll You are really trying to correct a sentence from 4 years ago lol
oh youre such a great teacher
Great English!
sarcasm
What I love about this is the very clear video image. So many tutorials are blurry and you can’t see the code clearly. Thank you.
damn bro, i've been searching for this on AI for hours and then you soled my problem in 1 minute
if you're still having problems with the div class background-image not showing, even after correctly stating the img path, try ctrl + shift + R for refreshing your page. Seems like most browsers mess up the cache when dealing with urls.
Im also having a problem with image, being appeard. I dosnt want to show up on the page, even tho I gave it the right folder and in the right place.
3 years later! I hope you managed to crack it. ruclips.net/video/rSSijzjPYKU/видео.html
I made some menus with Vista Buttons software (png images), but I don't know how to insert it to Dreamweaver. I have tried to insert it as images, but it didn't work. Could you please teach me how to insert it? Thank you.
Thank you so very much. Can't thank enough...
Wow! Nice audio
Hello. In my case when i use background-size : 100%; image was cuted at the bottom why ?
Thanks a lotttttt
It was a big problem for me, that solved because of you
Very useful informative tutorial 👍
Thanks Dani, anther great tutorial
Keep Up The Work Mann..Really Appreciable......
Great help buddy!
so the thing that gets me confused in the alt attribute for the img. I downloaded 3 images from pexels website and i saved them as puppies.jpg but Im using atom.where would I label the alt for the image if the jpg is already saved as puppie.jpg and would I have to have link for the image?
I have to upload this project to github would it mess up if I just used the saved image peg from file on laptop? i'm sorry im making it so confusing I am new to this and still learning, if someone could get back to me that would be awesome thank you!
thank you so much wish you all the best with your channel
😎😎😎
Thank you for this video..
This has helped me a lot..😊
Excelent. You really helped me a lot. Thank you v.m.
I needed this.. thank you so much
I'm using visual studio code and this method isn't working for some reason. I found that when I inputted the images URL it work, but not by inputting .jpg
amazing content
Great helpful vids! But I am having trouble on something. So I have my menu up top, then my header, and then I have some writing in my paragraph. I would like to insert a pic behind the paragraph text but not behind my headr or menu? Thanks in advance.
Awesome...thanks so much---👍
Thank you Sir for your video helps me a lot my project 😊😊😊
Fantastic video!
thank you!!
YOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO LOVE IT!
Thank you again.
thank you so much helped a lot
When we send resume to someone. Images are not showing for them. Becz of src .whats the solution for that ?would u like to tell plz
actually worked thanks
i tried to use the img tag in css idk for some reason its not rendering it the size isn't changing at all checked the name seen if i coded it wrong idk wth is happening
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?
Use percentages instead of pixel widths. So it'd be width:100% and height:100%
Thank u ....it's such a very useful video...
THANKS I FINALLY GOT SUCESS
Thanks a lot brother.
Thank you so much i really learn what i have been look for so long you are the best❤
You are so welcome! 🙂 Just so you are aware, I have a new 2023 HTML course on my channel, which is much better than this older one. 😊
THANK YOU
thanks dude help me lot
😀
thanks!
i did the first way, and its worked. But, the second way does not work. this my code; in HTML . i think i type it correctly, but when i execute it, nothing is happen. any solution?
Thank you omg 😭
thanks dude... helped me a lot
thank you for this :]
How can I add background pic in my sublime??
I'm using phone but I dont know how to get the pic in the code