I want to have a new folder containing a set of new html files. All the images inside it are in the format src="image.png" and image.png is located in the root folder. But when you put the HTML file in a new folder it can't find the image. You have to have it in the format src="../root folder/folder/image.png" to make it work. Which would mean a lot of pasting. I have tried putting image.png inside the folder but no change.
Use the <base> element. It allows you to specify a URL for all relative URLs in a page.
For example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is an example for the <base> element</title>
<base href="http://www.example.com/news/index.html">
</head>
<body>
<p>Visit the archives.</p>
</body>
</html>
The link in the this example would be a link to "http://www.example.com/news/archives.html".
For you, the base URL may be something as simple as <base href="http://www.yoursite.com/">. This would make images specificed as src="image.png" resolve as "http://www.yoursite.com/image.png"
See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
You need to set the base tag. If you add the tag in your page <head> like this:
<base href="http://yoursite.tld/folder/">
it should display images and with sources relative to this base path.
Related
I have been styling my HTML with inline <style></style> tags in the <head> section. When I tried to move styles to CSS file for the first time from HTML file but, I cannot get my link to work.
I have created a new folder and inside this folder a new HTML file and CSS file are present. I am using VS Code.
I have tried pasting my HTML and my CSS into CodePen and it renders, so I know it's not an issue of the CSS itself not being correct.
My HTML file looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Try this again</title>
<link rel="Hope this works" href="newcssstyle.css" type="text/css">
</head>
<body>
<h1> Here we go </h1>
</body>
</html>
My CSS file looks like:
h1{
font-family: Arial, Helvetica, sans-serif;
color: blue;
}
Why does linking a CSS file not work?
In your example, you only have to change the rel="Hope this works" to rel="stylesheet" in order for it to recognize it as a stylesheet, as demonstrated in the following:
<link rel="stylesheet" href="newcssstyle.css" type="text/css">
Setting the rel attribute value to stylesheet distinguishes the difference between, say, a stylesheet link and an icon image link. You can see all the possible values for the rel attribute on MDN.
Furthermore, if it still doesn't work, ensure that the file "newcssstyle.css" is in the same directory as the referenced HTML file. If you put it in a folder such as "stylesheets", ensure that you add the relative folder path to your HTML file.
For example, if you had a directory like this:
Parent Directory Name:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" (relative to "index.css") as href='Stylesheets/newcssstyle.css'
Whereas, in a directory like this:
Parent Directory Name:
Html_files:
index.html
Stylesheets:
newcssstyle.css
Then you would reference "newcssstyle.css" as href='../Stylesheets/newcssstyle.css' instead (where .. means "go up one level to the parent directory").
element creates relationship between current and external documents.
Important point about i the attribute which stands for relationship. This attribute define how the linked document is related to the current document. How it is read..
Also please make sure your .css file has the same name as Your href.
You can read more about it here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
Imagine a website located at http://example.com/myWebsite/.
I would like my absolute paths to point to myWebsite directory.
I know one can do it for relative links with the base tag, but I wish to keep the default behavior for relative links.
Is there something useful I can specify in head ?
<!DOCTYPE html>
<html>
<head>
<base href="http://example.com/myWebsite/" target="_blank">
</head>
<body>
<p><img src="stickman.gif" width="24" height="39" alt="Stickman"> -
Notice that we have only specified a relative address for the image.
Since we have specified a base URL in the head section, the browser will
look for the image at "http://example.com/myWebsite/stickman.gif".
</p>
</body>
</html>
Use this
I have following scenario.
I have Created a Web folder on my desktop which contains the html file Test.html and another folder styles which contains the myStyle.css file.
I am trying to link .css file with my html using the following code but it is not working.
How can i do this ?
Here is my Code :
<head>
<link href="Web/styles/myStyle.css" rel="stylesheet" type="text/css">
</head>
Test.html is inside the Web folder, so you don't have to enter the Web folder when you look relative to the HTML document.
You are trying to read $HOME\Desktop\Web\Web\styles\myStyle.css.
Remove the Web/ portion of the URI.
href="styles/myStyle.css"
You should also have a space between attributes.
rel="stylesheet" type="text/css"
Seems like your folder structure is something like this:
Web
|--styles
| |--myStyle.css
|--Test.html
If you reference the stylesheet from Test.html, you should specify the path relative to the location of Test.html. Specifying Web is not a good idea, because the directory that contains Test.html - which is Web - does not have a subdirectory called Web.
If the structure is the way I have shown above, the path should be styles/myStyle.css.
First of all you need to enclose My first WebPage in a title tag:
<title>My first WebPage</title>
Then what you need to do is specify the href attribute as a relative path, so assuming that your css is in a directory called styles the link would be:
<link href="styles/myStyle.css" rel="stylesheet" type="text/css">
Also, make sure there is a space between " and type in your link tag.
I hope this helps
I'm trying to set a local site-root using the base tag. The following code isn't working. Am I doing something wrong? How do I set the mysite folder as base?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="file:///home/me/mysite"></base>
<title> Asset Take On Process </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>
<body>
some stuff
</body>
</html>
The site folder structure is
mysite
|___css
|___img
|___js
and so on..
When I load the web-page it doesn't see the main.css in the css folder at all.
If you remove that /, it should make it relative off the current path, which, when a base tag is present would be
http://localhost/website/.
You will also need to add a trailing / to the end of the href, to indicate that it's a folder.
Full working example:
<!doctype html>
<html>
<head>
<base href="/test/" />
<script src="assets/test.js"></script>
<body>
hi
</body>
</html>
Actually depending on who you ask, it's still relative since it is relative off the current domain. But I prefer to call this absolute since it's signifying the path is from the root, based on the current domain. Although, I guess technically that makes it relative in the grand scheme of things, and absolute only in terms of the current domain. Whatever.
kindly refer this link
http://social.msdn.microsoft.com/Forums/ie/en-US/c51bb8b9-40ab-437b-a125-88b660f3e1ca/ie8-base-tag-issues
A correct tag would be
<base href="file:///home/me/mysite/"/>
if you wish to set file:///home/me/mysite/ as the base address, so that e.g. css/main.css refers to file:///home/me/mysite/css/main.css. Note the importance of the slashes. In an href value in base, anything after the last slash is ignored: file:///home/me/mysite means the same as file:///home/me/ there.
This is a confusing topic, and it is further confused by some browsers’ implementation that may support relative URLs in the value; by the specifications, only absolute URLs are permitted.
There is normally no reason to use the base element. Relative URLs such as css/main.css or ../css/main.css work just fine, specifying addresses as relative to the address of the HTML page. This means that they need not be changed if the site is uploaded onto a server.
Just to clarify the other answers:
The base tag must end in a slash.
The following URL's must not begin with slashes:
It's logical, because adding them together makes a complete address. But it's counterintuitive because we're used to using /images/image.jpg to make things work everywhere.
I want to call a css from my index.html, and the css is in a CSS folder, also there is an image in a images folder..
I have tried different ways but no luck
The directory looks like this
My_First_Website
Javascript Resources
WebContent
css
mystyles.css
images
mybackgroundImage.png
index.html
Now mystyles.css looks like this
#CHARSET "ISO-8859-1";
body
{
background-image:url('/WebContent/images/mybackgroundimage.png');
}
And my HTML page looks this
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="/WebContent/css/mystyles.css" media="screen" />
<title>My Website</title>
</head>
<body>
</body>
</html>
Right now the page shows empty :(. Please help :)
In your background image and your stylesheet reference, you're using absolute paths (paths that begin with the forward slash). On a website, an absolute path instructs the browser to go looking for a resource at the root.
So let's imagine I have a website with the following structure:
index.html
css/
screen.css
images/
main-back.png
project/
sample.html
And I'm adding the following HTML to project/sample.html:
<img src="/images/main-back.png" />
To find the image, the browser will first go to the root directory, then look for the images directory, and then look for main-back.png. Alternatively, you can use relative paths:
<img src="images/main-back.png" />
Without the forward slash, the browser will start in the project directory (where sample.html is located) and look in vain for an images folder. This will result in no image displaying. To fix it, we tell the browser to first navigate up a directory:
<img src="../images/main-back.png" />
This is basically the same thing as our first example, except we're using a relative path instead of an absolute path.
Now, the problem you are facing is that you're opening the page up on your own computer. In this case, there is no root web directory, so you'll need to use relative paths instead of absolute paths. So, for your stylesheet reference, you can use:
<link rel="stylesheet" type="text/css" href="css/mystyles.css" media="screen" />
Start from index.html, look for the css directory in the same directory, and then find mystyles.css within that directory.
For your CSS image reference, the key thing to remember is that paths within CSS files are relative to the CSS file itself. So you'll need the following:
background-image:url('../images/mybackgroundimage.png');
Start from mystyles.css, move up a directory, look for the images directory, and then find mybackgroundimage.png in that directory.
Change /WebContent/css/mystyles.css in your HTML file to /css/mystyles.css, and change /WebContent/images/mybackgroundimage.png in your CSS file to ../images/mybackgroundimage.png.
/WebContent under WebContent means My_First_Website/WebContent/WebContent, not My_First_Website/WebContent.
You're using absolute paths (paths starting with a '/'). Using relative paths might help.
This works:
<img src="../images/picture.png" width="40%"/>
when you have:
WebContent/ and in the subdirectories:
html/index.html
images/picture.png
For me this worked:
.helpbg {
background-image:url('../resources/images/aboutbg.jpg');
}
And the element, which is in a JSF and Bootstrap project:
<div class="container-fluid helpbg">