I'm struggling to get an image in a list. When I do the following:
<ul>
<li><img src="image.jpg"></li>
</ul>
An image icon appears (like an error) and the image doesn't show. Is there anyway to display the image?
When using <img src="..."/> you can choose two path types.
Local Filesystem
You can select an image to use from the local filesystem. Can be either definite path (C:/Users/...) or relative to the current folder.
In your example, you are looking for a file named image.jpg in the current folder which most likely does not exist.
Please note that the file location must be relative to the location of the HTML file.
Remote Image Location
You can insert a link to a remotely hosted image, something like http://your-favorite-image-hosting.com/someimage.jpg.
It should work. Like what other people have been saying, double check your URL.
Here's an example that works:
<ul>
<li><img src="http://images.clipartpanda.com/smiley-face-clip-art-niXoRMbiB.png"></li>
<li>Second item in list</li>
<li>Third item in list</li>
</ul>
Your code (as it is now) is looking for image.jpg in the CURRENT folder (meaning the same folder where the page of your code is).
It seems that your image must be in a different folder as the page of your code.
As a test, leave your code as is and make sure the image.jpg is in the same folder as the page of your code (if not, place it there). If you still can't see your image then the name or your image might be wrong (check again the name and extension of your image file).
Related
Is this possible. From what I understand, absolute paths are most commonly used with links to a website. I am not using a web server, my HTML file is local and needs to be linked to another HTML file using an absolute link. These were my directions and any clarity is much appreciated, as I don't fully understand how I would do this yet. Thanks.
Directions:
Create a navigation (nav) menu pointing to the two HTML pages in the menu directory
-The link to the menu page should be relative and point to the entrees section
-The link to the health-warning page should be absolute.
It all depends on where the html file lives. If you're doing this locally then it'll depend on where the html file you're referencing is on your computer. If you're on windows that could be C:\Users\yourusername\projects\whateverfile.html while on Mac or Linux it would be file:///home/yourusername/projects/whateverfile.html. Those are absolute paths. A relative path is where the file is in relation to the html you're adding the link to. An example for your assignment could look like.
<nav>
<ul>
<li>Menu Page</li>
<li>Health Warning</li>
</ul>
</nav>
Yes this is possible. For a local absolute link, you would expect to see your absolute link start with C:// if you are on a Windows machine.
The href tags that I have put in my code lead to images saved on my computer but when I test my code they appear as little broken images.
Moodle, c'est cool.
<img src="d6j542d-6fbbd2d6-8801-4016-94aa-63dae5560124.png" alt="wat" width="40px" height="20px">
I would like the image to appear, doesn't matter what format, I would just like to see it.
This is only an image name. In that case the browser will try to find the file in the same folder as the html file. Apparently it is not there. It would make sense to check that first. If it's in a different folder you would have to either move it in the same folder as your html or add the folder(s) where the image is located before the file name (e.g. src="folder-a/folder-b/image-name.png")
A folder called "images" in your project folder would make sense. Then the new link would be:
<img src="images/d6j542d-6fbbd2d6-8801-4016-94aa-63dae5560124.png" alt="wat" width="40px" height="20px">
(you might also want to consider a more descriptive file name for the image... e.g. logo.png)
I'm creating a small website for university. I'm totally new in web dev and got a problem i can't find the answer for. I was searching similar topics for some good time now but i cant the solution.
It´s important to note, that i access this website with localhost:8080/index for example. So the website is not "online". To start the site i have to go inside the folder and cmd -> npm start
We also use Handlebars (if this is somehow important), so pretty much every file is .hbs
My problem is
<img src="index.jpg" alt="index">
is just not working. It only displays the alt "index" on the page. When i use an global img url (like from wikipedia) its showing me the image. But not when i use "own" images. I was trying diffrent pictures, diffrent names, diffrent locations for the picture but it won't load.
When i use the inspector inside Firefox or Chrome it tells me img don't load(this is translated from germany, i don't know what it tells in english)
impressum.hbs and the picture are inside the same folder
I was copying the picture into every folder but still, it won't load.
You may also doublecheck that the pic is .jpg and not .jpeg, which happens sometimes.
So your index.html and your picture are in the same exact folder?
<img src="picture.jpg"> picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg"> picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg"> picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg"> picture.jpg is located in the folder one level up from the current folder
The solution was an "internal" Problem. The univeristy gives us a framework and somehow you only can access pictures when they are saved inside 1 special folder. So it´s solved. Still i dont understand why they dont tell us this information directly...
I have the following website:
http://luscoefusco13.es
I would like to know how to put a link that redirects to the main page, if I have three files, index.html, main.html and top.html?. It has frames, that is the difference between the question asked in the example of similar case.
Use simply /, as in Link text - this will always link to the root of your website, regardless of the visitor's current location on your site, or the site's domain name.
With target="framename"
<ul>
<li>A frame</li>
<li>B frame</li>
This is the site where
I have it from:
http://www.tagindex.net/html/frame/a_target.html
I'm creating a series of web pages and I want them all to be linked together from a navigation bar, I currently have:
<li>XHTML & HTML</li>
However, if I need to export these files to another computer wouldn't the link be wrong and then not work?
How would I change these links so the file containing the HTML, CSS can be zipped up emailed to someone and it still work for them?
Use relative URLs.
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Something</li>
The path is relative to the current file, home.html, about.html, and contact.html are all in the same folder, while page.html is in a subfolder named 'folder'.
Just use relative links - no need to include the file:///...... This will also mean if you upload it to the web or zip all the files together and send to someone else, it will still work - assuming of course you maintain the same folder structure and relative file locations.
For example I have a root folder with my index.html file which has the navigation links and a folder structure as below with firstpost.html and secondpost.html in the blog folder.
Web Project folder structure
index.html
Creation.html
blog/ (folder)
firstpost.html
secondpost.html
example links in index.html
<ul>
<li>
XHTML & HTML
</li>
<li>
First Post
</li>
<li>
Second Post
</li>
</ul>
check out this post that will give you a basic overview of the idea of absolute vs relative paths.