Wednesday March 10th, 2010
Fast and Reliable Web Hosting
About Email Hosting Services Support Login Resources Developer Showcase Order
 



  Unix Plans:
  The 5 Plan - $5
  The 10 Plan - $10
  The 15 Plan - $15
  The 25 Plan - $25
  The 50 Plan - $50
  The 75 Plan - $75
 
  Windows Plans:
  The Frontpage Plan
  The ASP Plan
  The DB Plan
 
  Dedicated:
  MDS-1 - $199
  MDS-2 - $299
  MDS-3 - $449
 
  Spam Protection
  Spamcop
  Spamhaus
  Spambayes
 
  Support
  FAQ
  Howto's
  Helpdesk
 
  Resources
  HTML Basics
  HOWTO Host
  PHP Examples
  Site Marketing
  SMTP Hosts

HTML Basics

What is HTML?

HTML stands for Hypertext Markup Language, it is the language that makes up the World Wide Web. This page will show you the Basics of HTML.

How does HTML work?

An HTML file is a text file with a .htm or .html extension, instead of having a file named with a .txt name its .htm or, .html. The browser reads the the text file as an HTML file file and displays it according to the code. The front page of your site should be stored in a file named index.htm or index.html

Structure of an HTML file should look like this:

<html>--> This tag wraps around the whole document to tell the browsers that it is html.

<head>

Between these tags there is information about the document such as the document title, metatags for search engines, etc. Nothing between these tags is displayed by the browser.

<title>This is the title of the page.</title>

<META name="description" content="We specialize in providing a complete range of quality low cost Internet hosting services. Our servers & connections are fast, reliable, & our service is affordable. Guaranteed 99.9% up time. Email Host.">

<META name="keywords" content="email host, $5 Domain Hosting, low cost web hosting, low cost web site hosting, low cost web hosting solution, cheap web site hosting usa, cheap web site and hosting, cheap affordable web site hosting, cheap web hosting services, affordable web hosting, web hosting frontpage, domain web hosting, virtual domain hosting, web domain name hosting, multiple domain hosting, web domain hosting, domain name hosting, cheap domain name, domain name server, email hosting, domain name system, HTML Basics">

</head>

<body>

Between these tags, the actual text pictures and information you want to be published is
entered. For example:

<img src="/images/host45logo.gif">


</body>
</html>

Open and closed tags As you can see there are 2 different types of tags <open> and </closed>
you must remember to close all of the open tags.
Headings: There are six different heading sizes:

<h1> This would show heading size 1 </h1>
<h2> This would show heading size 2 </h2>
<h3> This would show heading size 3 </h3>
<h4> This would show heading size 4 </h4>
<h5> This would show heading size 5 </h5>
<h6> This would show heading size 6 </h6>

Examples of the 6 heading sizes

This would show heading size 1

This would show heading size 2

This would show heading size 3 This would show heading size 4
This would show heading size 5
This would show heading size 6
Alignment: Text can be aligned to the RIGHT, LEFT or CENTER of the screen:

<p align=left> This paragraph will be aligned left</p>
<p align=center> This paragraph will be aligned center</p>
<p align=right> This paragraph will be aligned right</p>

Note the p tag <p> which indicates a paragraph and the </p> which indicates the end of the paragraph.

Examples of the 3 paragraph alignments

This paragraph will be aligned left. This paragraph will be aligned left This paragraph will be aligned left. This paragraph will be aligned left This paragraph will be aligned left. This paragraph will be aligned left This paragraph will be aligned left. This paragraph will be aligned left


This paragraph will be aligned center. This paragraph will be aligned center This paragraph will be aligned center. This paragraph will be aligned center This paragraph will be aligned center. This paragraph will be aligned center This paragraph will be aligned center. This paragraph will be aligned center


This paragraph will be aligned right. This paragraph will be aligned right. This paragraph will be aligned right. This paragraph will be aligned This paragraph will be aligned right. This paragraph will be aligned This paragraph will be aligned right. This paragraph will be aligned
Breaks and spaces! There are 2 types of breaks in html, Breaking which is like hitting the "enter" key
on your keybaord, and non-breaking which is like hitting the "spacebar" on your
keyboard.

The break tag looks like this <br> and performs the following function:

<p> This line could be a <br> very very very very very <br> long line but we can break it <br> up with the break tag.</p> would display the following:

This line could be a
very very very very very
long line but we can break it
up with the break tag.


The non breaking space looks like this:
&nbsp;
notice how it does not have the < > around it like normal tags.


The non breaking space performs the following:
<p> These words would have exactly 1 space between them.</p>
<p> These&nbsp;&nbsp;&nbsp; words would have exactly 3 space between them.</p>
<p> These&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; words would have exactly 10 space between them.</p>

These words would have exactly 1 space between them

These   words would have exactly 3 space between them

These          words would have exactly 10 space between them


Lists

There are 3 types of lists in html
Orderd - For instructions or an outline. The tags look like this <ol> and </ol>
Unordered - For lists with no specific order. The tags look like this <ul> and </ul>
Definition - Just like a dictionary A term with its definition. The tags look like this <dl> and </dl>


Orderd List Example
This is an example of an ordered list code:

<ol>
   <li> Add Sugar </li>
   <li> Add Water </li>
   <li> Add Eggs </li>
</ol>

Will Display the following:
  1. Add Sugar
  2. Add Water
  3. Add Eggs

Unorderd List Example
This is an example of an unordered list code:

<ul>
   <li> High Speed </li>
   <li> Efficent </li>
   <li> Great Sound </li>
</ul>

Will Display the following:
  • High Speed
  • Efficent
  • Great Sound

Definition List Example
This is an example of a definition list code:

<dl>
   <dt> Albacore </dt>
   <dd> A large pelagic tuna (Thunnus alalunga) with long pectoral fins that is a source of canned tuna; broadly : any of various tunas (as a bonito) </dd>
   <dt> Yellowtail </dt>
   <dd> A sport fish (S. lalandei) of the California coast and southward that reaches a length of about three feet (one meter) </dd>
</dl>

Will Display the following:
Albacore
A large pelagic tuna (Thunnus alalunga) with long pectoral fins that is a source of canned tuna; broadly : any of various tunas (as a bonito)
Yellowtail
A sport fish (S. lalandei) of the California coast and southward that reaches a length of about three feet (one meter)


Horizontal Rule <hr> This tag draws a line across the screen, you can control the lines,
length, thickness shading and colors.
These are some examples of a Horizontal Rule code:

Size of 25 pixles thick
< hr size="25" >
Will Display the following:
Length of 50% of the screen, 3 pixles thick and no shading
< hr width="50%" size="3" "noshade" >
Length of 250 pixles, Thickness of 10 pixles, and no shading
< hr width="250" size="10" "noshade" >
Length of 150 pixles, aligned left
< hr align=left width="150" >
Length of 150, aligned center
< hr align=center width="150" >
Width of 150, aligned right
< hr align=right width="150" >


Creating Links You can create links using the anchor tag < a >
There are 3 main links you can create:
Internal Link (from one page of your website to another page on your site)
External Link (from your website to a page on another site)
Mailto: link (this will launch your default email application)

Internal Link Example
<a href=about.html> About Us </a>
This line of code will create a link to a file called about.html
as long as you have a file with that name in your site folder it will load.
Be aware that these files are CAPS sensitive.

Here is the output:
About Us

External Link Example
<a href=http://www.host45.com> Host45.com, Inc. Home of the $5 Domain and Email Host </a>
This line of code will create a link to the web site of http://www.host45.com
with the description of Host45.com, Inc. Home of the $5 Domain Hosting
as long as the web site is up it will load.

Here is the output:
Host45.com, Inc. Home of the $5 Domain and Email Host

Email Link Example
<a href=mailto:info@host45.com> Contact Host45.com, Inc. </a>
This line of code will create an email link, when clicked your default email
application will open up.

Here is the output:
Contact Host45.com, Inc. 		    

 
 
Acceptable Use Policy Privacy Statment Testimonials