Wednesday, May 1, 2013

{tutorial} basic html


Being a blogger, chances are you’ve had to deal with HTML at some point. For me, it seemed like a totally different language (okay maybe it still is…) but I’m discovering that it’s really not that difficult to understand the basics. Operative words = the basics. I am no pro. Likely never will be.

We’re all attracted to the successful blogs, of course, but there is a special place in my heart for the newbie (aka "noob"). I love watching them grow from the ground up, into a world unfamiliar to them. Because not too long ago, that was me.

I am providing a little cheat sheet for your reference, so that you may perform some basic blog editing on your own.

When you see, YOUR URL HERE, I’m talking about the web address that you’re linking to so for example the url of this site is http://AllMyHappyEndings.blogspot.com
 
When you see YOUR IMAGE URL HERE, this means the url that links to your image. If you’re taking an image that’s already somewhere on the internet, all you have to do is right click and you should see “copy image link” or “copy image url.” Something along those lines.

But if you’re uploading your own picture you’ll have to host it on a server somewhere. Personally I like  PhotoBucket-- a free image hosting service and can hold tons of images. Should you wish to upload an image from your Photobucket account, there is an option on the right-hand side of the page that says Direct URL…simply copy that.


CHEAT SHEET

Creating a text link:
<a href=”YOUR URL HERE”>YOUR TEXT HERE</a>

Input: <a href=”http://allmyhappyendings.blogspot.com”>Blog: All My Happy Endings</a>

Output: Blog: All My Happy Endings

Inserting an image:
<img src=”YOUR IMAGE URL”>

Input: <img src=”http://i1301.photobucket.com/albums/MandiRoach/pinterest.png”>

Linking an image to an outside source:
<a href=”YOUR URL HERE”><img src=”YOUR IMAGE URL”></a>

Input: <a href=”https://twitter.com/mandi411”><img src=”http://i1301.photobucket.com/albums/MandiRoach/twitter.png”></a>

Making a link open in a new window:
After the “URL” insert
target=”_blank”>


(Opens in same window) Input: <a href=”https://twitter.com/mandi411”><img src=”http://i1301.photobucket.com/albums/MandiRoach/twitter.png”></a>

 OR

(Opens in new window) Input: <a href=”https://twitter.com/mandi411” target=”_blank”><img src=”http://i1301.photobucket.com/albums/MandiRoach/twitter.png”></a>

Inserting a break (space between lines):
<br/>

Inserting a new paragraph (space between lines):
<p>

Centering text or an image:
(This is really useful if you want to center things like blog buttons or ads in your sidebar)

<center>YOUR URL OR TEXT</center>


If you have basic HTML suggestions, I love hearing from you!





Related Posts Plugin for WordPress, Blogger...