Sunday, April 10, 2011

Website Bandwidth

Bandwidth Explain
Most hosting companies offer a variety of bandwidth options in their plans. So exactly what is bandwidth as it relates to web hosting? Put simply, bandwidth is the amount of traffic that is allowed to occur between your web site and the rest of the internet. The amount of bandwidth a hosting company can provide is determined by their network connections, both internal to their data center and external to the public internet.

Network Connectivity

The internet, in the most simplest of terms, is a group of millions of computers connected by networks. These connections within the internet can be large or small depending upon the cabling and equipment that is used at a particular internet location. It is the size of each network connection that determines how much bandwidth is available. For example, if you use a DSL connection to connect to the internet, you have 1.54 Mega bits (Mb) of bandwidth. Bandwidth therefore is measured in bits (a single 0 or 1). Bits are grouped in bytes which form words, text, and other information that is transferred between your computer and the internet.
If you have a DSL connection to the internet, you have dedicated bandwidth between your computer and your internet provider. But your internet provider may have thousands of DSL connections to their location. All of these connection aggregate at your internet provider who then has their own dedicated connection to the internet (or multiple connections) which is much larger than your single connection. They must have enough bandwidth to serve your computing needs as well as all of their other customers. So while you have a 1.54Mb connection to your internet provider, your internet provider may have a 255Mb connection to the internet so it can accommodate your needs and up to 166 other users (255/1.54).

Traffic

A very simple analogy to use to understand bandwidth and traffic is to think of highways and cars. Bandwidth is the number of lanes on the highway and traffic is the number of cars on the highway. If you are the only car on a highway, you can travel very quickly. If you are stuck in the middle of rush hour, you may travel very slowly since all of the lanes are being used up.
Traffic is simply the number of bits that are transferred on network connections. It is easiest to understand traffic using examples. One Gigabyte is 2 to the 30th power (1,073,741,824) bytes. One gigabyte is equal to 1,024 megabytes. To put this in perspective, it takes one byte to store one character. Imagine 100 file cabinets in a building, each of these cabinets holds 1000 folders. Each folder has 100 papers. Each paper contains 100 characters - A GB is all the characters in the building. An MP3 song is about 4MB, the same song in wav format is about 40MB, a full length movie can be 800MB to 1000MB (1000MB = 1GB).
If you were to transfer this MP3 song from a web site to your computer, you would create 4MB of traffic between the web site you are downloading from and your computer. Depending upon the network connection between the web site and the internet, the transfer may occur very quickly, or it could take time if other people are also downloading files at the same time. If, for example, the web site you download from has a 10MB connection to the internet, and you are the only person accessing that web site to download your MP3, your 4MB file will be the only traffic on that web site. However, if three people are all downloading that same MP at the same time, 12MB (3 x 4MB) of traffic has been created. Because in this example, the host only has 10MB of bandwidth, someone will have to wait. The network equipment at the hosting company will cycle through each person downloading the file and transfer a small portion at a time so each person's file transfer can take place, but the transfer for everyone downloading the file will be slower. If 100 people all came to the site and downloaded the MP3 at the same time, the transfers would be extremely slow. If the host wanted to decrease the time it took to download files simultaneously, it could increase the bandwidth of their internet connection (at a cost due to upgrading equipment).

Hosting Bandwidth

In the example above, we discussed traffic in terms of downloading an MP3 file. However, each time you visit a web site, you are creating traffic, because in order to view that web page on your computer, the web page is first downloaded to your computer (between the web site and you) which is then displayed using your browser software (Internet Explorer, Netscape, etc.) . The page itself is simply a file that creates traffic just like the MP3 file in the example above (however, a web page is usually much smaller than a music file).
A web page may be very small or large depending upon the amount of text and the number and quality of images integrated within the web page. For example, the home page for CNN.com is about 200KB (200 Kilobytes = 200,000 bytes = 1,600,000 bits). This is typically large for a web page. In comparison, Yahoo's home page is about 70KB.

How Much Bandwidth Is Enough?

It depends (don't you hate that answer). But in truth, it does. Since bandwidth is a significant determinant of hosting plan prices, you should take time to determine just how much is right for you. Almost all hosting plans have bandwidth requirements measured in months, so you need to estimate the amount of bandwidth that will be required by your site on a monthly basis.
If you do not intend to provide file download capability from your site, the formula for calculating bandwidth is fairly straightforward:
  • Average Daily Visitors x Average Page Views x Average Page Size x 31 x Fudge Factor
If you intend to allow people to download files from your site, your bandwidth calculation should be:
  • (Average Daily Visitors x Average Page Views x Average Page Size) + (Average Daily File Downloads x Average File Size)] x 31 x Fudge Factor
Let us examine each item in the formula:
  • Average Daily Visitors - The number of people you expect to visit your site, on average, each day. Depending upon how you market your site, this number could be from 1 to 1,000,000.
  • Average Page Views - On average, the number of web pages you expect a person to view. If you have 50 web pages in your web site, an average person may only view 5 of those pages each time they visit.
  • Average Page Size - The average size of your web pages, in Kilobytes (KB). If you have already designed your site, you can calculate this directly.
  • Average Daily File Downloads - The number of downloads you expect to occur on your site. This is a function of the numbers of visitors and how many times a visitor downloads a file, on average, each day.
  • Average File Size - Average file size of files that are downloadable from your site. Similar to your web pages, if you already know which files can be downloaded, you can calculate this directly.
  • Fudge Factor - A number greater than 1. Using 1.5 would be safe, which assumes that your estimate is off by 50%. However, if you were very unsure, you could use 2 or 3 to ensure that your bandwidth requirements are more than met.
Usually, hosting plans offer bandwidth in terms of Gigabytes (GB) per month. This is why our formula takes daily averages and multiplies them by 31.

Summary

Most personal or small business sites will not need more than 1GB of bandwidth per month. If you have a web site that is composed of static web pages and you expect little traffic to your site on a daily basis, go with a low bandwidth plan. If you go over the amount of bandwidth allocated in your plan, your hosting company could charge you over usage fees, so if you think the traffic to your site will be significant, you may want to go through the calculations above to estimate the amount of bandwidth required in a hosting plan.

CSS tutorial ( CSS Codes Chart )

CSS ( Cascading Style Sheet ) Tutorial CSS Codes Chart

Property

Possible Values

Description

background background-color
background-image
background-repeat
background-attachment
background-position
Sets all background properties
border border-style
border-color-
border-width-
border-bottom-width
thin
medium
thick
length
color
border-right-width
border-top-width
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Controls border properties
clear left
right
both
none
Prevents a floating element from being placed near the specified edge of another element.
cursor url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Allows you to determine what type of cursor appears on the users screen.
display none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
Determines how an element is displayed, or even if it is displayed.
float left
right
none
Determines where text or an image will appear within a separate element.
position static
relative
absolute
fixed
bottom
clip
left
overflow
right
top
vertical-align
z-index
Determines how an element will be positioned.
visibility visible
hidden
collapse
Determines whether an element is visible, invisible, or collapsed.
height auto
length
%
Determines the height of an element.
line-height normal
number
length
%
Determines the space between lines.
max-height none
length
%
Determines the maximum height of an element.
width auto
%
length
Determines the maximum width of an element.
max-width none
length
%
Determines the minimum width of an element.
min-height length
%
Determines the minimum height of an element.
min-width length
%

Determines the minimum width of an element.
font font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
Determines all font properties.
font-family family-name
generic-family
Determines fonts that will be used. If a font is not installed on a user's computer, the browser will try each font in the font family until one is found.
font-size xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
Determines the size of the font.
font-size-adjustment none
number
Used to adjust the font size if other elements or factors change the size of it.
font-style normal
italic
oblique
Determines the size of the fonts.
font-stretch normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
Used to shrink or enlarge the span of the fonts.
font-variant normal
small-caps
Used to cause fonts to be displayed either as fonts in small capital letters or in normal letters.
font-weight normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Determines the weight or boldness of a font.
content string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
Creates specific content in a document.
quotes none
string string
Determines the type of quotation marks used.
list-style list-style-type
list-style-position
list-style-image
Determines the style of a list.
list-style-image none
url
Determines what image should be used for a list.
list-style-position inside
outside
Determines whether the list element is on the inside or the outside of the list item.
list-style-type none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
Determines the style of a list.
margin margin-bottom
margin-top
margin-left
margin-right
Used to determine and set margins on the page.
outline outline-color
outline-style
outline-width
Determines the properties of an outline.
padding padding-top
padding-right
padding-bottom
padding-left
Sets padding properties.
text color
direction
line-height
letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
Unicode-bidi
white-space
word-spacing
Determines text properties.
a :link
:visited
:focus
:hover
:first-child
:lang
:active
Determines link properties.



<<-- Previous Basic Of CSS

CSS Tutorial ( Cascading Style Sheet )

CSS Tutorial: An Introduction to Cascading Style Sheets


Cascading Style Sheets, better known as CSS, enable you to control the style and layout of a web page. They will enable you to specify link styles, fonts, margins, tables, colors, sizes, alignments and much more throughout your entire web page.

They can also be used to create a template like style sheet (stored within a separate file) that can be used throughout your web site. You can simply link to your style sheet within each of your web pages and have the ability to update the styles for your entire web site with just one file.



The Benefits of Using Cascading Style Sheets (CSS)

CSS will save you a great deal of time. When it comes to the Internet, there are really only two elements: Content and the way that content is presented. With HTML, we provide content, and define how that content will be presented within the HTML code. However, we are very limited as to what we can do with HTML.

Each browser is different and they see things differently. This is why webmasters are instructed from the very beginning to view their web pages in many different browsers, such as Internet Explorer, Netscape, Firefox, and Opera (among many others), to make sure that their web pages appear as they intended and expected them to from one browser to another.

Overall, the HTML code on the web page polices the content, and the CSS polices the HTML. This allows you to create web pages that are suitable for all browsers.

One of the best benefits of using CSS within your web pages is the ease of updating your web pages. If you'd like to make a change to your design, instead of having to change hundreds of web pages on your site, you can make one simple change to the CSS file, and it will automatically update all of the pages on your web site. CSS enables you to do in seconds what would take hours to do in HTML.



Creating Cascading Style Sheets (CSS)

Learning, creating, and working with CSS doesn't require much. You do not need any type of editor, as Cascading Style Sheets can be created using a plain text editor, such as Note Pad.

However, you will need a web browser. Internet Explorer and Firefox are the most popular ones, but there are many others. Once you create your pages and are using CSS, you must ensure that you view your web pages through multiple browsers to ensure they are displaying just as you had intended. Visit Any Browser to view your pages through different browsers.

You may also need a way to upload your pages to your web server. This is typically done with an FTP client, and there are many nice free one's available. You may also upload your files through the control panel of your web hosting service.



Internal and External Cascading Style Sheets (CSS)

CSS can be used in two ways. It can be used internally, which may be referred to as embedded or inline, or it can be used externally, which is often referred to as a linked style sheet. Ideally, you will be using linked styled sheets when you finish this tutorial.

The only time you may be using embedded CSS is if you would like to change an individual link or text, or have a one or two page web site. If you will have more than that, however, a linked style sheet is definitely the way to go.

CSS can be used in three different ways:

Inline CSS

Added to your standard HTML tags.

Embedded CSS

An embedded CSS is exactly as it sounds. The CSS code is actually placed within the HTML web page between the <HEAD> and </HEAD> tags.

Linked CSS

A linked style sheet, on the other hand, is a completely separate document that is linked to within a web page.


Prioritizing CSS and HTML tags

When using CSS, certain tags take precedence over others. Here's how the tags are prioritized:

  • HTML tags override all other tags.
  • CSS inline tags override embedded and linked tags.
  • CSS embedded tags override linked tags.
  • CSS linked tags won't override any other tags.


Formatting CSS Tags

CSS tags are formatted like this:

selector {property: value;}

The selector is a browser command and is followed by a property. The property is a word describing the selector, which further instructs the browser. The value specifies the value of the property.

Although this may sound a little confusing, CSS is formatted much like standard HTML. Let's compare the two formats:
HTML
<font size="12">

CSS

Selector Attribute Value

body{font-size:12;}


 

As you can see in the comparison diagram above, the Element is equivalent to the Selector, the Attribute is equivalent to the Property and the Values are the same.


Inline Cascading Style Tags

Inline cascading style tags are used within standard HTML code using the STYLE parameter. The following example will remove the underline of an individual link:

<a href="http://worldwebdesigner.blogspot.com" style="text-decoration:none;">World Web Designer</a>

Browser View:

World Web Designer

The STYLE parameter is added directly to your original HTML link code.

Inline style tags enable you to specify how each individual link will look.



Embedded Cascading Style Sheets

Embedded cascading style sheets (CSS) can perform the same tasks as the inline style tags. However, the coding is placed between the <HEAD> and </HEAD> tags within your HTML. You can specify how your entire page will appear including links, fonts, text and more, simply by using embedded style tags.

The following example will display your active text links (after a link has been clicked on) in a specific color. The hover color (when the mouse is placed over the link) will be displayed in an alternate color and the underline will disappear.
<STYLE>
<!--
A:active { color:#0000FF; text-decoration; }
A:hover { color:#FF0000; text-decoration: none; }
//-->
</STYLE>


Browser View:
Example Link

 (Place your mouse over the link to view this example.)

The above code will display all of your links in a specific style.

Notice the code is placed within the comment tags? Comment tags look like this:
<!--your text-->

The comment tags are used to prevent older browsers that don't support style tags from displaying the CSS codes within their page.

The great thing about embedding style codes is that you can create your own classes of code. What this means is that you can specify different styles throughout your page and then call them within your page.

For example, you can add a class of code to a paragraph selector like this:


<STYLE>
<!--
p.padding {padding-left: 5px;
padding-right: 5px;
font-family: Arial;
font-size: 10px;}
//-->
</STYLE>


Notice the text highlighted in bold? This is a class name I made up. You can call it whatever you'd like. Simply add .yourtext following your selector.

To put this style into action or call it, simply place the following code within your HTML where you would like the style to be used:


<p class="padding">


Keep in mind, the text you place after your CSS selector (.yourtext) must be the same name as the code you place to call the style.

For example, if your class code looks like this:
p.text
the code you use to call the style will look like this:
<p class="text">
See how that works?



Linking CSS

The linking CSS method involves creating a file that defines specific styles. This CSS file can be used throughout your entire web site to specify everything from body styles and headings to paragraphs and HTML tables.

This file might look something like this:

BODY {font-family: Arial;
font-size: 12px;}
H1 {font-family: Georgia;
font-size: 16px;
font-weight: bold; color: blue}
P { font-weight: normal;
color: blue}

This file should be saved as style.css and uploaded to your server where you store your HTML files.

When using a style sheet, you must place a link to your style.css file within your HTML between your <HEAD> and </HEAD> tags like this:

<html>
<head>
<title>Your Page Title</title>
<link rel=stylesheet href="http://www.yourdomain.com/style.css" type="text/css">
</head>
<body>
Page Content
</body>
</html>


You can link to your style sheet within as many of your pages as you would like. This will give you the ability to update all of your pages at one time, simply by changing the styles within your style.css file




                                                                  


Next -->>