For non-techies, modern content management systems like WordPress and Typepad are a godsend – mostly because they make it easy to blog without coding.
But knowing just a little code can still go a long way. While the graphical interfaces these platforms offer will let you avoid much of the headache associated with HTML and CSS, knowing a little code can help you…
- add text to your sidebars
- format images within your content
- place links in your comments
- modify automatically generated code in your posts
These are all tasks you’ll want to accomplish at some point, and you need only know a wee bit of HTML to do so.
Don’t worry! It’s actually pretty easy. Take a look at the following HTML tips. They’re all quite basic, and you should have them mastered in no time.
1. Links
To create a link in HTML, begin with this tag: <a href=”URL”> and end with this one: </a>.
For example, let’s say I want to link to google.com. I’d begin like this: <a href=”http://google.com”>. Then I’d enter my link text and end with </a>.
I can make my link text whatever I want. In this case, I’ll make it “Google.” The whole link would look like this in HTML:
<a href=”http://google.com”>Google</a>
Likewise, if I’m linking to the New York Times with the link text “popular newspaper,” my link would look like this:
<a href=”http://nytimes.com”>popular newspaper</a>
When readers click the words “popular newspaper,” they’ll be transported directly to the New York Times Website.
2. Text styling
What if you’re adding text to your sidebar and you want to make some of the words bold? Just use these tags: <strong>Bold text goes here</strong>
If my text reads, “I’m a first-rate blogger,” and I want to bold the word “first-rate,” I would simply enter the following code:
I’m a <strong>first-rate</strong> blogger. You’ll end up with this: I’m a first-rate blogger.
Italicizing is similar. To italicize the word “first-rate,” do this:
I’m a <em>first-rate</em> blogger. You’ll end up with this: I’m a first-rate blogger.
3. Images
You might also want to add images to your sidebar. Here’s the code for images: <img src=”Image URL”>
That’s it. Seriously. You can even turn images into links, like this:
<a href=”http://enter-link-url-here.com”><img src=”http://enter-image-url-here.com”></a>
All we did was substitute the image tag for the link text we would have otherwise used. Easy as pie.
4. Paragraphs and Line Breaks
To separate paragraphs in your text, just use the <p> and </p> tags. This will place blank space both above and below a block of text. It looks like this:
<p>Here’s my awesome paragraph!</p>
If you want to use a line break without actually beginning a new paragraph, just use the <br> tag. You can even use <br> within a paragraph, like this:
<p>Here’s my awesome paragraph!<br>
I hope you liked reading it.</p>
On the published page, these lines would appear like so:
Here’s my awesome paragraph!
I hope you liked reading it.
So dress up your sidebars, add links to your comments, and put those images anywhere you want them! The best way to become proficient in HTML is to practice.
Jon Green is a freelance writer who knows just enough HTML and CSS to get by. He also reads tech blogs and utilizes managed file transfer protocols as necessity dictates.
Image credit: Jason Rogers
