HOME - Desire2Learn - Ning - Mythology & Folklore - World Literature - Indian Epics

Web Basics: 10 Steps to HTML Bliss

Being able to type your own HTML can really extend the power of some web-based applications, such as posting at discussion boards online or in blog posts. If you can type your own HTML, this means you will be able to:

• format your text (bold, italics, size, color)
• insert images (provided that these images are already published somewhere on the Internet)
• create bulleted lists and blockquotes
• control how your links appear and whether or not the links open in a new browser window

Here is a quick-and-dirty introduction to HTML. You probably don't want to do all your HTML typing by hand, but it can be very useful to have a few HTML tricks up your sleeve!

Here are "10 Steps to HTML Bliss"

1. Know thy wickets! All the HTML code is enclosed inside "wickets", which are the less-than and greater-than signs on your keyboard. The HTML code has to enclosed inside the wickets if it is going to work; otherwise your computer will get confused! Here are some examples of HTML code in wickets:

<img src="http://mythfolklore.net/lang2.jpg"> ....... the code for an image
<b> .......the code for marking something as bold
<H2> .......the code for a "header" size #2

2. Think start-stop. Most HTML tags "start" and "stop". For example, there is a point where you want to start having text appear in bold, and then there is a point where you want to stop using bold. You use one piece of HTML code to open the bold section, and a corresponding piece of HTML code to stop the bold section. If you forget to stop the bold section, it will go on and on forever. Luckily, it is easy to remember how to close the HTML code: just use </ > (see the forward slash? that means "close"). Here are some examples:

b is the HTML code for bold
<b> means start the bold and </b> means stop being bold

to create bold text, just put the text you want to bold inbetween <b> and </b>

Example: I really really want you to pay attention.

I really <b>really</b> want you to pay attention.

3. Know the basic start-stop codes. There are not that many codes which you need to learn in order to format your text. Here are the ones you would probably use most commonly:

<b> is for creating bold text

<i> is for creating italicized text

<H1> and <H2> are "header" codes: <H1> makes text very big and bold, <H2> makes text big and bold

<p> is used to define a paragraph, causing white space to appear above and below

<blockquote> is for indenting a block quotation

There are a very few HTML codes that do not have a stop code. These are <br>, which cause a line break (carriage return) to be inserted into the text, and <img>, which allows you to display an image.

4. Codes and attributes. Some codes require special instructions, which are called "attributes": if you are going to change the color of the font, you need to say what color to use. If you are going to say you want to open a webpage, you have to say which webpage to open. If you are going to display an image, you need to say what image you want to display. The important thing to know about attributes is that they must go in quotation marks. The next items in your 10 Steps to HTML Bliss will explain how these attributes word for different kinds of code.

5. Images and attributes. The main attribute you need to supply for an image is the "source" of the image, which is its address on the Internet. Every image you see on the Internet has its own address, and you can find that out by right-clicking on the image and choosing "Properties" - this will show you the URL (address) that begins with http:// . Don't try to type it yourself! Just cut and paste the address to use to create your HTML code. Here is how you create the code:

<img src="address">, where you just put the address of the image inside the quotation marks

here are some examples:

<img src="http://www.ou.edu/web/main/images/bigtitle4.gif">

<img src="http://www.mythfolklore.net/3043mythfolklore/images/grimm/crane_sleeping4_100.jpg">

6. Fonts and attributes. One of the attributes of a font is its color. There are some complex systems to refer to all the millions of colors that can be displayed on a computer monitor, but there are some nice old fashioned codes that human beings can recognize and type. Don't forget to stop the font tag when you are done! Otherwise all of your text will be displayed in color. Here are some examples:

<font color="something"> - the colors are: red, blue, aqua, green, purple, along with some other colors you can see here

<font color="red">This is red</font> and this is not red anymore.

7. Links and attributes. The HTML code for a link is <a> (don't ask why!) There are two possible attributes you might indicate for a link. The obvious one is the address of the link. The address is called the href attribute (don't ask why!) You can copy and paste the address from the browser address bar; you shouldn't try to type it yourself. It is so easy to make a typo otherwise! Here is an example:

<a href="address">text of link goes in here</a>

for example:

<a href="http://www.ou.edu">OU Website</a>

Another useful attribute for the link is a target attribute. This is what allows you to open the link in a new window. If the target attribute is "blank", this means the link will open in a new window. Here is an example:

<a href="http://www.ou.edu" target="_blank">OU Website</a>

8. Combining codes. Yes, you can combine codes - but not in the same set of wickets. Instead, you need to "nest" the codes. Here is an example of how to create bold red text:

<b><font color="red">This is bold red</font></b> and this is not bold or red anymore.

(see how the <font> tags are nested inside the <b> tags? it doesn't matter which is on the outside or which is on the inside, but they need to be "nested" with one pair inside the other pair)

You can even have three pairs of codes nested: here is how I made a bold red link to the OU webpage open in a new window:

<a href="http://www.ou.edu" target="_blank"><b><font color="red">OU Website</font></b> </a>

(see how the <a> tag is nested inside the <font> tag which is nested inside the <b> tag? in this case it does matter which order they go in, because a link by default is blue - in order to force the link to change to a different color, you can put the font color tag inside the <a> tag)

OU Website

9. Email links. An email link, believe it or not, is a variation on the webpage link tag. It is also an <a> tag, with an href attribute. The only different is that instead of http: command, you use the mailto: command. Here is what it looks like:

<a href="mailto:laura-gibbs@ou.edu">Send me an email!</a>

10. Preview your HTML code! Whenever you type HTML code by hand, it is really important to preview the code, simply because it is so easy to make a typographical error. Both Blackboard and Blogger.com allow you to preview your code - so that you can see how it will actually display - before you post your entry.

Beware! Computers are really stupid, and they will do whatever we tell them to do. So whenever you make a mistake in the HTML code, the computer will just get confused. It is really important to make sure that your wickets come in pairs: for every < there must be a >. You need to make sure that all the tags that start, also have a stop tag: every <b> needs a </b>, every <i> needs an </i>, every <a> needs an </a>, every <font> needs a </font>. You also have to make sure that your quotations marks are closed. Blogger checks your HTML code and warns you if it sees a problem, but Blackboard does not offer any code checking at all. So: take care, and make sure you look at the results of your code to make sure it is working correctly!