I couldn't figure out a title that descibes what I need but I will explain here. (I know how to make a sub page, just cant figure out how to make a path).
This may seem like a stupid question (which I cant figure out for the life of me after doing research), but how does one create a sub page to your html file so that it is a pathway such as:
exemplesite . com/Porfolio/
then you click an image which takes you to a new subpage and then the URL becomes:
exemplesite . com/Portfolio/Project-1
and this without changing pages. (I do not want this: exemplesite . com /Project-1)
Hope this makes sense.
Thank you
To create links for subpages, link to the folder, then the title of the page within that folder you want to link to.
For example:
This is how you do it:
PAGE NAME
If the FILENAME.html is not the same directory you'll address it like this:
PAGE NAME
answer via: https://forums.digitalpoint.com/threads/creating-links-for-subpages.2150899/
In the example you gave, Portfolio/Project-1, you would have a folder, Porfolio, and within it, a file, Project-1.html.
You can create "jump-to" anchors within your page by adding simply referencing element ids in a local href link (see snippet). I added a sizeable (ish) padding-bottom to clearly demonstrate the jump.
p {
padding-bottom:40px;
}
<body>
<p>Link to Books</p>
<h2>Introduction</h2>
<p>Welcome!</p>
<h2>Fruit</h2>
<p>Apples, Bananas, etc.</p>
<h2 id="books">Books</h2>
<p>List of books</p>
</body>
Related
How do I create a link to a part of long webpage on another website that I don't control, that doesn't have an anchor tag?
I am trying to create a Course Outline Finder chrome extension for my university that you can use to:
Type course code in input box. (Use JS to filter out all other course codes)
Click the course code that remains after entering course code.
Course code link then leads you to a specific part of the university webpage that shows a list of course outlines for that specific course.
Ideally the webpage would have given an anchor tag like the following:
<h2 id="anchor">COMP150</h2>
Which I would then be able to link by doing the following:
<a href="https://www.ufv.ca/calendar/CourseOutlines/PDFs/COMP/#anchor>
But the website unfortunately doesn't have any id's for the h2 tags.
It instead has this:
<h2>COMP 150</h2>
<ul>
<li>COMP150-20000927.pdfEffective Fall 2012</li>
<li>COMP150-20011207.pdfEffective Fall 2019</li>
</ul>
Is there anything I can do?
You can insert the ID yourself in your extension:
document.querySelectorAll("h2")
.forEach(header => header.id = header.id ? header.id : header.textContent.trim())
Alternatively ask them to add an ID to their headers - they might agree
Back with another big question:
I have to create a network of pages with content linked though them. For link inside the same page i'm using this method:
<div id="anchorname">
The content.
</div>
and:
Link Text
Now i have to link to the #anchorname from another page but it doesn't work, i tried this:
Link Text
Is there something i am doing wrong?
This is possible to do. You might try using the full name of the page including the suffix. e.g:
Link Text
If that doesn't work then I would experiment with using a full path.
EDIT: As you've stated that you're using Wordpress then you should try it like this:
Link Text
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>
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
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.