Insert an image in HTML
Solved
bollo1
Posted messages
933
Registration date
Status
Member
Last intervention
-
bollo1 Posted messages 933 Registration date Status Member Last intervention -
bollo1 Posted messages 933 Registration date Status Member Last intervention -
Hello everyone,
I'm a beginner and I made a small program in HTML to write a title, change its color, etc... I would like to insert a .jpg image.
I created a folder on my desktop containing the image and the small program via Notepad. This program is also saved as .html to be opened with Firefox.
And there, the text and the title are visible, but the image doesn't appear....
Here is the work:
<html>
<head>
<title> Toto </title>
</head>
<body>
<!--see if it will be visible --><font color="red"> <h1> THE TITLE </h1></font>
<font color="blue"> This is my first program in HTML</font>
<img src="Breta.jpg">
</body>
</html>
Where did I go wrong?
Thank you in advance for your help.
Regards.
Configuration: Windows / Firefox 56.0
I'm a beginner and I made a small program in HTML to write a title, change its color, etc... I would like to insert a .jpg image.
I created a folder on my desktop containing the image and the small program via Notepad. This program is also saved as .html to be opened with Firefox.
And there, the text and the title are visible, but the image doesn't appear....
Here is the work:
<html>
<head>
<title> Toto </title>
</head>
<body>
<!--see if it will be visible --><font color="red"> <h1> THE TITLE </h1></font>
<font color="blue"> This is my first program in HTML</font>
<img src="Breta.jpg">
</body>
</html>
Where did I go wrong?
Thank you in advance for your help.
Regards.
Configuration: Windows / Firefox 56.0
15 answers
Hello,
That seems correct. Are you sure about the name Breta.jpg, not Breta.jpeg?
Are you opening the .html by going into the directory and double-clicking on the file?
Best regards
a stranger is a friend we haven't met yet.
That seems correct. Are you sure about the name Breta.jpg, not Breta.jpeg?
Are you opening the .html by going into the directory and double-clicking on the file?
Best regards
a stranger is a friend we haven't met yet.
yg_be
Posted messages
23437
Registration date
Status
Contributor
Last intervention
Ambassadeur
1 588
Good evening, are you sure that the image file has the correct name and is in the right location?
Good evening and thank you for the feedback.
I just checked the name again, just in case.
YES I launch the .html by going into the folder on my desktop where the image.jpg is, then the small program: test html and finally the same program to which I added the .html. It has the Firefox logo and by double clicking on it, I open it on the internet, but there is no image or rather there is a small square with a zigzag inside...
I just checked the name again, just in case.
YES I launch the .html by going into the folder on my desktop where the image.jpg is, then the small program: test html and finally the same program to which I added the .html. It has the Firefox logo and by double clicking on it, I open it on the internet, but there is no image or rather there is a small square with a zigzag inside...
"then the small program: test html and finally the same program to which I added the .html " I don't quite understand. Are there 2 files in addition to the image? For me, there should just be one .html file and the image
You should copy the image to the root of the C:\ drive
and put
You should copy the image to the root of the C:\ drive
and put
<img src="C:\Breta.jpg">in the .html to see if the issue comes from the image path.
Good evening
I also reply to yg_be.
Yes, apparently everything is in the same folder...
See you tomorrow.
Best regards
I also reply to yg_be.
Yes, apparently everything is in the same folder...
See you tomorrow.
Best regards
Hello everyone,
I just followed the instructions you gave me: copying the image to the root of C:\. I even copied the "www" folder containing the small test program and the photo to the root of C:\, but nothing works....
However, in the "www" folder at the root of C:\, I do have 3 files, and that might be where the issue lies... To open the "test" program, I rename it to "test.html" and by double-clicking on it, I open it with Firefox, but it doesn't include the photo....
With only 2 files, the HTML program and the photo, how can I view it online?
I just followed the instructions you gave me: copying the image to the root of C:\. I even copied the "www" folder containing the small test program and the photo to the root of C:\, but nothing works....
However, in the "www" folder at the root of C:\, I do have 3 files, and that might be where the issue lies... To open the "test" program, I rename it to "test.html" and by double-clicking on it, I open it with Firefox, but it doesn't include the photo....
With only 2 files, the HTML program and the photo, how can I view it online?
If you placed the files in a www folder on C:, the path of the image
is
I still don't understand your 3 files ;-)
First a bit of terminology, the term "program" is not appropriate. For a local html file, which is executed by a browser, we will talk about "web page" or "web source" or even "html source".
An html source is a file that has an .html (or .htm) extension. To run it locally, you double-click on it, and it opens in your default browser (IE, Firefox, ...). To modify it, you will use a text editor, the simplest being Windows Notepad. So you open Notepad, go to File > Open (all files *.*), and navigate to the directory where the html file is located. Not a manipulation with renaming and 3 files, just the .html and the jpg file.
Your issue may be that in your explorer you do not see file extensions. To display them: Explorer/View/Options/View + uncheck "Hide extensions for known file types".
is
<img src="C:\www\Breta.jpg">or does it remain
<img src="Breta.jpg">when the .html and the image are in the same directory?
I still don't understand your 3 files ;-)
First a bit of terminology, the term "program" is not appropriate. For a local html file, which is executed by a browser, we will talk about "web page" or "web source" or even "html source".
An html source is a file that has an .html (or .htm) extension. To run it locally, you double-click on it, and it opens in your default browser (IE, Firefox, ...). To modify it, you will use a text editor, the simplest being Windows Notepad. So you open Notepad, go to File > Open (all files *.*), and navigate to the directory where the html file is located. Not a manipulation with renaming and 3 files, just the .html and the jpg file.
Your issue may be that in your explorer you do not see file extensions. To display them: Explorer/View/Options/View + uncheck "Hide extensions for known file types".
Hello and thank you for all your interesting explanations for me.
I will digest what you have indicated and I will come back with the results...
Thanks again jee pee.
I will digest what you have indicated and I will come back with the results...
Thanks again jee pee.
Regarding the extensions, it's resolved, I made the change you suggested and it's good.
As for the rest, I'm struggling... Maybe I need to delete everything and start from scratch?
As for the rest, I'm struggling... Maybe I need to delete everything and start from scratch?
Originally, it's all simple, not orthodox, but the .html file can contain just one line
Are you sure that the image is indeed a jpg, which corresponds to the file extension?
--
A stranger is just a friend we haven't met yet.
Are you sure that the image is indeed a jpg, which corresponds to the file extension?
--
A stranger is just a friend we haven't met yet.
It seems indeed simple, for me... it's something else.
From your demo and the image, it almost looks like you're on my computer... Breta.pg is indeed an image of Brittany...
I'll try to do it like you, to see if it works.
From your demo and the image, it almost looks like you're on my computer... Breta.pg is indeed an image of Brittany...
I'll try to do it like you, to see if it works.
I think I did the same as you: see the link.
http://www.cjoint.com/c/GKbnsi8Pd3d
Still, the result on the Internet is a blank page that I get...
I don't understand anything anymore...
http://www.cjoint.com/c/GKbnsi8Pd3d
Still, the result on the Internet is a blank page that I get...
I don't understand anything anymore...
PHEW! With your help, I finally did it.
Thank you Jordane45 for pointing out that I hadn't closed the img tag.
So I'm going to try again to add my little original title to see if everything works... If that's the case, I will continue to try to improve in learning HTML. I'm interested, I'm discovering, but I'm a beginner, it's not easy...
Thank you Jordane45 for pointing out that I hadn't closed the img tag.
So I'm going to try again to add my little original title to see if everything works... If that's the case, I will continue to try to improve in learning HTML. I'm interested, I'm discovering, but I'm a beginner, it's not easy...