Cpanel HTML Editor Tutorials

This Tutorial shows you how to Create Links to other pages, files, and websites using Cpanel's HTML Editor, included Free with all of our Hosting Plans. Each Tutorial below assumes you have clicked on the file you want to edit and have it opened in the HTML Editor window. If you don't know how to do that click here.

Learn to use our Free HTML Editor
Index of Topics / Tutorials

Creating Links 2 (2 page Tutorial)

Links (short for Hyperlinks) are essential to "link" your web pages together to form a website, but links can also be used to create "live" Email addresses, download files, or go to specific places in your web pages. This tutorial will show you how to:

• create "live" email links
• create email links with Subjects
• make links to files, music, etc. for download
• create "Bookmark" links to specific sections of a page

Creating "live" Email Links

A "live" email address will open up the users Email program with your email address in it, which makes it easy for the person at your website to contact you! We're going to learn how to create them ... Here's how:

You should still have your page test3.htm open in the HTML Editor Window from our last lesson ... if not, create a page called test3.htm How?

1) In the HTML Editor Window Type in your Email Address and hit the spacebar ... you just created a "live" email link ... that was easy!

2) To test your link click the Preview button at the bottom of the HTML Editor Window to view your web page in a browser.

3) click on your Email Address. It opens up an email with your address on it!

4) Close the email and click the Design button -

Note: The Color of your Link will become Purple like this -> you@youremail.com after it is clicked on ... this way users can tell which links they have been to!

Creating Email Links with Subjects

Let's learn how to create an Email link that has the "Subject" already filled in, which makes it really easy for someone to email you, and you'll know what the email is for.

1) In the HTML Editor Window type "Email Us" and Highlight it How?

2) now "right click" your mouse anywhere inside of the highlighted text. This will open up a "drop down menu" ... click on Insert/Edit a Hyperlink ...

This opens the Insert Link Window, click on the E-mail address button

3) Create your link by filling in the boxes and click to create Hyperlink

The information in the above window will create this link - Email Us - An explanation for the boxes /settings are:

E-mail address: this button needs to be clicked on to create email links

• E-mail Address: type the email address here
• Subject: you can type a Subject for the message
• Title: this is optional - It will appear when your mouse travels over the link

4) To test your link click the Preview button at the bottom of the HTML Editor Window to view your web page in a browser.

5) click on your Email Address. It opens up an email with your address on it, and the message Subject line is filled in too!

6) Close the email and click the Design button -

Creating Links (cont.)

This is your Toolbar

Each item on the toolbar performs a separate function, and is grouped in a way that should be familiar to you. We will be working with the Links group.

Links and Bookmarks

This is the Links group
To use: 1) Highlight text How?, 2) make selection 3) create link

Creating Links to Downloadable Files

Let's learn how to make Hyperlinks to let people download files and documents from your website. These files must be stored in a Folder on your site called "downloads".

1) Create a New Folder like we did in Tutorial 6, but name it "downloads" How?

2) Upload a file (.doc, .pdf, .mp3, .exe, etc.) to your downloads Folder How?

3) Go back to your HTML Editor Window and type "Here's the file - Download Now" and Highlight it How? (your page "test3.htm" should still be open ... )

4) Click the Link to a Document tool on your Toolbar to open Link Window

the Link to Downloadable Document Window

5) All files in your "downloads" Folder are listed ... click on the file you want to link to (it will turn blue) and click to create hyperlink.

6) To test your link click the Preview button at the bottom of the HTML Editor Window to view your web page in a browser.

Users will be able to Run the file or click Save to download it to their hard drive

7) when done previewing click Design button -

Note: The Color of your Link will become Purple like this -> Here's a great website! after it is clicked on ... this way users can tell which links they have been to!

Creating Links to sections of Pages

To go to a specific section of your web page you can create a "Bookmark" (Also known as a "Named Anchor"). Once the Bookmark has been made you can create a Hyperlink to that page and Bookmarked section. Here's how ...

1) In the HTML Editor type "Go here for more info" - Highlight the words more info How? This is a bookmark

2) now "right click" your mouse anywhere inside of the highlighted text or link. This will open up a "drop down menu" ... click on Insert/Edit a Hyperlink ...

This will open the Insert Link Window where you can create or edit your link

3) Type test3.htm#more_info in the Address box. You can also add a title if you wish. Window should be in the "Default" setting. Click "OK" to create link

Note: test3.htm is the name of the page ... #more_info is the named anchor link Remember to include the pound sign #before

4) Hit your "Return" Key on your keyboard about 10 times (pretend this all text)

5) Click the Insert Bookmark tool to open the Insert Bookmark Window

6) Now type "more_info" inside the Bookmark Name box and hit "OK" Note: No spaces between words ... Must use _ to connect each word!

Header for the Bookmarked Section:
7) Hit your "Return" Key on your keyboard 1 more time (to place the text Below The Named Anchor) and type in the words More Info. This is the Header for the Bookmarked Section, where all your text would go explaining more information ...

Note: before you can Preview a Bookmark you must click to Save your page!
Then click on Continue editing test3.htm to return to the HTML Editor Window.

8) To test your link click the Preview button at the bottom of the HTML Editor Window to view your web page in a browser.

When you click on the "more info" link you'll jump down to the More Info header. You can create Bookmarks to any of your pages that have Named Anchors.

9) when done previewing click Design button -

This concludes this Tutorial ... are you having fun?

Next Tutorial Tables 1: Introduction to Tables and Web Page Design

Top