Blogging Basics for Beginners: A 12-Week Series to Walk You Through Setting Up a WordPress.org Blog will run every Thursday from August 30th through November 15th. Click here for all of the posts in the series.
While WordPress offers many automated ways to change and enhance content on your blog in addition to providing a visual editor, you will benefit in the long run by learning some basic HTML code, which you can use in posts and pages as well as sidebar text widgets.
Here are some basic examples:
Headings. Use the h2, h3 and h4 tag to include headings, and format the way they appear in Site Design. The heading above is a Level 2 Heading:
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
Blockquote. Use the blockquote tag to format quotations, and format the way they appear in Site Design.
<blockquote>It was a fantastic book!</blockquote>
And here is how it looks:
It was a fantastic book!
Bold. Use the strong tag to bold text
Italics. Use the em tag to italicize/emphasize text:
<em>Italicised (emphasised) text</em>
Underline. Use the underline tag to underline text:
<span style=”text-decoration: underline;”>Underlined text</span>
A link has two different parts – the address being linked to and the anchor text that is shown on the page or blog post. When writing an HTML link, you need to put that information into the HTML tag.
Here is an HTML link to the website for CNN: <a href=”http://www.cnn.com”>CNN</a>
This is how the link looks on the page: CNN
The most important thing to understand about HTML is that almost all HTML commands work through the use of both an opening tag and a closing tag.
The opening tag creates the style or process — such as bolding or creating a hyperlink — and the closing tag tells it when to stop. Missing closing tags are one of the biggest causes of formatting issues, and WordPress even has a ‘close tags’ option on the HTML edit screen to let you close any open tags that might be affecting your site content. But it’s best to get into the habit of looking for those tags so that you can write cleaner HTML and do more with your site over time!
In order to display images in your blog posts, pages or even your sidebar, you first have to upload images to your media.
The WordPress image uploader takes care of two different things:
1. It will copy an image file from your computer to the server where your blog is hosted
2. It automates the creation of the link that “points” to the image
Let’s say you have an image file called “weather.jpg” that you want to place inside of a blog post. In the new post, click on Media in the dashboard and click ‘Add New’:
Click on the ‘Select Files’ button and then Browse to find the weather.jpg file. Once you do, the image will upload. Take note of the URL to the image.
This is how you can insert the image into one of your pages or posts:
The img src tag shows where the image file is located and will display it as long as the image is in that path. As you learn more, you’ll see that you can align the image to the left or right of a blog post, add titles to it for SEO purposes and create images that act as links to take your readers to different content, either on your blog or to a site outside of your domain. (Note that the img tag does not require a closing tag!)
If you’d like to dive into these in more depth, be sure to check out these HTML tutorials:
- Basic HTML Tags, Part 1 and Part 2
- Adding Images, Part 1 and Part 2
- Creating Links, Part 1 and Part 2
- Advanced Tags
|James Brooks is a professional blogger, web designer and social media consultant based on the South West coast of England. As well as being a co-founder of GPlusTuts, a blog about Google+, James also enjoys blogging about technology, food and tea!|
|Mandi Ehman is the founder and publisher behind Life Your Way and the co-author of All in Good Time, as well as a wife and the homeschooling mom to four beautiful girls. She lives with her family on a little slice of heaven in wild, wonderful West Virginia and loves coffee, chocolate, easy meals, beautiful things and minimalist spaces.|