Tumo Curriculum Activities

How does a website appear on your computer?

Posted on: September 25, 2009

  1. Websites speak “code” like people speak “languages”
    • Think about the different languages that you hear around you – people on the street, or on the TV.  You may hear some people speaking Eastern Armenian, Western Armenian, Russian, English, French, Farsi, Arabic, Georgian, Greek, and maybe many others.  Are you able to understand all of these languages?  Websites on the internet are like people in the real world…
    • Websites “communicate” with each other, just like people do.   Every website contains a lot of information, and they want to show that information to as many other computers as possible.  This is their way of “communicating” with one another.  Just like people communicate with different languages.
    • The difference is that websites speak code, like people speak languages.  One lucky thing is that all websites use the same code to talk to one another.  This code is called “HTTP”, short for “hypertext transfer protocol“.  This is a universal ‘code’ used on the internet, to display websites.  There are other ‘codes’, but this is the most often one used.
    • You will see the “http” code when you view a website.  For example, look at 3 of the most popular websites on the internet:  http-wiki http-google http-youtube
    • Think about all the people who you talked to yesterday – maybe your mom? dad? brother? sister? friends at school? friends at home? teacher? grandmother?
    • When you spoke, each of these people understood what you said.  When a website speaks in HTTP code, all other computer devices can understand them – just as your family and friends understood what you said yesterday.  Examples of computer devices that can understand websites when they speak in HTTP code are – Dell computers, HP computers, Mac computers, even mobile phones, mobile planners such as PDA’s or iPhones, and some video game devices.
    • (Hands on:  view websites on some of these devices)
    • Quote:  What has made the World Wide Web such a great success is that pages saved on different computers all over the world may be interlinked with so-called hyper-text links (which are normally underlined). As we will see, these links do not only help you move from one web site to the other; they also help the search engine find the pages.(Source)
  2. Computers use a browser to comprehend information like people use their brain.
    • When you spoke to your mom yesterday, why was it that she understood you?  Because she understands the same language that you speak.
    • Just like your family and friends understand the language that you speak, browsers understand the code that websites “speak”.  There are several different browsers that can understand the code that websites emit.  Some examples are:  browsers-opera Opera, browsers-ff Firefox,  browsers-ie Internet Explorer, browsers-safari Safari
    • Let’s look at the a news website, The Economist, in different web browsers.
      • Open up browsers-ffFirefox from the Start Menu.  Firefox
      • Copy/Paste the URL into the address bar:  http://www.economist.com/
      • Do the same with Internet Explorer and Opera.  You will likely need to open the programs from the “All Programs” menu, like shown below:open-operaopen-ie
      • Notice how each web browser, or “brain” can translate (“render”) the website to the computer that you’re using right now.
      • Just how the browsers on your computer are each reading the website, different computers, mobile devices and some video games can do the same thing.
    • You can view multiple websites at the same time, with a browser.  Let’s use Firefox as an example.  To view multiple websites you can open a new “tab”, or a new “window”.
      • To open a new tab, hit “Ctl T” on your keyboard, or go to File/New Tab:  ff-new-tab
      • You can open as many pages at once as you’d like.  As you do this, your browser window should start to look like this:  tabs-ff
      • Similarly, you can open a new “window” by typing “Ctl N” on your keyboard, or selecting “New Window” from the File menu.
      • Both new tabs and new windows allow you to view multiple websites at the same time.  You can have multiple tabs in each window.
    • There are many features in the web browsers these days.  They do much more than simply display websites – you can search the web, post to websites, keep lists of favorite websites, etc.  One of the most convenient things about a web browser is the ability to increase and decrease text size in the browser.  Let’s try this on the Opera web browser.
      • To do this, hit the + and – key on your keyboard.  Notice how the text increases and decreases as you do this.  Another way to do the same thing is through the “View” menu like so:  zoom-in
      • Each browser has their own shortcuts, but the +/- are generally universal.  For example, in Firefox, you type “Ctl +” / “Ctl -” to change the font size.
    • Quiz:  A browser in a computer is similar to a person’s brain in real life, why?   a.  because it speaks in code;  b.  because it understands the code that websites “speak”;  c.  because it is where a website lives;  d.  because it’s a tool websites use to communicate.
    • Hands on: link users to Google search activity
  3. Computers use numbers and letters to communicate, like people use words.
    • When you spoke to your friend yesterday, you were using a series of words to get your message across, che?   In the way that you use words, a website uses a series of numbers and/or letters to communicate.
    • Open a new browser tab or window, and copy/paste this into it:  http://www.apple.com and then hit enter.  Open up another browser tab and copy/paste this into it:   http://17.149.160.10/ and hit enter.
    • You will get to the same website.  If you don’t, click here to get help from a tutor.
    • The series of numbers that a website uses to communicate is called an IP address, or Internet Protocol.  The series of letters that a website uses to communicate is called a URL, or Universal Resource Locator.  People almost always use URL’s to find websites.  This is because URL’s have words that relate to the website itself and words are easier to remember than numbers.
    • Sometimes when you type in a URL, it won’t work.  This is usually because either the website is protected so that only certain people can access it, or the website is not there anymore.  Do not be discouraged when something like this happens.  You didn’t do anything wrong, it simply means that there is a technical problem.  So continue browsing other websites, and leave the problems to the website-owners.
      • Hands on:  Type http://213.236.208.98 into the address bar and hitting enter—you will get to the same server location that you got to in step 1, although you’ll get a 403 “Access Denied” error—this is because you don’t have permission to access the actual root of this server.  no-access
      • Hands on:  Type http://dev.opera.com/joniscool.html — the page doesn’t exist, so you’ll get a 404 error returned. no-page-error
    • Quiz:  type [an IP address] into the browser address bar.  What is the URL that matches with it?  (a,b,c,d)
    • Quiz:  type a URL into the browser address bar.  a.  This is a normal website;  b.  this website is protected and only certain people can access it;  c.  this website doesn’t exist anymore
  4. Websites live in servers, like people live in houses
    • Websites each have a home too.  A website always has to “live” somewhere, just like a person lives in a house or apartment, in different cities or villages.  Instead of living in a house or an apartment, a website lives in a “server“.  A server is just a heavy-duty computer where the website files are stored.
    • To define what a “server” is, we can say this:  A server is a computer where web sites reside – when you type a web address into your browser, a server receives your request, finds the web page you want, and sends it back to your computer to be displayed in your web browser.  (Source)
  5. How websites relate to real life
    • Quiz:  A browser in a computer is similar to what in real life?   a.  a language, but it speaks in code;  b.  a brain, because it understands the code that websites “speak”;  c. a house, because it is where a website lives;  d.  words, because it’s a tool websites use to communicate.
    • Quiz:  HTTP on the internet is similar to what in real life?   a.  a language, but it speaks in code;  b.  a brain, because it understands the code that websites “speak”;  c. a house, because it is where a website lives;  d.  words, because it’s a tool websites use to communicate.
    • Quiz:  Servers are similar to what in real life?   a.  a language, but it speaks in code;  b.  a brain, because it understands the code that websites “speak”;  c. a house, because it is where a website lives;  d.  words, because it’s a tool websites use to communicate.
  6. Next Activities:
    • What is HTML?   view HTML with the color-coded FF plugin to see how the page is dissected.
    • listen to the page source – leads students to lesson on accessibility
    • web standards
Advertisements

1 Response to "How does a website appear on your computer?"

[…] EXTRA:  You can find out more about how websites appear on your computer by going to this activity. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: