Ok, so Megan used to be really bad at HTML when she first started blogging. So to keep her from asking me constantly how to make things bold, or change the color/size of fonts, or make links, etc. I made a cheat sheet for her. She used it for a while until the HTML eventually came naturally to her (after a while you don’t even think about it).

Why? Well, when WordPress/Blogger adds an image for you, it adds a ton of crap to the code, which quite frankly is unnecessary, and could be “cleaner” if written yourself. Any time a program is writing your code for you, you can bet it is probably pretty ugly. Below are a few tricks that are commonly used here in the Nerd Nest. Let us know if you find this helpful, or if you’ve got questions about other things you’d like to know how to do.

Links

A good nerd makes reference to all their sources! Below is a simple link that can be placed around any word to link it to the site. Here are a few examples:

//Basic Format of links:
<a href="http://thisisyourlink.com/">
     This is what they click
</a>


//referencing another blog? A great way
to do this is to wrap the link around
the blog name like so:
<a href="http://thenerdnest.com/">
     The Nerd Nest
</a>

Images

Every blog should have pictures! In fact, if there are no pictures, it is very likely that you’ll have few (if any) followers. Pictures are a huge part of blogging. I recommend using your own pictures when possible. Attempt to limit the amount of outside pictures used.

//Basic image tag</pre>
<img src="yourpic.jpg" alt="" />

//Size way to big? use "attributes" to change
height and width.
<img src="http://flickr.com/yourpic.jpg" 
    alt="" width="300px" height="220px" />

//Want to use a picture as a link? easy:
<a href="http://google.com/">
     <img src="flickr.com/yourpic.jpg" alt="" />
</a>

Text Mods

Ok, these are the most commonly used, and they’re REALLY easy! Don’t panic, HTML looks a lot scarier than it actually is.

<strong>BOLD</strong>
<i>Italics</i>
<u>Underline</u>
<font color="red">Change font color</font>

//Note: You can also use "hex" values in place of
the color, so #000000 is black, #FFFFFF is white.

<h1>Heading 1 (really big)</h1>
<h2>Heading 2 (slightly smaller)</h2>
<h3>Heading 3 (again, slightly smaller than h2)</h3>
<h4>Heading 4 (smaller than h3)</h4>
<h5>Heading 5 (see a pattern?)</h5>
<h6>Heading 6</h6>

//Note: with headings, you usually only use 1, 2,
and 3... 4 is pretty much 12pt font, 5 is smaller
than that, and 6 is nearly useless!

Ok, now that we’ve got all that down, I’d like to give you a few pointers. The biggest mistake that new HTML coders make, is forgetting to close the tag. For example, if you want to make a word bold you’ll notice in my example above that it starts with a <b>, and after the word is the </b>. If you forget to add the </b> at the end of the word, everything after the <b> will be in bold! The same goes for links. Without the </a>, your entire post will be one giant link! Not good!

If you have any questions regarding HTML, or Blog modification, just let us know! We’re happy to help!