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>

18 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
  5. I've been designing web sites for about nine years now. In that time, I've made just about every mistake known to man, but I learned more than I ever could have reading some book or taking a class. I've gone from a Front Page rookie to a wily PHP designer and hit every bump in between. check it

    ReplyDelete
  6. Each and each time you're in pursuit of a brand new job, it is the same issue. you have got to shine your resume and start the multiple steps concerned to do and notice a brand new engineering job. It is a time intense method and if you have got been out of labor for a minute nanny resume samples

    ReplyDelete
  7. I’m happy Many thanks for the exciting blog posting! Simply put your blog post to my favorite blog list and will look forward for additional updates. Simply wanted to write down a word in order to say thanks to you for those wonderful tips. receptionist interview questions and answers pdf

    ReplyDelete
  8. It is a very good information. Html coding is very important for every web developer how want design there websites. You have provide good html code about basic html free printable cheat sheet. By using this html code we can benefited to design any platform very much and by read c assignment we can learned a lot. Thank you very much for sharing this with us.

    ReplyDelete
  9. Now, this site supports the multi-language and it is the good approach to this site. Almost every type of the people use the internet and every country speaks the different language about cyma accounting homework help for all. It is good for this site to support the multi-language and people now work more freely.

    ReplyDelete
  10. Accounting and data have been Two complicated subjects that are the base of a fantastic career in bookkeeping Or economics. Statistics is a topic that pupils can be grappling with At the senior school or at the college level. Statistics is required at a broad Range of practical software attached to additional areas also. explore more to see the sample of quality writing services.

    ReplyDelete
  11. When writing a response to an item of written job, such as a book or a short story, one commonly-employed strategy is to analyze flows lifted directly from the text. As opposed to merely going down quotations and also rewording declarations, analyzing their value could remove up numerous inquiries in the minds of your visitors. paraphrase my essay will help you to paraphrase your writing.

    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!