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
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>
<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>