…use these to jump around or read it all
Answering a ton of email every day allows me to keep an eye on
when the new batch of HTML writers come into the fold. The questions I receive always
become more and more difficult, and then all of a sudden…they become much simpler. The new
group of people has arrived.
What’s more, in my constant want to write tutorials on new and
more difficult topics, I forget to create more beginning-level tutorials. In that vein, I
offer this tutorial.
Lately, I’ve been getting a lot of email asking about setting up
a site with numerous internal pages. For example, let’s say you create a homepage. We’ll
call it homepage.html.
You then create three more pages:
At the moment they are just sitting on your hard drive (or floppy
disc) and now you want them to become a site. Homepage.html will offer links to the three
other pages. That
’
ll be your first site. Good. Now, how do you do it?
First off, I’m assuming you already have a place to post these
pages.
So, now you have a place for your files. This “place” you have
been given is actually a small section of a hard drive on a server somewhere.
In computer terms, you have a directory where you can place your files. Think of this directory
like an equal to a floppy disc. It’s a contained area where the pages, and all the images
that go on those pages will be housed.
This is important to remember when you’re writing
the links that will connect these four pages together.
You’ve probably already read through
Primer Four – Creating Links. If not – give it a once over pretty
soon. It’ll give you the basic format of a link. Now let’s talk about the pages you’ll
link to.
First off, let’s attach to a page outside of your site.
Here’s the basic format:
Note the address above is a full URL. (“URL” stands for Universal
Resource Locator. It’s a fancy way of saying “web address”) It starts with that
http thing and ends with that .com deal. It’s a full address.
Now let’s look at what I
call an internal link. This is a link that stays within your own site.
One of your pages is calling for another one of your pages.
We’ll say this is a link
from your homepage.html to links.html. Remember that from above? Here’s the format:
Notice I’m only calling for the page, without the full address
attached. Why? Well, because I don’t need it. To make the point a little stronger, let’s
look at the directory structure of web addresses.
For the sake of continuing this discussion, and because I love
to hear myself talk, let’s take this little fantasy of mine a bit further. You purchase an
account on a server called www.joeserver.com. When you sign up for your account, you choose
the login “schmoe”. This means that, most likely, your email address will be schmoe@joeserver.com
and your web site address will be http://www.joeserver.com/~schmoe. The little squiggly
line thing (~) is called a tilde. It tells the server, “There is one directory on this
server called ‘schmoe’- find it.”
When you use your File Transfer Protocol
(FTP) program to upload files to your new server, you will upload into the directory that
was set aside for you – in this case, schmoe.
So you upload your homepage.html page into your directory.
The address of that page is now http://www.joeserver.com/~schmoe/homepage.html.
See the slash I added and then the name? I do that because
the homepage.html page is now inside your directory called schmoe.
Think of a directory structure as one item being inside of a
larger item. For example, a word is inside of sentence, is inside of a paragraph, is inside
of a page, is inside of a chapter, is inside of a book. If this were written in
directory structure format, it would look like this:
It gets smaller as you move to the
right, each is inside the previous. Take this URL for example:
In that URL, the page “joe.html” is inside a directory called
Ohio, is inside a directory called pages, is inside a directory called users, is on a
server called server.com.
That’s why the page homepage.html is at the end of the address
above. Make sense?
Now we put together a site in your own directory.
Once again, you have a homepage called “homepage.html” and three sub-pages that you want to link
to from homepage.html. They are “links.html,” “photos.html,” and “story.html”. First off,
you need to to FTP, or “upload” all four pages to your directory. Now, here’s the first link
on homepage.html that will call up your links.html page.
Notice I am only calling for the page by its name. I am not
using the full address.
Now, I could use the full address. There’s no reason why I couldn’t.
If you followed along with the discussion above, you’ll remember that since the file was
uploaded into the schmoe directory, its full address would be http://www.joeserver.com/~schmoe/links.html.
So why not use it?
If you are linking to a page off of your site, then you must
use the full URL. The reason is that you are leaving your own directory. In fact, the
chances are really good that you are leaving your server all together. Because of that,
you need to offer your HREF command the full address to the new site.
But when you’re staying within your own site, as we are above,
you need only call for the page name. You see, your directory is a closed home for all of your
pages. If you only call for a page or an image through its name minus the full address, what
happens is that the server looks for the page or the image inside the same home that
houses the page that called for it. In other words, servers will search a page’s home directory
by default. That’s good to know when you create your links. It means you only have to use
the page’s name minus the full URL.
Always playing the rebel, huh? The answer is that your internal
links might run slower. You see, if you use the full address, what happens is that when your
user clicks on a link, a full search process begins. First the server is located, next the
directory is located, then the page is located. Whereas, if you use only the name, the search
is already at its destination. The server simply searches itself. Slick, huh?
So what is written onto homepage.html to link the pages together?
This:
<A HREF=”links.html”>Click Here for My Favorite Links</A> <A HREF=”photos.html”>Click Here for My Photos</A> <A HREF=”story.html”>Click Here for My Best Story</A> |
Now you’re all linked up. Hey! You made more than a couple of
pages. You linked them all together. You made a site.
Enjoy!
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
