Web Browsers 101

Web Browsers 101

 

What’s the difference between Internet Explorer and Mozilla Firefox? How often should I update my browser? How do bookmarks work? What does that button do? Ok, now I’m just having fun, but with so many different browser options out there, it can be easy to get confused or frustrated, especially if you have to use more than one. The solution: Browsers 101, all the basics in one simple guide. Let’s get started!

 

The Major Browsers

Recent stats show that 43.5% of web users use Internet Explorer (IE), 29% prefer Firefox, 13.9% favor Chrome, and Safari is last at just under 7%. As time’s gone by, these various browsers have adapted themselves to mimic the favored features of other browsers, making the differences between them, for the most part, a matter of preference. While this information may soon be out of date, here’s a look at each of the current versions of these four browsers showing the same website:

IE:
Firefox:
Chrome:
Safari:

 

 

 

The Details

Here’s a closer look at the functional differences between the four browsers:
NOTE: the address bars in these pictures has been shortened to show the important parts in more detail

IE:
Firefox:
Chrome:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  

 

Safari:

 

 

 

 

 

 
 
 
 

 

 

The Parts of a Browser

While all browsers are a little bit different, there are a few elements which they all have in common:

Status Bar
The status bar used to show all sorts of load speed information, but with the pervasiveness of high-speed Internet, this is function now simply tells you that a new page is loading. The location and the format of the status bar is very different depending on the browser:

IE – it is a swirling icon and the message “connecting” on the page tab.

Chrome is the same as IE, except the tab shows the name of the website which is loading.

Firefox – it is a small gray bar at the bottom of the page which shows the URL of the page which is being loaded and then the status “done” when finished.

Safari – the address bar fills up with blue from left to right as the page loads while displaying the URL.

 

 

 

 

 

Color-coded features:

IE:
Firefox:
Chrome:

 
 
 
  

 

Safari:


 
 
 
 
 
 
 
 
Key:
Yellow –   Address Bar
Brown –    Title Bar
Orange –   Toolbar
Red –         Favicon
Green –     Favorites Bar
Blue –        New Tab
 
 

 

Address Bar (Yellow)
This is the box at the top of your browser window that displays the entire URL, or Web site address.

Title Bar (Brown)
The title bar is at the very top of your browser window; in IE, Firefox, and Safari it is the blue bar at the very top. Chrome has no title bar, as the tabs are at the very top of the page. This bar displays the title of the Web page; for example, you should see “Web Browsers 101” at the top of your browser window unless you’re using Chrome.

Toolbar (Orange)
The toolbar and its icons are at the top of your browser window flanking the address bar. This is where you’ll see the Back button, the Home button, the Refresh button, etc.
  • The Back and Forward Buttons
    As you navigate through web pages, your path is traced linearly by your browser and can be recalled by the back button. It does exactly what the name suggests; it takes you back a page. The forward button works the same way, it will take you to a page you’ve visited and have moved back from. If you have not used the back button you cannot use the forward button and it will be “grayed over” or dimmed slightly. The same dimming will happen to the back button if there is no page to return to. This generally only occurs on the home page or when you open a new tab.
  • The Stop Button
    The stop button is fairly self-explanatory; it stops your browser from loading a page. If you realize you’ve clicked the wrong page link or if a page is taking a very long time to load or isn’t loading at all, you can use the stop button and then the back button to return to the previous page.
  • The Refresh Button
    The refresh or reload button reloads the web page you’re currently viewing. If you’re having trouble loading a page, something is not displaying correctly, or you’re waiting for changes or updates on a page, the refresh button is your friend.
  • The Home Button
    Your “home page” is the first page you see when you start your browser program. It can be whatever you set it for (yours, of course, is Snoitulos Ten, right?). It is the web page from which you move out onto the web.

Favicon (Red)
A favicon (short for favorites icon), also known as a shortcut icon, is a small icons associated with a particular website. Browsers display a page’s favicon in the browser’s address bar, next to the page’s name in a list of bookmarks, and next to the page’s name on the page tab.

Favorites Bar (Green)
A favorites/bookmark bar shows the favicon and name of a site. This is generally located below the address bar and above the tab bar. You can also add folders to the bar to aid organization. You can add links to this bar by clicking on the favorites button. In Firefox and chrome, this button is a star located on the far right of the address bar, in IE it is a star and the title “favorites” on the far left of the favorites bar, and in Safari it is the plus sign on the left end of the address bar.

The favorites bar can be further customized by editing the name of the site as it displays on the bar. This can be accessed by right clicking on the icon and selecting ‘rename’ or ‘edit’ or ‘properties’. You can use this to either re-name pages to suit your convenience or to remove the text entirely to save space on the toolbar or if you’re familiar with the favicon and have no need for a page title.

Tabs/New Tab (Blue)
In browsers which use tabbed browsing, there is usually a button to the right of the open tabs which will open a new tab. The exception is Safari; the new tab icon is to the right of the google search bar.

Search Bar

I haven’t marked this feature in the images above because it’s pretty easy to find; it’s the little white bar with the word ‘google’ in it,and it is simply a way of getting to the search engine more quickly. The exception to this rule is Chrome. Because this is the google browser, the address bar is the search bar. If you type something into the bar which is not in the URL format (www.something.com/org/edu) it will automatically take you to a google search page.

Display Window
The Display Window is just a fancy term for your browser work space; it’s the frame through which you see this website right now.

Scroll Bar
If you’ve ever been to a website that you had to “scroll down” to read something, then you’ve used the scroll bars. They’re just navigational/directional aids. They’re over there  →. While they may look different in various browsers, they work the exact same way, except for one small difference; in Firefox, the directional buttons are both at the bottom of the page instead of on either end of the scroll bar.

 

Other Features

Autocomplete

I’m sure you’ve noticed that as you type something in the address or search bar the browser helps you by bringing up past versions of the same URL or word. A drop down window appears below the bar and you can click on the various options and be taken to that site without having to remember or type in the whole URL.This feature has the added bonus of allowing you to reach a website without having to use a search engine. This might be a matter of saving a few seconds, or if the site you’re trying to reach isn’t highly ranked on search engines, it can be the only convenient way to get to a site.

 

Add-ons
These features are numerous and varied, and they can be found to suit just about any user’s needs. Some of the most popular add-ons are AdBlock, Dictionary, and email checkers. These all work a little differently depending on the developer and the browser you use, but they all have the same basic purpose: to make your web browsing experience easier and more personally satisfactory.

Here are a few of the add-ons I use in Chrome (which, in Chrome, are actually called extensions):

 

 

 

Key:
Yellow – Settings button, standard for Chrome
Orange – Gmail
Red – Google Documents
Green – Dictionary

First off, to find these extensions, I click the wrench icon (the settings button) and then click tools, and then extensions on the drop down menu. This brings up a list of all of the extensions that I am currently using. On the bottom right of this page is a “get more extensions” link. This brings me to the Chrome web store (you could also, of course, have searched for the chrome web store, but I prefer this method. It’s more direct). From here you can search from any number of useful or amusing tools.

Getting add-ons is similar for the other browsers, In IE, under ‘tools’ there will be a link for ‘manage add-ons’. In Firefox, you click alt to brink up the controls, click ‘tools’ and then ‘add-ons’. In Safari, click the cog icon on the far right (where the wrench is in Chrome), then click ‘safari extensions gallery’. While there are an almost endless number of add-ons, be cautious when downloading from an unknown or uncertified developer (this goes for everything you download, not just add-ons). Have fun searching through these, there’s something for everyone.

 

A Final Note: Updating your Browser

Some people may ask, ‘do I need to download every update for my browser?’ The short answer is YES. Browsers are frequently updated in order to add functionality and address problems. The most important of these help to maintain compatibility with all websites, add-ons, programs, etc. that you might use on any given day. If you’re running an older version of a browser, you’re not taking advantage of the full capabilities of the web and you’re more likely to encounter problems. By continually updating your browser, you avoid the complications which arise due to fluid nature of the computer world.