Enhancing your Knol using HTML

Useful HTML add-ons for your Knol.

The engineering of the Knol Platform has been made so simple that it is possible for even the most inexperienced content author to put together an attractive and interesting Knol. However, there are a few add-ons that you can use to make the content of your Knol really stand out, but you will need to use the HTML option provided for on the menu bar. Here are a few of these HTML add-ons that have been developed by some of our Knol authors. Now it should be stated that, I am no HTML expert, just a person on a steep learning curve who wants to share the insights and experiences from the journey with others.

Link

Citation

Favorite

Collect this page

Linking to a section inside Knol.

Thanks to Luk van Loock for the Knol on Linking inside Knol.
http://knol.google.com/k/luk-van-loock/linking-to-places-in-the-same-knol/12akiw7ik3ra5/30

Here is how I have applied Luk's instructions;

You will need to copy two lines of HTML into your code to create the "Link To" and the "Return To" links. These will be placed in two separate places inside your knol.
The two lines are detailed below.

"Link To"

"Return To"

You will need to replace the blue with the URL of your own knol. (You get this from the top browser window but it should look much the same as mine with your name & knol title)

NOTE: When you change the names make sure that the red and green names match perfectly. Don't include spaces if you use more than one word, use "_" to link the words.

You can change the [text] and color=#ff0000 to display anything that you want. This code does not affect the programming, only the look.

Here is one example [go down] and here is another embedded in the text that links to the topic on resizing inserts (Note clicking on the Resizing Inserts heading brings you back to here)

Linking an image to another Knol, Website or Email.

You can link an image in Knol to another Knol, Website or Email address. Just click on the above photo to see.

Do do this follow the following steps:

Load the image into the Knol in the usual way following the insert image prompts from the menu bar. Make sure your size and alignment is set.
Select the HTML link from the menu bar and scroll through the HTML window to find the new image code (Tip - Your browser may support the Ctrl+F function that allows a search pop-up window to open. Enter the name of the new image and click next to be taken to it)
Look for the new image descriptor (imagename.jpeg) that should have code similar to the one here;
<td style="text-align: center;"><a href="http://knol.google.com/k/-/-/14j3i4hyjvi88/cx6q7g/cylinderbeach.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img src="http://knol.google.com/k/-/-/14j3i4hyjvi88/cx6q7g/cylinderbeach.jpg" width="420" border="0" height="294"></a></td> NOTE: the red and blue are my additions.
Replace the red with your web address in the following form - http://www.sitemane.extension (i.e. http://www.southbank.edu.au)
Update the HTML (save changes) by scrolling down and clicking the button 'Update' on the bottom right of the HTML window.
In future you can change the link in WYSIWYG by clicking again on the image when the Knol is in edit mode and selecting the 'Change' hyperlink from the new window that opens. This then prompts you to change either the web, knol or email address.

This one links to an email address (not real): Click the image

This one links to another Knol: Click the image

Opening a link in a new window.

At present the Knol platform does not default to opening a link in a new window. For may people this is prefered so they never lose sight of the original article. Readers can right mouse click to get this option but you can also add it to the HTML.

To do so, you will need to use HTML. i.e. edit the Knol in HTML code that you access from the 'top of page' edit menu bar which is visable when your Knol is in 'edit mode'
When the new HTML window appears, you can Ctrl+F to get a small search box to appear. Search for all your links, they will start with '<A href="http://' so that's what you would search for.
To convert the HTML code so that the links open in a new window you will need to insert the following between the <A and the </A> and after the URL link.
target=_blank>Test name of your link
Here is an example of what it should look like after editing. <A href="http://southbank.edu.au/" target=_blank>Southbank Institute of Technology</A>

Try it here - Southbank Institute of Technology

Adding a page wide Text-Box

EXAMPLE from a Knol: How to Improve Knol writing using SEO to Rank in First Page?

By Jagadeesh M who upgrade the original text box for FireFox 3 (First introduced to Knol in How to write a great first CV Resume by Norman Creaney)

EXAMPLE:

"Replace this text with your own and format it using the menu format options provided ©"

You can just copy this box in WYSIWYG and paste it into you Knol and then overwrite the text.

HTML:

<TABLE style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" cellSpacing=0 cellPadding=0 width="98%" border=0>
<TBODY>

<TR>

<TD><BR>

<DIV style="TEXT-ALIGN: center"><FONT size=2>Replace this text with your own and format it using the menu format options provided ©"</FONT></DIV>

<br>

</TD>

</TR>

</TBODY>

</TABLE>

Adding a Menu Side-Bar

Copy&Paste the text below in Red into your Knol when it is in Edit Mode and with HTML selected. Once you Update the HTML you will be able to replace and format this text in WYSIWYG mode. Right click on the links and then select 'change' to copy your own URL and add your own description in the tag.

EXAMPLE from a Knol: The Entrepreneurial Spirit Knolbook

EXAMPLE:

HTML:

HTML Help

1 HTML - by J. Kristensen

2 HTML - A. Kemper

3 HTML Tables - J. Russo

<TABLE style="FLOAT: right; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: rgb(207,226,243)" height=225 cellSpacing=0 width=199>
<TBODY>

<TR style="BACKGROUND-COLOR: rgb(159,197,232)">

<TD>

<DIV style="TEXT-ALIGN: center"> </DIV>

<DIV style="TEXT-ALIGN: center"><FONT style="COLOR: rgb(0,0,255)" size=4>HTML Help</FONT></DIV>

<DIV style="TEXT-ALIGN: center"> </DIV>

</TD>

</TR>

<TR>

<TD>

<DIV style="BACKGROUND-COLOR: rgb(207,226,243)">  1 <A href="http://knol.google.com/k/jacob-kristensen/html/1aoyry5zmn6ku/6#">HTML - by J. Kristensen</A>

<DIV>  2 <A href="http://knol.google.com/k/andreas-kemper/html-help-for-knol/8bgikaqot3ts/205#">HTML - A. Kemper</A></DIV>

<DIV> </DIV>

<DIV> </DIV>

<DIV> </DIV>

</DIV>

</TD>

</TR>

</TBODY>

</TABLE>

Adding a colorful table presentation

Copy&Paste the text below in Red/Blue/Black into your Knol when it is in Edit Mode and with HTML selected. Once you Update the HTML you will be able to replace and format this text in WYSIWYG mode. To add a new row in your chosen color see the row additions below. Insert the row HTML before the </TBODY>.

EXAMPLE from a Knol: How to create HTML Tables by Jason Russo

EXAMPLE:

Header	Data
White background row	25
Silver background row	36
White background row	36
Silver background row	36

HTML:

<TBODY>

<TD>

<DIV>Header</DIV>

</TD>

<TD>

</TD>

</TR>

<TD>

<DIV>White background row</DIV>

</TD>

<TD>

</TD>

</TR>

<TD>

<DIV>Silver background row</DIV>

</TD>

<TD>

</TD>

</TR>

<TD>

<DIV>White background row</DIV>

</TD>

<TD>

</TD>

</TR>

<TD>

<DIV>Silver background row</DIV>

</TD>

<TD>

</TD>

</TR>

</TBODY>

</TABLE>

Adding borders around images

AdIt appears that the image we upload is loaded into a table in HTML. For this reason it is difficult to add a boarder but you can do what I have done here by adding a caption and setting the boarder and background color to black. AT least it provides some definition for the image. I am sure in time the Knol engineers will build this into the WYSIWYG menu options.

EXAMPLE in Knol: Coffee Species - Arabica and Robusta

EXAMPLE:

Point Lookout - Stradbroke Island

Below is how the HTML looks on your inserted image. You will need to add the Red bits in to the TABLE string to get the border and background above.

HTML:

<DIV>

<TBODY>

<TR>

</TR>

<TR>

<DIV><FONT color=#ffffff size=4>Point Lookout - Stradbroke Island</FONT></DIV>

</TD>

</TR>

</TBODY>

</TABLE>

</DIV>

Section Dividers

Sometimes you might like to visually section off part of your Knol to make for a more enjoyable reader experience by supplying 'bit-size' chuncks of information. It is unadvisable (as I found out) to simply fill the page width with space bars and then change the background color. This is because different internet browsers see the space bars in different lengths causing a diminished reader experience with the addition of a horizontal slide bar. (i.e the Knol does not fit within the standard page width). Here is the HTML solution.

EXAMPLE in a Knol: The Historic Coffee House

EXAMPLE:

HTML:

Thanks to Norman Creaney for providing this link below from Colourlovers.com that helps us get the right RGB/hex codes for the colors we want to use. Getting the right color code - Click Here

Other colors you could choose are detailed below. Simply replace the name 'Red' with the Color Name from the table. These colors are recognized by all browsers.

Color Name	Color HEX	Color
Aqua	#00FFFF
Black	#000000
DarkRed	#8B0000
DarkSlateGray	#2F4F4F
Gray	#808080
Green	#008000
Lime	#00FF00
MediumBlue	#0000CD
Navy	#000080
Orange	#FFA500
PaleVioletRed	#D87093
Red	#FF0000
Silver	#C0C0C0
Yellow	#FFFF00

For a different style of section divider - see below

EXAMPLE

EXAMPLE in a Knol: Pentax P-ttl Hot Shoe Flash Comparison by Matthew Miller

HTML: <hr style="background-color:rgb(153,153,153);color:rgb(153,153,153)">

Useful Special Characters

There are a few special characters that you can add to a Knol to make it more informative or more interesting. Here are a few I think could be of value.

Peter Baskerville © 2009 To add the Copywrite symbol, insert the following code just after the text when in HTML mode: &#169

IBM ®
To add the Registered Trademark symbol, insert the following code just after the text when in HTML mode: &#174

AMBROSIA ™
To add Company Trademark stmbol, insert the following code just after the text when in HTML mode: &#153

5¼ 5½ 5¾
To add fractions, Insert the following codes just after the text when in HTML mode: for ¼ ¼for ½ ½for ¾ &#190

182º

To add the degree symbol, insert the following code just after the text when in HTML mode: &#186

Creme´

To add the acute, insert the following code just after the text when in HTML mode: &#180

8 ÷ 2 = 4

To add the division symbol, insert the following code just after the text when in HTML mode: &#247

Google Docs - Document Import

Example from a Knol - Peter Baskerville

EXAMPLE

How to!

While not quite HTML, it is a further presentation aspect you could add to make your Knol a better reader experience. This process allows you to import Google Docs into your Knol. I think it would be ideal for glossaries or any supplementary information that the reader could refer to for clarity. The steps in the process are given below:

Join Google Docs
Start a new document
Create a table of one column x one row
Load content (text, images, links, background color)
Save Document
Publish as a web page
Open your Knol
Insert Document
Set Properties and alignment.

Google Docs - Presentation Import.

Example from a Knol - James Pruett

EXAMPLE

How to Write an Article Review

We attract many different types of people to our Knols with many different needs. One aspect of internet research and reading that is prevalent is the attitude of … 'Don't make me read'. That is, a request to provide an option for the ‘time-challenged’ readers where our information is provided in a succinct way. One option we could use is to have a Google Docs presentation near the top of our Knol that presents knowledge in a slide summary form.

How to.

Join Google Docs
Start a new presentation
Load content (text, images, links, background color)
Save presentation
Publish as a web page
(don't copy and paste the HTML as the program suggests)
Open your Knol
Insert Presentation
Set properties and alignment.

11 - Resizing Inserts

Point Lookout - Straddie

EXAMPLE - This image is set half-way between a M-Medium and a L-Large. All inserts can be size adjusted including; New York cartoons, Photos, Google Doc and YouTube.

Currently the only options we are given using the WYSIWYG editor are S (Small) M (Medium) and L (Large) or Original when determining the size of our insert. Sometimes this option is too limiting, overhangs the Knol page in Original setting or does not fit with our layout plans for the Knol. So to explore other size options you will need to edit in HTML.

Firstly load the image/insert into your Knol in the usual way, using the menu 'Insert - Image'
Make sure you select S,M or L (not original). This will create the height and width options in the HTML code.
Select the HTML option from the menu bar and find the <table .... code which marks the start of your insert.
Look for the HTML code that deals with width and height and note the amounts in brackets or in "" i.e. (420) or "420"
Calculate the % increase or decrease that you want for your your set insert.
Change the numbers in the brackets or "" to represent these figures. i.e. 420 x 10% increase = (462)
Make sure you adjust both the height and width numbers by the same % to ensure the proportionality of the image
Select 'Update' which closes the HTML window and returns you to your newly size adjusted insert.

The basic HTML code with the changes in RED

Adding a MouseOver definition.

Sometimes when describing a technical or uncommon term, you will want to provide a definition 'on the fly' rather than have your reader suffer the inconvenience of linking to an external website in order to gain clarity. It may also be best to change the color to identify 'on the fly' definition as opposed to an external link. Here is an example of what I mean: (hover your cursor over the term Asset for a definition)

The Accounting Formula is: Assets = Liabilities + Owners Equity

Here is the process:

1 - Copy the URL of the Knol you are currently editing (without the "#edit" ending)
2 - Highlight the term for which you want to create a MouseOver definition

3 - Chose "Link" from the main menu

4 - Select "web address"

5 - Ctrl V or Paste your Knol's URL into the requested URL box "To what URL address should this link go?" Click "OK"

6 - Chose the "HTML" option from the main menu

7 - Locate the code dealing with the selected term

8 - enter title="your definition......" just after <A

9 - Click "Update"

10 - Select term and change color to your designated 'mouseover' color

EXAMPLE from above

<DIV>The Accounting Formula is: <A title="Items of financial value over which the firm has legal control" href="http://knol.google.com/k/peter-baskerville/enhancing-your-knol-using-html/14j3i4hyjvi88/39">Assets </A>= Liabilities + Owners Equity</DIV>

Text Background in Color.

Example used in a Knol - Author & Visitors Bulletin

If you want to highlight some text by using a different background color, then you could use the code given below. Copy and paste into your own Knol and replace the text with your own in WYSIWYG.

HTML

<DIV style="BACKGROUND-COLOR: rgb(159,197,232)">If you want to highlight some text by using a different background color, then you could use the code given below. Copy and paste into your own Knol and replace the text with your own in WYSIWYG.<BR>

</DIV>

Note - to find rgb(color codes), select text color from the menu and hover your mouse over your color of choice and note the codes in brackets.

Text wrap & adding margins around tables

KNOL AUTHORS	KNOLS
Krishan Maggon	35
Murry Shohat	8
Peter Baskerville	30
Norman Creaney	11

There are times when your table is like this one - less than a full page width. To add to the presentation of your Knol you may prefer to wrap the text around the table like I have done here. At present, the Knol Platform does not give you the option, like it does with images, to wrap text in WYSIWYG. So we need to jump back into the HTML to fix that.

Also you may want to move the wrapped text away from the table boarder to it does not interfere with the ability of the reader to see both clearly. Again, this is not an option in WYSIWYG, so it's back into HTML to fix that one. So, find the start of the table with the code "<table" and add the bits I have marked in RED.

Example used in a Knol: Knol Site Metrics

HTML

Special order tables.

A 2 column format with auto adjusting width and height for each row.

COPY AND INCLUDE THIS TEXT

Heading 1	Heading 2

TO HERE INCLUDING THIS TEXT - THEN PASTE INTO YOUR KNOL

A 3 column format with auto adjusting width and height for each row.

COPY AND INCLUDE THIS TEXT

Heading 1	Heading 2	Heading 3

TO HERE INCLUDING THIS TEXT - THEN PASTE INTO YOUR KNOL

Open link in new window

Most often you reader will want to look at the links that you have provided but may not want to leave the Knol they are reading. To achieve this you will need to open the link in a new browser window that when viewed and closed, will not automatically close the Knol.

At the moment you need to alter the HTML text to do this because the Knol default is to close the Knol and open the link. This tends to cause the reader to lose their way particularly if they follow another link from the new webpage.

To fix this you will need to chose the HTML button on the edit menu bar after you have already created the link. Then you will need to locate the link and add the following code to make the link open in a new window.

Original HTML

The new HTML to add to make the link open in a new window

Try it here.

For more advanced HTML

Here is another comprehensive Knol of HTML help for the Knol Publishing platform. Written by Top Pick author Gust Mees it covers many useful and advanced tools for making your Knol stand out from the crowd. Here it is just Click Here

About the author

Peter Baskerville has been a Knol author since the platform's public launch in the middle of 2008. He has contributed over 40 Knols, with 30 being awarded the converted 'Top Pick' badge by Google's Knol algorithm for quality. These awards, together with the 100,000 cumulative pageviews for his work, underpins his position as a 'Top 10' English language Knol author.

He has collaborated on many works here with over 15 other authors and continues to be an active member of the Knol community with over 600 comments of encouragement, suggestions and notifications of failure to meet community standard when required. Peter knows that the success of the Knol platform is intertwined with his own and so chooses to write community benefit Knols, whenever the opportunity arises. Here are some of his others - Write Great Knols

Other Knols in the "Help for Knol Authors" series by Peter Baskerville

DESCRIPTION	LINK
How add Google Analytics to your Knols to get readership details.	Knol Analytics Guide
How to write Knols so that they rank 'Top 10' with search engines.	Write Knols that rank Top 10
How to write a Knol as a learning tool using a preset template.	Vocational Training Template Knol
How to quickly write a basic article review for a Knol.	Basic Article Review for a Knol
How to write a powerful advanced article review for a Knol.	Advanced Article Review for a Knol
Tips on how to write best practice Knols	Knol Writing Tips

HTML Tag Tutorial

100º 100°

[go up]

Comments

Comments are moderated, and will not be visible until one of the authors of this knol approves.

Gust MEES

New HTML Easy Stuff for Everybody

Hi Peter,

I've created a new Knol, which You know already, but I've added some valuable stuff which might interesting You. Just have a look here please:

http://knol.google.com/k/gust-mees/knol-tips-and-tricksadvanced-html/vdujwtjyx3uq/108#My_Tools_selection

Easy to use, enjoy ;-)

Kind regards
Gust

Last edited Sep 16, 2009 8:27 AM

Report abusive comment

View/post replies (3) to this comment ▼

Garry Jenkins

Thanks Again Peter

My Old Dog Knols Have Learned A New Trick.

http://knol.google.com/k/garry-jenkins/the-german-shepherd/19tjln1ywaolr/151#view

Your advice is proving priceless.

Best,
Garry

Last edited Sep 7, 2009 11:51 PM

Report abusive comment

Post reply to this comment ▼

Murry Shohat

Image Link is Super

Love the image link discovery. Very nice.

Aug 23, 2009 11:46 AM

Report abusive comment

Post reply to this comment ▼

Jagadeesh M

Text Box code Fixes for FF 3

Hi Peter,

Section 1: Text Box code doesn't work for FireFox 3 and need to be fixed.

Below code is simple and works for all

<TABLE style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid" cellSpacing=0 cellPadding=0 width="98%" border=0>
<TBODY>
<TR>
<TD><BR>
<DIV style="TEXT-ALIGN: center"><FONT size=2>Replace this text with your own and format it using the menu format options provided ©"</FONT></DIV>
<br>
</TD>
</TR>
</TBODY>
</TABLE>

Hope this helps

Best,
Jag

Last edited Aug 13, 2009 11:28 PM

Report abusive comment

View/post replies (3) to this comment ▼

Angela

Inserting a Presentation

Hey Peter,

I'm having some problems with inserting a presentation into my knol. I've published it and everything, but when I try to insert it it says "This URL is not supported." Any tips?

Last edited Aug 6, 2009 5:32 PM

Report abusive comment

View/post replies (4) to this comment ▼

Norman Creaney

colours

Peter - I have recently found this site a good resource for choosing colours & getting RGB/hex codes. I thought it might interest readers of this knol.

http://www.colourlovers.com

Last edited Jul 31, 2009 9:17 PM

Report abusive comment

View/post replies (1) to this comment ▼