Web Development Lecture Series: Introduction

Basics of what the browser does

Here we briefly describe the back-breaking work the browser does, every time you open your favorite websites.

The internet does not understand facebook.com. Yet, everything on the internet has an address. How does this work?

There is a protocol called IP, which provides a numeric address to every computer on the internet. So when you open pclub.in, your computer somehow figures out where the files for the website are stored. Here, we mean that your computer has to find out how to locate the machine storing the files for pclub.in. Here is what happens:

• Your browser talks to a machine called DNS Server, which converts pclub.in to an IP address. In this case, it is 192.30.252.153.
• This IP address is where the files are to be found. So now your computer tells the internet to provide the files placed at that location.
• The machine pointed to by the IP address above (the computer which stores the files of the website) is called the server.
• The first file to be loaded is an HTML web page. This is something which describes the structure of the page, what it contains, and what all other images etc need to be fetched.
• The browser reads the HTML file, and figures out the extra files it will need to fetch for that.
• It fetches some CSS files (for styling), some JS files (for interactive behavior), and images.
• The above files need not all be on pclub.in. I could link to some image lying at some other website’s location, and the browser would repeat the same procedure as above for that file, finding that website’s location and then getting the image.

Exploring the files being received

Here’s a simple exercise. Open a new tab in your browser, and press F12. You will see a (scary looking?) panel pop up, to your right or at the bottom. Don’t lose heart, it isn’t all that scary :) It is called Developer Tools, or related terms, depending on the context.

Now you need to click on the tab named Network in that panel. Once you’ve done that, open up pclub.in.

It would probably look somewhat like in the images below.

For Chrome:

For Firefox:

I’ll be referring to the Google Chrome image.

• Note the first entry in the list. It says pclub.in. That means that you made a request for pclub.in. You can even see when it finished in the bars on the right.
• Some css files follow that request. They are necessary for making the page look good, and provide all the styling information.
• A little down, there is an entry called pclub.png. That was a request made for the main PClub image, and as you can see, it made it to your screen.

There are plenty more files, which we don’t need to know about so soon. We urge you to give this a shot, try this yourself, and explore (Google) more on this.

Prerequisites

We’ll hope that you have some knowledge of programming, and are comfortable with using a computer.

In addition, it will be highly preferred if you are using a Linux/Mac machine. Windows imposes restrictions on things you can do, gives you no way of doing things it has no softwares for, and is not Open Source (which, Mac is not too). Nonetheless, we hope that you install SSH and SCP clients on your windows machines, so that you can copy your files to the IIT Kanpur servers and get your homepage ready. Linux users don’t need any special software in most cases (ensure that ssh command is working in your terminal).

Some softwares you should have installed for Windows (before the lecture) are:

• WinSCP
• PuTTY
• PSCP

Also, to be able to benefit from the lecture, you are strongly recommended to get your IITK Homepage directory made BEFORE the lecture. If time permits, we will cover some of that too.

Here are the Official instructions on how to make your homepage: Creating Personal Homepage. You need to look at the section saying For uploading and downloading and editing (using WinSCP).

Topics to be covered

Here’s a brief description of what this series will attempt to cover, and what those topics are.

HTML

Say you need to design a poster, how would you go about doing that?

You begin with a vague idea. Perhaps you want a title, followed by a subtitle. A title image would be good too. Some text in paragraphs, and some more images.

Note that the things which immediately come to mind describe the structure of the poster. You could later on choose to write things in a pretty font, display images to the right; or even choose to make the font size in the paragraphs larger than the title itself. This all is secondary. What you initially need to know is, what is the structure of the document.

On the web, that is precisely what HTML does. HTML, (or Hyper Text Markup Language) is a templating language, meaning that it let’s you create a template of what structure you have in mind. Displaying it nicely is a whole other matter, which we will look at later.

Here are some of the things which are preferably done in HTML, for a web page:

• Title of the page (the one which is displayed as the name of the current tab)
• Information about the web page for browsers
• The body of the webpage, which you see.
• Images in the web page
• Text in the web page
• Subdividing text into paragraphs
• Adding whitespace (newlines, spaces etc)
• Some simple styling of webpages (not recommended)
• Add links to other pages
• Quite more :)

CSS

Now suppose you need to show something in a colored font on your webpage, or you want an image to display on the right side of the webpage instead of the left.

How do you do that? Thanks to the structured form of HTML, it is possible to label and identify items in your website’s structure (maybe you need to refer to all images, maybe only the images inside a particular paragraph, who knows?). Using this, you can define rules for every particular set of items on your web page.

HTML and CSS alone form the majority of the visible part of the websites you see. The design of the pclub.in website, how google.com looks, Google’s new material design websites; most of the styling is still done in CSS (apart from some complicated, dynamic ones). CSS is what you use to design your websites, make them look pretty (or ugly if you want to), and even add some animations!

For an example, try navigating to the ‘contact’ page on pclub.in. Try hovering your mouse above any of the images, or names of the secretaries. The smooth animation you see was implemented with a few standard lines of CSS :)

JavaScript

You’ve got an idea about how to describe the structure of a document, you even know how to put some style to it. But how do you handle clicks?

One simple thing is to put links. That could open up a new page. But what if you want the click to, say, change some text on the page? Or maybe you’re making an online game, and you want it to use some buttons. Think YouTube, and how it handles the Play button. How do you describe what should happen when you click something?

Also, you’ve seen some simple animations. Did you notice the animation for We’re the PClub on the programming club website homepage? The alphabets appear one by one, after a certain time delay. How do you do that?

What about Facebook, how does it get more information when you scroll down, and display it on the same page?

What we’ve described above are actual programming challenges, not just styling and structuring problems. JavaScript is the de-facto language of the internet, and it is what helps us describe all the above actions in a way computers understand. JavaScript is in itself, a full fledged programming language, and you can do quite a bit using it. It is what makes websites responsive. These files have an extension of .js.

Node.js (and other Backend languages like PHP)

All you’ve seen till now is what is called the frontend. Everything was happening on the browser (which is called the client side). The machine hosting the website (as we mentioned in the very start) only has to send the html, css, js files to the browser, which interprets these files. Websites comprising only of that type of items are called static websites. Think of, example.com, or cse.iitk.ac.in. These websites have content which changes rarely, and is manually updated by updating the files stored on the host computer (called the server).

How about Facebook? People post thousands of images every minute, yet it does not create a separate html page for everyone every 1 second. In such cases, the server is not only sending static content (html, css, js), but is also responding to complex queries. When you log in, you send an HTTP request (google this term!) to the server, with your password. It then verifies that it is correct, and lets you in. On this, it looks up in its store of information (called the Database), and generates data to display to you. This is how you get this information. The user’s browser sends more HTTP Requests to the server, say asking for new items in your news feed. The server responds by providing that information, and the browser takes that information, and JavaScript converts that information into content you can see on your screen.

Conclusion

The above is a (fairly-long) description of the various things necessary to be known to be able to do some serious web development. Don’t worry if you don’t understand parts of it, you’ll come to know eventually, when you cover the topics in more detail. Till then, happy Googling!