I am using the following code to attempt to place an image of myself into my personal website:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
The photos directory is in the same directory as the html page. I have tried placing the photo in the same directory as the html page and it doesn't work. I have tried using .JPG instead of .jpg. I have tried executing the code without the alt tag. I have tried using backslashes instead of forward slashes in the file path. I have looked for typos in the filename and there are none. I feel like my current code should be working with no problems. But the image will absolutely not show up. Any ideas or help would be greatly appreciated.
EDIT: I have corrected the code above to fix an elementary mistake, namely including the body inside of my head instead of separating the two. The picture still does not show.
The HTML structure needs to be:
<html>
<head>
</head>
<body>
</body>
</html>
You are putting the body tag inside the head tag.
Also, if the images directory is in the same one than the html, you need to remove the first slash, just use photos/mainphoto.jpg
So you can try:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<center>
<img src="photos/mainphoto.jpg" alt="Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
Also I recommend you not to use any spaces before or after the equal signs, these are good practices.
Well, your code is like this
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</head>
</html>
You have <body> element inside your <head> element.
It should be like this
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<center>
<img src = "/photos/mainphoto.jpg" alt = "Test Image"/>
<h1>My Page</h1>
<hr />
<p> To be updated.</p>
</center>
</body>
</html>
And for that image, the address must start from your html file.
So if you have structure like this
web/
index.html
photos/
cutePuppy.png
You will have <img src="photos/cutePuppy.png" alt="Cute puppy">
Try using the full path of the image listed in its properties.
FIXED
In the Windows 10 filesystem, the picture file extensions are evidently hidden. I had named the picture "mainphoto.jpg", without realizing that the Windows 10 filesystem had already automatically added a .jpg extension, which was hidden in the file structure. Therefore, the name of the file being referenced was actually "mainphoto.jpg.jpg".
Apologies for the silly mistake, and thank you to everybody who offered suggestions!
Does it show as 404(not found) in the web inspector of the browser you are using. Chances are that the folder with the image and possibly the image it self don't have permissions great enough to allow access. You will have to change the permissions via terminal or possible in the editor(IDE) you are using.
Related
I'm learning HTML and I'm just starting to learn about an image manipulation. The image I want to use is in different directory of the document and I've tried to load it in my document. The directory of Html document is MY/COMPUTER/PATH/Desktop/Code/Images.html and the directory of an image is MY/COMPUTER/PATH/Downloads/Image.jpg and the code is that follows:
<!DOCTYPE html>
<html>
<body>
<img src="../../Downloads/Image.jpg" alt ="This is an image that should
work">
</body>
</html>
I would like to get some help from other people. Thanks.
It's a best practice to maintain the proper directory structure.
Here is the basic directory structure which you should follow, it will help you to gather all assets in the same place
>projectName
>assets
>images
>css
>js
>index.html
<!DOCTYPE html>
<html>
<body>
<img src="assets/images/image.jpg"
alt = "This is an image that should work"
>
</body>
</html>
>projectName
>assets
>images
>css
>js
>index.html
>about.html
>contact.html
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I want to be able to use images in a separate folder for my web page, however when I run the page, the image fails to appear. Previously I had the image I wanted to use in the same place a the web page and that worked fine, however once I placed the image in a folder and tried to run the web page, the image no longer showed. I have checked to make sure I have made sure that I have spelt files and folder correctly that I have the correct path, I have also tried adding ../ to the front, but that didn't work. Many thanks for any help.
<!DOCTYPE html>
<html>
<head>
<title>title goes here</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Content goes here</p>
<img src="/Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142"></img>
</body>
</html>
Try following code:
<!DOCTYPE html>
<html>
<head>
<title>title goes here</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Content goes here</p>
<img src="Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142"></img>
</body>
</html>
You have the image tag wrong. It's one of those self-closing tags in HTML.
<img src="" ... /> or <img src="" ... > is all you need for an image to show up.
if the image is a directory at the same level as your HTML page, you don't need the leading /.
Here is the correct way to add your image to the page:
<img src="Art/Head_Drawings.jpg" alt="Heads_examples" width="104" height="142" />
I'm having trouble uploading an image (google logo) I have saved onto my mac using html/css. Can someone tell me what I'm doing wrong? My html file is saved in a folder titled google-homepage, within that page is a folder called CSS, within there is a folder named images, and in that folder is my image.
<!DOCTYPE html>
<html>
<title> "Google" </title>
<body>
<img src="css/images/google.png" />
</body>
</html>
1- create folder name: google-homepage
2- inside google-homepage create file name index.html , past the code bellow:
<!DOCTYPE html>
<html>
<title> "Google" </title>
<body>
<center>
<img src="CSS/images/google.png"/>
</center>
</body>
</html>
3- create folder inside google-homepage name CSS
4- create folder name images inside folder CSS and copy your image with name 'google.png'
5- now run on IE the file name index.html
good luck
try this:
<img src="../css/images/google.png" />
First check if your image is not corrupted. Also check where is your HTML file located?
If everything is fine check with the following code.
<img src = "./CSS/images/google.png">
Also check for directory name. Don't mix uppercase with lowercase. Hope that solves!
You can try:
<img src="file:///css/images/google.png" />
<!DOCTYPE html>
<html>
<title>Google</title>
<body>
<img src="C:\Users\Server\Desktop\CSS\images\a.jpg" />
</body>
</html>
Try to give the full path using directory path.
Hope it will help you
For some reason, despite using the right syntax(to my knowledge) and having the image file in the same folder as my HTML document, when I load the document, the image I programmed to load does not appear on the page. What could be the issue here?
Here, my HTML file is clearly in the same folder as my image..
https://gyazo.com/ac35ed711716d9e8c5b34123f80d71d1
And here is my code (this is for q3.html)
<!DOCTYPE html>
<html>
<head>
<title>Question Three</title>
</head>
<body>
<p>
<h1>Dominos Pizza order form</h1>
<img src=“dominos.png” alt=“Dominos logo” width=“100” height=“50”>
</p>
</body>
</html>
I am running this on a Macbook Pro, using TextEdit as my editing tool. Here is what my page looks like after I open the document:
https://gyazo.com/0a527e90897d082b1f722c3293ad34d0
Notice “ in your <img>. It is not the actual quotes. Thus replace “ with ".
Thus the new HTML would be as follows
<!DOCTYPE html>
<html>
<head>
<title>Question Three</title>
</head>
<body>
<p>
<h1>Dominos Pizza order form</h1>
<img src="dominos.png" alt="Dominos logo" width="100" height="50">
</p>
</body>
</html>