HTML Basics

HTML Basics for Bloggers - Text Editing 1
HTML, an initialism of HyperText Markup Language, is the predominant markup languageWeb pages. It provides a means to describe the structure of text-based information in a document — by denoting certain text as links, headings, paragraphs, lists, and so on — and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of tags, surrounded by angle brackets. HTML can also describe, to some degree, the appearance and semantics of a document, and can include embedded scripting language code (such as JavaScript) which can affect the behavior of Web browsers and other HTML processors. - WIKIPEDIA

___________________________

So, now that you read Wikipedia's definition of HTML, what does that mean to you? Well basically HTML is a code you are going to tell your blog so that things look pretty and organized the way you want! Yup thats all it is!

First of all, when you start your new post, if you are using Blogger you can flip back and forth between a "Compose" and an "Edit HTML" mode. This will be really great for most of you noobies, as you will be able to add your code in the Edit Html tab and then just flip to the Compose tab to check it out.

As for WordPress folks no offense, but I'm not really fond of WordPress, BUT I will try my hardest to accommodate your blog editor too. IF at any time something doesn't work for you, PLEASE comment me and we will figure it out. I do now have a WordPress test blog, just for this purpose! Okay, back to the HTML. Word Press users your tabs should look like this.

So now that you know what your tabs look like, you want to always remember to post your HTML in the HTML tab. In blogger it will automatically convert it for you when you post, but I don't believe that WP does. Which would just leave you with stuff like this: <img src="http://www.yoursitehere.com/subdirectoryoffun" width="125"> and ovbiously thats not what we want.

Basic Text Editing
Even though I am sure of you have those fancy b and i buttons, I am going to teach you the actual code so that you can take your text editing to the next level. As a blogger it is our written word that people take their first impression from, so lets give the best impression possible!

Make sure you are in the HTML tab of your editor and try these out as you go.

This is Bold = <b>Bold </b>
This is Italic = <i>Italic </i>
This is Strikethru = <del>Strikethru </del>
This is Big = <big>Big </big>
This is Emphasized = <em>Emphasized </em>
This is Small = <small>Small </small>
This is Strong = <strong>Strong </strong>
This is Subscript = <sub>Subscript </sub>
This is Superscript = <sup>Superscript </sup>

Want to format some quotations?:

This is a quotation about how much I love quotations. They are very useful for quoting. You could also use them as a design element to make your posts more appealing to the eyes when wanting certain parts of your text to stand out!

Yay for quotations and fun! = The center part, the actual block quote is done like this =
<blockquote>
This is a quotation about how much I love quotations. They are very useful for quoting. You could also use them as a design element to make your posts more appealing to the eyes when wanting certain parts of your text to stand out!
</blockquote>

You could even decide to be all sorts of crazy have your text go from right-to-left!
It would look like: You could even decide to be all sorts of crazy have your text go from right-to-left! = <bdo dir="rtl">You could even decide to be all sorts of crazy have your text go from right-to-left!</bdo>



So as you can see so far, HTML is fairly easy. As long as you can remember the codes and the correct format for them, this should be something that will become second nature for you. Always remember to close anything you open! if you <b> on one side you have to </b> on the other or whatever command you gave it will continue onto the remaining text.

Now that you know text formatting, let's use that and do paragraph formatting.
Paragraphs are defined with the <p> tag. So anytime you type a <p> it will start a new paragraph. For example:

I love to break my text up into different paragraphs.


I love to break my text up into different paragraphs.



See the spaces it made? I didn't hit my enter or return key. I simply typed =
For example:<p>
I love to break my text up into different paragraphs. <p>
I love to break my text up into different paragraphs.<p>

You can also put line breaks in with the <br> code.
Line breaks are essentially a hard return so it starts a new line.
Want a horizontal line between your new paragraphs like I've done throughout this post?



Looks fun, Huh?



Then all you need to type is <hr /> Yup, thats it. No closing, just <hr > =



So far so good? Have you learned anything yet? Just remember that you cannot always be sure how HTML will be displayed. Depending on screen and window size it may look completely different to you compared to one of your readers! With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove extra spaces and lines when the page is displayed. Any number of lines count as one space, and any number of spaces count as one space. That's why it is good to use your <br> and <p> in any circumstance where you want a new paragraph or line.


Headings:
Use the HTML heading tags for headings only. Do not use headings to make something BIG or bold. Search engines use your headings to index the structure and content of your blog pages. Since users may skim your posts by its headings, it is important to use headings to show the document structure. H1 headings should be used as main headings, followed by H2 headings, and less important H3 headings, and so on.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Like those? It's as easy as:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>



That concludes lesson one. Did you learn anything? Yes? Wonderful! Then you will be ready for lesson 2!

If not and you already knew all this, I apologize and promise these are going to get more and more involved as we go. I want to start everyone at the same point so we're all on the same page!

Thank you for following along! ♥ Erin
Post a Comment