Created: Dec 12, 2006
Updated: Mar 19, 2008
Page Status: locked

Is There an HTML Cheat Sheet? - Help with HTML

This article is locked

Return to Main Help Page

HTML code is not difficult to learn, so don't be afraid to jump in and start editing. We have created a sample page where you can practice some HTML before working with live content on the site. Visit the practice area. For links to more information on HTML external to this site, click here.

Below we have included a list of commonly used HTML codes to help you edit your text. Please note that the first command needs to appear before the text you wish to format and the second command follows at the end of the formated text in order to "close" the entry.

WiserEarth HTML Code

WiserEarth contains some customized html tags designed to make it easier to link pages and upload images. The raw code is not necessary to enter in most cases, as we have a helpful "Tools/Help" editor that automates much of this process. But for those who wish to understand the coding syntax to facilitate easier editing, we have provided a breakdown of the coding structure.

*Please note - Ignore the parentheses when writing the actual code. The parentheses are there only to prevent your browser from actually executing the line of code.*

Example code	Result:
Internal Link Breakdown: [ link:name:name of link] [ link:ecology:I am naming this link Ecology]	I am naming this link Ecology
Embed link within a picture Breakdown: [ type:internal link:[ imgu:picture link:]] Note the double brackets - one around the entire code, and one surrounding the picture link (Organization Example) [ o:98ff0d6edae00bf00d9182b456ccf4a7: [ imgul:tn_dewdrop.jpg]]	Source This picture contains a link within - if you click on the picture, it will take you to designated URL.
Youtube/Video media Link [ media:url] [ media:http://www.youtube.com/ watch?v=epUk3T2Kfno]	(example not shown)
Area of Focus [ p:page number:title of page] [p:(81):(Energy)]	Energy
Event [ e:internal url:name of event] [ e:48fa543cacfaf876501e16be827fe0c6: Chicago Green Festival]	Chicago Green Festival
Job [J:(internal url):(name of job opening)] [J:(76097bbe743f221c6a8e4f3ee86b9fa1): (Research Associate)]	Research Associate
Organization [ o:internal url:name of organization] [ o:98ff0d6edae00bf00d9182b456ccf4a7: Reptile Research]	Reptile Research
Person [ u:name of person:name of person] [ u:adam:adam]	adam
Resource [ r:internal url:name of resource] [ r:f553b27f83bde2288f37b1f867003646:The Grassroots Ensemble Theater Research Project]	The Grassroots Ensemble Theater Research Project
WiserEarth Wikipage [ a:internal url:name or number of wikipage] [ a:8b823712068358305c4432efc314553a:Home Page Mockup]	Home Page Mockup 1
Inserting Images: Note - the "l" or "r" after "imgu" determines alignment. Tn_ stands for small, med_stands for medium sized pic. If left without any tags, the image defaults to regular alignment and native size. Alignment: left Size: small [ imgul:tn_dewdrop.jpg]	Photo Source
Alignment: right Size: medium [ imgur:med_dewdrop.jpg]	Photo Source

return to top

Standard HTML Code

Text Tags

Example code:	Result:
<h1>Largest Headline</h1> Creates the largest headline	Largest Headline
<h6>smallest headline</h6> Creates the smallest headline	smallest headline
<b>bold text</b> Creates bold text	bold text
<i>italic text</i> Creates italic text	italic text
<tt>typewriter text</tt> Creates teletype, or typewriter-style text	typewriter text
<cite>citation</cite> Creates a citation, usually italic	citation
<em>emphasis</em> Emphasizes a word (with italic or bold)	emphasis
<strong>another emphasis</strong> Emphasizes a word (with italic or bold)	another emphasis
<font size=5>This is size 5</font> Sets size of font, from 1 to 7	This is size 5
<font color=red>this is red</font> <font color=#00640>this is dark green</font> <font color=#000099>this is blue</font> Sets font color, using name or hex value	this is red this is dark green this is blue

return to top

Links

Example code:	Result:
<a href="URL"></a> Creates a hyperlink Click on the <a href="http://www.wiserearth.org">blue</a> link to go to the home page	Click on the blue link to go to the home page
<a href="mailto:EMAIL"></a> Creates a mailto link <a href="mailto:Email:>info@wiserearth.org</a>	Click on this email address to automatically pop up your email program and compose an email to the recipient: info@wiserearth.org
<a name="NAME" id="NAME" ></a> Creates an anchor on a page that users can "jump" to <a name="AnchorExample" id="AnchorExample"></a>Anchor (Note how AnchorExample does not show up - that's just the unique ID that stays invisible. You have to type in text like "Anchor" to mark where the anchor is set)	Anchors help separate a long page by creating mini-links throughout the document. Anchor
<a href="#NAME"></a> Links to the anchor that you created using the above <a href="#AnchorExample">Link to Anchor</a>	Creates the link that allows you to jump to an anchor that you defined using the above code. Link to Anchor

return to top

Formatting

Example code:	Result:
<p></p> Creates a new paragraph <p>Lines of text within a paragraph</p> <p>separated by paragraph markers</p> <p>at every line break</p>	Lines of text that runs on forever and ever - note how the text doesn't have any line spacing in between Lines of text within a paragraph seperated by paragraph markers at every line break
<p align="left">Aligns this to the left</p> <p align="center">Aligned centered</p> <p align="right"> Aligned to the right</p> Aligns a paragraph to the left, right, or center	Aligns this to the left Aligned centered Aligned to the right
<br> Inserts a line break Spaces out<br> sentences<br> or images<br> by making a line break<br>	Spaces out sentences or images by making a line break
<blockquote> </blockquote> Indents text from both sides <blockquote>Here is another paragraph indented by surrounding it with this html marker </blockquote)	Here is a regular paragraph of words without using blockquote Here is another paragraph indented by surrounding it with this html marker
<dl></dl> Creates a definition list Format works like this: <dl> (starts it off) <dt> (insert term to be defined) <dd> (insert definition of <dt> term) < /dl> (ending brackets to close off definition list)	Here's an sample definition list: HTML Hyper Text Markup Languge Troll Someone who intentionally incites arguments on message boards 42 The Answer to Life, Universe & Everything
<dt> Precedes each definition term	<dt>HTML
<dd> Precedes each definition	<dd>Hyper Text Markup Language
<ol></ol> Creates a numbered list Sample list: A list of things to do on WiserEarth <ol> <li>Browse and explore <li>Make a profile <li> Connect with other users <li>Add and edit content on Wikipages </ol>	A list of things to do on Wiser Earth Browser and explore Make a profile Connect with other users Add and edit content on Wikipages
<li></li> Precedes each list item, and adds a number	See above example - the ending </li> does not have to be included if an ending </ol> will close things off
<ul></ul> Creates a bulleted list - uses the same format as <ol> <ul> <li>Browse and explore <li>Make a profile <li> Connect with other users <li>Add and edit content on Wikipages <ul>	A list of things to do on WiserEarth Browser and explore Make a profile Connect with other users Add and edit content on Wikipages
<div align="left"> Div seperates out sections of text, so that you can format different sections with whatever style you choose. For Div Align, this allows you to align a section of text either left, center or right. It works similar to <p align>, but offers you greater control over a broader section of html code <div align="left">This section of text will be aligned left</div> <div align="center">This section of text will be aligned center</div> <div align="right">This section of text will be aligned right</div>	This section of text will be aligned left This section of text will be aligned center This section of text will be aligned right

return to top

Tables

Example code:

Result:

<table></table>
Creates a table
<tr></tr>
Sets off each row in a table
<td></td>
Sets off each cell in a row
<th></th>
Sets off the table header (a normal cell with bold, centered text)

<table border="1" bordercolor="#000000">
<tr>
   <th>This is the Table Header</th>
  </tr>
<tr>
   <td> Cell 1 in Row 2</td>
   <td> Cell 2 in Row 2</td>
</tr>
<tr>
   <td> Cell 1 in Row 3</td>
   <td> Cell 2 in Row 3</td>
</tr>
</table>

This is a sample table:

This is the Table Header
Cell 1 in Row 2	Cell 2 in Row 2
Cell 1 in Row 3	Cell 2 in Row 3

return to top

Table Attributes

Example code:

Result:

<table border="(number)">
Sets width of border around table cells

<table width="100%" border="2">
<tr>
<td>Example text </td>
</tr>
</table>

Example text

<table cellspacing="(number)">
Sets amount of space between table cells

<table width="100%" border="2" cellspacing="10" cellpadding="0">
<tr>
<td>Cells have extra </td>
<td>space in between </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

Cells have extra	space in between

<table cellpadding=#>
Sets amount of "cushion" between a cell's border and its contents

<table width="100%" border="2" cellspacing="0" cellpadding="10">
<tr>
<td>Cushion from text to inner border of table </td>
</tr>
</table>

Cushion from text to inner border of table

<table width=# or %>
Sets width of table — in pixels or as a percentage of document width

Sample table set to 50% width

<r align="left"> or <td align="right">
Sets alignment for cell(s) (left, center, or right)
<tr valign="middle"> or <td valign="bottom">
Sets vertical alignment for cell(s) (top, middle, or bottom)

Sample Code:
<table width="100%" border="2" cellspacing="0" cellpadding="0">
<tr>
<td>Aligned left </td>
<td align="right">Aligned right </td>
</tr>
<tr>
<td valign="middle"><p> </p>
<p>Set to align in middle </p>
<p> </p>
<p><br />
</p></td>
<td valign="bottom">Set to align on bottom </td>
</tr>

Aligned left

Aligned right

Set to align in middle

Set to align on bottom

<td colspan=#>
Sets number of columns a cell should span

<TABLE BORDER=2 CELLPADDING=4>
<TR>

<TH COLSPAN=2>Spanning across two columns</TH>

</TR>
<TR> <TD width="98"> 1 col</TD>
<TD width="88">2nd col </TD>
</TR>
<TR> <TD>1 col</TD>
<TD>2nd col </TD>
</TR>
<TR> <TD>1 col</TD>
<TD>2nd col </TD>
</TR>
<TR>

<TH COLSPAN=3>Spanning across 3 columns</TH>

</TR>
<TR> <TD>1st col</TD>
<TD>2nd col</TD> <TD width="48">3rd col</TR>
<TR> <TD>1st col</TD>
<TD>2nd col</TD> <Td>3rd col</Td></TR>
<TR> <TD>1st col</TD> <TD>2nd col</TD>
<td>3rd col </td>
</TR>
</TABLE>

Spanning across two columns
1 col	2nd col
1 col	2nd col
1 col	2nd col
Spanning across 3 columns
1st col	2nd col	3rd col
1st col	2nd col	3rd col
1st col	2nd col	3rd col

<td rowspan=#>
Sets number of rows a cell should span (default=1)

<TABLE BORDER=2 CELLPADDING=4>
<TR>

<TH ROWSPAN=2 >Spans 2 Rows</TH>

<TD>Row 1</TD>
</TR>
<TR>
<TD>Row 2</TD>
</TR>

<TR>

<TH ROWSPAN=4>Spans 4 rows</TH>

<TD>Row 1</TD>
</TR>
<TR>
<TD>Row 2</TD>
</TR>
<TR>
<TD>Row 3</TD>
</TR>
<TR>
<td>Row 4</td>
</TR>
</TABLE>

Spans 2 Rows	Row 1
Spans 2 Rows	Row 2
Spans 4 rows	Row 1
	Row 2
	Row 3
	Row 4

return to top

This information taken from Webmonkey.com

Other HTML Help
WiserEarth does not endorse the thoughts and comments of these sites, but provides them as a service to the users.
w3schools.com
htmldog.com
htmlcodetutorial.com

return to top

Comments

Flag for Review

bowo 4 months ago

The "Using Image Maps on WiserEarth" page should answer Nathan's question. It's located @ http://www.wiserearth.org/article/d26c25e5ce13ca86a8a0394868021f65

Flag for Review

Honore 12 months ago

Hi Nathan - I'm not sure if the 2nd example under the WiserEarth code answers your question, but that's one way of making an image become a clickable link. The way it works is you replace the last portion of an org/resource/etc link with an image file. For example - for organization "Sierra Club", you would normally go Sierra Club. Note how the words "Sierra Club" after the 2nd colon is what actually appears on the page. If you replace "Sierra Club" with GreenTreeLogo.jpg, then the image shows up with the link embedded into it. I have not tried this with anchors yet, so I can't give you an answer there.
If however, you are asking whether you can slice and split up an image into different regions with different clickable links, I don't think we support that capability for WiserEarth's code.

Flag for Review

nrosquist 12 months ago

This is a great resource!

I'd like to have parts of an image on a wikipage link to other pages or anchors within the page. Is there a way to do this with wiser's customized image tags?

Normally, I'd put <img src="blahblahblah" usemap="#map"> and then define the <map>...

Is there a way to do this?
Thanks,
~Nathan

Flag for Review

hapatrees 12 months ago

Adam and Honore, thanks so much for this page, it's got a lot of great info and help!

Flag for Review

Honore about 1 year ago

There might be some confusion stemming from WiserEarth's code. In the example code section, I added in parentheses so that you could see the code itself. If I remove the parentheses, as I did for the "Result" section, you'll see how the code will look. So, if you're writing raw HTML code using WiserEarth's format, please do not use any parentheses!

Flag for Review

Honore about 1 year ago

For youtube or any media, you simply type in the following:
[media:http://www.youtube.com/examplevideo.wmv]
The reason I didn't include it in the examples was that the size of the Youtube video link overflows the table and mis-aligns the table