Welcome to the conclusion of the epic trilogy of our age, Coding for Bloggers and Other Non-Coders. In the past two entries, we’ve discussed the basics of HTML that your CMS uses to make those beautiful posts that we all know and love. Then we went over how to use HTML to format your text.
Now, we’ll put everything together to make a sample HTML post.
But first, let’s review the tags that we’ve talked about previously in the previous posts:
- Up first is the < p > tag. As you may recall you use the p tag to group together text that you want to make a paragraph.
- Next comes the < img > tags. Whenever you want to include an image or picture in your post, this is the tag you want to use. By putting the image source in the src attribute, any picture you want can appear on your blog.
- Ever need to link other web pages to your blog post? The < a > tag is how you make it happen! By placing text in between your opening and closing < a > tags, you can make normal text link to any other web site.
- How could we forget about the simple old < br > tag. If you ever want a to have a break line in your post, all you gotta do include the < br > tag where you want the post and there you go, you got yourself a good old fashioned american break line.
- Headers are very useful tools for any web page. Ranging from < h1> to < h6 >, they grow smaller as the numbers get higher. Headers can be used for a variety of different reasons: making text stand out, introducing a new section of the post, etc.
- Lists are a great way to show information in a reader friendly way. There are two kinds, ordered (numbered) lists and unordered (bulleted) lists. Ordered lists are identified by < ol >, while unordered lists use < ul >. To put entries into your choice of list, you use < li > before and < /li > after each list item you want to include.
- The normal text formatting that all text editing software has are also included in HTML. Bold, italic, and underline all have their own respective tags that you surround the text you want to format with. These tags are < b > for bold, < i > for italics, and < u > or < em > for underline.
See HTML in Action
Now that we have reviewed all the cool tags that we have discussed lets see them in action. we are going to look at an example of a paragraph tagged in HTML. First you will see what it looks like before it goes live and then we will see it live. So here it is:
< h3 >Time for an example paragraph! But it needs a header first.< /h3 >
< p >This is our example paragraph. Let's link to < a href=“http://www.ezanga.com/articles/coding-for-bloggers-and-other-noncoders-part-1" >Part 1< /a > of this series!< /p >
< h4 >Here is a small heading and some formatted words in an ordered list!< /h4 >
< ol >
< li > < b> Bolded words< /b > sure do stand out.< /li >
< li > < i >Italics< /i > do about the same< /li >
< li > < u >Underlined words!< /u > < /li >
< /ol >
Now lets see what this paragraph would look like on a live post:
Time for an example paragraph! But it needs a header first.
This is our example paragraph. Let's link to Part 1 of this series!
Here is a small heading and some formatted words in an ordered list!
- Bolded words sure do stand out.
- Italics do about the same
- Underlined words!
Where to Learn More
Knowing the basics of HTML will make you a more self sufficient blogger. Having the ability to look at a tagged post and understand what each tag is doing is becoming a more and more important thing in today’s digital world. With the internet and technology continuing to become bigger parts of marketing, being able to fix a broken post yourself is becoming a very useful skill.
Like we've been saying, this is just the basics. If you want to learn more, there are other places to go:
- W3 Schools is a great resource if you're looking to see all the options that HTML offers for your post, kinda like an HTML dictionary.
- If you're looking for a more in-depth look at each tag and its possibilities, HTML dog does a great job of showing you each tag's attributes that you can use.
- Code Academy does a good job of letting you try your hand at working with real HTML editor and helps you through the process.