I'm building my first website using HTML and CSS on Visual Studio 2019, using a YouTube tutorial as well as my own small amount of knowledge. Except when I went to insert an image using:
<img src="image.jpg">
it doesn't find it.
I have also tried using the image source path thingy using:
<img src="C:/Users/Josh/Documents/HTML/BusinessWebsite/image.jpg">
but this also doesn't work. Does anybody know how to fix this?
Use the relative paths. The path is taken from where you have your html file. Like when you're moving between folders in the command line.
Well, you should have provided some more information, because your syntax seems to be perfect. There you can try out two things :
The first thing I can figure out that might have gone here would be that your image extension might not be correct, which means it might be something else than jpg(may be jpeg or png).
Use relative paths.
Example
Related
so I've recently started learning web development and I read and write html according to a tutorial that uses html 4, and just practice it on notepad++ and test them on my browser.
Now there's a problem that's been bugging, the web page doesn't change at all even if I comment out the code or change a few things in it.
I messed around with the height and width of an image and it didn't change, I tried creating a folder outside the notepad++ folder and put everything there and nothing changed, I created a completely new file(added in notepad++) and folder and it was the same. I'm still in the middle of the tutorial and this problem has just been bothering me, someone please help
I think you should try clearing browser cache or try using other IDEs like vscode or if you use android then trebedit or Dcoder
Try refreshing your page, or use an IDE like Visual Studio Code and the live Server plugin. This should help you as a beginner because both of these tools are really easy to use. Maybe it isn't changing because you had never saved your file.
This is going to be a very novice question. I am working with a Django application and for the first time I am having to edit the HTML, something I haven't worked on in years and even when I did I was not a high level.
The current code has something like the following written:
<div class="x">
%(image)s
</div>
I have never seen this '%(image)s' syntax before and anything I google appears to refer to string substitution and things like this. The class also has a max width of 16.6667% but the image does not rescale to this width. I have tried to add in widths to the div but with no luck and I believe it may be due to the way the image is being fed through to the html.
Any insight on what an earth is happening here so I can find where the image is defined and potentially generate a smaller one at that stage would be much appreciated.
Turns out it was a string substitution being fed by a python file in another app. If you are having this issue I suggest going through all the modules in your Django app and searching the files for the image name and you should find some python file defining some html code somewhere.
I'm doing some experiments to see the potential pros&cons of embedding css in HTML. I have mirror of websites locally. I tried to embed external css into HTML using "style type='text/css'" tag. Its working for few css files but for some css webpage is not rendered exactly as it used to be before embedding. I'm not sure whats exactly causing this problem.
Any suggestions/help please.. Pictures before and after ebedding.
Problem is not particular to this site. I'm seeing different rendering problems for different websites. I want to know whats the difference of embedding vs referring external css?
The problem you are facing is mainly caused by relative paths being invalid once you embed your css. Let assume that the image Evil_Kitty_Of_Darnkess.JPG is one level higher than the css file. A rule inside the file will be able to use the relative path like this:
background-image: url(../Evil_Kitty_Of_Darnkess.JPG);
Once you embed those rules directly in the page, you must reference paths according to the new base path in which the page is located. If the image isn't exactly one level higher, it will fail to resolve it. You will see something like in your screenshot: Nothing at all.
I just did a quick search for my question and couldn't find anything directly on point.
I'm still very new to HTML and was wondering if someone could tell me how I could add a picture to my website and set the code so that if I click on it, it enlarges the picture in a new window.
I'm going to be adding around 600+ pics to my website so I was also wondering if there's a way to write the code once and have it apply to all the pics I add.
Thanks in advance,
- Danny B.
There's many many ways in which you could do this. The basic HTML for inserting an image with a link to a new window will be:
<a href="enlarged.html" target="_blank">
<img src="photos/photo-name.jpg" />
</a>
But it is a fair bit more complicated if you want to be able to dynamically display a large number of photos. If you want to code this yourself, you'll want to look into using something like PHP to output the HTML code automatically for 600+ images. Then instead of pointing the link for each to a new page, you might want to consider having the images load in a cool way, such as a javascript lightbox/colorbox some of the other answers suggest.
One possible alternative solution might be to look for some pre-created photo album script. I don't have any experience of these so I'll let someone else make some suggestions on that.
There are several ways to do this, but I'm assuming you'll have a simple site with lots of images on one page, and you'd like the images to zoom open "in a cool way".
Check out this: http://colorpowered.com/colorbox/
... click on View Demonstration and then see the various photo handling options.
This needs just some basic HTML and minimally configured Jquery. Very simple to use and produces a nice effect.
Google around using the keyword lightbox. Most of the solutions are ready-to-use Javascripts. Just include once, assign some IDs/classes, execute during onload and that's it. I personally have good experiences with Lightbox2 and jQuery Lightbox plugin.
I decided to go w/ target="_blank" -- Lightbox2 seems like it'd be great, but I'm really not sure how to use it and where to put all the code. The instructions I've found for it still assume the user has some standard knowledge in the field, that of which I do not currently possess. So, I'll stick to the target/blank approach until I can get more familiar w/ coding and then I'll upgrade to Lightbox.
Once again, I want to say thanks to everyone. You guys always respond quickly and accurately.
With much appreciation,
- Danny B
The simplest way would be to add a link to it, and set the target attribute to target="_blank". The link should point to the image itself. This would regularly open a new tab though, if you want a whole new window, you should tryhref="javascript:window.open('myimage.png','_blank','toolbar=no,menubar=no,resizable=yes,scrollbars=yes')",which would open a new, standalone window. If you're looking for fade/resize effects and such, try one of the other answers posted.
Okay, I feel totally stupid posting this. I am not sure if it is classified as a programming question, but its close enough. In my web application, one page uses relative links like this:
<img src='images/start.png' />
My other page is in exactly the same directory, but firebug says that the above code equals http://localhost/projectFolder/viewtrip.php/images/start.png. I am confused, and I feel like a total idiot. Is there something I am obviously doing wrong?
Try:
<img src='./images/start.png' />
is there a base tag in the HTML somewhere?
like this? <base href="http://localhost/myfolder/viewtrip.php" />
(there shouldn't be it doesn't make sense but I can't think of something else)
p.s. where in firebug do you see this path?
When you specify a relative path, you are saying the browser that that element is in that place using the current document as base. Where is the images directory in your website? If you put a / at the front of the path, you are saying the browser that the element can be found using the root from your website as base. The only real value I have found to use ./ or ../ in front of paths is to have a proper rendering on preview while editing the file and some times it causes trouble (for me) at release time.