HTML code and editing – Woodie Knows WordPress
They say we’re young and we don’t know
We won’t find out until we grow
Well I don’t know if all that’s true
‘Cause you got me, and baby I got you….
What – never seen a singing woodchuck before? Jeeeez.
Fine, fine. I’ll get to work.
First, let’s talk about the editors that come with WordPress. Here we have a choice between VISUAL and HTML. Most WP’ers use the Visual side, because they can see how the post is going to lay out. Sure, sometimes it doesn’t look exactly the same, but close.
But what happens when you want . . . more?
Come to the dark side, young Padawan, let Obi Woodie Kenobi show you a few HTML tricks.
Remember, these bits of code must be added to the HTML side, not the visual. Trust me, you won’t like the results otherwise!
Headers – Almost everyone can make their text bold, or italicized. But can you make yours
Big?
No? Then watch this.
<h1>Test</h1>
<h2>Test</h2>
<h3>Test</h3>
<h4>Test</h4>
<h5>Test</h5>
<h6>Test</h6>
These are header tags. You’ll notice each bit of code starts with a <code> and ends with </code>. This HAS to be. If you don’t close your code, the browser will keep formatting your entire post!
Suppose you want to add your own link in? Ok, we can do that!
<a href=”http://www.nameoflink.com”>click here</a>
Now here’s a few pointers. One, you have to have (can you hear me, cuz I’m yelling this) http:// in front of your link. Have. to. Two, you have to close your link. Have. to. Otherwise your entire post will be a link. Not good.
To have it open in another browser window? Do this…
<a href=”http://www.nameoflink.com” target=_”blank”>click here</a>
You can also link a graphic. <a href=”http://www.nameoflink.com”><img src=”thisgraphic.jpg”></a>
ooooooooooooooooo. Yeah, the old Woodster knows his stuff!
Suppose you have a big graphic and you want to leave a space underneath it?
<br style="clear:both;" /> will clear a space.
Want to change your font color?
<p style=”color: #ff3300;”>
This would turn your text orange
</p>
(notice how I closed the tags?)
Here’s a chart with a variety of colors…
And finally, here’s a simple table. One row by 3 columns.
<table>
<tr>
<td>insert picture here</td>
<td>insert picture here</td>
<td>insert picture here</td>
</tr>
</table>
which would look like this!
![]() |
![]() |
![]() |
And there you have it my friends. A wee bit of HTML coding to help with your posts!
Got questions? I’m standing by!
I know those words are English, but I still have no idea what you said. I’m going to read this post again and again and again until it makes sense to me. Then I’m going to have my husband read it and decode it for me.
Yep, I’m that much of a technophobe. My heart is racing just looking at those bracket things and words and stuff.
But I still love you, Woodie!
just try one tameri! on the next post you write, go to the HTML side and choose a phrase, and use the [H1] codes (with proper brackets) around it. BAM! it’ll be AWESOME!!!! =)
I bought a book on HTML last year. I can’t find the book. Thank God for Woodie.
I’m there for ya Jen! =)
Added this to my favs – thanks Carrie/Woodie – some great snippets of code that I will find very useful. Woot woot!
Enjoy Natalie!
[…] Carrie Spencer, via her good buddy Woodie, shows us how to add HTML code in our blogs on WP in this segment from Woodie Knows WordPress. […]
[…] WordPress editions are step-by-step, easy-to-understand technical tips and tricks. Check out her tutorial on basic HTML for some helpful […]