Starting a blog doesn’t always require any HTML knowledge. You can just type anything on the text editor and WordPress will do the rest for you. However, there are times when you need more than what the text editor can offer to illustrate your idea. Table, headings, more web fonts, more colors and subheadings are just some of the things you might need but unavailable from your text editor. Therefore, a little knowledge of HTML will give you more options and better control of your blog.
To tweak the HTML code from your WordPress Dashboard,
- Click on Posts>Add New
- Enter the tile and create the body of your article
- When done, click on the HTML tab on the upper right corner of your text editor.
- It will bring up the HTML code that was generated by the system as you were creating the article.
- Take a screenshot or copy-paste the codes on your notepad. This will serve as your back up just in case that you made some mistakes or mess up the code.
- Start inserting the HTML codes
- Click on publish
Understanding HTML
HTML is an acronym for HyperText Markup Language. It provides the structure, lay-out, and format of a Web page. When you write your own HTML codes, you are instructing the browser how it should display your blog page – how to put the text on the center, what images or videos to display, what color should be used for the text, etc.
Since HTML uses plain text, you can create it on any text editing programs like notepad, Microsoft word, Apple TextEdit, and all others. But for our own illustration, we are using WordPress text editor.
What is a Tag?
Tags are the basic units of HTML code. They control how the HTML structures, formats, and lay-outs your web page. You use tags to make your text appear in boldface, italicized, or underlined. Some tags make your text bigger or smaller. Some can put images and videos. There are a lot of tags you can use and has its own use.
Structure of a Tag
Tags are enclosed in angle bracket < and >. They usually come in pairs having < as the start tag and > as the end tags. Always remember to write your codes correctly. If any symbol or element is missing, the computer will not be able to interpret your codes correctly.
Start tag – (<>) where attributes are placed
Attributes – provide additional information about the tag and comes in pairs of name-value separated by an equal sign =
Values – are the assigned property to an attribute. It is usually enclosed in single or double quotes.
Content – everything between the start and end tag is the content. It is the one being formatted by the tags to appear on the web browser.
End Tag – (</>) signifies the end of the tag. Note that it has a slash before the angle bracket.
The two types of tags are container and empty. Container tags have a start and end tag with the content in between. These are some examples of container tags:
Remember, these codes are written on the back end of your blog. On the front end, those codes should be displayed like this:
This is an example of a container tag
This sentence should be displayed in italics
This sentence should be in bold letters
Empty tags stand alone and it does not require end tags. Some examples of empty tags are:
You will not be able to understand the codes exactly for now as you still have no idea what p, I, b, br, hr, img, and all other attributes mean. My next post will have all the basic but important attributes you will need to control your blog. So Subscribe to my RSS to receive daily updates.
Next – HTML for Beginners in Blogging: Part 2
|
Share the Love
|
Get Free Updates
|
