What is the difference between the Following html links
<a href="home.aspx">
<a href="../home.aspx">
<a href="~/home.aspx">
<a href="home.aspx">
This redirects to home.aspx where home is in the same path location as the current page. So lets say I click that link while I am on http://example.com/subpath/about.aspx, I would get redirected to http://example.com/subpath/home.aspx. Likewise for http://example.com/subpath/subpath/about.aspx I would get redirected to http://example.com/subpath/subpath/home.aspx.
<a href="../home.aspx">
This works very similar to the one above, but it always goes one level up in the path. The two dots means "one level up from here". Using the same examples:
http://example.com/subpath/about.aspx -> http://example.com/home.aspx
http://example.com/subpath/subpath/about.aspx -> http://example.com/subpath/home.aspx.
You can use it multiple times, too, if you need, such as <a href="../../home.aspx">.
<a href="~/home.aspx">
The previous two are standard things that the browser understands and supports. This one is handled by ASP.NET. The tilde (~) specifies the virtual root of your application. How this behaves is entirely dependent on how your application starts up and what the "root" of your site is. Put simply, the virtual root means "the top level location in your ASP.NET application". So, assuming that your site is configured so that the virtual root is the domain, it would behave like this:
http://example.com/subpath/about.aspx -> http://example.com/home.aspx
http://example.com/subpath/subpath/about.aspx -> http://example.com/home.aspx.
Related
Recently I noticed that after searching for some term in Google and browsing the search result, the relevant web page showed my relevant search text as highlighted.
So, I noticed what Google has done is, as sending extra parameters by appending to the URL as #:~:text=this%20text%20will%20be%20highlighted.
As an example if I go to https://en.wikipedia.org/wiki/Stack_Overflow, it shows as follows;
But when I append #:~:text=Overflow to the URL and visit https://en.wikipedia.org/wiki/Stack_Overflow#:~:text=Overflow, then it shows as follows (note that word 'Overflow' is highlighted);
What I'm wondering is how this behavior is achieved?
What are such other types of such parameters that we could use?
Edit:
My browser is: Microsoft Edge, Version 83.0.478.45 (Official build) (64-bit)
Below are some more common and less advanced URL parameters but, I'll post them here anyways:
There are of course Anchor links that can be appended to the URL
<!-- https://Example.com/#top -->
<body>
<a name="top"> </a>
<a href="#top">
Go To Top Of Page
</a>
</body>
And URL query parameters that can be picked up by the server in a variety of ways, here is a python/Django example
# https://Example.com/?variable=someValue
import requests
def page_view(request):
variableValue = request.GET.get('variable', None)
I just have created primitive html page. Here it is: example
And here is its markup:
www.google.com
<br/>
http://www.google.com
As you can see it contains two links. The first one's href doesn't have 'http'-prefix and when I click this link browser redirects me to non-existing page https://fiddle.jshell.net/_display/www.google.com. The second one's href has this prefix and browser produces correct url http://www.google.com/. Is it possible to use hrefs such as www.something.com, without http(s) prefixes?
It's possible, and indeed you're doing it right now. It just doesn't do what you think it does.
Consider what the browser does when you link to this:
href="index.html"
What then would it do when you link to this?:
href="index.com"
Or this?:
href="www.html"
Or?:
href="www.index.com.html"
The browser doesn't know what you meant, it only knows what you told it. Without the prefix, it's going to follow the standard for the current HTTP address. The prefix is what tells it that it needs to start at a new root address entirely.
Note that you don't need the http: part, you can do this:
href="//www.google.com"
The browser will use whatever the current protocol is (http, https, etc.) but the // tells it that this is a new root address.
You can omit the protocol by using // in front of the path. Here is an example:
Google
By using //, you can tell the browser that this is actually a new (full) link, and not a relative one (relative to your current link).
I've created a little function in React project that could help you:
const getClickableLink = link => {
return link.startsWith("http://") || link.startsWith("https://") ?
link
: `http://${link}`;
};
And you can implement it like this:
const link = "google.com";
<a href={getClickableLink(link)}>{link}</a>
Omitting the the protocol by just using // in front of the path is a very bad idea in term of SEO.
Ok, most of the modern browsers will work fine. On the other hand, most of the robots will get in trouble scanning your site. Masjestic will not count the flow from those links. Audit tools, like SEMrush, will not be able to perform their jobs
I have a URL www.foo.com/bar/hello/world Can I use href= in such as way:
LinkText
In other words, because of the versioning repository I use for work, only the sublink /hello/world of the final URL will the same when I push the site live.
For reference, see the docs
However, in href, you can either use an absolute URL, such as https://www.foo.com/bar.html or, relative, something like /bar.html, where / refers to the webserver root (but not webserver's system root), or, you can use bar.html which points to a file in the same directory level.
Basically you want to have a /hello/world link, it will point to www.foo.com/hello/world.
If you want it www.foo.com/hello/world to point at www.foo.com/bar/hello/world, you can either rewrite the URL on the server, or, redirect the users to www.foo.com/bar/hello/world
For URL rewriting, see your appropriate webserver docs
Only if the source code is located in 'http://www.foo.com/bar' and then it needs to be going to a valid file extension to execute an action:
LinksText
Is it possible to make a link that would normally go to an id:
<a href="http://example.com/page#someid">
instead go to a class:
<a href="http://example.com/page.someclass">
Would the page scroll wildly up and down, trying to reach all the elements with that class, or would it just do nothing?
It would do nothing, except look for a file called "page.someclass" at the server and most probably yield a 404. Please refer to the URL spec because you're wildly confusing CSS selectors with the 'hash' part of the URL.
Why don't just try it?
JS FIDDLE DEMO
If you are using a class als anchor link, your browser tries to open it as url, like in the example named above index.content. Because he is not able to find it, you will receive an 404 not found or 403 forbidden error.
So there should be a very basic way to do this, but unfortunately I don't seem to be able to find it.
How can one set an Href link to point to the 'base website url' + the 'link', rather than adding the link to the current page.
I.e. if I'm at www.example.com/content1/
I want the search function to go to www.example.com/search/
and not www.example.com/content1/search
I could just specify "www.example.com/search/" but then if it page is deployed locally I end up with a bunch of links to non-existent pages or vice versa. How can I specify the The Base hosting URL using DJango (whichever the server is running, whether the hostname, the current server ip, localhost etc.).
The best way to do this is the name your urls and then use the url template tag. Example below:
First, name your views. Use something like:
urlpatterns = [
...
url(r'^search/$', views.search_view, name="search"),
...
]
In this example, you've got your url for your example.com/search/ view. It is named 'search', which can be used url template tags and using the reverse() function.
Next, in your template, use the url tag with your url name:
Search
You shouldn't need to add 'base website url' to your href, it is implied. Make sure href is prefixed with '/' to set and absolute path and no '/' for relative.
home
is the same as
home
and will work no matter which sub directory you are in
If you are on the homepage and you use the link:
sample
it will effectively equal:
sample
but that same link used on the page http://www.mywebsite.com/sample will equate to:
sample
using:
sample
Will always equate to the following no matter where on the site it is used:
sample
If you are using django consider using the url template tag as Alex suggested:
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#url
Make the link point to /search.
Any link that starts with / is relative to the domain root (say, http://example.com/) whereas any other relative link is relative to the current URL.