http://slides.com/tennisbear/howwebpageswork
(And lots and lots...)
With the help of the operating system of your laptop or smartphone or tablet, your web browser asks the Internet the following question:
Where is www.amazingwomeninhistory.com?
How can my browser be "asking" the Internet?
Isn't my browser the Internet?
Or rather, isn't the Web the Internet?
The Internet is a global network connecting millions of computers. The Internet is a massive network of networks, a networking infrastructure.
If you think of the Internet as the roads, think of web pages as the cars on the roads.
Just as other types of vehicles (buses, motorcycles) use the roads, other types of services (ftp, mail) use the Internet.
It all began in the 1960's with ARPANet, a network to connect educational and governmental research institutions to NASA during the Space Race.
The number of hosts/nodes on ARPANet grew from 5 in 1970 to 5,000 in 1986, 10,000 in 1987, and 100,000 in 1989.
By the mid-80's ARPANet was officially known as the Internet.
Initially created by the U.S. government, no one actually owns the Internet. Don't ever let anyone tell you otherwise. :-)
The World Wide Web (aka the Web or WWW) is the subsystem of Internet servers that creates and distributes web pages.
Key features of the Web include pages formatted with styles and images, and the ability to jump between pages using (hyper)links.
The Internet is not synonymous with the World Wide Web.
Your web browser now asks
the Internet:
Where is www.amazingwomeninhistory.com?
How/Who does it ask?
The browser queries DNS (Domain Name System or Service), the massive, distributed phonebook of the Internet.
DNS tells the browser (or any app who asks) exactly where a domain name can be found.
Give DNS a name like www.amazingwomeninhistory.com and it responds with a numerical address, in this case 173.205.126.138.
Numerical addresses like 173.205.126.138 are called IP (Internet Protocol) addresses.
The Internet uses IP addresses for EVERYTHING. They are really, really important.
Few humans can reasonably work with more than a couple numeric addresses at a time. Most humans are fine with dozens of names though (like amazingwomeninhistory.com).
This is why the development of DNS, which maps names to IP addresses, has been central to the creation and growth of the World Wide Web.
Your web browser now knows that blogs.reuters.com is at the IP address 173.205.126.138.
Sitting at address 173.205.126.138 is a web server. Your browser uses HTTP or HTTPS to send the URL to the web server, which returns HTML (and probably JavaScript) back to the browser.
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
A web server is just a computer that delivers (or "serves up") web pages. Every web server has an IP address and possibly - hopefully - a domain name.
Web servers are responsible for executing server-side scripts (ASP, PHP, Python, etc) for web pages before returning the pages to your browser.
Web servers are not responsible for executing JavaScript.
Server-side scripting languages are used to add functionality, security and dynamic content to standard web pages.
Popular scripting languages include PHP (PHP: Hypertext Preprocessor), Python, Microsoft's ASP (Active Server Pages), and Oracle's JSP (Java Server Pages).
HTTP (HyperText Transfer Protocol) is the low level Internet protocol that web browsers use to talk to web servers.
HTTPS (HyperText Transfer Protocol Secure or SSL) is HTTP with encryption added for higher security.
Browsers and web servers use HTTPS to protect eCommerce transactions and other sensitive data being passed between them.
HTML (HyperText Markup Language) is the base language of web browsing.
The web server returns web pages back to your browser in HTML.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dennis Slade: The Wisdom of Heroes</title>
<link rel="stylesheet" type="text/css" title="ds" href="styles/ds.css">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body style="background-color:#FF9;">
<div style="margin: 0 auto; margin-top:3em; text-align:center; width:450px;">
<p> "Pressure is a privilege." <br>
<span style="font-style:italic; color:#555;">— Billie Jean King </span></p>
<br>
<p> "[It's] change my dear. And it seems not a moment too soon." <br>
<span style="font-style:italic; color:#555;">— The 6th Doctor </span></p>
<br>
<a href="here.html">continue</a>
</div>
</body>
</html>
Great news: The web server has sent back a bunch of HTML to your web browser.
Within the HTML is the content of the web page (like, the text of the article) as well as instructions on how to format the content.
The HTML probably has some JavaScript, too. Web browsers love them some JavaScript!
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
Your web browser now displays or renders the HTML it got from the web server.
(Reminder: The HTML has content as well as formatting instructions for the web page.)
After converting the HTML to the basic display/layout of the web page, several important things must then be done to complete rendering:
Images are referenced directly by
the HTML or indirectly by the CSS.
Browsers usually load images as soon as possible, often in parallel to loading the CSS.
Popular image types include jpeg (jay-peg),
gif (jiff or giff), and png (ping).
Images are referenced directly by
the HTML or indirectly by the CSS.
Browsers usually load images as soon as possible, often in parallel to loading the CSS.
Popular image types include jpeg (jay-peg),
gif (jiff or giff), and png (ping).
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
CSS (Cascading Style Sheets) tells web browsers
in excruciating detail how to layout the HTML
they are receiving.
CSS helps HTML display properly for all
types of screen sizes and printers.
CSS often references additional images which must then be loaded to complete page rendering.
.dashboard-js { float:left; width:100%; margin:1.5em; padding:1.5em; }
.dashboard-js h1 { margin-top:0.25em; }
.dashboard-js-info-column { float:right; width:292px; }
.no-talent-networks { float:left; margin:0.75em 0.75em -0.75em 0.75em; }
body#job-seeker #my-talent-networks,
body#job-seeker #jobs-interested
{
float:right; width:288px; border:1px solid #c3c3c3;
padding-bottom:20px; margin-top:20px;
}
body#job-seeker #my-talent-networks h1,
body#job-seeker #help-a-friend h1
{
margin:0.5em;
}
body#job-seeker #my-talent-networks .singl_icon h1 { margin-top:14px; }
body#seeker-profile-data div#print,
body#seeker-profile-data div.sumaryholder
{
width:734px;
}
Embedded media files (movies, music, PDF, etc.) load after the initial HTML, images, and CSS.
Embedded media is played or displayed
depending on the capabilities of each web browser.
For example: Some browsers display PDFs natively while others require third-party plugins.
JavaScript is the web browser-based (or client-side) language used to power dynamic web sites like Facebook and Twitter.
The HTML returned from the web server will typically reference one or more external files containing JavaScript. Each of these files must be retrieved from their respective web servers, then executed.
function removeFunctionality( user_id, func_id )
{
if (confirm('Do you really want to remove this section?'))
{
$.post(url+'ajax.php', { 'work': 'delFunctionality', 'func_id': func_id,
'user_id': user_id }, function( result ) {
var json = JSON.parse( result );
if (json.message && json.severity)
redirectToTemplateHref( 'dashboard?message='+json.message
+'&severity='+json.severity );
});
}
return false;
}
function toggleReplacePhoto()
{
var checked = $( 'input#no_photo' ).prop( 'checked' );
$( 'input#photo' ).parent().slideToggle( !checked );
}
The order of JavaScript execution is tricky. Usually JavaScript runs after all HTML, CSS and images have been loaded.
Some browsers do execute JavaScript as
it is encountered, before all HTML
has been rendered on the page.
The result of JavaScript execution might be additional images being loaded, previously
rendered HTML being altered, and more.
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
When JavaScript is executing it may use Ajax (Asynchronous JavaScript and XML) techniques to receive additional HTML, raw data, and images for the page.
Ajax often requires making additional calls to the web server.
The standardization of Ajax in the mid-2000's was an important development in the history of the World Wide Web.
With the Ajax model, web applications "are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions." [ mdn ]
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
Your web browser
... accepts your URL in the address bar or from a link
... looks up the web server's IP address using DNS
... uses HTTP to request the URL from the web server
The web server
... calls ASP or PHP or Python to help build the HTML
... sends the HTML via HTTP back to the web browser
And finally your web browser:
... converts the HTML into a basic web page
... retrieves and adds any referenced images
... retrieves any external CSS formatting and applies it
... loads any referenced media files and embeds them
... executes any referenced or embedded JavaScript
... makes additional Ajax requests to the web server
to receive additional HTML, data, and/or images
Amazing
Grace
(this was)
Dennis Slade Jr.
• Mail: tennisbear@gmail.com
• LinkedIn: https://linkedin.com/in/dennissladejr
• Twitter: @DennisSladeJr
This presentation on Slides.com:
http://slides.com/tennisbear/howwebpageswork
Also check out the San Diego PHP Users Group:
http://sdphp.org