I know that linking in general looks like
examplesite.com
I was wondering how would someone link within the page it self. Sort of like when someone clicks on biography section in Wikipedia and it scrolls down to the part that has the biography but staying on the same page.
Any example could would be great.
I believe that you're referring to URL fragments (a.k.a. named anchors or bookmark links).
You'd create such a link like:
Jump to example
Which would take you to the part of the page where the element with the ID of example exists. Like:
<h1 id="example">example</h1>
In older versions of HTML, the name attribute was first used for this, however the ID has replaced that.
What you posted is actually a link inside a website. It does not contain a protocol such as http:// nor starts with // which would indicate a protocol-relative link, so it would load exampleside.com relative to whatever path you are currently on.
These are the kind of links you can use (each inside href="..."). We assume that you are currently on http://example.net/foo/index.html
https://example.com - goes to the "external" site https://example.com
//example.com - goes to the "external" site xxx://example.com with xxx being the protocol used to load example.net, so in my example http://example.com
www.example.com - goes to http://example.net/foo/www.example.com as it is not an external link
#foo - goes to the element with id="foo" on the current site (does not load anything from the server)
So what you want is probably the last example: ... and then id="foo" on the element you want to jump to.
Add some id to the element you want to link to, e.g
<div id="target">Hello</div>
Then you can link it by using #:
Go to target
Go to target
<hr style="height: 300vh" />
<div id="target">Hello</div>
Related
I have created a WordPress theme and the images in it were all broken so I added a base path tag to the page.
<base href="https://www.example.com/wp/wp-content/themes/my-theme/"/>
But now all of the anchor / links don't work.
click here
The above link points to "https://www.example.com/wp/wp-content/themes/my-theme/index.php#an_id_on_the_page" instead of the same page but further down.
WordPress recommends adding "" to the path of every image. But that means breaking a workflow and editing the HTML code on every change.
Are there any ideas to fix this?
UPDATE
It looks like if I put a "/" in front of the anchor it looks like it is working. I'll test it some more to confirm.
No links or named anchors or blank hrefs will point to the original subdirectory, unless that is made explicit: The base tag makes everything link differently, including same-page anchor links to the base tag's url instead, e.g:
<a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
becomes
<a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>
<a href='?update=1' title='Some title'>A link to this page</a>
becomes
<a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>
With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.
Resource,
Total newbie question, but I cant figure out what im doing wrong. I want a make a link that jumps down the page to a header. I believe these are called fragment links. Here is my code thats not working:
My Link
<div id="cont">
<p>Lots of content here, abbreviated in this example to save space</p>
<h2 id="Frag">Header I want to jump to</h2>
</div>
Pretty sure you need to specify the name attribute for an anchor to work, for example:
Skip to content
<div name="content" id="content"></div>
Okay, so 'pretty sure' was a euphemism for 'guess' and I thought I'd look it up, so, from the HTML 4.01 Specification we get this from section 12.2.3 Anchors with the id attribute:
The id attribute may be used to create an anchor at the start tag of
any element (including the A element). This example illustrates the use of the id attribute to position an anchor in an H2 element. The anchor is linked to via the A element.
You may read more about this in Section Two.
...later in the document
<H2 id="section2">Section Two</H2>
...later in the document
<P>Please refer to Section Two above for more details.`
To carry on the convention of guesswork, perhaps your page isn't long enough to allow jumping to that content (that is, your page might have nowhere to jump and the content to jump to is already visible.)
Other than that, and from the same section of the spec previously linked, here is some general info on when to use what as the anchor identifier (in terms of the link its self) that could be otherwise valuable:
Use id or name? Authors should consider the following issues when
deciding whether to use id or name for an anchor name:
The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
Some older user agents don't support anchors created with the id attribute.
The name attribute allows richer anchor names (with entities).
Your code works fine in firefox anyway you can use as well name instead of id..
http://www.w3schools.com/tags/att_a_name.asp
if you want to have a nice scrolling you can use jquery scroll http://api.jquery.com/scroll/
I'm trying to create a page where a user clicks on a link on the left and is taking to a specific section on the page.
Here is example. I've added as much of the code I'm using as I can.
What your trying to do works with the Id or Name attribute.
To elaborate: The anchor tag that your rendering as the target of where your page needs to go should be:
<a id="myId"></a>
or
<a name="myId"></a>
or both..
When you build a link to another part of the page, you need two parts, the link (that you click), and the target (that the page scrolls to).
The link's href attribute needs to start with a '#'. This signifies that the link is 'internal' to the page, and not another, external page.
The target can be either a named anchor <a name="something"></a> or an element with an ID: <div id="something">. You don't include the '#' in the name or the ID.
That's the key part you're missing. Take the '#' off the front of your <a name=""> values and it will work.
Let us know if that works, and we can help you develop this further: There's a lot more polish you could add, but let's get the basics working first.
what is the meaning of this anchoring tag format
<A href="#some name">
Should be more like
Some Text
If you click on the link, the browser will automatically jump the element with id or name "some name", e.g.
<div id="some name">
Some more text.
</div>
You will also see that the URL changes. The generic format of a URL is (more or less):
<scheme>://<host>/<path>?<query>#<fragment identifier>
The fragment identifier is what you are talking about to and it refers content inside the page. The href attribute above actually contains a URL, a relative one. That means, this URL should be interpreted relatively to the current URL.
If you current URL is
http://www.example.com/some/path
then clicking on the link will lead you to
http://www.example.com/some/path#some%20name
As already said, the fragment identifier refers to a part in the current page, so the browser does not reload the page but just jumps to that part.
In layman's terms:
It is intended to link to a section of a page (specifically, it's usually a div or anchor named 'some name') rather than link to a new page. It can be used to link to a section of a new page other than the start also.
well we can have name anchors in our page like the following code
<!---Some HTML Code-->
Mark 1
Mark 2
<!---After some HTML Code-->
<a name="Mark_1">
<!---After some HTML Code-->
<a name="Mark_2">
by doing so we provide links that to scroll up and down a page and all but
I have seen several times on the net that when you click a link and a new page is opened and it contains many subjects but page is scrolled to the desired position.
HOW THAT IS DONE
for example, in stackoverflow's recent activity when we click some activity the relevant page is opened and page is scrolled to that activity out of many... this is just an example.. i don't want how stackoverflow does it... what i want how is this done or is there any name for this technique
You can append a hash with following the the value of the id attribute of any HTML element. See this example: http://en.wikipedia.org/wiki/Html#Attributes
It links directly to the section about "Attributes". In this section it also discribes the technique :)
you need
Mark 1
note the hash
It's doing exactly what you're talking about, a named anchor. So the link looks something like this:
Notice the '#' in the href (... 3550910#3550910), that's the named part. Takes you right where you want to go.
Btw in your example above your link to the named anchor should be
Mark 1
Notice the hash
I think you have it right, but you just need to add the target attribute.
Mark 1
This will open the link in a new page and should position it down the the anchor. I normally use the full URL in the href section though.