Welcome to 7th HTML tutorial and in this topic we'll learn how to create link within the same page. You might ask; why'd I want to click a link that will take me to the same page am already at? Why can't I just click refresh? Well, this is helpful when you have a long webpage and you don't want the user scroll down looking for every piece of information they want on a website. We can create something like table of content or a directory at the top and when users click any information they want, it takes them down to whatever they are looking for.
Previous lesson: How To Add Links to Webpage
Previous lesson: How To Add Links to Webpage
Here I will quickly introduce what we call lorem text. It's just some dorm text that you can place on your webpage for the main time. Though, these texts doesn't really have meaning but it gives your website content in a jiffy.
And the logic to create lorem text is to type lorem and it will automatically forms some dorm texts. We can also customize our lorem text by giving it the numbers of words we wish to have on a line.
Let's first of all create seven (7) titles by using header h3 and our title should be;
Facebook
Twitter
Behance
LinkedIn
Instagram
Dribble
YouTube
Under each title, let's create some lorem texts. Just go ahead and type lorem below each titles to create a full lorem text.
UPDATE: For those of you using mobile text editor - anWriter free HTML Editor, copy the code below from <!doctype html> to </html> and paste it in your empty anWriter free HTML Editor
<!doctype html>
<html>
<head>
<title>TopCRIX Studio</title>
</head>
<body>
<a href="contact.html" > Contact Us </a>
<h1>Welcome to TopCRIX Studio</h1>
<p>You're welcome to my website</p><hr>
<h2>About Us</h2>
<p>We have the best <strong>services</strong></p>
<br>It's not bye bye but <em>farewell</em><hr>
<h3>Facebook</h3>
<p> Facebook is the easiest place to
advertise your business but some
people don't know that. Most people count
it as a place to read other people's
success stories.</p>
<h3>Twitter</h3>
<p> twitter is so lively, someone can stay
on twitter for more than 12hours without
getting bored. With the latest trends,
retweets and so on and so forth</p>
<h3>Behance</h3>
<p> I've being seeing this for sometimes
and I don't really know what it means but
am sure it's one of the social media
platforms like Facebook and twitter</p>
<h3>LinkedIn</h3>
<p>One of the recent social media and
marketing platforms in Nigeria as of now
is LinkedIn. You can search for job
opportunities and get people to work for
you</p>
<h3>Instagram</h3>
<p>WoW! the best social media platform of all
time, where you see different kinds of
people with beauty, talents and so on...
but if you're not followed, you're left out</p>
<h3>Dribble</h3>
<p>The name sounds a lot like a football
tactics but it's not a football or soccer
term, it's also like Instagram but I think
it's mainly for showcasing projects</p>
<h3>YouTube</h3>
<p>I usually call it YourTube coz it's gives
total access to showcase your business,
talents and also allows you to learn fast.
YouTube from Google and also by Google</p>
</body>
</html>
WoW! We have a long webpage now. But the thing is, what if a user is looking for something on this webpage, and we don't want him to keep scrolling down to get to it.
Let's try to create a navigation system which will make it easier for users to locate whatever they are looking for.
The first thing is to know where to place our target, let's make a link at the top that says dribble, so that when a user clicks it, it will take him down to dribble section and also another one that says YouTube and when a user clicks, it takes him to YouTube section.
In other to link to this section of a webpage, we need to create a target, a way of saying; this is where we want to link, in other to do that; go into the header (dribble) and add anchors.
Note: you don't need to put anything as the text link because we are not linking it to other page or website. In the open anchor tag, instead of typing href, you need an attribute called name. And set it equals to whatever name you want. Let's use dribble because we are talking about dribble.
Now, we have the destination for dribble, in other to link to the destination, at the top of the page below the open body tag, we need to create an anchor tag and in between these open and closed anchor tags, type dribble. As illustrated below.
In other to link to this section when you click on the link above, we need to link href to the section. How? Instead of adding 'http://google.com' or index.html in front of the anchor, we need to type the harsh "#" sign and the name of the target section of the website which is dribble, right? As illustrated above.
Let's save and refresh our webpage to see the action. You can see that we have a link with the title dribble at the top of our webpage. When we click it, it takes us straight to the section.
You can't wait to become a professional website developer? get ahead of others or would like to request for the full video tutorial, join our WhatsApp Based Training or visit us today @Shop 9/11 Sower Plaza Asa-Dam road, Ilorin Kwara State.
You don't have time to learn but would love to have a fantastic website for your brand, check out our budget friendly beautiful website packages. Our web design service is awesome and affordable.
You don't have time to learn but would love to have a fantastic website for your brand, check out our budget friendly beautiful website packages. Our web design service is awesome and affordable.
