Monday, June 25, 2012

Basic HTML for Bloggers: Yes, You Really Should Know This

Basic HTML for Bloggers

This isn't a "normal" beauty post today, instead this post is meant for the ladies over at the Beauty Blogging Coalition and the Beauty Blogazons. I don't expect my regular readers to need this post, but there are a surprising number (to me at least, I fully admit to being a computer nerd) of bloggers that don't know the basic html behind a blog post. HTML is actually very easy if you know the basic codes, but the key is knowing what you're looking at.


Read on if you want to decipher why those punctuation marks are doing things that you weren't taught about in your senior year composition class. I'm going to go over a few basic things that I use in my posts every day. If there are more things that you want me to go over, be sure to leave a comment and I'll do a 2nd post.


So, the first thing that you really should notice about HTML is that there are special brackets. See those? Inside of those brackets is where you put your coding to tell the interwebz what special things to do.

Often (ok, pretty much always, unless you are putting in a page break or image), you'll be using that coding to modify that content in blue. So, to tell it to stop modifying content, you'll need to "close" the bracket.

You close by repeating part of the code with a little / in front of it. That slash is important. When I'm writing, I'll often write my html, immediately close my bracket and then backtrack to add my content. That's so I don't forget to close my brackets. Don't forget!



Some of the easiest things to do are to modify the type. You can make things be italicized, you can underline, you can strikeout something (use s for that).



There are 2 ways to make things bold, either works. I'm a fan of the "b" simply because I'm lazy.



This is the easiest way to center something. You can do this to text, links, images... etc. I most often will center images, but note that text will not wrap around it. If I have a smaller image that I want to embed off to the side within the text wrapping around I'll use the Blogger insert image button at the top of my composition box, it's just easier to float an image to the left or right that way.



I like to use these to emphasize or de-emphasize something. I'll use big to make mini-headlines within a big post, and I usually use small if I have something extra to add at the very end of a post, maybe an image credit or something.



It's really easy to do multiple things at ones. Just nest codes within each other. Just make sure you're keeping track of things as you close them. Close your coding brackets!



What if you're in html mode and you can't make a return? Some people use the paragraph method (which involves nesting your paragraphs into "p" brackets), but I think it is easy to forget to close those brackets. I prefer to use a page break where I would normally want to just hit return.

If you're in Blogger you can just go into the post settings to the right, under options, and select "Press Enter for line breaks." I have that turned on at all times, but I use page breaks a lot for items in my sidebar.



This is something that seems to confuse a lot of people. For a link, the "a" is telling us this is the link (so you close with only the /a). ref= is telling the interweb fairies where you want to go.

Note the quotes around the URL. You want them to be plain quotes. This isn't a problem when you're typing directly into your blog, but it can be a big problem if you're typing into Microsoft Word (or a Google Doc) and then pasting into your blog. Those quotes will change themselves into "smart quotes" that nest around whatever is inside them. This is really pretty and fancy. If you're writing a letter for work it's great. Not so much for the internet. The smart quotes aren't recognized in HTML, so you'll need to turn off that feature in your Microsoft Word or go through and replace quotes by hand.

In the second link, you'll see I've created a "target". Adding this in to the "a" coding means that when the link is pressed, the browser will open a new window and the link will go there. I like to do this when I'm linking to outside links in a blog post. Readers can go look at something, but when they close that window my blog is still there for them to read the rest of the post.



If you're hosting images somewhere else rather than uploading them to your blog (I host all of my images over on Photobucket, read more about why in my blogging tips post) you can either code in images directly or use the (in Blogger at least) use the image button that pops up and does the whole thing for you.

If coding in an image on your own, the top coding is the very basic image. "img" is what says this is an image. You aren't modifying any content, so you don't need to close this with a closing bracket. The "src" is telling the browser the URL source of the image. You'll need to URL of the image itself, all alone. Not a page with the image on it. In Photobucket, underneath your uploaded images you'll see something called "direct link" under the image. That's the URL you need.

Now, if you want to get fancy, I've included 2 more image codings.

The first one includes a "border" tag. You can do all sorts of things here if you want for displaying images, maybe if there's a second post I can go into that. Here I've written border="0". Why no border? This is what I do to images that I use in links. Yes, if you want to get really fancy, you can take that image and put it into the content "link" area of a link. But, it will put a box around your image (just like it underlines words that are links) and since I think it is ugly I always take it away with the border="0".

For SEO purposes, I often do the second of the "fancy" image codings. I fill in info about the image for the alt and title. I try to make them keyword rich (I'm not very good at this), related to the image and the post. Note that if someone pins your post and selects that graphic, the "title" tag can automatically populate in their description. So make it good! (This happens if they haven't selected any text on the page, their selection seems to override this.)

Finally, see that width="XXpx" ? That helps you to change the size of an image. I have to do this quite often, usually because I don't take into account how tall something is and then it completely takes over my post. You can change the size of an image by modifying the width or height (or both, if you want to do the math). I like to just change up the width and let the internet browsers do the math for the height, that way it doesn't end up looking strangely stretched or smooshed. Just put a number in for the XX. I use a lot of 600px, 450px and 200px with my layout.



Finally, the blockquote. This is great for setting off a block of text. It will add a little space above and below, as well it will indent the margins on both sides.
I use blockquotes like this for long quotes and for perfume note lists. You might have something more exciting to use it for, but for me this is just an occasional thing that I code.


Let me know if you have questions or there's something else you want to learn!

If you want to get more advanced I look up a lot of HTML over on W3 Schools, though I originally learned all of this stuff about 13 or 14 years ago from a Dummies book.

17 comments:

Jessika Barber said...

Bookmarking forever and ever!

oldergirlbeauty said...

So darn helpful!

Gia said...

I just bookmarked this post! Thank You! (& I was just playing around w/ the code- [it wouldn't let me enter big or small though]look how much I learned already!) ;)

Proud Momma JV said...

Wow... This is very helpful entry. I used the blogger-roid and they were times when it shows the html mode, i am so clueless, seeing it gives me headache.

melita said...

Great post! thank you so much, I thought I'd never learn it! Its much more clearer now, I've got to catch some spare time to try it

PS said...

Loved reading this Christine! You know me (hanging head in shame), I am one of those bloggers in the html-cluess lot. Honestly, I have never read it explained in basics. So, thank you! :) I am feeling a little less clueless now.

Christine said...

Thanks everyone! I did a similar thing in my notepad on Makeup Alley years ago and it was so helpful to everyone! All of the strange punctuation can be very confusing and I had a few "basic" posts pinned on Pinterest and none of them offered what I thought was a good explanation for things or did all of the html that I use in a post!

@Gia- the comment box uses a variation of HTML and doesn't use those codes, but you can use them on your site! I've tried it! (Everyone is going to think that sounds strange, but I coded Gia's site, Bottle and Bottles of Polish, though the template I took it from acts funny and we're going to move it to the same template that I use.)

Nikkia said...

Very Helpful!!! Thanks so much for sharing this!

StephanieLouise said...

You're so on the ball! I'm happy to say I know most of these offhand!

rmcandlelight (nailsbeautiqued) said...

Thank you so much for this needed info!

Helz Nguyen said...

This is awesome , many thanks :)

Steph from fangswandsandfairydust.com said...

GReat Post with super useful information. I have used the for dummies books. I loaned it out tho and now I am missing it.

Nancy said...

Great job! HTML is so intimidating, you've done a great job of simplifying!

Stephanie said...

This is a great post. I took html classes years ago in college and this post was SO much easier to understand than half of what the professor was saying! (I still have those html/xml books...I should pull them out and dust them off now).

Trine-Marie said...

This is a great post, and I was wondering if you could help me with something. I have added border="0" to several of my pictures and it doesn't do anything. The annoying border keeps showing up no matter what I do :/ It's getting really frustrating.

-Maria

Christine Mikesell said...

Hi Maria!
border="0" will take away the link border, but does nothing to the formatting border that is embedded in some layouts. That's why I talked about it in regard to links. You'll need to go into the html of your layout to change what it does to images.

Trine-Marie said...

Thank you. That's really what I figured by now. But I still can't make it work. I have changes several parts of my css and I thought I had removed it, but it's still there. I'm so lost! :P I just ended up sending support an email, because I think it must be something hidden in a weird place of my design.

-Maria

Post a Comment

I love comments! Please ask away, provide info on how you liked something, etc. Note that spam, comments with random links (which I count as spam), anything not in english (again, spam) and comments that are completely unrelated to anything will all be deleted.

progrids