Most essential HTML tips, which will make your post stand out

Today Emma Best wrote a guest article about wordpress HTML basics. She runs her blog laptopical.com – which has recently launched their guide to student laptops and is a source for the latest Apple laptop reviews.

The Wordpress content management system has two options for inputing content: the simple-view type box, and the source box. When entering content using source, you have to add your own HTML code to format the content. At first, this may seem daunting. Brackets and nonsensical tags, as well as content formatted by code, not appearance, appears a hindrance, not a help. However, after learning the essentials of HTML, you’ll be able to create meticulously formatted pages for a truly unique design, which will separate your website from others and make it standout to new visitors.

The following article details sixteen essential HTML skills every blogger should know to make their blog or website standout, look unique, and keep readers coming back.

The Basics

HTML may look complicated, but it is not. The essence of HTML are the tags: almost every tag has an ending tag, and they are all enclosed in < and > symbols. To make an HTML tag, follow this format: <b>, and to end the command, write </b>. Notice it is the same tag with a forward slash (/) added.

Formatting Text

Formatting text includes the simple things readers don’t notice unless they are absent–extra spaces, bold and italicized text, paragraphs, font color and size and face, etc.

Fonts

To format fonts, use the following commands:

<font face=”Arial” color=”red” size=”4″>

Face is where you enter the desired font. It is wise to add several different standard fonts separated by commas for those who use different browsers and systems.

Color is the color of the font. You can add HTML color code, such as #33333, or you can enter a color name, such as white, red, or blue.

Size is the size of the text. The numbers don’t represent normal point size; experiment with different numbers to get a feel for their size.

Paragraphs

To make a paragraph, add <p> before the text and </p> at the end.

Bold, Italicized, and Underline

Bold is made via <b> before the words or phrase you would like to make bold, and </b> after.

Italicized is the same as bold, replacing the ‘b’ with an ‘i’: <i> </i>

Underlined is the same as the other two using a ‘u’: <u> </u>

Spaces

To add a space in HTML, you must use the code &nbsp.

Tables

Tables are simply borders used to encase images or colors or, most often, text. They are essential for large lists, and not very complicated.

To make a table, start with this basic piece of code:

<table>
<tr>
<td>Text inside table here</td>
<td>More text in another column here</td>
</tr>
</table>

The code is fairly simple to decipher.

Table is obviously the start of the table.

TR is the column in the table. It is the vertical sections.

TD is the row that stretches horizontally.

You can add as many columns and rows as necessary for your needs by adding additions tags; make sure the TD tags are inside that TR tags, and that each is ended before a new one is started.

Tables can have extra formatting added by adding color=”X” and border=”X” inside the table or column or row tags.

Images

Images are an essential part of any blog. They can add character and feel to a page, and make it easier to understand the text. Images are one of the few exceptions in HTML: they don’t require an end tag.

To insert an image, use: <img src=”file path/image.jpg” alt=”Text” height=”xx” width=”xx”>

IMG SRC  means “image source”, and indicates the location of the photo you would like to insert.

ALT  is alternative text to be displayed in the event that a browser can’t display an image. Most individuals enter descriptive text of the image.

Height  and width are obvious; enter the pixel dimensions you would like for each photo.

Sounds

Adding audio to a web page is generally frowned upon; however, there are times when it is necessary or acceptable.

Automatic Background Music

I highly recommend against having music play automatically. However, if you really want it to, add:

<bgsound src=”file path/sound.wav” loop=infinite>
<embed src=”file path/sound.wav” autostart=”true” hidden=”true” loop=”true”>

You should only use MIDI or WAV files, as they are the most commonly supported. Try to keep the file size as low as possible to avoid long delays in loading. If you don’t want the audio to loop, then change loop=”infinite” to loop=”0″ and loop=”true” to loop=”false”.

Download Audio Links

If you want your visitors to be able to right-click on a link and save the audio to their hard drive, simply add a hyperlink to the audio:

<a href=”file path/sound.wav”> Text you want the visitor to right-click on </a>

Have your say

Did you like this tutorial? Was it helpful?

Please Grab the RSS feed to get more interesting articles like this one. If you want to write an article for BlogKori, then send me a tweet @tamalanwar.

Corporate Pens

Related posts on this topic

• Is there any big difference or advantage to use own host instead BlogSpot host?
• 75+ Free & Killer resources to kick start your blogging journey
• How to move your blogger blog to wordpress?
• Must have and recommended wordpress plugins for advanced bloggers
• Wordpress as a CMS with WP Remix premium themes
• Create your own wordpress themes with DIY software, free trial

Tagged as: blog html tips, html tips, wordpress, wordpress html formatting