How to go to sub-directory with relative URI - html

Sorry if it so basic but I could not find the answer by searching.
If we are in the page http://www.example.com/a-dir-without-trailing-slash how we can reach the sub-directory http://www.example.com/a-dir-without-trailing-slash/pic using relative URI? (we do not know the current directory name(i.e. a-dir-without-trailing-slash)
Some more explanation:
a-dir-without-trailing-slash is the name of an article in the website. It is not an actual directory nor an actual file name. Now, I want to get the pictures that are used in this article by addresses like:
http://www.example.com/a-dir-without-trailing-slash/pic/1
http://www.example.com/a-dir-without-trailing-slash/pic/2
,...
and in the webpage html, I would refer to them with something similar to:
<img src="pic/1" />
If the original article address was in the form of http://www.example.com/a-dir-with-trailing-slash/, the above example would work finely. I want to know if is it possible to get a relative URI with current article addresses (without trailing slash)?
Thank you very much

I suppose you want to avoid hard coding "slugs" in the content so that they can be stored and manipulated independent of each other.
One solution is to use the base tag which allows you to specify the prefix that is added to relative URLs instead of typing them all over the place.
Make sure that your website uses absolute URLs where necessary.
Modify your CMS to "generate" and place the following tag inside the head section that contains trailing slash:
<base href="/a-dir-without-trailing-slash/">
Then you can use relative URLs inside the content, for example:
<img src="pic/1">
<!-- http://www.example.com/a-dir-without-trailing-slash.html/pic/1 -->

You need server side scripting to add the filename to urls (or may be just one '> tag in the head). – Salman
Bounty get.

Related

PHP and html how do i link to an external URL?

consider the following code:
<a id="alink" href="http://google.com">google</a>
This is a fairly basic link tag. At the top of my html page I have:
<base href="//localhost/website/" />
This creates a problem, when i click my link it brings me to:
//localhost/website/http://google.com
I do not want this, I want it to bring me to a completely different site(google.com for example). How can I fix this problem?
try this one.
<base href="http://localhost/website/" />
on localhost no need for directory or double slashes // !=link.
The effect of the base tag is global to the document, and the only way to override the effect of  is to use absolute URLs.
You can use window.location in JavaScript to get the URL of the page itself, in case the document was retrieved via HTTP. And you could use it to construct absolute URLs.
But It is better to use server-side technologies that let you construct addresses from one or more base addresses. So quite possibly the best approach is to get rid of the tag.

How do you pull a value from a URL tag and modify it in HTML?

I'm in marketing so I use URL tags to pass specific information to my pre-sale pages.
I'm looking to write the HTML so that it will read the the tag (for example image=1_1) remove the last 2 digits (so we are left with 1 in this example) and then add .jpg to it (1.jpg)so it loads that image from a specific folder.
How would I got about doing this?
My bad. I should have work my answer according to your approach.

Why Does this relative URL work?

So I've been playing with writing some web crawlers and testing them on different sites. But I've come across some sites that seem like their relative urls should not work, or at least I think they should point to someplace other than where the browser resolves them to.
Given a url of a current page : "http://www.examplesite.com/a/page.htm"
And a link of: "a/page2.htm"
The browser correctly resolves this as: "http://www.examplesite.com/a/page2.htm"
My problem/feeling (obviously wrong, but I'm wondering why) is that this should resolve to "http://www.examplesite.com/a/a/page2.htm". The relative url does not begin with a /, so why does it become base relative?
Interestingly, Java's URL class appears to agree with me, as the following code will output : "http://www.examplesite.com/a/a/page2.htm"
URL baseUrl = new URL("http://www.examplesite.com/a/page.htm");
URL absoluteURL = new URL(baseURL,"a/page2.htm");
Why does this link resolve the way it does, and what is the formal rule for resolving a relative link like this?
EDIT:
I just notice that in the <head> portion of the webpage there is a field like so:
<base href="http://examplesite.com/">
I'm assuming that this overrides any relative links to use that as its base url instead of the actual url. Is this a correct assumption? Is that even a valid html markup?
You are correct in that it is the base tag, and yes it is valid.
In HTML, links and references to external images, applets,
form-processing programs, style sheets, etc. are always specified by a
URI. Relative URIs are resolved according to a base URI, which may
come from a variety of sources. The BASE element allows authors to
specify a document's base URI explicitly.
When present, the BASE element must appear in the HEAD section of an
HTML document, before any element that refers to an external source.
The path information specified by the BASE element only affects URIs
in the document where the element appears.
Sources: W3C Wiki and W3C Markup
The site is likely using a <base> tag to specify the parent as the prefix to all relative URL's on the site.
You can find out more on the base tag here. If this is not the case, then please provide the source URL as this defies normal behavior.

Absolutizing an image url with a ".."

I have an HTML document I'm transforming with an image whose source url looks like this:
"../foo/bar/baz.png"
I'm using a tritium function to absolutize image source urls, but the ".." seems to be stumping it. It's prepending the hostname, etc, but when it does, it adds one too many layers.
So for example, the correct URL of the image is:
"www.host.com/foo/bar.png"
But the page on which it appears is at "www.host.com/site/baz/page.html"
The source of the image in the original html is therefore "../foo/bar.png"
But the absolutized result I'm getting is: "www.host.com/site/foo/bar.png"
In other words it's going up the file tree to "/site/", but it needs to be going up one more. I don't really see how it even works on the original page without another ".." How should I be handling the ".." in the url?
.. means to traverse one level up; you are using a relative path, not an absolute one like you should be. Drop the dots:
<img src="/foo/bar.png"> will load the image from the root of the domain.
There is a huge difference between src="/foo/bar.png" and src="foo/bar.png" (Notice the slash after the first double quote)
First one points to http://example.com/foo/bar.png NO MATTER what.
Second one, however, (without the beginning slash) is relative URL so the output path depends on the file on which the image appears.
That is why you were getting "www.host.com/site/foo/bar.png" (one level up relative to the file path).
Two solutions:
1) src="/foo/bar.png" OR
2) src="../../foo/bar.png"
I always recommend the first approach because even after you move the files around, you won't have to change the absolute URL. (I learned it the hard way)
P.S. this rule applies to CSS files as well. (for example when specifying the background image URL) If you use absolute paths, you won't have to bang your head on the wall when you change the directory of the CSS file.
As you're in a Moovweb project, I would suggest manipulating the problematic src before you use the absolutize() function.
Is there an easy way you can select the image using Tritium? I'd suggest doing that, then manipulating the src attribute:
$("./img[#id='']") {
attribute("src", "/foo/bar.png")
}
After this, you should be able to use the absolutize() function and the src will be rendered correctly.

Link to a line in a HTML?

Is it possible to link to a line number in a html file? I want to link someone to part of a very large document which is on a webpage but the whole thing is in one tag so is not split into sections with IDs I can link to.
Here is the page I'm talking to, id like to link to "LEVEL 46" can I do this?
I would be just as happy with another workaround such as searching for the text or anything, I assume this could be made more complicated by it being in various wrappers, assuming it was just a plain .txt file could you do it?
Edit: im not writing the web page im trying to link to a part of someone elses, so i cannot add IDs etc
No it doesn't appear to be possible.
<a href="#a-place-in-the-document></a>
...
<h1 id="a-place-in-the-document">There's a link to here!</h1>
The link will have the page jump to the element with the specified ID.
For example: http://example.com#hello will link to http://example.com and immediately go to the element with ID of hello.
In the case where you can't have IDs (such as in text files on gamefaqs), you'd need to provide a search string, for people to quickly search and find whatever section you need (such as [LV46]), and have your readers to search for it.
You would need to convert all of your Headings into anchor tags.
So for your example the link would be:
<a href="#Level46">
The heading itself would be:
<h1 id="Level46">Level 46</h1>
Hope this helps.
If it is just a text file, or a collection of text files in a directory structure, you can create a parallel directory structure so people can browse
http://pdssbn.astro.umd.edu/holdings/
as
http://pdssbn.astro.umd.edu/byline/holdings/
and generate line numbers and/or anchors to individual lines on the fly, even if other non-text files are under the /holdings/ tree, with an Apache HTTPd AliasMatch like this
AliasMatch /byline/holdings/.*[.](asc|cat|lbl|tab|txt) /path/cgi-bin/pds_byline.cgi
and a symlink e.g. assuming your tree is under top/ e.g. top/holdings/,
ln -s . .../top/byline
and a simple script (cgi-bin/pds_byline.cgi above) that converts the text file to HTML on the fly. I have created a Git repo to do just that here; that is configured for Planetary Data System (PDS) data sets under http://pdssbn.astro.umd.edu/holdings/.
You would of course need access to the Apache HTTPd configuration files (/etc/httpd/conf/conf//.conf) to do this, to put in a
<Directory .../top/cgi-bin>
AllowOverride All
</Directory>
entry to use a .htaccess file in cgi-bin/, and the AliasMatch above, at a minimum. N.B. AliasMatch cannot go into the .htaccess file.
Caveat: this only creates anchors by line number; if the file changes over time then existing links to those line numbers will be broken; you could of course do the same thing instead looking for specific text strings like "Level 46" and inserting the relevant anchors on the fly.
<a name="destination" id="destination"></a>Destination anchors
Destination anchors
Source:
http://www.motive.co.nz/glossary/anchor.php#destination
Maybe you could define an anchor for the specific line as, for example, a section element. Then you could link to that anchor.
<section name"sec1">
<a href="sec1">