So you’re ready to get into the technical side of blogging? HTML is a key to making sure your content is readable by both humans and search engines. Common blogging platforms like WordPress do most of the work for you, but you still need to know basic HTML to drill into the code to fix details that may need to be cleaned up.
HTML is very simply markup language - in other words, HTML is simply telling your computer how to make the text and images on a web page look for you. To change how a text looks from one word to the next - such as bold or underline - you need to know how to mark up the text using HTML.
If you don’t mark up the content, you get something that looks like this: http://bit.ly/vAgQoP
When you add HTML, the same exact content becomes much more organized and gives the reader (and search engines) visual clues as to what’s important: http://bit.ly/vkuP5V (note: you can right-click on this page and select “View Source” to see a complete HTML sample).
Ready to get started? Let me introduce you to my little friends - HTML tags.
What Are Tags?
Tags are how your web browser translates raw text into something meaningful on your screen. You simply use these two symbols: "<" and ">" to create a tag. There are literally hundreds of different kinds of tags that do different things, but 99% of what you need for blogging are formatting tags.
Formatting Tags
To help the reader see your content more clearly you need to be able to use spacing, font sizes, and text decorations (bold, underline, and italics). We also need to be able to show the reader a hierarchy of information - what's the most important, next important, and so on. We use headers to create this hierarchy.
So now you know about spacing, font sizes, text decorations, and headers. To use these features, you need to know a few HTML tags.
Using HTML Tags
Creating an HTML document is incredibly easy. Just open a basic text editor and save the file with .HTML instead of .TXT. That's it! Now you won't have a lot of meaningful information, but your web browser will know it's an HTML document and try to open it.
Every HTML tag must start and finish. The most important HTML tag is...<html>. So you MUST start an HTML document with that tag. And you must finish it as the very last tag in the document like this: </html>. Notice that it has the backslash. This is how you "open" and "close" a tag.
Examples of Using Tags
The practice of "opening" an HTML tag and "closing" it later is called nesting. You open a tag, put content inside, and close the tag. Only the content in between those two tags gets affected. Here's an example (you can see it in action in the "hey-there-example.html":
<p>
<b>Hey there!</b> How are you today?
</p>
In the above example, you have two tags: <p> and <b>. The <p> tag stands for paragraph. It means everything between the <p> and the </p> is a single paragraph, so your web browser will put space above and below it to set it apart from other text. The <b> tag stands for bold text. So only the text between the <b> and the </b> will be affected. In the above example, "Hey there!" is bold and "How are you today?" is not. All the content is "nested" between <p> tags and only part of the content is nested between the <b> tags.
You must ALWAYS close a tag if it is open. Otherwise, you will see issues in your formatting.
Common Formatting Tags
<h1> - this is your first header.
<h2> - second header. Usually smaller font.
<h3> - third header. Often same font size as everything else, but bold and italicized.
<p> - paragraph text
<br /> - creates a line break. Note that you can close the tag immediately after opening it by using the backslash inside the opening tag.
<b> - bold
<u> - underline
<em> - italicized
<strong> - another version of bold. Some sites require <strong> instead of bold <b>.
Creating Links
Links are how you move from one web page to another. You click a button or the common underlined, blue text to go to another page or site. To create these, you need to understand a few parts of the <a> tag. Here's a complete example that I'll break down:
<a href="http://www.google.com" target="_blank">Google</a>
The “<a” simple tells the browser that you are creating a link.
href is the site you want to go to. You can edit this to be ANY link on the internet.
target tells the browser where to open this link. "_blank" just means to open in a new window. If you do not use the target feature, the link will open in the same page, or you can use the target="_self" option.
After your opening <a> tag, you have the content that will show up on the page. You can put text here if you want, but images are also common...
Creating Images
If you already have the image you want to use, making an image show up on a web page is very similar to creating a link. Here's a complete example:
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" height="95" width="275" />
The img starts the image tag.
Src tells the browser where to find the image.
The height and width tags tell the browser the size of the image.
Notice that, like the <br /> tag, you can close the img tag without the </img>, although both work.
For More Information:
You can do two things to learn about web-design:
1. Google it :)
2. Go to a web page, right-click, select "view source" and actually look at the code.
3. EchoEcho is an excellent source of free HTML training.
