How To Make A Blog Button With HTML Grab Code

I assume you’ve already read through my HTML: The Very Basics post so you have a bit of an idea about what this tutorial requires.

First, we will need an image to use as our button. I’m going to use this 300×250 ad:

 

300-250

Then, I want to put a selectable HTML code below it so others can copy and paste the code to add this image to their own website. To do this, we’re just going to use the <textarea> HTML code. The <textarea> code works by adding a text box, and whatever you want to appear within the text box is placed between the <textara> </textarea> elements. For example, if we wanted to just display text within the textarea, it would look like this:

<textarea>this is some text within the text box</textarea>

But we don’t want text within our text box, we want an HTML code. Simple, just place the HTML image link code within the text box:

<textarea><a href="http://www.yourlink.com"><img src="http://www.yourlink.com/image.jpg"></a></textarea>

But wait, we need to change something first.  The < and > symbols within the textarea are confusing the code as a whole. It is not sure what to do with them because you’re displaying a code within a code. All we need to do is swap out the < and > characters within the textarea for their alphanumeric counterparts, the less than and greater than entities: &lt; and &gt; (LT for Less Than, GT for Greater Than), like so:

<textarea>&lt;a href="http://www.yourlink.com"&gt;&lt;img src="http://www.yourlink.com/image.jpg"&gt;&lt;/a&gt;</textarea>

You’re just swapping < for &lt; and > for &gt; get it?

Here is how the whole thing looks together:

300-250
You can change the size of the textarea by adding the rows and cols (columns) values:

<textarea rows=”3″ cols=”40″>your code here</textarea>

Rows is basically the height while cols is the width. Play around with the numbers to get your box properly sized.

You copy and paste this code as an example for building your own text box:

<textarea>&lt;a href="http://www.yourlink.com"&gt;&lt;img src="http://www.yourlink.com/image.jpg"&gt;&lt;/a&gt;</textarea>

I hope you enjoyed this tutorial!

Previous Post

Learn How To Code HTML… and Have Fun!

When you’re managing a blog or a website, knowing the basics of HTML, CSS or even Javascript can be a crucial skill ... Read more

Next Post

CSS Lesson 2: DIV Positioning

Now that you’ve read through my Introduction to CSS and Lesson 1: DIV Elements, you should have a basic understanding of the ... Read more

You may also like...

Leave a Reply