Teacher HTML

You might be surprised how handy knowing a few HTML tags might be. Here are a few tags that will help you to make your use of Web 2.0 tools a little less frustrating.

What is HTML

The web is coded in HTML (Hyper Text Markup Language). For the most part you do not realize the code is there. For most Web 2.0 tools the user interface does not require that you know any HTML to utilize the product. With that being said, many of them ALLOW you to use HTML if you know it.

WordPress Text

This blog utilizes WordPress. For the most part I create my blog posts using the “Visual” editor, thus I do not see any HTML code when writing my blog posts. This makes WordPress blogs accessible for most users. However, there are times that I can not get the blog post to display the way I want it to. When this happens I switch over to the “Text” editor which shows the HTML code.
WordPress Visual or Text

Tags: Less Than Greater Than

The first thing to realize about HTML tags is they are always between the less than symbol and the greater than symbol. For example if I wanted to bold my text I would but a B for bold in between the less than and greater than.

<b> Here is my bolded text </b>

The less than and the greater than tell the computer where the directions are. The content for your website is outside of the HTML tags.

When switching to Text view in WordPress or toggling to HTML view in a different Web 2.0 product, be on the lookout for the less than and greater than. Do not edit the directions in between the < and >.

slash

The slash inside of an HTML tag tells you to END the directions. Thus <b>  tells the computer to bold the following text and </b> is the indicator to stop bolding the text.

HTML, Source, < >

Look in the toolbar of the Web 2.0 tool you are using. Different products have different indicators for switching to HTML view. The button in the toolbar might say “HTML,” which is what you will see in Google Sites. Other products will say “Source,” while others will just have the less than and greater than symbols to indicate switching to HTML mode.

Get Under the Image

In particular I find knowing a little HTML to be handy when I insert an image or other object and for some reason am unable to write text underneath the image. If I switch to HTML view and type the html tag <br> (which indicates a line break) followed by some default text such as “start typing here,” I am usually able to continue to work in the Web 2.0 tool in the visual editor.

Try These

Here are my recommended tags to get started. Memorize and try using these a few times just to get the hang of it.

Description Start Tag End Tag
 Bold  <b>  </b>
 Italics  <i>  </i>
 Underline  <u>  </u>
 Horizontal Line  <hr>
 Paragraph  <p>
 Line Break  <br>

These other HTML tags are useful also

 Description  HTML
 Insert an image  <img src=”URL of image”>
 Insert a link  <a href=”URL”>Text Shown such as click here</a>

I also find it very useful to know how to code a table and bullet points.  This is for another blog post!