How Exactly Do Web Pages Work?
How Exactly Do Web Pages Work?
http://slides.com/tennisbear/howwebpageswork
Who Am I?
- Dennis Slade Jr.
tennisbear@gmail.com
- 22+ years experience in web & desktop applications, software support, and training
- 12+ years experience with PHP/MySQL and similar technologies
- 30+ years providing tech support to Mom
Hi, Mom!
So how exactly DO web pages work?
It all starts and ends with a web browser:
Android Browser (Google)
Chrome (Google)
Internet Explorer (Microsoft)
FireFox (Mozilla)
Opera
Safari (Apple/iOS)
Tor ...
What happens in that time between
typing a web address (or clicking a link)
and seeing its web page pop up?
The short answer:
The short answer:
Lots!
The short answer:
Lots!
(And lots and lots...)
So let's say we want to end up here:
We start here:
The Address Bar
- Accepts a URL (Universal Resource Locator) that you enter.
- Usually your URL is a web page. All web pages start with "http" or "https" though your browser might hide those prefixes from you.
- The URL could be other things like "mailto" or "ftp" or "vnc" resources.
- Very technically precise people prefer the term URI (Universal Resource Identifier) instead of URL. Every URL is a URI, but not vice-versa.
Parts of a URL
- Scheme: http
-
Domain Name (aka "domain" aka "host"):
amazingwomeninhistory.com - Subdomain: www
- Top-Level Domain: com
-
Fully Qualified Domain Name:
www.amazingwomeninhistory.com -
Path:
/amazing-grace-hopper-computer-programmer/
Top-Level Domains
We Have a URL!
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?
Hold up, Hold Up, HOLD UP!!
How can my browser be "asking" the Internet?
Isn't my browser the Internet?
Or rather, isn't the Web the Internet?
What Is 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.
Internet Fun Facts
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. :-)
What Is the World Wide Web?
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.
We (Still) Have a URL!
Your web browser now asks
the Internet:
Where is www.amazingwomeninhistory.com?
How/Who does it ask?
DNS
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.
IP Addresses and DNS
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.
IP Addresses and DNS
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.
So What's Next?
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.
Let's Break That Down, Shall We?
Let's Break That Down, Shall We?
The General Flow
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
Web Server
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
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 and HTTPS
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
HTML (HyperText Markup Language) is the base language of web browsing.
The web server returns web pages back to your browser in HTML.
HTML Example
<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>
Back to the Browser
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!
The General Flow
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
Rendering the Page
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:
Rendering the Page
- All images referenced in the HTML are retrieved and added to the web page.
- All external CSS (Cascading Style Sheets)
is retrieved and applied to the web page.
- Any referenced media files (movies, music,
PDF, etc) are loaded and embedded into the web page.
Images
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).
Images
The General Flow
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
Applying the CSS
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.
CSS Example
.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
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.
And then there was Javascript
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.
Javascript Example
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 );
}And then there was Javascript
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.
The General Flow
HTTP
HTTPS
ASP
PHP
Python
JSP
Web Server
Web Browser
URL
HTML
JavaScript
Ajax
images
And finally... Ajax Anyone?
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.
And finally... Ajax Anyone?
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 ]
So to recap...
So to recap...
The General Flow
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
Put it all together and what have you got?
Put it all together and what have you got?
Amazing
Grace
References
How Exactly Do Web Pages Work?
(this was)
Thanks for listening!
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
How Exactly Do Web Pages Work?
By Dennis Slade Jr.
How Exactly Do Web Pages Work?
You use the web everyday - maybe every hour - on your mobile/tablet/laptop/desktop. Web browsing has become as basic as reading and writing for most people. But do you have a true understanding of the basic operations that underpin the web? Come take a look under the hood of web broswing to get a glimpse of "how the sausage is made" so to speak. We will trace the rendering of a web page from start (when you type in a URL) to finish (when you receive the finished page in your browser), and we will touch on the definitions of all the technologies involved in this process: HTTP, HTTPS, HTML, CSS, JavaScript, AJAX and more!
