Home » How-To Guides » How-To Guide: Creating Links

How-To Guide: Creating Links

This How-To Guide is the first part of a three part series on web page development. This first guide, Creating Links, provides a simple introduction to HTML, how to create links to external content, and how to include content from other sources inside your own pages. The second guide, Working With Images, provides an introduction to the IMG tag and CSS, image size recommendations and how to use this information using the visual mode of the site editor.

The first two guides provide examples of how features are coded in HTML as well as how they can be applied using only the visual mode of the site editor. Even if only the visual mode of the editor is used, knowledge of what happens behind the scenes (in the HTML) can make using it more natural. The third guide (Teachers Network CSS Styles) provides a reference for all Teachers Network CSS styles.

The complete series:

  • Creating Links – (this guide) – Introduction to HTML, how to create links to other content and how include other content with links.
  • Working With Images – Introduction to the IMG tag and CSS, image size recommendations and visual editor CSS procedures.
  • Teachers Network CSS Style Reference – Teachers Network CSS style reference guide.

Introduction to Content Linking

One of the most powerful aspects of the web is the linkage of content to other resources either on your own pages or other websites.  Almost any content (words, phrases, images, video, etc) can be linked together.  Hyperlinking (usually abbreviated to just linking) is used to create interactive pages as well as sets of easily navigated structured pages.  Linking is one of the most important reasons (the other being quality content) the web has become as useful and popular as it is today.  It is what makes the web a web!

So how is all of this done and how can I do this within my pages?  Two things are needed – the ability to address or point to the content you want to link to (URLs) and a mechanism to use this information within your pages (to tell the browser where to go).  Both are simple to understand and use, and yes, you absolutely can do this within your pages!  This rest of this guide describes what hyperlinks are and how to create and maintain them in your own pages.

What Are Hyperlinks and URLs?

Hyperlinks are nothing more than the links on webpages that once clicked or selected will navigate the reader to another page.  They can point to a whole page (the most common usage), to a specific place within a web page, or to other content such as files (for download), web applications, music, video, or other resources.  Most hyperlinks cause the current page to be replaced by the selected content, however they can be crafted in a way where the new content comes up in its own window or tab.

So what do I need to get started linking my new pages to the rest of the world?   The first thing you need to know is what you want to link to.  Every resource on the web has a unique address or URL (Uniform Resource Locator) pointing to where the content can be found.  The page you are reading now has a URL that looks like:

https://teachers-network.com/how-to/creating-links/

URLs are shown in the navigation bar of most browsers and are broken down into three parts: protocol, domain, and relative URL.  The protocol in our case is https.   This tells the browser to connect to the remote website using the secure version of the HTTP (HyperText Transfer Protocol) protocol.  Other resources may use different protocols such as http, ftp, and others.  The domain component tells the browser what computer on the Internet to connect to.   In our case this is teachers-network.com.   The browser looks up the numeric IP address for teachers-network.com (DNS) and connects to that address.   The last component, the relative URL tells the browser what resource on the remote machine to connect to.   With our page this turns out to be /how-to/creating-links/.

Putting it all together, the URL is an address that tells the browser where and how to get the requested resource.  In our case it says to connect to the remote machine teachers-network.com using the https protocol and get the information located at /how-to/creating-content/.

Every resource on the Web has it’s own unique URL.  Once you know the URL of the content you want to link to, you’re ready to start creating hyperlinks!

What are HTML and Tags and Why Do I Care?

If you feel that you are gradually descending into acronym hell, don’t worry.   It’s not really that bad.   We’ve introduced a couple so far and they are related.  You now know what a hyperlink is.  We mentioned HTTP (HyperText Transfer Protocol) and it’s secure cousin HTTPS.  You’re probably wondering by now what this thing called hypertext that everything seems to refer to is.  It’s just a document written in a special markup language called HTML (HyperText Markup Language).  HTML refers to the language, hypertext is the document itself, and HTTP is the way we move the document or resource between computers.   Often the terms HTML and hypertext are used interchangeably.  We use the term HTML for the rest of this document to refer to both.

If you are using the visual mode of the site editor you can safely skip the rest of this section.  The visual editor hides the generated HTML code so you won’t have to deal with this.  On the other hand if you need to look under the hood and tweak the actual HTML code, a basic knowledge of HTML and CSS (Cascading Style Sheets) is necessary.  This document does not provide a general HTML/CSS tutorial but a few can be found in the general reference sections below.  Provided below is a VERY basic introduction to HTML and how links fit into all of this.

What is HTML?

Hypertext Markup Language, or HTML for short, is a tag based markup system used to label parts of documents so browsers know how to display or render them.  Web content is not stored in a form that looks exactly as it does on your computer or device.  Every screen, window size, and device offers almost unlimited combinations in terms of viewport size, fonts, operating system display capabilities, and the way they interact with users, just to name a few.  Web servers and browsers get around these problems through HTML.  In addition to the text and links to other content, HTML embeds instructions or labels around content telling the browser what it is looking at and giving it hints as to how to best display or render that content on the screen.  The browser takes this information and builds a pretty page to display based on whatever type and size of screen or window is available.

HTML Tags

HTML is a tag based markup language.  This means that it identifies parts of a document and associates that text with a tag the browser can later use for rendering.  The structure of a standard HTML tag is simple:

<tag-name> … content … </tag-name>

Standard tags come in pairs with a starting <tag-name> tag followed by the enclosed content and then terminated with a close tag: </tag-name>.  Note the ‘/’ before the name in the close – this is what tells the browser when a particular tag is done.  Tags can be enclosed by other tags.  HTML defines many different tags which do different things.  A simple example:

The <strong>stinky pig</strong> really needs a bath!

Most of this line is normal text, but the phrase ‘stinky pig’ is enclosed by a strong tag.  When sent to a browser it should look something like this:

The stinky pig really needs a bath!

Anchor Tags

This is really all there is to HTML tags.  We use different tags to format and display our content in various ways.   The tag we use for links is the anchor <a> tag and looks like the following:

Be sure to check out the other <a href=”https://teachers-network.com/how-to/”>How-To Guides</a>.

This one is a bit more complicated than our simple strong tag but not by much.  We only added a href=”URL” inside the tag declaration to tell the browser where to go if selected or clicked on.   The resulting page should look like

Be sure to check out the other How-To Guides.

Creating Links With The Site Editor

Creating links withing the Teachers Network site editor is simple.  Once you have your content you want to link (text, images or other), and you know its URL, you’re ready to go.  In our previous example we showed how easy it was to insert a link directly into the HTML.   The sections below cover how to create links both in the visual mode of the site editor and also provide basic HTML knowledge to create or modify links directly in the HTML (text mode).  A few advanced topics are covered in the Advanced Topics section near the end of this document.  Most people can safely skip the Advanced Topics section if they are only using the visual mode of the editor.

The General Links section below covers how to insert links to other content where you already know the destination URL.   These can point to content either on the Teachers Network site or anywhere else on the Internet.   The sections that follow (Gallery, Blog, and Forum pages) go over how to find the URL’s for some of the more common Teachers Network applications and what they look like.  The insertion of these URL’s into the page works exactly the same way as described in the General Links section.  The Gallery section also covers how to insert images and what the img HTML tag looks like.

General Links

Our first example links regular text to external resources.  The example below shows a very simple page titled Sample Page and assigned a Header 1 style.  The page has only one line:

We have not added the link yet but we want to change the text Jade Networks into a hyperlink that will take the reader to the Jade website.   To do this we select the Jade Networks text with the mouse (or other pointing device device) and click on the LINK Button   This brings up a dialog window asking for the URL to assign:

Once the URL is entered properly just click on the blue enter button to have it take effect.   You can add as many links as you like to your pages.  In addition to selecting text as we did above other content (headers, images, labels, etc) can also be selected and assigned a link in the same way.  When you are done editing your page save the page and all your content, including the links you built, will be saved and part of your new page.

Editing Links

If you need to go back and make changes to your link to correct mistakes or add new information this is also easily done.  While in the editor select anywhere in the link title and you should see a display similar to:

To change the URL click on the small icon that looks like a pencil.   This will return you to the LINK popup window where you can change or put in a new URL.   To remove the link entirely just click on the UNLINK icon

Gallery Images

Teachers Network Galleries provide a simple way to upload, organize and display multimedia content (images, audio or video).  This media can be seen either directly through the member or group gallery pages or individual media can be linked to from other pages.  Images can also be embedded into pages so they appear as a natural part of the new page.  Several options are shown below.

Check Visibility

Both member and group areas can have attached Galleries.  The owner or manager of the gallery (members or group admins) set the visibility of the gallery depending on their preferences.  Hidden or private groups are usually not visible to the world.   The same applies to member galleries if the owner has set the permissions to restrict visibility.  Before linking to gallery content, make sure that the content is visible to your target audience, otherwise you will end up with links that go nowhere.   This not only frustrates your readers, but also hurts your visibility with the search engines.

Linking to a Media Page

The simplest way to link to gallery content is to link to the gallery page where the media resides.  This is done exactly the same way as the links described above.   The only difference is that the page you are directing the browser to is a Teachers Network gallery page.  Member and Group Galleries have URL’s that look similar.   Member gallery URL’s look like

https://teachers-network.com/members/member-name/gallery/

Where member-name is replaced by the actual member name.  This URL points to the main gallery page for the given member and all sub-galleries and images simply add to this address.  Group gallery URL’s look like

https://teachers-network.com/groups/group-name/gallery/

Where group-name is replaced by the actual group name.

In the example below we will link to a real gallery page:

The URL for this page (can be seen and copied from the address bar in the browser) is https://teachers-network.com/members/connie/gallery/coron/coron025/.  From the URL we can tell that this is a member gallery owned by the user connie.  This user has created several albums, one of which is named coron.  The actual page for this specific image is coron025 (the last part of the URL).  Group gallery pages look similar except for the changes shown above.

For our simple link example we will create a simple blog page as we did above, but instead of listing the Jade page, we will link to the Coron25 page:

The resulting page looks remarkably similar to the first example above except when selected it will redirect to the coron25 image page.

Linking and Embedding Media

If we just want to list a link and let the reader click to navigate away from our page, the above method works fine.   It’s simple and works exactly the same as most links (see above).  But what if instead we want to show the image in our page together with the rest of our content and keep the reader engaged inside our content?  For this we cannot use anchor tags.   The anchor tag is used when we want to point to content off our page and provide an easy way for the reader to navigate AWAY from our content.  We need to pull intent INTO our page.  For our image gallery and pictures we instead use the image <img> tag.

The Image <img> Tag

The image <img> tag links images (jpg, png, gif, bmp, etc) to a specific place in your document.  It has the following form:

<img src=”URL” alt=”Hover Text”>

Note that unlike most other HTML tags, this does not need a closing tag and can stand on its own.   The src=”URL” acts in much the same way as the href= component of the anchor tag, except instead of providing a URL for the user to be redirected to, it provides a URL from which to PULL CONTENT from.  The alt= is optional and can be used to provide text to be displayed when the reader passes their mouse over the image.   Just replace Hover Text with whatever text you wish to display.

Other options for the img tag include ways to set the width, height, style and CSS references (see the Working With Images and Teachers Network CSS Style Reference How-To Guides for more on this).  Unless you are setting the width (resizing an image) to a very small value (150 pixels or less) it is recommended that you do not use the width and height settings here or you might break the display on smaller devices.

For more information on using the IMG tag, CSS, and general guidelines for images please see the Working With Images How-To Guide.

Blog Pages

Blogs are simple websites or parts of a website that just about anyone can use to create and publish information of their choice.  Teachers Network provides every member an area where they can create, maintain and publish their own content (see the Blogging How-To Guide for more details).  Individual blog posts look the same as most normal web pages and this is likely where you’ll use the information in this guide the most.  As with any other content on the Internet, you can also link to blog pages, either hosted on Teachers Network or on other sites as described above.  All you need is the URL of the page you want to link to.   Media content on the pages can also be directly linked to as described above in the image linking and embedding section.

Content Visibility

As with most other content make sure that your target audience has access to view the new page before linking.  If you are linking to some of your own blog pages make sure you’ve set the permissions appropriately so that the world can see (no private or hidden pages).  If you are embedding content from other pages make sure you have permission to do so and provide proper credit and links back to the content owner.

Forum Posts

Forums are virtual electronic meeting places where people exchange ideas and views on whatever topics they like.  They are arranged by topic where members focus on just one or a few issues at a time in a single place.  They exist in a public system area (https://teachers-network.com/forums/) and are also associated with most group areas (https://teachers-network.com/groups/group-name/forum/).  Groups with forums enabled have an additional menu item Forums tin the group menu bar.  Forum visibility is set by the group administrator so like the galleries, make sure that your target audience has access to the forum content before linking.  System forums should all be visible by the world.

Note: from the system forum area all forums (system and groups) that you have permission to see will be grouped together and visible.   If you go into a specific group forum area, only the forums associated with that group are visible.  This can be a bit confusing.   We’re looking for ways to make the differences more visible while at the same time retaining ease of use.   For the time being though please know that when looking at the main forum area you will be seeing ALL content visible to your account and not just the system (site) forums.

A simple test forum topic can be seen below:

This is not the best example as there is no meaningful discussion however it does show what a typical dialog looks like.   This particular discussion is found at https://teachers-network.com/topic/stem-test-topic/ and can be seen from the browser address bar when reading the comments.  Now that we have the discussion URL we can link to it as we would any other standard content.  More information on Teachers Network Forums can be found on the Forums How-To page.

Advanced Topics

Previous sections provide simple introductions to webpage design and how to use links in your content.  Once you start building your own content you’ll likely encounter problems that have not been covered here.  A few of the more common things you might run into are covered here.  We first focus on the HTML and then when available show how to solve the problem using the visual editor.  This list is by no means exhaustive but should help you quickly put together some reasonably good looking pages.  You can always learn more about HTML, CSS, Javascript, and all the other interesting web technologies later should that be where your interests take you.   But even if they don’t the goal here is so we can all get a lot done, get decent looking content published quickly, and with a short learning curve.

Open Link On A New Page

All the links we have created so far replace an existing page with new content.  This is the default way that most links work and is usually what we want.  There may be times though where you need to keep the existing page and open new content in its own window or tab.

So when is it acceptable to force a new window or tab to be opened?  There is no universally accepted answer to this question and opinions vary.  Taken to an extreme it should be self evident how annoying it would be if EVERY link opened a new window or tab.  Opening new windows should be done only when really necessary.  Some feel that if you are taking the visitor off your site to another place on the Internet, then this might be acceptable.  Not everyone agrees with this, including us.  A good rule of thumb is to only open a new window if it is used to add additional information or clarity to an ongoing discussion flow on your page.  If it is anticipated that the visitor is only temporarily bringing up additional content and then will continue where they left off on your page, this would be an appropriate time to open the new window or tab.  All other cases you should probably stick with keeping the flow in the current window or tab.

OK, so now that we know when and why to open up new windows or tabs, how do we actually do it?  As you have probably noticed it is possible to stuff tags with additional information or arguments.   For the anchor tag we did this with the href= and alt= attributes.  To open a link in a new window we simply add target=”_blank” to the anchor entry tag.  Our example at the beginning of this guide created a link to the main How-To Guide page.  If we now want this to open in a new window our new tag becomes:

Be sure to check out the other <a href=”https://teachers-network.com/how-to/” target=”_blank”>How-To Guides</a>.

When this is rendered by the browser it will look identical to our first link.   If we click on the link though instead of replacing the content on the current page it will open the link in a new window.

Forcing a link to open in a new window using the visual mode of the site editor is very easy.  Using our Sample Page example from before we select the text we wish to link to and then bring up the LINK window.   This time in addition to setting the URL we also click on the LINK OPTIONS icon (the button that looks like a gear).  It brings up another overlay window:

All we need to do is to check the Open link in a new tab checkbox and then click on the UPDATE button.  That’s all there is to it!

Wrapping Images Inside Anchor Tags

Most HTML tags allow for the inclusion of other tags inside the content they define.  This powerful feature allows us to build structure and page features not possible with any single tag type.  Common examples are combining navigation links (anchor tags) with section headers (H1 -> H6) and anchor tags with images.  Using nested or encapsulated tags lets us create header labels and images that can be clicked on.  This technique has been used since the beginning of the web to create graphic elements that are used as page buttons for example.   How you use these techniques and what you create is limited only by your imagination.

Let’s see what one of these combined tags look like.   First let’s start with a regular image tag:

<img src=”https://jade.net/logo.jpg”>

This should look familiar by now.   This tag displays the image on the jade.net site named logo.jpg and presents it on the page where the img tag is placed.  By the name of the image file we might guess that this could be a company logo.   At the moment if we click on this logo nothing will happen.   To allow the logo to be clickable we simply wrap the image tag inside an anchor tag like this:

<a href=”https://jade.net/”><img src=”https://jade.net/logo.jpg”></a>

Now when we click on the logo our browser will take us to the Jade site.  We wrap other tags, such as headers, in exactly the same way.

Visual Editor

When we insert an image into our page a row of buttons labeled Link To is displayed.   Just click on the type of URL you need, fill in the link URL and you’re done.

Best Practices

How we create, style, and use links in our pages is very important.  They affect how others see our content (image and reputation) and also how effective the links are.  Badly designed links (think early web pages) that look sloppy and unprofessional or use bright and improper colors impart that poor image to the content creator.  At the same time links that do not stand out and blend into the page cannot be seen and are easily overlooked, eliminating their whole purpose for being there in the first place.  Finally the way links are named also affects page ranking with the search engines (SEO).

Link Naming and SEO

Careful thought needs to go into link naming and presentation.  Link names should be short but at the same time descriptive.  They should stand out on the page and be clear that they represent clickable resources.  Link names should almost never show the actual URL but rather a terse description of what the URL points to.  To summarize:

  • Keep link names short – readers have a short attention span and need to decide quickly to navigate away or not.
  • Use descriptive names – don’t make the reader guess what the link might point to or how it is relevant to the page.
  • Do not use URL’s for the link name / description.
  • When linking to non-HTML resources (downloadable files, documents, pdf files, etc) add clear wording or visual cue’s to indicate.
  • Clearly identify links as a clickable resource on the page.

Link Attribution

When creating content you need to protect confidential and proprietary information of others, regardless if they are individuals or organizations. Use only content you have rights to, including images. If you are using images from other sites be sure to have their permissions to use. This includes stock photo sites. When using free stock photo sites be sure to review the license to make sure your usage falls within its permitted use. When using photos of others be sure you have their consent before publishing. If publishing photos or movies of minors, you need to have the written consent of the parents.

If you are writing about a third party where you have a relationship or partnership this must be disclosed with links or sources. Finally, do not steal the copyrighted work of others. If you quote another work as “fair use” be sure to give credit to the original author and cite the original sources and provide links back to the original. Be sure to always check your facts and provide links where appropriate.

For more information and useful references see the Profile and Content Guidelines How-To Guide.

Relative URLs

URL’s described in this guide so far have all been absolute URL’s.  Absolute URL’s include the protocol, domain, and relative URL.  They contain all information necessary to access the resource regardless of the location of the reader.  Relative URL’s contain just the information needed to access a resource relative to a known domain.  If the resource happens to be in the same domain as your page (same website), only the relative URL needs to be specified.  Pages written for the teachers-network.com website (this page for instance), can use relative URL’s and are preferred.  Referencing resources for all other web domains however requires the use of an absolute URL.

The How-To Guide main page on this site has the absolute URL

https://teachers-network.com/how-to/

We can use this URL anywhere on the Internet (including the teachers-network.com site) and get directed to the right place.  For pages on this site we can also use the relative URL:

/how-to/

Our anchor tag now becomes a lot simpler:

<a href=”/how-to/”>How-To Guides</a>

When the browser sees a relative URL, it knows  to reuse the current connection information.  It uses the known protocol and domain address for the new content.  Page loading is more efficient for the browser as it does not need to perform any additional DNS name lookups.   These address queries may be cached but if not, the use of an absolute URL will result in additional network overhead and slower page loading time.  Relative URLs are also much easier to read in the resulting HTML.

Other Resources

The links below offer more background into the details of how hyperlinks work and their technical specifications.  Most Teachers Network members who only use the site editor in visual mode will not need this additional information as the editor hides the details well.   For those who use the text mode of the editor and need to dig deeper into the HTML code to tweak tag settings, the following provide a few useful introductions.   Prior HTML and CSS knowledge is assumed.

URL / URI / URN Discussions

There is a lot of confusion between what URI/URL/URN’s are, how they are defined, and how they differ from each other.  For purpose of most Teachers Network members, URL’s and URI’s can be considered the same and the differences not important.  The links below offer more detailed (and at times confusing) discussion about the technical differences between them for those interested in the technology.

Other Useful How-To Guides

Web Page Development Series