Whatcha Makin' Now?: Basic HTML Cheat Sheet {FREE printable}

Pages

Related Posts Plugin for WordPress, Blogger...

Tuesday, August 13, 2013

Basic HTML Cheat Sheet {FREE printable}

Basic HTML Cheat Sheet {FREE printable} -- HTML doesn't have to be scary! This is an easy to reference list with some of the most commonly used codes!

Programming note: I'm swapping my Tuesday and Wednesday post this week because tomorrow is my birthday. Check back tomorrow for lots of cake.... ;)

I know HTML is a dirty word for some of you, but it doesn't have to be!

In this edition of Whatcha Learnin' Now, we will review basic HTML to help eliminate some fear when you need to play around with HTML coding. 

Technology has made things pretty easy for bloggers in that we don't need to know HTML or web design to have a successful blog. Amen to that! But there are times when we want things to look a certain way and it. just. won't. happen. I'm hoping this cheat sheet will help you in those moments!


If the printable isn't your thing, here is a quick list of the codes I use most: 

Paragraphs
<p>This is a paragraph.</p>

Bold Text
<b>Creates bold text.</b>

Italic Text
<i>Creates italic text.</i>

Creating Headlines (adjust 1 to 6)
<hl>The largest headline.</hl>
<h6>The smallest headline.</h6>

Increase/Decrease Font Size (adjust 1 to 7)
<font size="3">This text would be size 3.</font>

Change Font Color (Use font color or hex value)
<font color="green">This text would be green.</font>

Change Text Alignment (Left, Right, or Center)
<p align="left">  OR  <p align="right"> OR <p align="center">

Change Image Alignment (Left, Right, Center, Bottom, Top, Middle)
<img src="this is your image link" align="left">

Insert a Break
<br>

Insert a Horizontal Rule (line)
<hr/>

Indent Text
<blockquote>Text to Indent.</blockquote>

Creating a Numbered List
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>

Creating a Bulleted List
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Creating a Link
<a href=”http://whatchamakinnow.com”>Check out my blog!</a>

Creating a Link to open in a new window
<a href=”http://whatchamakinnow.com” target="_blank">Check out my blog!</a>

Creating a Link to Email
<a href="mailto:whatchamakinnow@gmail.com">Email Me</a>

Adding a Link to an Image
<a href="link URL"><img src="this is your picture URL"> </a>

Creating a Table

  • When I’m working with a table, I usually keep the border=1 until I’m done. Then, if I don’t really want a border, I change the 1 to a 0 and there is no border! You could also put a higher number if you want a thicker border. 
  • Columns are <tr> </tr>
  • Rows are <td> </td>
Here is a 4 columns  x 5 rows sample: 
<table border="1">
  <tbody>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
<tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
<tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
  </tr>
<tr>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>
<tr>
    <td>4</td>
    <td>4</td>
    <td>4</td>
    <td>4</td>
  </tr>

</tbody></table>

7 comments

  1. This is super helpful! thanks chelsea :)
    http://www.handmadeintheheartland.com

    ReplyDelete
  2. Very helpful! In fact I was looking for something like this today and bam! here it is!!

    ReplyDelete
  3. This is great! Thanks so much. I am printing out now so I can refer to it and save me the time of Googling it whenever I am wondering. :-)

    ReplyDelete
  4. Wow! This looks like an amazing and user friendly resource but every time I click on the link dropbox says it has been disabled. If it is at all possible, please email it to me at
    teachwithasmile1@gmail.com

    ReplyDelete

I'd love your feedback! Make sure to leave your email so I can respond. Or, drop your blog link so I can check out your site!