Posts belonging to Category Basic HTML Code

Basic HTML Tutorial.

April 10, 2010 | Posted by admin

"Find Profitable Niches with Niche Navigator"

Basic html, for the purpose of adding properties or changing the appearance of some aspects of a web page is fairly simple. You will find a use for html in your blogs also. The tools incorporated into your dashboard will aid in most operations you will generally require, such things as strike through text, underlining text, etc will require a few basic commands.

During this basic tutorial, all text in italics is editable by you. All other text needs to be inserted in your document EXACTLY as written here. I have highlighted all html tags in bold only to simplify things, you do not need to have your tags in bold text.

I will construct this tutorial as if you were creating a html page from scratch, this may get a little over-simplified for some of you and I apologize for that up front. Although this tutorial is for designing an html page, all of this information is able to be incorporated into a blog post, simply select ‘html’ at the top right of your post body window to do it all manually or use the normal view mode until you strike something that the standard tools don’t allow. This tutorial can be followed using notepad to construct the page, save as .html and then open in your web browser to see what it will look like. You will, however, need to upload it to your website with an ftp program before it will be visible to anybody but you.

A basic web page will always need to start out with:-

This is a fairly basic header text, more SEO can be added and will be covered in a future post, but this will at least get the search engines attention. You will notice I have used “en-us” for the content language, so remember to spell as an American ( color,center, etc ).

You will also see that I have used charset “utf-8″ and I will suggest that you use this on all occasions, so if you are cheating and using a prefabricated template, remember to change the charset code. You will see some italic text in the lines of code above, change these sections to suit your needs ( no need to leave them as italics ).

Now leave a blank line and add:-

<body>
<basefont color=”green” face=”arial,verdana,courier” size=”4″>
Hello! This is my page.<br><br>
<font color=”red” face=”arial” size=”2″>
This local text looks different.
</font>
<br><br>
This text looks like the first line.
</body>
</html>

That is basically all you need to have a page function in a web browser. You probably noticed that I have listed 3 text types in the opening body text instructions. This will ask the viewing computer to display the first option if that text is installed, or move to the next option if it is not. This is not totally necessary however because if you only list arial and the computer does not have arial text installed, it will merely display your page in its default text. This is usually fine for the purpose of showing your web page unless you have gone to a lot of trouble to beautify your page with a lovely text font that you particularly want to display. Bear in mind when using flashy looking fonts that many computers will not have all fonts installed, so you may simply be wasting your time.

The above example text does not have any paragraphs as such, it uses the command <br> to insert a line break. To end a sentence and start the next sentence on a new line without starting a new paragraph, insert a single <br> code. Another method is to write a sentence that is long enough to force a linebreak. If you add 2 of them, <br><br> will form an artificial paragraph.

A true paragraph html code is:-

<p>text</p>

This will automatically insert 2 linebreaks and eliminate the need for the <br> or <br><br> code we used earlier.

The code <nobr>text</nobr> will turn off automatic line breaks, even if the text is wider than the window.

The code text <wbr> will insert a linebreak at exactly this point even if the text is within <nobr> tags.

You can justify your text, have it to the left, center or right justified by inserting one of these 3 lines:-

<p align=”left”>text</p>
<p align=”center”>text</p>
<p align=”right”>text</p>

Other positional commands that you will occasionally use are:-

<center>text</center>
<div align=”center”>text</div>
<div align=”left”>text</div>
<div align=”right”>text</div>

These 4 commands are more suited to short pieces of text, such as sub-headlines, so when structuring paragraphs using html you should try to stick to the <p align=”position“>text</p> commands as listed earlier.

That was fairly painless, let’s move on to some more commands.

Bold text is done with a <b> tag like this:-

<b>text</b>

Alternative bold text is <strong>text</strong> but I have had occasions where this does not display correctly, so I recommend sticking with the <b> tags.

To write in italics, use <i> tags like this:-

<i>text</i>

Once again, and alternative is to use the <em> tags but this also can fail to register correctly with some charsets.

To create underlined text, use this code:-

<u>text</u>

To create text that has a strike-through, use this text:-

<strike>text</strike>

To lower text and make it smaller, use this code:-

<sub>text</sub>

To lift text and make it smaller, use this code:-

<sup>text</sup>

To reduce text size without altering its position on the line, use this code:-

<small>text</small>

This will reduce text by 1 font size, so it can be used in multiples such as <small><small>text</small></small> to reduce by 2 font sizes.

You could also use <font size=”1″>text</font> anywhere in your text to quickly make that piece of text display in the smallest possible font size (8pt).

To increase font size, use:-

<big>text</big>

to increase by a single font size, or multiples like <big><big>text</big></big> to increase by 2 font sizes. You could also use <font size=”7″>text</font> to immediately increase a piece of text to the maximum possible font size (36pt).

Headlines are simply:-

<h1>text</h1>

for a maximum size headline at the start of your body text, and can be reduced for sub-headlines through your body text until you get down to the smallest headline size of:-

<h6>text</h6>

It may help to illustrate how the code works by copying the following code to notepad and saving it as “test1.html” before opening it in Internet Explorer or Firefox.

<body>
<font color=”green” face=”arial” size=”4″>
<h1>Hello! This is my page.</h1><br><br>
<font color=”blue” face=”arial” size=”2″>
This local text looks different.
</font>
<br><br>
<h2>This text looks like the first line, only smaller.</h2><br>
<h3>A linebreak, after a short sentence, needs to be inserted.</h3><br>
<p>you will need</p>
<p align=”right”>to insert</p>
<p align=”left”>special tags</p>
that will insert<br>
linebreaks<br>
where<br>
you want it!<br>
<br>
Another method is to write a sentence that is long enough to force a linebreak.<br>
<br>
<nobr>This option can however be turned off<wbr> with the nobr tag,<wbr> unless a wbr is used to force it!</nobr>
<center>You can center</center>
And turn the center off
<div align=”center”>And on!</div>
<div align=”left”>Go left!</div>
<div align=”right”>Go Right!</div>
</body>
</html>

Flash as a rat with a gold tooth!

Now a little more on alignment tags. Note, in particular, the difference between the <p> and the <div> tags. The <div> tag allows you to justify content without being forced to add a double linebreak.

Also, note that these alignment tags are not limited to text. They work on text, images, applets, video or whatever it is that you insert on the page.

Building a bullet list or numbered list is fairly simple and below you can find examples of the different types of lists that you can build.

<li>text</li>
<li>text</li>
<li>text</li>

will build a standard bullet list. For numbered lists, you have several more options:-

<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Makes a numbered list using the default number type:-

1. text
2. text
3. text

<ol start=”5″>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Starts a numbered list, first # being 5.

5. This is one line
6. This is another line
7. And this is the final line

<ol type=”A”>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Starts a numbered list, using capital letters.

A. This is one line
B. This is another line
C. And this is the final line

<ol type=”a”>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Starts a numbered list, using small letters.

a. This is one line
b. This is another line
c. And this is the final line

<ol type=”I”>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Starts a numbered list, using capital roman numbers.

I. This is one line
II. This is another line
III. And this is the final line

<ol type=”i”>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Starts a numbered list, using small roman numbers.

i. This is one line
ii. This is another line
iii. And this is the final line

<ol type=”1″>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
Starts a numbered list, using normal numbers.

1. This is one line
2. This is another line
3. And this is the final line

Adding links to text and images is quite simple:-

Click <a href=”http://www.yahoo.com“>here</a> to go to yahoo.

will make the word “here” clickable and will take your visitor to whatever url you insert in the “href” field. Simply change http://www.yahoo.com in this example to your required destination and don’t forget to change the tail text to reflect the destination.

An example of an image link would look something like this:-

<a href=”http://www.destinationwebsite.com“>
<img src=”http://www.yourwebsite.com/images/imagename.jpg“></a>

The above example requires you to have already uploaded your image to your own website, into a folder named “images”. You would then simply fill in the website name and image name in the “img src” line and change the destination website, in the “href” line, to wherever you want to send your visitors after clicking the image.

That about brings us to the end of this basic html tutorial. I hope it has been of some help to you.