Blog Buttons

Hello again!
Today we are going to explore the code behind a blog button like this:



{Grab My Button}

<center><a href="http://takesomecode.blogspot.com" target="_blank"><img src='http://www.navsounds.com/blogimages/button200x200f.png' alt="Take Some Code" style="border: 0px; width: 200px; height: 200px;"/></a></center>


Blog buttons on their own are simple and require the use of only one html element that most bloggers are familiar with which is the <img> tag.  
The code I used to display everything above is as follows:<center>        {Grab My Button}        <br />        <a href="http://takesomecode.blogspot.com" target="_blank">        <img src='http://www.navsounds.com/blogimages/button200x200f.png' alt="Take Some Code"             style="border: 0px; width: 200px; height: 200px;" />        </a>        <br />        <textarea id="buttoncode" cols="21" rows="3" readonly="readonly">&lt;center&gt;&lt;img src='http://www.navsounds.com/blogimages/button200x200f.png' alt="Take Some Code" style="border: 0px; width: 200px; height: 200px;"/&gt;&lt;/center&gt;        </textarea></center>
It's probably pretty easy to figure out what the <center> and </center> tags do. They center everything in between. It is completely optional to use this part of the code, but images tend to look their best when they are centered on a page.
The {Grab My Button} is not code and only serves the purpose of creating a title above the image.
The <br /> tag is an empty tag which means it has no end tag and is thus self containing and it is used to indicate a line break. The <img> tag is also an empty tag since it has no ending and instead ends like this <img />. <br> is often an acceptable way to right this code, but to web designers the correct way is <br />. Writing it as <br> would be similar to be writing "right" instead of "write" like I did in the last sentence.
Now there are some weird symbols and characters going on inside of the text area and they are just the proper way to write the < and the > when they are not meant to be used by the browser, but only displayed to the user. (In other words when you don't actually want it to display an image or center everything in the text area) You can do without these characters and just use the < or >, but to ensure maximum readability to a variety of users and browsers its best to do it as I have.
I won't explain the <a></a> tags today, but suffice it to say they provide the link for the blog.
The <img> tag. 
<img src='http://www.navsounds.com/blogimages/button200x200f.png' alt="Take Some Code"             style="border: 0px; width: 200px; height: 200px;" />
It can contain many properties and the order that properties are written doesn't matter. The first property or attribute that I use is the "alt" attribute.
alt="Take Some Code"
The  "alt"  attribute is where you put an alternate name for the image in the event that the image can't be loaded or found. The text contained in the quotes would be displayed instead. Following the  "alt"  attribute I follow with the "style" attribute. 
style="border: 0px; width: 200px; height: 200px;"
The  "style" attribute is the place to specify the images width, height, border, padding, and many other styling properties. Many people like to forget the "style" attribute an just write border, width, and height  on their own. Again most of the time it may not matter, but to ensure that a variety of browsers and a variety of versions of those browsers can all display the image accurately it is best to use proper code etiquette and place all styling of the image inside of the "style" attribute.
The <textarea> tag
<textarea id="buttoncode" cols="21" rows="3" readonly="readonly"></textarea>
To display a box as I have under the image tag you can specify a text area.The attributes I am utilizing are the "col", "rows", "id", and "readonly".
The "col" attribute specify how many characters wide the text area should be and a good match for a 200px wide image is 21 columns.The "rows" attribute specify how tall the text area should be in text lines.The "id" portion can be used in many HTML elements and assigns a specific name to the element. I'll get into this another day.The "readonly" attribute is pretty self explanatory, but just in case it makes it so that the user cannot change the text in the field, but only read it or copy it.
Everything that is placed between the <textarea> and </textarea> tags will be included in the text field.
The end.
As always if there are any questions please ask in the comments section!Any requests for tutorials are also very welcome.
-Mike @ Take Some Code