0

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

TimothyKA
  • 37
  • 1
  • 9
  • 1
    Without loading a new page, this can only be done with JavaScript. You might wanna have a look at [`History.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method). – Siguza Jun 12 '18 at 22:14
  • Possible duplicate: https://stackoverflow.com/questions/24543101/how-to-create-a-subpage-on-a-website?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Ethan Ryan Jun 12 '18 at 22:21
  • @EthanRyan // He's asking about sub pages, not pathways – TimothyKA Jun 12 '18 at 22:31
  • @Siguza // Thank you, I'll be sure to give it a look! – TimothyKA Jun 12 '18 at 22:31

2 Answers2

0

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:

<a href="FILENAME.html">PAGE NAME</a>

If the FILENAME.html is not the same directory you'll address it like this:

<a href="FOLDER/FILENAME.html">PAGE NAME</a>

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.

Ethan Ryan
  • 467
  • 10
  • 16
0

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><a href="#books">Link to Books</a></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>
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
  • if it's a parallax scrolling effect that you are after you could check out https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/ (there are other tutorials available also) – Rachel Gallen Jun 12 '18 at 22:43