How to use HTML

to improve your Ecademy Profile

and MarketPlace listings…
HTML? Hypertext Markup Language...

It's one of those geeky things you don't really want to learn, but if
you master a few basic techniques, you can make any online
advert and your profile really work hard for you.

This guide will teach you the basics, and point you to free
resources that you can use to test and check what you have
learned, as you apply it in the real world.

make html make sense page 1/10

created for ecademy members by clarocada ____________
 Where to make your mistakes…
You can of course experiment with previewing your advert in Ecademy, but you can't preview
your profile, so you may wish to try out some ideas in a place where nobody can see the results
of you getting it wrong.

http://www.draac.com/javatester.html

You can type HTML and see what it will look like at this site.
There's also an online guide to HTML if you are feeling frisky.

make html make sense page 2/10

created for ecademy members by clarocada ____________
 What is the basic rule of HTML?
Remember this basic rule, and you'll be good to go with any HTML code.

1. When you begin an HTML instruction, you need to end it.

That's it.

So when you <b> start something in bold</b> , you need to finish it.

You start a code by typing brackets <i> and you end it – this example is italics - by typing brackets
with a / at the beginning of the code: </i>

And that's about it. <u> As Magnus Magnusson used to say – I've started, so I'll finish.</u>

make html make sense page 3/10

created for ecademy members by clarocada ____________
 Emphasis
How to make text Bold:

This is the emphasis of <b> bold</b> . You can also say it's <strong> strong</strong>

How to make text Italic or Emphasised:

This is the emphasis of <i> italic</i> . You can also say it's <em> emphasised</em>

How to make text Underlined:

This is the emphasis of <u> underlining</u> . And here it's <b><u> bold too</b></u> !

How to make text Big:

This is the emphasis of <big> bigger text</big> .

make html make sense page 4/10

created for ecademy members by clarocada ____________
 Everything is linked…
How to make a link to another web page:

• Remember to ALWAYS include http:// at the beginning -

<a href="http://www.mywebpage.com/page1.htm"> Click here to visit my

great web site about my area of expertise</a>

• The text in red is the web page address you copy from your web browser window
• Remember to include the quote marks to enclose the address of the web page.

How to make a link to another part of the SAME web page: Great for a table of contents.

• Create named "anchors" within a page and link to them.

<a name="anchor1"> THIS IS AN ANCHOR POINT</a> which is invisible on the screen but
you can jump to this anchor point by clicking on a link to it:

<a href="#anchor1"> Click to go to Anchor 1</a> .

make html make sense page 5/10

created for ecademy members by clarocada ____________
 Your attention for a moment!
Bullet points and numbered lists are a great way to break up lengthy text.

Start and finish a list with <ul> unordered list of bullets</ul>

Or an <ol> ordered list of numbers</ol>
<li> defines each list item and </li> ends each item.
You can usually get away with not closing off the <li> code with </li> .

<ul><li> We use short sentences, with simple words

<li> And make things easy to read – maybe using bullet points. </ul> will give:

• We use short sentences, with simple words

• And make things easy to read – maybe using bullet points.

<ol><li> After we have said just what we mean…

<li> We stop. And say “Please contact us."</ol> will give:

1. After we have said just what we mean…

2. We stop. And say “Please contact us.”

make html make sense page 6/10

created for ecademy members by clarocada ____________
 A picture tells a story…
Adding a picture or grpahic can make things clearer.

<img src="http://mywebsite.com/nice-doggie.jpg"
align="left" hspace="20" vspace="10" alt="Picture of Dog">

1. You can line it up left , right or center

2. You can give it a little room – hspace="20" means 20 pixels of horizontal space at each
side of the image, vspace="10" is 10 pixels of vertical space - above and below. Using
this means that text does not bump right up against an image, but flows around it more
legibly.
3. The alt or alternative tag shows up the description of the image "Picture of Dog" when the
image is still loading, or when the mouse is placed over the image. It's always good sense to
add this to ensure those with visual impairment can use a web site effectively.
4. You need to host the image somewhere online – use Certainhost.com which has special offers
for Ecademy Members including free domain registration and hosting two domains as
standard, or you can store images for free through sites such as http://www.freeshare.us

make html make sense page 7/10

created for ecademy members by clarocada ____________
 Heading for Google…
Headlines attract attention.

In HTML, using H1 and H2 flags up "The most important Headline" and "The second most important
headline" to the web browser and to search engines.

<h1> The most important Headline</h1>

Using H1 and H2 flags up "The most important Headline" and "The second most important headline" to
the web browser and to search engines.

<h2> The second most important headline</h2>

Draw the line: <hr> does just that – draws a line. It does not need to be closed.

make html make sense page 8/10

created for ecademy members by clarocada ____________
 Tools and Tips…
1) You can type HTML and see what it will look like at this site – there's also an online guide to HTML
if you are feeling frisky: http://www.draac.com/javatester.html

2) You can view the source (the HTML code) of any web page by ctrl-clicking or right clicking and
selecting 'View Source'. Use a text editor like Notepad on your PC or Textedit on Mac to keep your
experiments saved, and copy and paste from there.

3) There are a number of inexpensive and freeware programs that allow you to edit and preview
HTML – we can recommend Textmate for Mac http://macromates.com/ and Notetab for PC at
http://notetab.com

4) Problem? Want to embed video or sound? Want a custom set of styles? Skip steps 1-3. Call David
Petherick on 0845 658 9058 for ten minutes of free advice on the NHS (Nice Helpline Service).

Ecademy: Email: Skype:

http://www.ecademy.com/user/davidpetherick david@clarocada.com davidpetherick

make html make sense page 9/10

created for ecademy members by clarocada ____________
HTML Help
on the NHS

Nice Help Service

08456 58-90-58
10 Minutes free for
Ecademy Members.

make html make sense page 10/10

created for ecademy members by clarocada ____________