03 March 2015

Hypertext Helpline: HTML Basics For Bloggers Part II


Now that you've become a whiz at putting together a blog post in HTML, it's time to learn a couple more useful tags. This post is going to be all about inserting images and creating your own nifty signature that will pop up in all of your future blog posts.

I didn't mention this before but there's quite a bit you can do with HTML and it can be all overwhelming for a first-timer. But if you ever want to expand on your knowledge you can always check out W3 Schools or Webmonkey for reference sheets while also going through Hypertext Helpline. Now to the good stuff!

INSERTING IMAGES

This has a couple different steps in terms of HTML but it's all super easy and quick. 
  • First, you'll need to dump your image somewhere like Photobucket so that the code can "find" the image source online essentially. That way your image will actually show up on your post!
  • Second, you just need to put in the code in your blog post. Which is going to be...
<img alt="picture on blog" class="center/right/left" img src="pictureresource.com/blogimage.jpg" />
And that's it! In the above instance, you're telling the image where exactly to show up on the page (right, center, or left--you choose one and put it in the quotations) and then the "img alt" tag is the text that shows up if the image doesn't load properly. You can also use this same HTML tag for gifs.

You can even turn an image into a link by just adding the <a href> tag like so: 
<a href="URL destination goes here">  <img src="picture source goes here" alt="text goes here"></a>

SIGNATURE IMAGE HTML

Speaking of image tags, ever wanted a nifty signature? It's actually super easy and involves the HTML image tags. Check it.

You can always make your own signature by either using Canva or Pic Monkey if you don't have Photoshop. I used Canva for my signature and both websites are free to use with tons of options for neat designs. Once you've created your beautiful signature, upload it to Photobucket.

Go to Settings -> Posts and comments -> Post Template and then you will want to put in that nifty insert image tag along with a <center> tag. Here's mine for Nerdjoy as reference:
<center>
<img class="left" alt="post signature" src="http://i847.photobucket.com/albums/ab34/Stephanie_Medeiros/newblogsignature.jpg"/></center>
And then you can click save and all of your future blog posts will automatically include your awesome new signature so you don't have to manually include it every single time.

NOTE: When you upload a picture to Photobucket, you want to use the "Direct" option as your image source in the Share Links of your Photobucket image if you want to do it manually. They do have an HTML option so that you can directly cut and paste into your own HTML for your blog posts or signatures.

If you have any questions about today's Hypertext Helpline, don't hesitate to comment down below or ask me on Twitter!

post signature

4 comments:

  1. This is such a great post. I took a coding class in college, but it's been so long and I'm super rusty! Thanks for the info on the signature. I think I need to make one for my blog!

    www.thegeekyseamstress.com

    ReplyDelete
  2. This is great I'm so going to add in my signature this way! Thanks :)

    ReplyDelete
  3. Nice post! I've been meaning to change up my signature :)

    ReplyDelete
  4. Really helpful stuff here, I always enjoy learning new blogging tips and tricks. Great post! - Tasha

    ReplyDelete

Theme designed by Feeric Studios. Copyright © 2013. Powered by Blogger