Have you noticed when visiting some of my challenges how you can click a word and skip around the page? I call those Page Jumps or Skips. I’ve written articles here on how to do several different kinds, but today I’ll show you two bits of HTML code you can use to do several things. Believe me when I say this is a lot simpler than you may think, or it may look at first. No, I didn’t learn this in a school. If I did I probably would know some proper names for things. I’m a lay person about this stuff and try to give it to you in simple English, while using some proper jargon.
One fun thing you can do with what I’m going to do is this. I want you to click on the following words. Go to Comments. Then scroll back up here or hit your back button.
A QUICK HELLO FROM HTML
What’s HTML? It means Hyper-Text Markup Language. Glad you asked? Make more sense to you now? Me neither. How about “a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.” I got that from Google when I typed in HTML definition.
HTML doesn’t use normal words. If it did it wouldn’t be Code. Yay, us, right? Boo! Hiss! Actually, it can be fun when you know not to be afraid of it. Practice in a post and if you mess it up, so what? You don’t have to hit PUBLISH.
Let me give you an example of HTML language.
HREF means hypertext reference. Basically for us it means it helps create a hyperlink to something when combined with other information. For example, if I wanted to put a link to Amazon for my book here, and then went to look at the Code in the TEXT tab in my POST EDITOR in WordPress, I would see href=”http://www.amazon.com/AMBER-WAKE-Gabriel-Falling-Adventures-eboo, at least that’s the beginning of it. Notice the href at the beginning. That’s HTML.
In other words, you’re using it every day when you publish a post.
INSIDE THE POST EDITOR
There are two tabs in the POST EDITOR. One tab is the VISUAL tab, which is how it looks on the actual site when published. This is the simple way of doing things and you can just use the TOOLBAR to change Text Color, Text and Image Alignments, and general things like that without doing any altering.
The other is the TEXT tab where all the HTML happens. All that Text Color changing and all you do in the VISUAL tab, well the HTML part of that can be found in the TEXT tab. In the TEXT tab you can change spacing between paragraphs a bit more, and do some other things as well, which is why I’m writing this in the first place.
One thing to remember is that when you do these scripts, make sure not to switch back and forth between the VISUAL and TEXT tabs. You will lose your newly added scripts. I click on SAVE DRAFT often if it is a large project. If you are curious how it is looking, click on PREVIEW.
So far so easy.
THINGS TO NOTE AS WE MOVE FORWARD
You will see COLOR CODING, BOLD FACE, and LARGE FONTS as we continue. All of these are for differentiating information. There is no need for different colors, bold, italics, large fonts, or anything other than plain text when doing HTML.
For today:
RED-Means you don’t change that in the script.
GREEN-Means you can change it. Most likely you will to meet your purposes. Usually these are real words, such as what a Reader will click on to jump to another part of the page, or it may be the Destination one reaches after clicking. A Destination can be a word within a sentence, or even a Heading for a Category, Paragraph, or any other thing you want it to be.
PINK/PURPLE–Is used for the symbols ><. When you see those in that formation, it means you can type words between them and those words will be seen in the actual published post while the rest of the Code is invisible and takes up no space at all. The words between the >< will be shown in GREEN below. See above for what GREEN means.
You’ve seen all of this at work before.
You’ve seen Return to Top in an article before, right? Did you see >< on either side of those words? Did it look like >Return to Top<?
No it didn’t. That’s because the >< is part of the long script and thus is invisible and as far as the visible post is concerned, doesn’t exist. All you saw was what I’m referring to as the GREEN part between the ><. >Return to Top<
All good?
I’M GOING TO START WITH THE GO TO CODE. (At least I call it that.)
Go To/Return to Top Code-When the Reader clicks on it, it takes the Reader where they want to go. If you participate in my challenges you will see something that says click HERE to skip to the Prompt. The word HERE replaces the words Return to Top in the code below. That’s how useful the two codes are I’m going to show you.
Remember, in the code below the RED parts you leave alone, and the GREEN you change.
<a href=”#Top“>Return to Top</a>
So we have the href which is saying “I’m creating a link.” Then we have the #Top which is the Destination for the link, like Amazon was the destination for my book link I used earlier. Finally we have the words the Readers will see. What will the link look like to the Reader?
Return to Top
You can put anything for people to see between the ><. Just like you can use anything for the Destination or ANCHOR CODE. It doesn’t have to be #Top. What gave that away? Oh yeah, the fact Top is GREEN.
If you have problems with colors at all, the first line below is the Red, the Second is the Pink/Purple, and the third is the Green.
<a href=”# “ /a>
> <
Top Return to Top
HERE IS WHAT I CALL THE ANCHOR CODE or DESTINATION CODE:
This is what you need in order to make the Go To Code work. If you don’t have the Anchor Code, then the Go To Code has no Destination to go to.
Remember, in the code below the RED parts you leave alone, and the GREEN you change. Keeping in mind the idea of the Return to Top you see in articles, again this one should make a lot of sense.
<a id=”Top“></a>
The Top here matches the Top in the Go To Code and they MUST match. The only difference is the # in the Go To Code.
By placing this piece of code at the very top of your post, before all other content and then the Go To Code anywhere else, even multiple times at various places, you are set for the Return to Top operation.
That’s right, you only need this one Anchor Code when doing a Return to Top operation. You can then use the same Go To Code in the previous section over and over again throughout the post, after every paragraph if you needed to for some reason.
Still easy? Hope you said yes.
If that’s all you want to know about what I call In-Page Jumps/Skips then you can click Like at the bottom, share the post, reblog it, and follow my blog for other great articles. If you want more to do with these two pieces of script that’s cool and useful, keep reading.
So you’re still here? You glutton for punishment you.
Things to do with the two pieces of Script/Code are very simple. Just keep in mind those things you can change can be changed to be anything, and the parts between the >< can be seen by the Reader.
OTHER USES FOR THE CODES
Let’s see this in a format like my Haiku Challenge Review. I’ll did a very short version here with the code typed in VISUAL first. Then I will do a section where the code is typed in TEXT.
<a id=”Top“></a>
Welcome to the Haiku Challenge Review. This week we had over 60 participants join in and share their offerings. Talk about different takes. I’m just glad I stopped picking winners.
Click on the Category below to go to the section.
<a href=”#Life“>Life</a>
<a href=”#Romance“>Romance</a>
<a href=”#Wisdom“>Wisdom</a>
(Assume an image is here)
<a id=”Top“>Life</a>
Poet A of Number 1 Blog.
Poet B of Number 2 Blog.
<a href=”#Top“>Return to Top</a>
<a id=”Top“>Romance</a>
Poet C of Number 3 Blog.
Poet D of Number 4 Blog.
<a href=”#Top“>Return to Top</a>
<a id=”Top“>Wisdom</a>
Poet E of Number 5 Blog.
Poet F of Number 6 Blog.
<a href=”#Top“>Return to Top</a>
Welcome to the Haiku Challenge Review. This week we had over 60 participants join in and share their offerings. Talk about different takes. I’m just glad I stopped picking winners.
Click on the Category below to go to the section.
Life
Romance
Wisdom
(Assume an image is here)
Life
Poet A of Number 1 Blog.
Poet B of Number 2 Blog.
Return to Top
Romance
Poet C of Number 3 Blog.
Poet D of Number 4 Blog.
Return to Top
Wisdom
Poet E of Number 5 Blog.
Poet F of Number 6 Blog.
Return to Top
That’s it for this week. See you tomorrow with a brand new set of words to use!
Much Respect
Ronovan
To see how this works in the Haiku Challenge Review I’ve mentioned, click HERE to go to one of my Haiku Challenge Reviews.
If you are clear about everything, skip to the bottom, click Like, share the article, reblog it and follow my blog for more great posts like this.

Amber Wake: Gabriel Falling Available on Amazon.

@RonovanWrites
© Copyright-All rights reserved by ronovanwrites.wordpress.com 2016
Spread this stuff everywhere!
Like this:
Like Loading...