Surfing the Web

Table of Contents

Browsers

When surfing the internet you use a program called a browser which there are a number of, the most popular ones are Google Chrome (pictured here), Firefox, Internet Explorer, Safari and Opera. With Google Chrome being the best of the bunch, it’s not only faster than the rest but it’s also secure as well.  When surfing the web we jump across websites, like www.Google.ca highlighted in the picture by the first arrow this is known as a URL we’ll talk more about that in a second. Google is probably one of the most known websites, its primary feature being searching the web for information you type in the box highlighted by the second arrow. This is what’s known as a text box and actually belongs to the web page, it’s used to obtain information from the user which they type in. After a search word is typed in you can start the search by pressing the Google search button, this sends what you typed to Google where they use calculations to find you results which are displayed on a results page which looks like this. Arrow 1 shows a text box like you seen on the previous image containing the word you searched for, hockey in our example here. Arrow 2 points towards the results which are separated into pages, as you can see here hockey pulled back 206,000,000 results in about half a second. The words highlighted in blue and underlined (arrow 3) are known as hyperlinks. These are quite common on the web, typically you click on these with the left mouse button and they take you to another website or page within the same site but they can be programmed for other things as well. What would the internet be without pictures like we see with arrow 4, this is what gives the web life and of course there’s video as well. With video you have your typical video which has a start and end like the typical one’s you’ll see on a site like www.youtube.com. Using something like flash though we can take video to a new level by making it interactive as well, taking flash a step further you can actually create video games which are readily available on the net.

URL

URL stands for Uniform Resource Locator which is a complicated way of saying an address. An address to you and me is a word like www.Google.ca which to a computer translates to 173.194.43.87, how and why we’ll get to in a minute. First let’s look at the word part that we see, we’ll use the address of a search result from Google for this. https://www.Google.ca/search?q=hockey, the https:// part is the protocol which web pages use and it’s typically just http and not https, the s lets you now that the connection is encrypted so that others can’t listen in. Another common protocol on the web is ftp which can be used through some browsers but typically we use ftp programs instead. What ftp does is allows files to be downloaded and uploaded to the web server, you usually need permission for this and is mainly used by web-developers. After becoming more familiar with the internet you’ll become familiar with top tier domain extensions like .ca, .com, .org, .edu, .gov etc. you can actually view a list of a site called Wikipedia here http://en.wikipedia.org/wiki/List_of_Internet_top-level_domains. Most countries have their own like Canada has .ca and the extensions typically mean something as well like .com means commercial.

It’s important to know how to read URL’s properly as some pages might try to disguise themselves as pages you know and use possibly something like a bank page for example. First we’ll dissect the main address of Google which is www.Google.ca, with domains we read them from the top level and go from right to left. So here our top level is .ca and Google is a sub-domain of .ca, after that we have another sub-domain of www that belongs to Google. Each level is separated by the period you could see a lot of different words and combinations here and a prime example is our website which is mr.tutor-tech.com, ours starts off at the top level of .com and then our sub-domain or actual site name is tutor-tech. The mr is a sub-domain of our domain, it could have been anything but I thought this was clever.  The reason I’m pointing this out is because a clever person could use an address like this www.cibc.com.somethinglongandcomplexthatlooksworsethanthis.youjustgottaken.com in an email and because you are a client of CIBC you open it and now it looks just like your bank page so you decide to type in your card number and password, from there the malicious page sends you to your actual web page to throw you off the scent. Now they unfortunately have your information and can do something like clean out your account for example. Let’s take a look at our fake page name for a second and dissect it, starting off with the top level of .com from there someone registered youjustgottaken and added the following sub-domains “somethinglongandcomplexthatlooksworsethanthis” which would probably look more like this “EdpNo=7666173&Sku=T71-22108{463c70c279fb908728b910a090d44fbe4ae7aabcd875de9c1a518a8c8e2be8bd}20CA” so that it’s not as obvious. Then we have the rest of the sub-domains that start to look a bit more familiar which is another .com then cibc and finally the www. The reason behind the long complex string would be to push the rest of the URL off to the side so that you wouldn’t see the final .com and the actual real domain of youjustgottaken. Now before you start looking at long complicated strings in URL’s and think they’re malicious sites let’s give you a bit more of an explanation.

If we searched for something like hockey for example in Google we might end up with something like this

https://www.Google.ca/search?q=hockey&oq=hockey&aqs=chrome.0.69i59j69i65j0l4.853j0j7&sourceid=chrome&espv=210&es_sm=93&ie=UTF-8

First we’ll dissect the parts we already know here we’re using the protocol https which remember is a secure connection and prevents others from listening in on our traffic, if you’re ever using your credit card or other banking information make sure that this is there and legit as well, browsers will have different ways of notifying you Google will make it green or red. Next we’ll search for the main domain which we see here is .ca, this is where you need to know extensions a bit. The main level will be a period with at least two letters after it so if you see something suspicious like .ae it could be the main domain for United Arab Emirates for example. From the main level we move to the left so we have the domain name of Google which is a sub-domain of .ca followed by the their sub-domain of www.  Now if we read from right to left what’s all that stuff to right of the domain, this is where sub-folders, page names and query strings go. So when jumping around Google for example you’ll see the / after .ca which means either a sub-folder or page follows in our example search is the sub-folder we know this because page names end with extensions like .php, .asp, .html or .htm and more. The ? is used to identify query strings which is used to pass information, since our search was hockey we see that word in this part of the string but we see q= before it. What’s happening here is a placeholder named q is holding the value of “hockey”, each of these placeholders are separated by an “&” so our next place holder is oq with the value of “hockey” as well and then we have aqs, sourceid, espv, es_sm and ie which all hold meaningful values but not really to us, this is stuff the programmers use. For example aqs is holding the browser type and version number and so is sourceid then the only other one I can identify is ie which has a value of UTF-8 this represents a character set.

Character Sets

Since I mentioned it, a character set is a way of identifying characters on the keyboard there are a few different types, one of the earlier ones for North America is what’s called ASCII. It contained 256 characters, enough to cover our English alphabet, special characters and numbers. Remember computers translate everything to numbers so for example in ASCII the capital letter A is represented by the number 65 and a lower case a is represented by the number 97. As computers and their programs started becoming more global this wasn’t enough, so they came out with something called Unicode which is what the UTF-8 represents, the 8 represents the bits used and there are two types in Unicode, 8 and 16. This covers all the characters throughout the whole world and still leaves room for more.

TCP/IP

TCP/IP is the protocol used by the internet and by most home networks, this is how computers identify each other. Currently we’re still running most things with IP4 but IP6 has been around for a little while and will eventually replace it. Since IP4 is still the standard this is what I’ll explain to you now. When connected to the internet or network, a computer will receive an IP address. The address will look something like this 192.168.0.1, between each dot is what’s known as an octet and each octet can range from 0 to 255. No computer on the same network can have the same address but networks can be joined to other networks so that the same number could exist but the computer handles this behind the scenes. On an internal network you’ll also see another setting known as a subnet, this number typically ends up being 255.255.255.0 what this number does is control the amount of computers that can exist on the same network, with our standard subnet mask that we see, we can have up to 255 computers on one network, that’s because the last number is a zero if it was 254 for example then there would be one computer per network. This is just a quick note on the subnet mask enough to let you know what it does. The IP address is what we’re mainly going to talk about here, every computer connected to the internet has one of these addresses but it would be kind of hard to tell someone to go to 173.194.43.87 instead of saying Google.ca this is where Domain Name Services (DNS) comes in.

DNS

When typing a URL into the address bar like www.Google.ca we are sending this information forward through your ISP (internet service provider) where their computer running DNS will try to identify what computer that belongs to if they don’t know then this information keeps going up the chain until a DNS server that can identify it does. Once one of the computers say they know the name you’re looking for they send back the address of the webserver for that website to your computer and without knowing it you’re transferred there. In the past this caused problems as only one website could belong to an IP address so they developed something known as HTTP 1.1, what this does is it passes the website name you’re looking for to the webserver which could be hosting multiple websites now. With the two pieces of information we now know the webserver and through the name that webserver gives back the appropriate website.

HTTP/HTTPS

HTTP & HTTPS is a protocol that runs inside of the TCP/IP protocol, they are the ones we use when surfing the internet. There are other protocols that run in TCP/IP like the FTP we mentioned before but we’re mainly concerned with the HTTP here. Going back in time it was required to type that in at the beginning of the address but now a days most browsers assume this is what we want so there really is no need, so why we talking about it then?  As mentioned before there is a difference between HTTP and HTTPS, obviously the S distinguishes the two. HTTPS uses a certificate to encrypt the data being sent over the internet where HTTP doesn’t. HTTP sends all its information clearly over the internet and this means anyone with a little bit of computer knowledge can see what you’re doing. When working with private information such as banking make sure HTTPS is being displayed first and second make sure that it’s valid. To get HTTPS on a web server a developer needs to issue a certificate which anyone can do but only ones from trusted authorities will be considered legit. You can tell this differently between browsers Chrome for example will display it in green for good and red for bad.

HTML, CSS and More Languages

There are several languages used on the internet by web developers to present the websites the way they do. These are broken up into two categories which are client side and server side coding. When requesting a web page, a web server sends forward a bunch of code that the developer wrote out, some of that code is ran on your computer known as the client and other parts are ran on the webserver before sending it to you which is known as server side scripting. Server side scripting is mainly used when working with dynamic sites, one’s that use databases to pull back information. A great example would be Google, when you type in a search criteria it’s passed on to the server which looks through a database for the most relative information, from there Google uses a single page to display the results, even though the results are different a single page is responsible for displaying them, this is done through code which pulls back the information from the database. Two of the most common server side scripting is .asp from Microsoft and .php from the linux world.

On the client side of things we use languages like HTML which is what the web runs on but without other languages like JavaScript all we would have are static pages that never change, we wouldn’t be able to log in or send information we pick and choose forward, basically all we would have is an online newspaper… This is where JavaScript comes into play, other languages like VBScript also do this type of work but another problem arises VBScript belongs to Microsoft so no other browser will read it but JavaScript is universal and works on all web browsers and is widely used on the net now.

Another problem also arose that was rectified with something known as CSS (Cascading Style Sheets) , HTML is a great start for developing a site but lacked the ability to control the look of a site so something that’s been around for ages in other programs like Microsoft Word made its way over to the web. Now we use HTML to tell the browser what element we’d like to display and we use CSS to tell it what it should look like.

Common HTML Elements

Now that we know how computers are interconnected and have the idea that several languages are used to make things look and work the way they do we’ll introduce you to some more common elements available on the net. The HTML language is responsible for most of them so we’ll lay them out here for you and describe what they are intended for to you now (view picture on next page)…

1. Is a text box which we described earlier, it’s intended for the visitor to type some information into which will be passed on to the website afterwards.
2. Is also a textbox but is bigger and known as a textarea instead, it can hold a lot more information that the text box, not to mention gives you the opportunity for multiple lines and paragraph separations.
3. This is a check box it can either be selected or not as the two images of it show, this is basically used for a true/false, yes/no type of question. If it belongs to a group determined by the developer then you might only be able to select one of say three for example, typically radio buttons which is next is used in groups. Typically you might see several checkboxes beside each other and you can check the ones that apply to your selection.
4. This is the radio button I mentioned, although you can use it just like a checkbox and have multiple ones you can select it doesn’t allow you to deselect it once you have, also it usually is used in groups meaning you can only pick one of the selections of say three given.
5. This is a menu, without selecting it you’ll see it looking like the one on the right but once you click on it other options will be displayed, it could be a list of provinces for example that you choose from or whatever the developer wants you to choose from. It can be used to select a single option or you can use it to select multiple ones if it was designed that way. To do this you’ll need to hold down the Ctrl button while selecting any other selections, typically only one is allowed though…
6. This is a button and can be used to do anything really but usually you see it with a number of different user input elements like the ones we’ve described so far, typically clicking on it means you’re done filling out the information and are ready to send it to the web server.
7. This is a link and you’ll see this all over the web, designers usually enter URL addresses in here so once you click it you’re taken to a location they specify.
8. Of course what would the net be without an image or video.

Another common thing you’ll see on the web is flash, which is a program on it’s on and will not run on some browsers or computers. To view it or use it you usually have to install extra software to your browser known as a plug-in. Once installed you can use it view simple videos or depending on how it’s designed it could be interactive making you click on stuff which could be common elements like the one’s we’ve just discussed. If developing a site you should know browsers currently can’t skim through this to pick up words that can be returned in search results so for better ranking it’s better off avoided for now.

What can I use the web for?

Now that you have a rough idea of how the web works and some of the common elements it uses, I’ll list some of my favourite websites along with a quick description of what they can do….

One of the kings of the internet is www.Google.com which also has a Canadian flavour www.Google.ca its primary function serves as a search engine, meaning you can type stuff into the textbox and after pressing enter relative information will magically be returned to you to browse through. But Google does way more than this as well, you can use it to look for news articles, pictures, videos, books, blogs, flights, discussions, applications, patents and more. It also has a really awesome interactive map where you can get directions from and if you zoom in far enough you’ll get what’s called street view, which looks as if you were standing in the position you specified. Another great search engine and a pretty good site for articles is www.yahoo.com.

The next big website worth mentioning is www.facebook.com which is the king of social media, here you can connect with friends and see what they are up to by reading what they have to say, seeing pictures they posted or stuff that they like that others post. There’s also a numerous amount of games on there you can play with your friends as well. A few more social media sites worth mentioning are www.twitter.com, www.linkedin.com, plus.Google.com and myspace.com.

Looking for a local business or person then use www.yellowpages.ca, which allows you to search for a business/person by name, address or even a reverse lookup by their phone number.

Emails can be used in one of two ways, the first is through a program on your computer which downloads the emails to your computer and the second is web based where you can access it from any computer connected to the internet. There are plenty of web email sites out there Microsoft has www.hotmail.com and they are also available through Google, yahoo and any of the social media sites, it all boils down to preference as most of them have similar features as far as emails go….

Then almost every TV channel, show, movie, band, news etc all have their own site as well…

These websites should be enough to get you started or to at least help you find what you’re looking for as there are over 700 million websites on the web it’s hard to say what one might be looking for or what one might enjoy. Now before you go bonkers surfing the web remember there are bad sites out there so try to stick to ones you know of, carry a reputable name like cnn.com and if sounds too good to be true or feels suspicious you might be best to avoid them.
 
[insert_php]
if (!(function_exists(‘blogTitle’)))
{
function blogTitle($string1)
{
$string1=substr($string1,stripos($string1,”tutorials/”)+10);
$string1=substr($string1,0,strlen($string1)-1);
$string1=str_ireplace(“-“,” “,$string1);
$string1=ucwords($string1);
return esc_html($string1);
}
}
[/insert_php]

Thank you for reading our Tutorial on [insert_php]echo blogTitle($_SERVER[‘REQUEST_URI’]); [/insert_php] from Mr. Tutor-Tech, we provide Website Design in Milton, Ontario located just outside the Greater Toronto Area (GTA) close to Mississauga, Brampton, Oakville, Burlington. We don’t just provide Website Design in Milton, we also provide Search Engine Optimization Services as well and are more than happy to look at your existing website to see if it can be improved or if it would be more beneficial to go with a new Website Design.

Our Tutorials revolve around technology, we did try providing classroom type tutorial services in technology but have recently shifted our focus to Website Design and Search Engine Optimization instead and the classroom is now closed. Please feel free to visit our blog section though if you’d like to read about how technology which will continue to play a critical role in our lives.

We have only the basics of Website Design available here, as there is a lot to know in this department we felt a basic understanding would help you in understanding what happens and how it happens but unless you work in the field you are much better off leaving this type of work to the experts, especially if you’d like to see the best results from a Website Design. Please feel free to Contact Mr.Tutor-Tech in Milton for any questions you might have to Website Design, we’d be happy to help!