#6 How does the Web work?

How could we bank, keep up with our friends, or communicate with each other without the World Wide Web? In today's episode, we'll learn how the Web works. Um, welcome to COPEC Explain Software, the podcast where we make computing intelligible.

All right, Dave, so for this week, our question is a follow up from last week's episode. How does the Internet work today? We want to know how does the Web work?

Well, the World Wide Web is one of the most influential technologies to ever grace the Earth, right? Came out in 1990. Sir. Tim bernersley. He's since been knighted by the Queen of England. He's a British fellow. Created the Web in 1990 by inventing the protocol Http and the file format HTML, and we'll talk more about what they are today. But the basis of the Internet is the concept of the Web is the concept of hypertext. Hypertext is all about documents that can link to other documents. And if you think about it, that's really what the whole Web is. It's documents that allow you to navigate from one document to another document through what we call links. And so that is the very definition of hypertext, is having links from one document to another. Therefore, the Web is a form of hypertext.

What are the different components of the World Wide Web?

Well, I think there's really a few different areas that we need to think about. One is Web browsers, and those are the clients. Then we have Web servers, and those are obviously the servers. So the Web browser is connecting to the server to request content, and generally that's going to be a Web page. So the client says, hey, I really want this Web page. And the server says, hey, here it is. And that's basically most of the transaction. Http, which is the protocol that we use for Web browsers to communicate to Web servers, is actually quite simple. And that's basically what it involves. It involves saying, here's some resource, and here's what I want to do with it. And the server saying back, okay, here's the response for doing that thing with that resource. And most of those requests are gimme that resource. And most of those responses are, Here it is. And then we can get into a lot of details about each of these different components. But then on top of the Web browsers, the Web servers, and Http for talking back and forth between them, we also have the languages that are actually used to define Web pages. And those are things like HTML, CSS, JavaScript. All of this, of course, is sitting on top of the Internet and its protocols like TCP, IP. We talked more about those in the last episode. How does the Internet work?

So the Web is one of the applications that we learned about in the last episode.

Yeah, absolutely. And I want to emphasize again that the Web is not the same thing as the Internet. It's one part of the Internet. So there's many different protocols that run on the Internet. Http and Https, which are the protocols that power the web, are just two of thousands of different application level protocols that run on the Internet.

And there's different types of content on the World Wide Web, right? There's dynamic and there's static, right?

So we make a distinction between content that stays the same over time and that's static content versus content that changes every single time that you access it. So to give you an example of this, think about a resume versus a weather forecast, right? Your resume, you're going to upload to some web server and every time you get it from the web server, it's going to be basically the same, right? You might upload a new version of it eventually, but between the uploads of the different versions it's always the same. A weather forecast changes every day, so every day that you request a weather forecast, it's going to be different. So we call that dynamic. So on the web we have both static content, content that stays the same over time, and we also have dynamic content, content that changes, and generally dynamic content is actually generated for you on the fly. So every time you connect to a web server, that then gives you back some kind of dynamic content, it actually was generated just for you, that immediate instance that you requested it.

That's really cool.

Yeah. So to generate dynamic content, we actually then have another component that I want to talk about, which is server side programming languages. So these are programming languages that are used in conjunction with the web server to dynamically generate the HTML documents that you get back and view in your web browser.

So server side programming languages are working inside the servers to get the accurate dynamic information to me, as I'm looking up the weather in my neighborhood, yeah.

You might have heard about what's called the Lamp stack, so that stands for Linux, apache, MySQL and PHP generally. Let me tell you about what each of those components are and how they work together on a web server to deliver you the information that you get on your web browser. So Linux is the operating system, and we talked about operating systems in episode two. What is an operating system? So I won't go into a lot of detail about that here. Apache is the web server. So Apache is what's actually responsible for handling the requests coming from your web browser for a specific document. So you say, I want this document, and Apache says, okay, let me see how I can generate it and get it to you then. MySQL is a database, so it's a database. It happens to be what we call relational database. The database is where we just basically store information. You could think about it's an information store. And PHP is a programming language for dynamically generating web content such as HTML and giving it back to the web browser through Apache. So here's what's going to happen with the weather forecast. Apache is going to say to PHP, hey, I know that you have a program in there for getting a weather forecast. PHP will run the program and that program at some point will say to the MySQL database, hey, can you just retrieve that record about what the weather is right now at this person's location? It'll combine that together and package it as an HTML document, give it back to Apache, and Apache will send it over the network back to the web browser.

And this is happening very, very quickly.

Well, it's happening basically instantaneously, but I also want you to think about how the web browser is actually communicating with the web server. And that goes back to the other technology we mentioned earlier, which is Http. That's the protocol that the web browser and the web server use to communicate with one another. And there are just a few different verbs, as we call them, that web browsers and web servers speak together to actually get content back and forth. The most common verb that we send from the web browser to the web server is Get. And Get says please give me this content. And basically with a get request, as we call it, generally the web server is giving you back content that does not depend on too much information that you're sending over to it. So it's usually content that does not require it making changes to, let's say, the database based on the information that you're providing, such as maybe the zip code you want the weather forecast for, there's already a forecast in there for that zip code. Another verb that's used in Http is called post. And post is usually when you do want to make some kind of change. So it might be that you're updating your profile on the weather website so you're changing what email address you get your weather alerts from. And so post might be you sending here's this new data, here's this new email address I want you to send me alerts to, and the web browser takes that information and maybe updates its database with it. So those are the two most common verbs that are used in Http hypertext transport protocol for communicating between web browsers and web servers, get for retrieving information, and Post for providing new information that might cause an update to happen, let's say, in the database on the server. Now, I just described to you one stack, the Lamp stack, Linux, Apache, MySQL, PHP, but you can actually plug in a lot of different components. We could have a stack that uses Windows as a server operating system and uses the NGINX web server and uses Postgres SQL or Microsoft SQL as the database and uses Python as the server side programming language. So there's many different sets of stacks. There's many different possible configurations and technologies that can work together to provide the web server side of the equation, the web browser side of the equation you're familiar with, I'm sure, Firefox, Chrome used to be Internet Explorer, now called Edge. It's really a rewrite. And Safari are the most common four web browsers by far, and together they make up 90 plus percent of the market. So those web browsers, what they are, is they're really Http clients. The web server knows how to handle get requests, post requests, and there are some other verbs as well, but those are just the two most common. And the web browser knows how to send those requests and then when it gets the response back, interpret the response.

So what's the difference between Http and Https?

Yeah, you've probably seen both of these before because you've probably typed them in at some point to your web browser when you've copied a link that somebody sent to you that wasn't just one you could click on. I'm sure you've seen both HTP and Https. The only difference between the two that you really need to know about is that Https is encrypted. And we talked a little bit about what encryption is in the last episode, but basically it's a way of scrambling information between the origination point and the destination point so that people in between cannot actually read that information. And without getting into all the details of how encryption works, which we might do on another episode, I just want to say that it's critical because every time you make a request to a web server from your web browser, your data actually hops around at many different computers and routers and switches along the way from the browser to the server. So let's say it could hop between 20 different locations to the server and then 20 different locations to get back to you with the response. Every one of those potential locations is a security vulnerability if we're not sending our information in an encrypted fashion. Because at any one of those locations, somebody could be snooping on the information, stealing your credit card information, stealing your private messages, stealing your health records, et cetera. Right. And so sending everything encrypted that is in any way personally identifiable is pretty important. And so most web sites have moved over from Http to Https over the last decade or so, a little bit more than that. And so that's really been great because it means that we can feel really secure about the fact that our information isn't getting stolen as long as they're handling it competently on the server side.

That s is pretty powerful, it's important to notice if you don't see it.

Yeah, and a modern web browser will almost always give you a little indication about whether you're using a secure site or not a secure site. So, for example, I think in Safari you often see the little lock. I think you see that in Chrome too. So if you don't see that little indicator saying you're on a secure site, that's not a site you want to be providing your credit card to or providing any other kind of personally identifiable information.

So what are the languages that are used on the World Wide Web?

So there's three main languages that you need to be familiar with to be a web developer. So in other words, somebody who develops websites. And those three languages are HTML, CSS and JavaScript. And they have three very different purposes. So HTML is for defining the structure of web documents. It's the structure actually, and the content. So most of the textual content and the structure of that content is defined in HTML. CSS is for styling that content. So it's for saying, okay, this content is going to be left aligned and this content is going to be this color, and this content is going to be arranged in such a way that it looks like it's next to this content. So CSS is for actually positioning things on the page and styling it and making it actually look presentable. And then JavaScript is a client side programming language. So we talked earlier about server side programming languages. Those are programming languages that generate this content that we then send to the server. Client side programming languages are to make the pages interactive in your web browser. So you might be, let's say, using a mortgage calculator on some bank website, right? Well, there's no reason that every time you do some simple math routines in the mortgage calculator, it should have to talk to the server so that can all be handled on the client side within the web browser and we don't actually have to do any additional processing on the server end. And that's really nice because it means that we can make not only that, but the JavaScript can also handle making the user interface interactive. So for example, making it so that you can easily drag and drop files around on a file sharing website or be able to dynamically resize a form. Let's say you're working on a website that generates quizzes and you want to show a lot of different questions at once. So adding more questions to the interface can happen dynamically without having to get a new HTML document back from the server. So anything we want to do that's interactive, we're going to basically use JavaScript for on the client side. So three languages HTML, CSS, JavaScript. And another way of talking about a web browser is saying that a web browser is basically a piece of software that knows how to interpret these three languages, HTML, CSS and JavaScript and communicate with a web server using Http and Https. That's basically the definition of a web browser.

Do all web pages have HTML, CSS and JavaScript?

So the bare minimum, a web page needs to be able to be presented in a web browser is HTML. And HTML was the first of these three technologies to come out. So HTML came out in 1990, back when Tim Berners Lee originally defined the web and it's gone through several different revisions. So he defined HTML One in 1990. We're now working with HTML Five. That was the basis of the web. Then they realized, you know what, it would really be cool if we could separate out the styling from the actual content. That way we could plug in different styles and we could really have more flexibility by separating the two concerns and.

Make it more fun to look at.

Make it more fun to look at, too. Absolutely. And so then CSS came about in the mid to late 1990s and actually at the same time, JavaScript was happening too. So JavaScript was invented by Brendan Ike in 1995 while he was working at Netscape as a language to make the Netscape web browser more dynamic. And you might be familiar with the language Java. You probably heard about it because it's one of the top programming languages in the world. JavaScript is one of the top programming languages in the world too, because it's used on almost every web page. But JavaScript and Java are two actually totally different programming languages and it actually has to do with some marketing deals in the mid 1990s between Netscape and Sun Microsystems that we ended up with two languages that have very similar names, but at a fundamental level, they're very different programming languages, actually JavaScript and Java. But anyway, JavaScript came about in 1995 and it is the only real programming language that your web browser runs. Of course, the web browser is not necessarily written in JavaScript, but I'm saying for the web pages that you receive, what makes them interactive is always JavaScript. There is no other programming language unless we're using a browser plugin or we're using a newer technology called WASM that isn't widespread yet that we can actually use to make web pages interactive. So JavaScript is the programming language of the web. HTML and CSS are not actually programming languages. HTML is what we call a markup language. In fact, that's what it stands for. Hypertext markup language is what the HTML stands for. And so the difference between a markup language and a programming language is a programming language can actually do logic, it can actually do computation, whereas a markup language is just defining the structure of a document, the contents and structure of a document. It's not actually defining how we can do computation. So we can't, for example, implement a calculator just in HTML. To implement a calculator, we need JavaScript unless we're going to be making web server requests for every button we press on the calculator.

So JavaScript is what, when I'm on a website doing something and interacting with it, and it isn't necessarily communicating with the server, it's doing the work on that website or on that web browser.

Yeah. So that's the big difference between the server side and the client side programming languages. It's where does the work occur. Let's say I'm using some part of Yahoo's website, so is the work going to happen on Yahoo server or is the work going to happen here on my laptop and my web browser? If it's happening here in my laptop, it's definitely in JavaScript. If the work is happening on the server, then it's in any of those server side programming languages. And there's lots of them. They could be Python, they could be Ruby, they could be PHP, they could be Java, they could actually be JavaScript. There's versions of JavaScript for doing server side stuff too. So there's go, there's tons of different popular server side programming languages, but we only have one language really for the client side, and that's JavaScript.

And then HTML is kind of like the bare bones of a website. It isn't making it look a specific way and it isn't doing anything super dynamic in the moment. And then CSS is going to be almost like the design of it, the layout.

Yeah. And CSS I should have mentioned earlier, stands for Cascading Style sheets, but you don't need to know why it's called that. But basically the word styles in there, right? So yeah, it's for styling web pages and HTML will tell you a little bit about how the document looks in that it defines some of the structure. So for example in HTML we have a tag called P for defining a paragraph, and we have a tag called A for defining a link. But is that link going to be blue, is it going to be green? That's going to be defined usually in CSS. Is that paragraph going to be right justified? Is it going to be center justified? That's usually going to be defined in CSS. So HTML is about structure and content. CSS is about style and look and sometimes placement of location on the screen. And JavaScript is for Interactivity.

So a little while back you used the word plugins, what actually are plugins?

So plugins are programs that give additional functionality to a web browser. Ones that most of us are familiar with include Flash. A lot of people remember that, a lot of web content, for example, most streaming video sites until about five years ago used Flash to actually do the streaming video. Early versions of YouTube, early versions of Hulu, they all used Flash as a plugin to provide additional functionality, including streaming video to the web browser. Other plugins you might be familiar with, you might remember Java plugins with Java applets. Again, Java is a different language than JavaScript. So this allowed Java programs to run in a little box within your web page, which was cool in the late 90s, but there were a lot of issues with it that are kind of too much to go into right now. So there's a lot of different plugins. Nowadays there's some cool plugins for helping you shop online. So maybe you've used one of these plugins like Honey, that is able to dynamically look on the web page for the thing you're shopping for and search in its databases if there's a better price for it. Or maybe you've used a translator plugin that knows how to go and take one human language and convert it into another human language. So plugins are additional pieces of software that hook into your web browser and actually give your web browser additional powers beyond being able to just interpret HTML, CSS, and JavaScript. Cool.

So they're like programs that run alongside or along with a specific website or along the web while you're on the web browser?

Yeah, I think that's a good way of thinking about it.

Are there other important things that someone needs to understand to really know how the web works?

A lot of the other items that we covered were actually in the episode last week. How does the Internet work? I think if you put those two episodes together, you basically have the whole picture. Well, thanks for listening to us this week and we hope to see you again next week.

Thanks for listening.

Don't forget to leave us a review on Apple Podcasts overcast or your podcast player of choice. And also don't forget to like us because it really helps with us getting more exposure for the podcast. We really appreciate it. Thank you.