|
Cpanel HTML Editor Tutorials
This Tutorial shows you how to Add Images, Emoticons and Horizontal
Lines to web pages 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
It's easy to add images to your web pages. We are going to assume
that you have a new account, with no images uploaded yet. We are
going to show you how to:
- Create a new web page for this tutorial
- Add images into your new web page
- Edit image properties (size, alignment, etc.)
- Add an animated Emoticom (Smilies)
- Create colored Horizontal Lines
Create a New Page
1) Make sure you are in the /public_html/ of File Manager.
- If you don't have File Manager open click here and do steps
1,2, and 3
- If you are inside another folder of File Manager click on Up
one level
2) Create a New Web Page for this tutorial - name your page test2.htm
and open up test2.htm in the HTML
Editor Window How?
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 Images group.
Images and Lines
This is the Images group
To use: 1) make selection 2) choose preferences 3) click
OK
Adding Images to web pages
3) Click on the Insert Image tool 
on your Toolbar to open the Images Window
4) Click on your "images" folder - if you don't
have an images folder you need to create one now and upload your
image(s) How?
5) This displays the pictures that are in your images folder. Select
the Image you want to insert into your web page (it will preview
on screen) then click 
to add.
The selected image appears on your HTML Editor screen with "handles".
The image appears at it's normal size. The handles allow easy width
and height adjustments.
Editing Image Properties
6) Put your mouse over image... when pointer changes to 
"right click" your mouse. This brings up a menu
- select Image Properties ...
This opens up the Image Properties Window - My Settings
for Logo.gif are:
- Text flow: Left (positions image to the left + ability
to add text to the right
- Distance to surrounding text: I added 10 pixels text
spacing on Right & Bottom
- Title: I titled my Logo "2serveU Hosting and Design"
(helps search engine rank)
- Height and Width: kept default image size (these could be modified)
- Border: no border (Type the number 1 in for thin border, 2 thicker
border, 3, etc.
Note: Text flow "drop
down" menu is shown in the Positioning Preview Window
click
to apply text editing changes
Adding Emoticons
6) Click on the Insert Emoticon tool 
on Toolbar to open the Emoticon Window. Select
an Emoticon Smiley, then click
to add it to your web page.
Adding Lines
7) Click the Insert Lines tool 
on Toolbar to open the Horizontal Lines Window.
|
a) choose settings,
click OK or
|
|
|
b) choose Color
and click OK
|
|
|
Alignment:
left, center, or right
Height: type pixel# for height
Width: enter % or pixels#
Color: optional, default is gray |
|
|
|
This would create a
Blue Line that is Center - 70% width - 2pixels
Like this, only wider
|
|
Practice inserting Images, adding a paragraph of text
(to see how it wraps around), separating the Images and text with
Horizontal Lines, and most of all .... have fun!
Next Tutorial 
Links 1: How to Create Hyperlinks
in your website
Top
|
Call us Toll Free: