Messup434
Citizen
Registered: 12-2014
Posts: 17
Karma: 0 (+0/-0)
|
|
ReplyQuote
|
|
Page Jumps
Hi,
I have yet another question for a website I'm going to design. It is about making page jumps. So anyway, I was wondering how to make page jumps. In case this isn't the right term, I mean when you click a link to take you to a certain section of a webpage. This link is usually at the top of the page.
I read you have to make some link with keywords but for me that's gibberish so I came here if anyone knows. Thanks! 
|
|
1/4/2016, 6:14 pm
|
Link to this post
PM Messup434
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Page Jumps
Hi Brian,
I believe this is what you're looking for. 
|
|
1/4/2016, 7:05 pm
|
Link to this post
PM Lesigner Girl
Read Blog
|
Messup434
Citizen
Registered: 12-2014
Posts: 17
Karma: 0 (+0/-0)
|
|
ReplyQuote
|
|
Re: Page Jumps
 Great post!
To be clear:
The first bit you can change is what tells the link where to link to and the second changeable part is what the reader will see as the link to jump?
Also, I assume you shouldn't use words such as "the" because it might link to the wrong part of the page?! So you could put "the-person" (just an example) to specify which part of the page you mean to link to?.
I know I sound unprofessional with all these "layman's" terms 
Last revised by Messup434, 1/5/2016, 12:53 am
|
|
1/4/2016, 10:02 pm
|
Link to this post
PM Messup434
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Page Jumps
I think the best way to understand how it works is to copy and paste the code, and see the results for yourself.
Open Notepad, paste in the following, save it as practice.html, and then open it in your browser.
<!doctype html>
<head>
<title>Practice page</title>
<style type="text/css">
div {
height: 500px;
border: 1px solid #000;
margin: 1em 0;
background: #eee;
}
#third {
color: red;
border-color: red;
background: #fee;
}
</style>
</head>
<body>
<ul>
<li><a href="#first">Jump to first section</a></li>
<li><a href="#second">Jump to second section</a></li>
<li><a href="#third">Jump to third section</a></li>
<li><a href="#fourth">Jump to fourth section</a></li>
</ul>
<div id="first">First section</div>
<div id="second">Second section</div>
<div id="third">Third section</div>
<div id="fourth">Fourth section</div>
</body>
</html>
I added the red and pink styling, just to show you how an ID can be used as an anchor for links, and also how to style an ID.
|
|
1/5/2016, 12:55 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
Messup434
Citizen
Registered: 12-2014
Posts: 17
Karma: 0 (+0/-0)
|
|
ReplyQuote
|
|
Re: Page Jumps
 I'm so bad at this 
I opened up my Notepad (http://notepad.flowsoft7.com/) and pasted it in, then hit "save as", saved it as practice.html, went to open the file and it didn't appear in my files.
Let's see how many mistakes I made there 
So the anchor has to be where you're linking to, right?
 
Thank you for helping me 
|
|
1/5/2016, 2:44 am
|
Link to this post
PM Messup434
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Page Jumps
Not that Notepad. The Notepad program on your computer.
Press the Windows key on your keyboard. See this pic if you don't know what that is.
Type in the word, 'Notepad', without the quotes.
Click on the word, 'Notepad', which should have this icon next to it.
Paste the code in to there, then save it as practice.html. This will save the file to your computer, with the .html extension.
Open that file in your browser.
|
|
1/7/2016, 10:36 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
Messup434
Citizen
Registered: 12-2014
Posts: 17
Karma: 0 (+0/-0)
|
|
ReplyQuote
|
|
Re: Page Jumps
Thanks
But I have a different Chromebook version - one that doesn't have the Windows key
I tried Google Docs instead but it can't save
Thanks!
|
|
1/12/2016, 9:11 pm
|
Link to this post
PM Messup434
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Page Jumps
I don't think Chromebook uses Windows. If I'm right, this would explain why you don't have a Windows key, and you probably don't have Notepad.
Try this instead.
Last revised by Lesigner Girl, 1/13/2016, 2:54 am
|
|
1/13/2016, 2:43 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
Messup434
Citizen
Registered: 12-2014
Posts: 17
Karma: 0 (+0/-0)
|
|
ReplyQuote
|
|
Re: Page Jumps
*late response*
Thanks, Lesa
I had a look around and it looks pretty nifty so I'll probably use it for other stuff!
|
|
1/19/2016, 3:22 am
|
Link to this post
PM Messup434
Read Blog
|
Lesigner Girl
Minerva
Head of Runboard staff
Registered: 11-2005
Posts: 9597
Karma: 132 (+147/-15)
|
|
ReplyQuote
|
|
Re: Page Jumps
You're welcome, Brian.
|
|
1/19/2016, 6:21 am
|
Link to this post
PM Lesigner Girl
Read Blog
|
