Blogging platforms make creating your blog posts pretty simple, but sometimes it's helpful to know a little HTML. I actually use it quite regularly when formatting the photos for my blog, but it has a lot of other uses as well.
The first thing you need to know is that pretty much all HTML tags have an opening tag and a closing tag. You need to put these around whatever you're trying to affect. Opening tags come before what you're trying to affect and they can a lot of times be one letter or a series of commands. The closing tag comes after what you're trying to affect and usually is just one letter preceded by a backslash. All tags (opening and closing) need to be surrounded by brackets, as you can see below.
<a href=""> </a>
<i> </i>
<p> </p>
Images
People can get really complicated when coding HTML, but if you know what to look for, you can usually find the same building blocks everywhere. Let's analyze the image code.The basic code to put an image on a page looks like this:
<img src="IMAGE.JPG">
Image codes don't actually have closing brackets because they're just sitting there and not affecting text or anything. IMAGE.JPG would be where you would paste in the URL of your image, between the "" (for example, a URL from Photobucket). If you upload an image to Blogger, click over to the HTML tab and you'll see that they added this code automatically.
Using the basic image code displays the images exactly in the same dimension that you uploaded them. If you want to change the size, you need to add a width code (height changes automatically to match the proportion of the original image). Width codes are using pixels for their dimensions.
<img width="300" src="IMAGE.JPG">
Blogger adds both width and height codes automatically when you tell it what size you want your picture to be (small, medium, large). Since I like my photos 600 px wide, but there isn't an automatic setting for this in Blogger, I set my photos to large (which is 640 px wide) and then go into the HTML tab and adjust the width back down to 600 by changing the HTML.
Remember to delete Blogger's height code if you do this or your photo will be distorted. Also it's better to adjust widths going from larger to smaller, rather than from smaller to larger - the resolution gets all wonky sometimes when you try to enlarge a photo using code.
Links
Another code I use a lot is the link code. This is especially helpful when coding sidebar widgets. Basically anytime you link a word or a photo to another web page, you'll need to use a link code. Within your blog pages, Blogger does this automatically when you use the "Link" button, but that functionality is a little more basic in the widget boxes.So basically you need an <a href=""> code around whatever you want them to click on. Between the quotation marks of the open tag, you enter the URL that you want them to go to, and between the open and close tags, you either type the words that they'll click on or you put in an image code, which will display an image for them to click on. Here are two examples of this type of tag.
<a href="twitter.com">Twitter</a>
<a href="twitter.com"><img src="MYIMAGE.JPG"></a>
Pretty much all link tags work like this, with the exception of mail tags. You can code a link to open up someone's mail app with a new message addressed to you by using the mailto: link tag.
<a href="mailto:desertrose0601@gmail.com">Contact Me</a>!
One last thing to remember about link tags is that everything within the open/close tags will be part of the link - this includes spaces. If you'll notice my last example, I put an exclamation mark just outside the close tag, so it's not actually part of the link. This will end up looking like this on your page: Contact Me! No spaces were between the wording and the close tag or the close tag and the exclamation point, so no spaces will show up between the linked words and the exclamation point when you look at your post.
If you did this though...
<a href="mailto:desertrose0601@gmail.com">Contact Me </a>!
...your link would end up looking like this: Contact Me ! so just be aware of spaces when you're typing your code.
Basic Formatting
Bold and italic codes are other common codes you'll see. These have an open and close tag that goes around whatever you want bold or italic.<b>Hello</b>
<i>Hello</i>
You can combine these tags too - just close them off in reverse order of how you opened them.
<b><i>Hello</i></b>
Paragraph tags are useful to know. They give you a little more control over where the breaks are in your body text. You really don't need to worry about this code in your blog posts, but sometimes widget code can get a little unruly and you may need to add these in.
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
Another code you'll see quite often is the Break code. This forces a line space between paragraphs and can be repeated to make larger spaces. This is one code that doesn't actually have a close tag. I've seen it used in two ways, but either one should work.
<br>
<br />
If you wanted three spaces between lines or paragraphs, you'd enter this code:
<br />
<br />
<br />
Tables
The last type of code I'll show you is the Table code. I use this mainly when I'm putting in social media icons because Blogger never lays them out the way I want them to lay out.Basically there are three codes you need to know to create a table, and all of them have open and close tags. Remember the rule I mentioned above about closing tags in reverse order of how you opened them? You'll definitely need to remember that when building tables. Trust me, it's easier than it looks to make these, but you do have to make sure things are in the right order or your table will do strange things.
<table></table> <---- This is telling the page that you're starting/ending a table.
<tr></tr> <---- This is indicating each row in the table.
<td></td> <---- This is indicating one item on any particular row.
A basic 3 column, 2 row table (using images as links for social media) would look like this:
<table>
<tr>
<td><a href="twitter.com"><img src="twitter.jpg"></a></td>
<td><a href="Facebook.com"><img src="Facebook.jpg"></a></td>
<td><a href="pinterest.com"><img src="pinterest.jpg"></a></td>
</tr>
<tr>
<td><a href="mailto:mymail@google.com"><img src="mail.jpg"></a></td>
<td><a href="goodreads.com"><img src="goodreads.jpg"></a></td>
<td><a href="etsy.com"><img src=etsy.jpg"></a></td>
</tr>
</table>
Notice that I only used the <table></table> tabs at the beginning and end of the code. Then I used the <tr></tr> codes at the beginning and end of each row. Within row one, I placed <td></td> codes around each item -- this makes sure they line up next to each other and won't jump to the line below.
Clear as mud?
*****
This concludes week four of the Build Your Blog! series. Next week we'll talk about interacting with your followers! If you haven't already, don't forget to subscribe to this blog so you know when the next edition of the blog series is ready!
Questions or comments about this week's topic? Leave them below & I will try to answer them all in a follow-up post later this summer!
*****
Grab a button and spread the word!
This is exactly what I was looking for FOREVER!
ReplyDeleteThank you sooooo much!!
Smooches from Germany,
Anni
Awesome! Glad I could help. I get so many requests to help with HTML coding and it really isn't that hard, so I figured it's about time I make a quick tutorial about it just to explain the basics to people! ;)
DeleteThank you SO much for this! I'm always struggling with html.
ReplyDeleteGreat explanation. I wouldn't use tables to position your social media icons though. Have you tried using a div?
ReplyDelete