You are on page 1of 10

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
created for ecademy members by clarocada

page 1/10
____________

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
created for ecademy members by clarocada

page 2/10
____________

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
created for ecademy members by clarocada

page 3/10
____________

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
created for ecademy members by clarocada

page 4/10
____________

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
created for ecademy members by clarocada

page 5/10
____________

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
created for ecademy members by clarocada

page 6/10
____________

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
created for ecademy members by clarocada

page 7/10
____________

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>
second most important headline</h2>

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

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

make html make sense
created for ecademy members by clarocada

page 8/10
____________

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: http://www.ecademy.com/user/davidpetherick Email: david@clarocada.com Skype: davidpetherick

make html make sense
created for ecademy members by clarocada

page 9/10
____________

HTML Help on the NHS

Nice Help Service
10 Minutes free for Ecademy Members.
make html make sense
created for ecademy members by clarocada

08456 58-90-58

page 10/10
____________