Basic HTML Cheat Sheet

If you have a blog or website chances are you’ve had to deal with HTML at some point. While it might seem like a totally different language (okay maybe it actually is…) but it’s really not that difficult to understand the basics. So today I wrote out a little cheat sheet that you could look back to if you ever want to do 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 it http://stahleydesigns.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 uploaded to photobucket.com, it’s a free image hosting service and can hold tons of images.

CHEAT SHEET

Creating a text link:

<a href=”YOUR URL HERE”>YOUR TEXT HERE</a>

Input: <a href=”http://creatingmyowncareer.com”>Creating my own career</a>

Output: Creating my own career

Inserting an image:

<img src=”YOUR IMAGE URL”>

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

Output:

Linking an image to an outside source:

<a href=”YOUR URL HERE”><img src=”YOUR IMAGE URL”></a>

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

Output:

 

Making a link open in a new window:

After the “URL” insert

target=”_blank”>

See difference here:

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

Output:

 

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

Output:

 

Inserting a break (space between lines):

<br/>

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’d like to request a tutorial or an article please contact me or leave a comment, I love hearing from you!


Related Posts

Add a Facebook Comment

Comments

  1. Awesome cheat sheet…Wish it had been around awhile back! =0)
    Visiting from Blog It Up.
    ~Kim

  2. Awesome!! Great work hun!

  3. Thanks so much for this. I really needed it. Actually I just learned the text link (the first one you listed) about 2 days ago from another site. I am keeping this in a text doc so I can keep referring to it. Visiting from the Aloha hop. Thanks for cohosting. Am now following you thru Bloglovin. Have a wonderful Good Friday.

    Julie

  4. Hi there! I have ventured over from Aloha Friday. I’m enjoying this little peek into your world! Just lovely! XOXO, Mandi @

  5. thank you thank you thank you! So helpful!
    -Jamie

  6. Nice post, I need blog buttons, I tried to do it before and they would not line up, gonna try it again. Think you.

  7. Been having trouble with centering buttons …thanks gotta try this one.

Speak Your Mind

*

Follow

Get every new post delivered to your Inbox

Join other followers