 In the early days of the internet, the only applications you could do were things like email and SSH and FTP, but then the worldwide web was born. And what the web essentially allows you to do is transfer files easily from one computer to another. Now, these files are what make up web pages. The web page itself is an HTML file, typically, and that file will contain references to other files like images and links to other websites. And so what I'd like to do is give you an inside look of how the worldwide web works, wow, that's four W's. And we'll also take a look at HTML, which is the language behind the web. One of the great things about the web is that it's open and anyone can see what's behind the scenes and learn about how to make it and also go on and make your own website. We'll do some of that in the lab this week as well. So let's get started at our inner look of the worldwide web. Well, the next topic I'd like to look at is a URL or this giant web address that appears at the top of your pages when you're browsing them. You should know what the different parts of the URL are. In fact, here's parts listed right here at the top. Typically what you have in a URL is the protocol first. HTTP stands for Hypertext Transfer Protocol or the protocol of the worldwide web. But there's other protocols such as FTP, which is a file transfer over SSH or Samba or, well, you'll look at others when you get into the networking course. After the protocol, you have the domain or the host name of the machine, the web server you're connecting to. The domain is read from right to left. The top level domain is .edu in this case and Cornell is registered under the edu domain. With a domain like Cornell.edu, you can have subdomains, in this case, library, which also has a www subdomain. Everything after the slash is the file on the server that you want to download. And just like we learned about path names last week in the operating system chapter, it works exactly the same way. There's a preservation folder, and in that folder, it's a digital.html file. Let's go back because there are a couple other examples that were interesting. So here's one from Moz.com. It identifies the subdomains in a different color than the root domains and the top level domains like .com and .edu. And also subfolders like climate or global.html. This is a file extension, just like in a normal file system. But the nice thing about a URL is that it can be the address of a file on another computer's file system. And you don't have to worry about the details of which hard drive is that on, or maybe it's even on a floppy disk, who knows. The only thing you care about is go to this server, and under that server, there's the directory climate and the file global.html, .htm. I don't know why I keep saying .html, it must be a habit. So those are the parts of the URL you should be familiar with. And again, the whole purpose of a URL is to have a uniform resource locator, a way to find files on another machine that you don't have control over the file system. One of the greatest things about the internet is that it's very easy to look behind the scenes. Let me show you an example. I'm going to open a new tab and go to the home page for CS101. And on any page of the internet, in whatever browser you have, you can usually right click that page and view the source of the page. This is the code that generated this visual web page. So in other words, when I typed in this URL in my browser, it went to this server and asked for this file in the file system. Well, here is the file. It's HTML code. Now I'm not going to teach you a lot of HTML in this class, but you should have a basic idea of how it works. And again, you can visit any website and look at its HTML to learn more about it. For example, I have this font size equals plus two and strong, that means bold. And here is CS101 Introduction to Computer Science. That's in a div tag aligned center of the screen. In other words, the text right here came from this code right here. The way HTML works is it's a markup language. That's what the ML stands for, hypertext markup language. So for example, I might write a paragraph like this and then mark it up by putting it inside of a p tag, p is for paragraph. These symbols here with a less than and greater than sign are called tags. For example, I have a strong tag that takes this text welcome to CS101 and puts it in bold. I also have what's called an anchor tag. An anchor is how you make a link. So this anchor has a reference or a hypertext reference to index.html. That's actually my home page. That's how it's under the dot dot or the parent directory. Or maybe I want to make a link to the website csprinciples.org. And the text for that link is apcsprinciples. So going back to the web page, you can see how that becomes a link. In the source, I mark this text up apcsprinciples and in the markup I have the link to that text. These other things like list items and images. So here's the cs.png. If I click on that, it will show me that image. And basically I give it a width and a height and a style. And that's what puts the image on this right hand side of the screen. So again, I'm not expecting you to learn HTML in this course. I expect a number of you have learned some HTML in your high school courses, whether computer science or business or whatever you've taken. But you should have a basic idea that every website is built using HTML. If you want to learn HTML, there's a really nifty site called W3Schools. And they have a series of online tutorials where you can teach yourself all of the web technologies including HTML, CSS, and some JavaScript, for example. Now if you really want to see what's going on, I should show you how to use the development tools in a web browser. Both Chrome and Firefox have what's called developer tools. In Chrome, you can access them by going under the menu to tools. Let me resize the window so it's actually visible. And under tools you have developer tools. When you open the developer tools, they end up giving you this menu of things on the bottom. And I'll send you a tutorial link to learn some of these tools, but most of them are beyond the scope of this class. The first tool is elements, and that actually shows you the source of your web page on the bottom. And as you mouse over different aspects of the web page, it will highlight in the document what they correspond to. So for example, I have a table here, and this table has a picture and the text on the right. If you click the triangle, you can expand different parts of the table. So for example, I have a table column here and a table column here. Now again, this is really sophisticated, and I don't expect you to understand every little detail about how the styles are defined and what the different tags mean. But one thing you can do, and perhaps you didn't realize, is if you don't like the way a web page looks, you can just change it. Let me right click this table column and click delete node. Now it's gone. The web is alive. You can actually change anything once it's in your web browser. Now I didn't change this program on the website. If I hit the reload button, that will come back, right? If I reload the image from the web server. Once I have my own copy, I'm free to do whatever I want to it. So maybe I want to come here, and instead of saying welcome to CS 101, I can say welcome to the best class ever. And you'll see how that actually changes the web page in place in my browser. It's incredibly empowering to be able to make edits. For example, I often want to print driving directions from one place to another if I'm not going to have GPS or my phone on me. And sometimes it's going to span across two pages. Well, if that happens, I can bring up the driving directions. And with the Chrome developer tools, I can just delete the first 10 or 15, which are getting from my house to the freeway. And then I have my printout all in one sheet of paper. You might think of other reasons why you might want to edit a web page. I'll leave that up to your own imagination. Another thing to look at in the developer tools is this network tab. Now, network is interesting because it shows all of the different file requests going to the server. When I went to get this page index.html, that was the first file it got. And here you can see the source of that file. But you'll also see a timeline, or this is called the waterfall diagram, that shows at what point in time this page was fetched. So first I went and got index.html. And you'll see inside of index.html it references a style sheet, style.css. Well, that was the second file that the web browser requested from the server. And it started requesting it about 10 milliseconds after the first one. It took four milliseconds to wait to get the response, and then it only took about, well, less than a millisecond to download that file over the network. You'll notice the next picture, or sorry, the next file that was requested was this image file. And then this little PDF icon next to core syllabus, followed by the poster icon and the world icon. The picture of me, and app.png, I guess that's right here next to my home page. And finally, the png file that was this picture itself. So the network tab and the developer tools allows you to see all the different files that comprise a web page, and in what order they were requested, and how long it took to get a response from the server. There's some other things that you can do with the web tools, and we'll learn about them in the lab on Friday. But I basically wanted you to see going to any website, like JMU.edu, the list of all the different files that were copied from the web server to the web browser. Again, all the worldwide web does is make it easy to transfer files from one computer to another, and a browser will actually take all of those files, including this one, and this one, and this one. And it might do things like every five seconds change what they look like in the actual web page. You may not have realized all the different little image files that go into the course design to make it look like one picture of something. But it's fun to be able to pick it apart and see, especially as you're looking at a timeline, how long it took to load each image. And as a developer, this helps you understand, okay, there's the bottleneck, I need to improve that image so that the entire page loads faster. So that's a little look behind the scenes at how the internet works. Well, let's see if I can find something that I'd like to delete on this page. Let's delete the slideshow, much better, right? So next time something bothers you on the internet, you can just delete it by going into the Chrome web tools.