How to make HTML href function to redirect the user to a world wide web page instead of a folder inside the user's computer? - html

I am learning HTML, and whenever I execute the href function in HTML and click the blue text, the browser tries to redirect me to a folder inside my computer, when in reality I want to enter a website. For example, if I try to execute the following code, instead of the browser redirecting me to duckduckgo.com, it tries to redirect me to a folder inside my computer:
Browse anonymously and without being traced
How can I solve this issue?

Because href="duckduckgo.com" is using a relative URL, so the browser is looking for duckduckgo.com relative to the current URL that is displaying the page. To the browser it's no different than if you used href="index.html", both are structurally identical.
Instead, use a fully-qualified URL:
Browse anonymously and without being traced
You can also default to the current protocol with this:
Browse anonymously and without being traced
So if the current page is open via http:// or https:// then the link would use the same in the resulting request. Note however that your description of "a folder inside my computer" may somewhat imply that your current protocol could be file://, in which case an inferred protocol clearly wouldn't work. The point is, the structure of a complete URL is pretty versatile so you have options.

Related

How do I make clicking a link download an image?

I've been looking around, and I find something that for some reason works for some links, but when I try to download my image it just opens the page with the image
Download
I expect this to download the imgur image I linked, but it just opens the link instead, any ideas how to fix this?
I've just made a quick test and it seems like that origin domain matters in this case.
The download attribute works fine if the image is on the same domain. Otherwise it opens the link.
This attribute only works for same-origin URLs.
Although HTTP(s) URLs need to be in the same-origin, blob: URLs and data: URLs are allowed so that content generated by JavaScript, such as pictures created in an image-editor Web app, can be downloaded.
If the HTTP header Content-Disposition: gives a different filename than this attribute, the HTTP header takes priority over this attribute.
If Content-Disposition: is set to inline, Firefox prioritizes Content-Disposition, like the filename case, while Chrome prioritizes the download attribute.
According to the MDN description of the download attribute:
This attribute only works for same-origin URLs.
So it won't work with a URL that points to a different domain than your own, such as i.imgur.com.
You can use a proxy script on your own server, something like:
Download
Then write the image_download.php script that does:
readfile($_GET['url']);
You should of course have validation checks in the script so that it doesn't get abused as a general-purpose proxy by third parties. Google "php proxy" and you'll find some pre-written scripts.
The download attribute only works for same origin URLS.
You could either write a server side script.
OR
Take a look at this discussion for a quick workaround.
Simply insert your URL into the downloadResource() like so: downloadResource('https://i.imgur.com/KBUpwNd.jpg'); Wrap in script tags and run on your browser.

Is there a way, in html, to refer to the domain of a website without actually knowing it?

For example, I want a link to take the viewer to a folder on the website
Click here to go to this folder
But now I want to make it so that other developers can use my code on their website without having to personally edit it. Is there a way for me to reference the "http://www.Example.com" without actually knowing what the domain is?
If you simply want to make a relative link, i.e. a link relative to the current URL or domain, simply leave out the domain:
always goes to foo.html in the same folder as this document
always goes to /foo.html in the same domain
The same way you can also make a protocol relative URL:
goes to https://.. if current page is https, otherwise http

pushState staying on the same page

I'm trying to wrap my head around using HTML5 pushState. It seems to work great. I can add states, go back with my browser and everything looks fine. However, when I refresh the page, it leads to a 404, because the URL that was appended with pushState doesn't actually exist...
I am trying to get everything to load from a single folder with an index.html page, so the URL would look something like http://www.server.com/app_name/<something> (app_name is a folder with an index.html file).
As far as I could gather, hashbang is considered bad, so what pushState URLs can / should I use that will stay on the same actual page and allow me to refresh?
And after refreshing, would I still be able to retrieve the state?
p.s. I am not concerned about browsers without javascript enabled or maintaining backwards compatibility. I do not want to change any .htaccess rules to make this portable and configuration-free.
Your problem is that your web server tries to locate a file called something in your app_name folder. What you must do is route all requests to /app_name/* to your index.html and then set the appropriate application state using the location object of the DOM.
You won't get far without telling the server what it should do. That's the whole point of the History API. If you don't want to mess with .htaccess files you probably should edit the configuration of your web server (Apache?) using mod_rewrite or sth. like that.
I ended up giving up on pushState, and instead used BBQ jQuery plugin.
The code looks something like this:
$(document).ready(function() {
// making sure a hashchange event is triggered for refresh
$(window).trigger('hashchange');
});
// this gets called on any page change, back button etc
$(window).bind( 'hashchange', function(e) {
// the fragment contains a hash value at the
// end of the url, e.g. #xyz
var url = $.param.fragment();
// simulating a click on the appropriate link on the page
// based on the fragment
$('.panel a[href="#' + url + '"]').click()
});
URLs on the page are in this format:
link to xyz

html - links without http protocol

Is there a reason we include the http / https protocol on the href attribute of links?
Would it be fine to just leave it off:
my site
The inclusion of the “http:” or “https:” part is partly just a matter of tradition, partly a matter of actually specifying the protocol. If it is defaulted, the protocol of the current page is used; e.g., //www.example.com becomes http://www.example.com or https://www.example.com depending on the URL of the referring page. If a web page is saved on a local disk and then opened from there, it has no protocol (just the file: pseudo-protocol), so URLs like //www.example.com won’t work; so here’s one reason for including the “http:” or “https:” part.
Omitting also the “//” part is a completely different issue altogether, turning the URL to a relative URL that will be interpreted as relative to the current base URL.
The reason why www.example.com works when typed or pasted on a browser’s address line is that relative URLs would not make sense there (there is no base URL to relate to), so browser vendors decided to imply the “http://” prefix there.
URLs in href are not restricted to only HTTP documents. They support all the protocols supported by browsers- ftp, mailto, file etc.
Also, you can preceed URL name with '#', to link to a html id internally in the page. You can give just the name or directory path, without a protocol, which will be taken as a relative URL.
My solution was to trick the browser with a redirect service, such as bit.ly and goo.gl (which will be discontinued soon), in addition to others.
When the browser realizes that the url of the shortcuts is https, it automatically releases the link image, the link is released and instead displays the http image, without showing the original link.
The annoying part is that, according to the access, it will display in the panel control of your redirector, thousands of "clicks", which is actually "display".
With this experience I'm going to look for a Wordpress plugin for redirection and create my own "redirects links". So I will have https // mysite.com /id → redirect to http link.

How to link a relative html file in the scenario where user can call the files from the browser by adding a / at the end

(Sorry I am not able to frame question correctly.)
Following is the scenario.
I have 2 Html files.
File1.Html has
Click Me
File2.Html has
Click Me
Now when I open the file1.html in browser by typing following in browser.
http://Localhost/File1.html
The file1.html with a link is shown and when clicked it goes to
http://Localhost/File2.html
BUT
If I open the file1.html in browser by typing following in browser(note the / at the end).
http://Localhost/File1.html/
The file1.html with a link is shown and when clicked it goes to
http://Localhost/File1.html/File2.html
I know this is not a right way to do in browser but you cant stop user doing so.
The above example I have used just to simplify the issue. My real production issue issue is while using the MVC url are actually routed. So a user can legally use http://example.com/Employee Or http://example.com/Employee/ and due to this my jqGrid is not working.
Please guide me for a workaround.
UPDATE:
This works ok in IExplorer : wierd.
You want a link relative to the root. The following:
Click Me
(note the '/' at the start of the href) will link to http://Localhost/File1.html wherever the page containing the link is (so long as it's on the same host).
not relative to root i need it relative to parent
That's not possible. If you are using routed URIs there can be all sorts of /path/segments following the base name. The browser has no way of knowing what the real ‘parent’ is.
The usual solution is to use root-relative URIs as suggested by Joe. If you need to allow your application to be mounted at a configurable prefix under the root, that prefix will need to be copied out into the link.
Your question reminds me of a technique for search friendly URLs, implemented in PHP.
Things like:
http://localhost/index.php/2009/09/
It was described on Sitepoint.com The idea was that index.php could retrieve the trailing part of the URL from the web server and decide what to do with it. Including whether to deal with a final / or not.
It won't be relevant to html files (which could not, after all, retrieve the trailing part of a URL) but it might provide further ideas.