Thursday, March 3, 2011

Tutorial Thursday: How to create a textbox for codes


This is a very simple and handy code to use on websites.

SHORT VERSION:
(if you don't want to read how to customize/what's behind the code and you just want to copy and paste)

Box only

<textarea rows="3" cols="20"><a href="YOUR WEBSITE/BLOG LINK"><img src="YOUR IMAGE LINK"></a></textarea>

Box with image above:
Example:



CODE:
<img src="YOUR PICTURE LINK"><br /><p><textarea rows="3" cols="20"><a href="YOUR WEBSITE/BLOG LINK"><img src="YOUR IMAGE LINK" /></a></textarea>


LONG VERSION
How do you share snippets of html code with other people on the internet? Well, there are two ways. For short codes, you can use the <xmp> tag. Basically, using this tag will show any html code between the opening and closing <xmp> tags.

The second (more preferred IMO way) is to use

<textarea></textarea>

Anything that goes between these tags will show up in a textbox.

This:
<textarea rows="5" cols="40">Yay html code <a href="http://pocktwonders.ca">Visit my website</a></textarea>

Becomes this:


Adjustments
------------------------------------------------------------------------------------------
You can make adjustments to it by adding rows and columns:

<textarea rows="#of rows" cols="# of characters for width"></textarea>


This has 5 rows and 1 column (1 space of text):
<textarea rows="5" cols=1">12345</textarea>


Becomes this:


This has 1 row and 5 columns (5 space of text):
<textarea rows="1" cols=5">12345</textarea>


Becomes this:

0 Comments:

Related Posts Plugin for WordPress, Blogger...