how a website is loaded in our browser - networking

Question

When I type www.google.com at my browser address bar, what exactly happens technically and how entire stuff is loaded. Considering the same HTTP page is being loaded...
what is role of DNS server, IP address, MAC address, subnet mask, proxy setting, default gateway in this case.
Does it make any different if I am in different class of network?

Answer 1

You are asking about all things at once, it's a big concept.
Still in short.
When you type www.google.com (or any other site name) then the request goes to the DNS server which translates the URL into an IP address.
Read here more: http://en.wikipedia.org/wiki/Domain_Name_System
Then the request goes to server where the website is being hosted, the server which is providing hosting service for the website contains the website-stuff that has to be shown to the world.
Read about apache server: http://en.wikipedia.org/wiki/Apache_HTTP_Server
Subnet: http://en.wikipedia.org/wiki/Subnetwork
does it make any different if i am in different class of network?
No, it doesn't make any difference if you are in different class of network.
(Study about routers: http://en.wikipedia.org/wiki/Routers)

Answer 2

Points to help you out:
Every computer that belongs to a network -including yours has an ip address.
Every network has hosts under it. The network may be divided into subnets
The ip addressing is hierarchial.This helps in routing
IP addresses may be assigned manually or by the DHCP server
Manual-IP configuration
DHCP-Dynamic Host Configuration Protocol
All packets that are sent to your ip address come through your isp network - this includes switches and routers
Packets from other networks are forwarded by this ip address. Once they reach the nearest switch. Switches use your MAC address to send packets to your computer. The MAC address is obtained by ARP
The gateway address is the path through which packets are sent out of your network or your ISP's
Proxy servers are servers that allow connections through them
To understand more about how this works, download Wireshark:
Start the sniffer and then load google.com in your browser.
You will notice the following
The browser first sends a DNS request with the hostname to the DNS server of your ISP (or your network if any)- DNS finds out the ip address from the hostname.
The DNS server replies with the IP address of the server
The browser then sends the HTTP request
This is in the form e.g
GET /index.html HTTP/1.1
The server responds with the format
The data is sent to the user
Usually if a webpage is requested, it is in HTML format(with javascript,css,etc). This is then parsed and processed by the browser to get the webpage we see.
To test this :
ON LINUX,
type
telnet stackoverflow.com 80
in the terminal.
As soon as it gets connected,type the following (quickly before it gets disconnected):
GET /index.html HTTP/1.1 (enter)
Host: stackoverflow.com (enter)(enter)
to see the response
ON WINDOWS
Download the putty client and fill the host as stackoverflow.com, port as 80, and choose Connection type as Telnet.
As soon as it gets connected, repeat same steps as above to see the response.

Answer 3

The examples shown above illustrate how things work from Layer 7, but not Layer 3+ from your device's perspective. I would look at using tcpdump/wireshark to try and dump all of the network packets if you're interested in getting those kinds of low-level details. An example's provided below (run on FreeBSD).
Notes:
- Be sure to start wireshark/tcpdump before your web browser/client first so the packets get captured.
- Specify the right port when starting wireshark/tcpdump; filtering the connection via a DNS address might not work in all cases if the remote webserver has load balancing/failover setup.
Window with tcpdump:
# tcpdump -A tcp port 80
tcpdump: verbose output suppressed, use -v or -vv for full protocol decode
listening on em0, link-type EN10MB (Ethernet), capture size 65535 bytes
capability mode sandbox enabled
01:48:17.917640 IP 10.0.2.15.50636 > nuq05s01-in-f20.1e100.net.http: Flags [P.], seq 1631738201:1631738227, ack 30720002, win 65535, length 26
E..BP.#.#...
...J}.t...PaBYY....P...F5..GET /index.html HTTP/1.1
01:48:17.918119 IP nuq05s01-in-f20.1e100.net.http > 10.0.2.15.50636: Flags [.], ack 26, win 65535, length 0
E..(.U..#..{J}.t
....P......aBYsP...'+........
01:48:18.072501 IP 10.0.2.15.50636 > nuq05s01-in-f20.1e100.net.http: Flags [P.], seq 26:28, ack 1, win 65535, length 2
E..*P.#.#...
...J}.t...PaBYs....P...F...
01:48:18.072662 IP nuq05s01-in-f20.1e100.net.http > 10.0.2.15.50636: Flags [.], ack 28, win 65535, length 0
E..(.X..#..xJ}.t
....P......aBYuP...')........
01:48:18.074353 IP nuq05s01-in-f20.1e100.net.http > 10.0.2.15.50636: Flags [P.], seq 1:687, ack 28, win 65535, length 686
E....Y..#...J}.t
....P......aBYuP...Z...HTTP/1.0 400 Bad request: request header 'Host' missing
Content-type: text/html; charset="iso-8859-1"
<html>
<body>
<h3> Request denied by WatchGuard HTTP proxy. </h3>
<b> Reason: </b> request header 'Host' missing <br>
<hr size="1" noshade>
<b> Method: </b> GET <br>
<b> Host: </b> 74.125.239.116 <br>
<b> Path: </b> /index.html <br>
<hr size="1" noshade>
</body>
<!-- PAD --></html>
01:48:18.074512 IP nuq05s01-in-f20.1e100.net.http > 10.0.2.15.50636: Flags [F.], seq 687, ack 28, win 65535, length 0
E..(.Z..#..vJ}.t
....P......aBYuP...$z........
01:48:18.074683 IP 10.0.2.15.50636 > nuq05s01-in-f20.1e100.net.http: Flags [.], ack 688, win 65014, length 0
E..(P.#.#...
...J}.t...PaBYu....P...F...
01:48:18.077023 IP 10.0.2.15.50636 > nuq05s01-in-f20.1e100.net.http: Flags [F.], seq 28, ack 688, win 65535, length 0
E..(P.#.#...
...J}.t...PaBYu....P...F...
01:48:18.077070 IP nuq05s01-in-f20.1e100.net.http > 10.0.2.15.50636: Flags [.], ack 29, win 65535, length 0
E..(.[..#..uJ}.t
....P......aBYvP...$y........
Window with telnet:
# telnet www.google.com 80
Trying 74.125.239.116...
Connected to www.google.com.
Escape character is '^]'.
GET /index.html HTTP/1.1
HTTP/1.0 400 Bad request: request header 'Host' missing
Content-type: text/html; charset="iso-8859-1"
<html>
<body>
<h3> Request denied by WatchGuard HTTP proxy. </h3>
<b> Reason: </b> request header 'Host' missing <br>
<hr size="1" noshade>
<b> Method: </b> GET <br>
<b> Host: </b> 74.125.239.116 <br>
<b> Path: </b> /index.html <br>
<hr size="1" noshade>
</body>
<!-- PAD --></html>
Connection closed by foreign host.