When taking a look at the html for this site: http://www.3lateral.com/
I saw that all of the images like logos, apple-touch-icons, mstiles etc. were all located "on the site" like so:
<meta name="twitter:image:src" content="http://www.3lateral.com/img/seo-logo.png">
<meta name="msapplication-TileImage" content="http://www.3lateral.com/mstile-144x144.png">
How did they do this and how can I do this myself?
...Also it seems that some are located under a url path like the twitter one (/img/seo-logo.png), how is this connected?
http://www.3lateral.com/img/seo-logo.png is called the absolute path and /img/seo-logo.png is called the relative path(relative to your current file being called from).
You can access the same image using both. Meaning http://www.3lateral.com/img/seo-logo.png is the same as /img/seo-logo.png.
Usually it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.
In your case, say you have an img/ folder & a css/ folder in your root directory. Now when refering to an image in the img/ folder from say main.css in your css/ folder. You can use:
www.yourdomain.com/img/thisimage.png(finds the path from root ie. www.yourdomain.com)
OR
../img/thisimage.png(this finds the path of the image from your main.css instead of root directly). ../ means "travel one directory up from the current"
just copy your image in the site directory with specific name that you want , then set the path that started with your site address / image directory / image name
e.g : if you copy your images in image directory of your site path , set the src of image tag >
like : ( src="http://www.yourdomain.com/image/yourImageName.png" )
Related
relative file path explanation
in the above website, the following example is given to demonstrate relative file path for the image: <img src=”banana.jpg” and there is no / in front of banana because the "image is placed at the same directory where source file is"
in the html tutorial on youtube (1:13:01) that i'm learning from, the images are also placed at the same directory where source file is but a / is used in front of the image name. why was / used here?
Does it have to do with "root of the current web" as stated in the w3 html file path tutorial? If yes, what does "root of the current web" mean? i can't find any explanation that relates to html
A File Path is a concept used in HTML to define the path of the file into the respective website’s folder structure.
It’s an important thing to know the path of files which are going to include in web pages.
Examples
In html here is a syntax to include image files in webpages
keep in mind that the img tag is used to insert images as followsand to insert image file in a web page its source must be known.
<img src ="path" alt ="some text here">
/*
alt attribute is used to specify an alternate text for an image, if the image cannot be displayed
path describe the location of the image file in a website folder.
*/
Different ways to specify file paths are
<img src=”img_name.jpg”>:
//It specify that our image is located in the same folder as the current page.
<img src="images/image_name.jpg">
//It specify that our image is located in the images folder in the current folder.
<img src="/images/image_name.jpg">
//It specify that our image is located in the images folder at the root of the current web.
<img src="../image_name.jpg">
//It specify that our image is located in the folder one level up from the current folder.
In the above example, the public_html folder is the root directory of the website and the index.html file is executed when someone navigates to the homepage of the site (www.example.com).
Hops you' have get an idea
The explanation is available at Difference between links with forwards slashes and relative links
It is going to be easier to understand the concept if the image is located in another folder rather than the main root. For instance, a folder named as "img"
So in your example, <img src=”img/banana.jpg”> indicates that
This would start in the same folder as the current HTML file, then in the img folder, then for the file itself.
<img src=”/img/banana.jpg”> indicates that
This would look at the root of the site's hosting, then find an img folder, then for the file itself.
<img src=”../img/banana.jpg”> indicates that
This would start in the same folder as the current HTML file, then go "back" one folder into the parent folder, then look for a img folder, then for the file itself.
I am creating a website on localhost. I want to make all of link resources in my website to relative path ( I mean only internal resources).
website is located in
http://localhost/mywebsite
I read this useful question Absolute vs relative URLs.
I found differences between /images/example.png and images/example.png
Link To Image
Above relative path should return ROOT_DOCUMENT/images/example.png because of / at first of url. As ROOT_DOCUMENT is something like /wamp/www/mywebsite
But when I tested it, it only return /wamp/www/images/example.png
And I should add manually my website folder /mywebsite/images/example.png to relative path.
Link To Image
And it is not useful because of changing the name of mywebsite. So:
Why does this problem occur?
How can I resolve this problem?
You say your website is in http://localhost/mywebsite, and let's say that your image is inside a subfolder named pictures/:
Absolute path
If you use an absolute path, / would point to the root of the site, not the root of the document: localhost in your case. That's why you need to specify your document's folder in order to access the pictures folder:
"/mywebsite/pictures/picture.png"
And it would be the same as:
"http://localhost/mywebsite/pictures/picture.png"
Relative path
A relative path is always relative to the root of the document, so if your html is at the same level of the directory, you'd need to start the path directly with your picture's directory name:
"pictures/picture.png"
But there are other perks with relative paths:
dot-slash (./)
Dot (.) points to the same directory and the slash (/) gives access to it:
So this:
"pictures/picture.png"
Would be the same as this:
"./pictures/picture.png"
Double-dot-slash (../)
In this case, a double dot (..) points to the upper directory and likewise, the slash (/) gives you access to it. So if you wanted to access a picture that is on a directory one level above of the current directory your document is, your URL would look like this:
"../picture.png"
You can play around with them as much as you want, a little example would be this:
Let's say you're on directory A, and you want to access directory X.
- root
|- a
|- A
|- b
|- x
|- X
Your URL would look either:
Absolute path
"/x/X/picture.png"
Or:
Relative path
"./../x/X/picture.png"
The easiest way to solve this in pure HTML is to use the <base href="…"> element like so:
<base href="http://localhost/mywebsite/" />
Then all of the URLs in your HTML can just be this:
Link To Image
Just change the <base href="…"> to match your server. The rest of the HTML paths will just fall in line and will be appended to that.
The relative pathing is based on the document level of the client side i.e. the URL level of the document as seen in the browser.
If the URL of your website is: http://www.example.com/mywebsite/ then starting at the root level starts above the "mywebsite" folder path.
Suppose I have a folder named Imp and in it,I have a webpage folder and a images folder.I have my webpage in webpage folder and my images in images folder. So, how can I give the path of an image s4.jpg present in images folder from a webpage in webpages folder..i mean what should I write in the src attribute of img tag?
You have two kind of path to access your image :
Relative src="../images/s4.jpg" (up to parent is relative from where your page is display, here the page is run from direct sub directory).
Absolute src="/images/s4.jpg".
If In documents folder of c drive you have made a folder imp and in the imp, you have made another folder named - "images"
then your code should be -
<img src="../imp/images/filename.ext>
Ok, the path to the images of my site is often the full URL to the image. Starting with http://
I don't want this, because when the site is finished I need to move it to a new domain, then all images don't work anymore.
But I can't figure out what I must give as a path for the images to be displayed correctly.
My full addres is now: http://mysite.nl/geoffrey/wp-content/themes/interio_child/images/image.png
I want to call images from /wp-content/themes/interio_child/images/image.png
or better: /images/image.png
How do I make this working for both stylesheets and normal pages in all cases? Stylesheets are in a different dir named /interio_child/stylesheets/
Use relative paths.
In css for example your can use "../images/image.png" assuming that your css lies in "wp-content/themes/interio_child/css/mycss.css" and the image in "wp-content/themes/interio_child/images/image.png"
In your script you can use variables like "$template-path = 'themes/interio_child/';" and access the image using "$imagepath = $template-path.'images/image.png';"
suppose your images are in "images" folder and your page is in "Page" folder then , you need to specify:
src="../images/image.png"
if your images are in "images" folder and your page is in "page2" sub folder under "page" folder then , you need to specify:
src="../../images/image.png"
simply you need to know just level of sub directory...
I had created one HTML page for my experiance. In this i had use the background image like c:\documents ans settings.....\leftline.png.
But i don't know how to add images from a common directory. (like background-image= ('./images/leftline.png'). how i can do like this?
The second line you have is a relative address, relative to the "thing" that is calling it.
So, say you have a webpage called "index.html" and it lives in
C:\My Documents\WebPages\My Page. You might also have C:\My Documents\WebPages\My Page\images\leftline.png
Now, rather than type in "C:\My Documents\WebPages\My Page\images\leftline.png" we can simply use "images\leftline.png" in our index.html page. Why? Well, check the locations:
C:\My Documents\WebPages\My Page\images\leftline.png
C:\My Documents\WebPages\My Page\index.html
RELATIVE to index.html, leftline is only one directory away, so you can address relatively.
You have to save the images inside the directory of your website and then you can acess these images using relative path.
If your page for example Default.htm lies inside the virtual directory WebSite1 then you can create a folder for images say 'Images' and can point to an image inside the 'Images' directory by using 'Images/image1.jpg'
If from your html file you have to traverse a folder up then you can use '../Images/image1.jpg'
You can also give an absolute path for the image like http://.....
Put the files in a directory that is in the same folder the html file is in. name the folder images.
You need to have this image inside your website.
And then the trick is to work out what URL to use (that's apparently your problem).
When you use an HTML image tag () in you page, then the browser sees the URL you specify. If that URL is relative (does not start with "http://" or a "/"), then it is sees as relative to the URL of the page. So usually you will need some "../" to go back to the root of the site and then back up again to the image.
A URL that is specified inside a .css file is relative to that css file.
If you use asp.net and want to specify the image-url in a server tag ( for instance), then you can use a "~" as first character to specify the "root of the site". This will work only if that URL is processed by the server as a property of some server control.