The Internet and the World Wide Web

Parent Component: Computer Fundamentals

The Internet and its linked-document system called the World Wide Web structures many parts of our lives today. Most business transactions are mediated by internet-connected devices. Let's learn what, exactly the Internet is how its world wide web actually works!

arrow_downward

Jump to a section

check_boxLearning Objectives
local_diningModule "hamburger" guide
bookResources and reference documents
extensionCore Concepts
schoolModule Preparation Exercises
motorcycleExercise 1: Server Hops
motorcycleExercise 2: Web Developer Tools
buildMini Project:
flight_takeoffExtension Exercises

---

Module Learning Objectives

check_box	Participate in and describe the fundamental relationships of the Internet Protocol for distributing information to computers using IP addresses
check_box	Generally describe the kind of information presented in an IP Trace Route output and ping log and how this info is useful to IT folks
check_box	Dissect a web page using a modern browser's development tool panel into HTML files, Javascript files, and other resources
check_box	Edit a page written in HTML markup to contain custom text, images, and links

arrow_upward

---

book

External Resources

Shared cloud drive of trace route lookups

The Internet on Wikipedia

The World Wide Web on Wikipedia

arrow_upward

---

local_dining

Module Hamburger Guide

Print off the hamburger guide for this module, review it carefully, and complete its sections as a culminating activity for this module.

Hamburger For Printing (*.pdf)

Editable Hamburger (open document text *.odt)

arrow_upward

---

extension

Module Core Concepts

The Internet: The Worldwide Network of Networks

At the highest level, a computer network is made of computers that have two roles that work together to make the connection between them possible:

• Endpoint "nodes": Regular personal computers, phones, devices, machines, robots, etc.
• Computers who help transmit data to and from these endpoint nodes: routers, switches, network wires, etc.

Networks of computers are arranged in structured ways, and if we diagram them, they make patterns that look similar to webs of filament made by living spiders (see header photo of a spider in one of Eric's blue buckets).

Most basic network diagrams show the individual computers that are connected in the network, the numeric address used to get data to and from that machine efficiently, and connection points to other computer networks (often The Internet--meaning the worldwide computer network system).

This network model was created by the page's author during graduate school. (Full server and network build report-PDF.) You can see that there are several smaller networks within his overall apartment network--these are called subnets.

The networking "stack" - OSI layer model:

Since computers are systems, even the network-related bits inside a single computer must communicate with one another in structured ways. Physical network cards with computer chips on them directly send and receive packets from other computers.

We can visualize a request from a browser moving down this model, which all occurs inwide the same physical computer device. Each layer processes that chunk of data so it is ready to be accepted by the layer above or below it. This process is extremely complicated, but very structured, so it can work incredibly fast.

Communication Protocols

Computers components talk to one another in structured ways that work together to transmit information (useful data).

The structure of each of these "mini languages" are called protocols, and allow for systematic exchange of structured information, such as sending a web page to the broswer on a computer when the user clicks on a link. Each of the layers in our networking model has its own protocol, and they are almost all referred to with acronyms, like IP (Internet Protocol) and TCP (Transaction control protocol).

Remember, some set of all these layers exists inside each internet connected computer. This graphic conveys this idea: within this desktop computer, a browser application is visiting technologyrediscovery.net. The applications is what the end-user is interacting with, and so it's at the top of the "stack" of network protocols. But to get a signal to another computer, that request must pass through sevearal layers of processing.

Explore a Layer 3 ("Network" layer) Protocol: Internet Protcol

Getting mountains of data (emails, websites, images, video files, streaming video, etc) to and from hundreds of millions of individual computers is a monumentally complicated task that is made possible by a realtively simple addressing system that works a lot like postal addresses work in the "snail mail" system.

By giving each house or business or post office box a unique address--including most importantly, the ZIP code--we can drop a letter in any mail box in the country and it can make its way to any other mailbox in the country for under a dollar. This is a pretty great system.

Computers have addresses, too, and the most important one to know about is a computers Internet Protocol Address (IP Address). It's a number represented by four sets of three decimal digits separated by a period.

This is the IP address of the server that responds to requests at technologyrediscovery.net. All website names that are in English (text) are translated into an IP address that looks like this before being sent around the Internet.

Giving each component in the system a unique address called an Internet Protocol (IP) address. Packets are passed to destinations by routers who read these addresses.

We can use the IP addressing system to build extremely complicated networks that allow security where appropriate and access where needed. This diagram shows the network structure along with the IP addresses of a bunch of computers that together make up an organization's internal computer network.

Layer 7 Protocol: The world wide web's HTTP Protocol

Web servers are simply computers placed appropriately in a network to respond to requests from other computers for a set of files, usually strutured together with the HTML markup language. Web servers run a program called a "web server" that manages the files that can be sent to requesting computers.

Since requests and responses to those requests must be processed very quickly--often in less than a second--the structure for asking for files and sending those files is simple and highly structured. We can use the developer console in any modern browser to view all the guts of these requests and responses. Press the F12 key on a Windows or Linux machine while viewing a web page to gain access to these developer tools.

The following is a screen shot of the Mozilla Firefox's developer console, showing the details of a request to download the home page of technologyrediscovery.net. Note that the list of files on the left-side pane are all the individual pieces of this one home page. Each file is requested with a separate communication exchange with the web server. The pane on the right shows the request and response details for a single image.

You can explore these tools more in the exercises below.

arrow_upward

---

school

Prep-Work

Activities and readings to do prior to our starting the module in class:

1. Read the module core concepts descriptions and study the images, following links as needed. Check out the external resources--spend 5 mins reading and exploring each page. Have fun! It's the internet!

arrow_upward

---

motorcycle

Exercise 1: Comparing server hops required to send data across the world

Exploration Question: How much longer (in miliseconds) does a request to a web server on another continent take than a request to a web server in the United States?

We can answer this question by using a tool that explores the path that World Wide Web traffic takes to deliver a single web page to a single computer. This kind of tool is generally known as a 'trace route' and it can provide us a list of all the computers that handle the request in its journey across the internet. Follow these steps carefully to try this tool out yourself.

1. Click this link to open a list of national government sites on Wikipedia..
2. Pick two countries which are of interest to you. Find their government website on the list you just opened. Fill their website URLs into the table in your hamburger.
3. Click this link to open traceroute-online.com in a new browser tab.
4. Click me AGAIN to open a second copy of traceroute-online.com in another new browser tab.
5. Click me THIRD TIME to open a third copy of traceroute-online.com in another new browser tab.
6. Run a separate traceroute for each of your country's government page, one on each open tab. We want to keep the results open so we can compare them. Do this by pasting the URL for the country's website into the input text box in the middle of teh traceroute-online website.
   
   You can see in our example below, the total hops to get to a google.com server is 7, meaning the request visited 7 separate computers on its way to google and 7 on its way back. At most, that trip took a little under 3.5 milliseconds (thousanths of a second!) That's nuts!

7. ALSO do a traceroute on google.com in your thurd traceroute-online tab, which maintains many fast servers all over the world, but will probably serve us with ones in the USA.
8. Study your results closely. Compare every aspect of their results.
9. Record your findings in your hamburger table. Answer the question below the table.
10. Sit back and put your hands behind your head and give a good long gaze at one of those trace route outputs. Take a deep breath. Marvel at how easy and efficently you were able to send and receive messages with a computer sitting in some room on another contient. This was all done at no extra cost to you, the user, other than securing a connection to the World Wide Web.

Extension: Track individual file transfer times worldwide

1. Open the FIREFOX browser. We can get a very detailed view of data transer to any website we want, including those located on other continents. Return to a foreign website in its own tab.
2. With that tab open, press the F12 key. This opens the developer console on the right or bottom of your screen.
3. We want the developer bar to be on the right side of the screen, not the bottom. If yours is on the bottom, use the view icons (pictured below) to move your console to the right side of the screen.

4. Locate the "network" tab at the top of the developer console. This will provide details about each file the website asks to be downloaded as part of its overall loading. Press F5 to reload the site and watch as the tool tracks each image and text page downloaded.
5. Repeat this process for the other site and find a third site of your choosing. On the back of your hamburger, describe your findings. Which site downloaded more individual files? How large was the largest one?

arrow_upward

---

motorcycle

Exercise 2: Exploring internet sites with developer tools

Guiding Question: If all internet pages are built from HTML text files, how are internet sites structured to have all those boxes and links and stuff?

Websites are built from lots of tiny little blocks, like headers, links, and paragraphs. Most websites are built with little blocks called "div"s. They are just boxes that hold other boxes.

We can see how all these boxes work together with the developer tools built in to your browser. Follow these steps to dissect a website, just like you did frogs in biology.

.

1. Open the FIREFOX browser. Use the non-archiving ('non-tracking') search engine duckduckgo.comM to find a website related to one of your personal interests.
2. With that tab open, press the F12 key. This opens the developer console on the right or bottom of your screen.
3. We want the developer bar to be on the right side of the screen, not the bottom. If yours is on the bottom, use the view icons (pictured below) to move your console to the right side of the screen.

4. Click the Inspector icon which is located in the upper right corner of the developer tab. Then click the Pick An Element button directly to the left of the Inspector button. Now, as you hover your mouse over the elements of the website, you'll see guide lines and shaded boxes appear. These are all the little boxes that HTML code instructs the browser to put together to make a web page!
5. Click on some elements and you'll see highlighting appear in the inspector window. You are seeing the actual HTML that generated that particular element. Click on 10 or more items of different kinds (images, headers, etc.) and notice the differences in the tags (the letter in blue inside arrows brackets.
6. Use the expansion arrows next to the elments, clicking any arrows pointing to the right once to expand their contents below them. Keep clicking into the tree until you have the highlighted element next to an arrow that is pointing down, meaning it has no more children that you cannot already see.

7. Now you can see that each time the code is indented, you are "going inside" another box. So the <a href=" that is highlighted in the image below has a "parent" element of a <li>, and that <li> has a parent of a <ul> and so forth until we get to the <div id="main">. If I count all of these, I get 6 parents, not including the child <a>. So the total number of parent elements that I could record in my hamburger would be 6.

8. We can learn about what these tags do using the HTML reference at W3 schools. . Once you have found your elements, search for that element in this reference guide and read a little about it. You won't understand much--this is exposure therapy!
9. In a NEW TAB, Find another site of your interest and navigate to another element, this time one that is buried even deeper into the tree. If you last site was simple, choose a site with lots of boxes and images and ads.
10. With today being a mobile world, how do websites change when they are displayed on small screens? We can ask the browser to pretend like it's running on a device with a small screen by entering responsive design mode. It's icon is in the upper right of the developer console.

11. Chosoe the Samsung Galaxy by clicking the little bar at the top of the tiny screen.
12. Now navigate to the same HTML element you found looking at the page in normal view. Use the inspector again. Find the HTML code for this element.

13. Count the parents. Enter this into your hamburger table
14. Complete your hamburger guide's questions.

arrow_upward

---