Before we’ve spoken about How Does the Internet Work? In this lesson, I want to talk about how exactly does Websites work.
And you would likely have come across these types of files or these words before because they’re so common and they’re so integral to how web sites work. But what exactly do they do, and why are there so many different types of files? Why can’t we have one file that’s you know a website?
Well, they actually have very different jobs.
The HTML code file is responsible for the structure of your web site. If a Web site were a house, then the HTML would be the builder who would come in to build the walls or put in a toilet.
Basically, they establish the structure of your house, and when you write HTML code, you also build up the structure of your website so you could use the amount add an image or button or text box whatever it is that you need in your website.
Now the second type of file or CSS files and these files are responsible for styling your website. So, if you are building a house, then this would be the painters and decorators; they would be going around painting the walls or adding stylistic flourishes to your place and generally making the place look the way that you want it to.
And that’s exactly what CSS code does as well. When you incorporate CSS, it allows you to specify how you want your Web site to look. So you could say that yes, I have a button that I got from my HTML but that button I want it to be red, and I want the text to be white, and I want the font of the text to be an aerial that is all done using CSS code.
If we take the Google web site as an example, again, once we receive these files from Google’s server when our browser loads up the HTML files, get to see the website’s structure. Namely, there’s one image which has their logo. There are two buttons, and there’s a text box where we can enter our search.
Now when we receive the CSS files, then that will modify the appearance of all of those components. We don’t have any more buttons or any more images, but they now look the way that Google wanted it to.
Now the knowledge we’ve already acquired, we can already start messing around with web sites on the internet. So, open up chrome and head over to techcrunch.com. And if you’re not familiar with it, it’s basically a technology news website where I get my latest tech news.
Now once you’re over here, I want you to right-click on the title here (***Photo) and click on inspect.
Now, this brings up the chrome developer tools, and we’re going to be exploring this in a lot more detail. But for now, we’re going to use it to do something really simple. You can see that when I right-click on that heading and click inspect, it automatically opens up the entire code file that was used to render this website.
So, these are all of the elements that make up this Web site. And when you click on inspect it will highlight to you the part of the code that corresponds to the thing that you right-clicked. In this case, it’s this title. And inside this title, you can see that there is a link, which means that when you click on it. It’ll go to another web page, but it’s also got a bit of text.
If you double click on the bit of text that corresponds to the title, you can actually edit it right inside chrome developer tools. Let’s go ahead and change the front page of tech crunch.
Let’s say something like this; this is an excellent way of pranking your friends, especially when they can see that you’re on TechCrunch.com. And the title of any of the text on the Web site is what you wanted to say and this is a great joke to play on friends who are maybe not quite as technologically advanced as you because they haven’t taken the course that you have.
Now, unfortunately, when I hit refresh on this website, all of my good work is gone. And the reason is that when I’m editing it here inside my browser I’m actually changing the local copy of this file that I got back from the Google servers, but when I click refresh then that makes a new request to the Google servers to load up a fresh copy of the Web site. So, of course, then an update to the original content.
So, all of that and more. I’ll see you in the next lesson.
Featured Image: dailydot.com