Browser, server, URL and HTTP

Two computers talking

Every time you open a website, two computers talk. Your phone or laptop runs a browser (Chrome, Firefox, Safari, Edge). Far away, another computer called a server keeps the files of the website. The browser asks; the server answers.

The URL: the address of a page

A URL (Uniform Resource Locator) is the full address of one thing on the web. It has parts, and each part has a job.

https://www.irctc.co.in/nget/train-search?from=NDLS

https://          the protocol (secure HTTP)
www.irctc.co.in   the domain (which server)
/nget/train-search  the path (which page on that server)
?from=NDLS        the query string (extra details for the page)

A domain like irctc.co.in is a name people can remember. A system called DNS (Domain Name System) turns that name into an IP address, the number of the server, just like your phone turns a contact name into a mobile number.

HTTP: the rules of the conversation

HTTP (HyperText Transfer Protocol) is the set of rules for asking and answering. The browser sends a request with a method, such as GET (please give me this page) or POST (please take this form data). The server sends back a response with a status code and the content.

HTTPS is HTTP with encryption (secret code). Nobody between you and the server can read or change the data. Every real site today, especially anything with a login or payment, must use HTTPS.

What the browser does with the answer

1. It reads the HTML file and builds the page structure.
2. It sees links to CSS, JavaScript and images, and asks the server for each of them.
3. It applies the CSS to style the page.
4. It runs the JavaScript to make the page interactive.
5. It paints the final result on your screen.

Front-end developers write the files that run in the browser: HTML, CSS and JavaScript. Back-end developers write the code that runs on the server. This course is about the front end.

const address = new URL('https://www.irctc.co.in/nget/train-search?from=NDLS');
console.log(address.protocol); // 'https:'
console.log(address.hostname); // 'www.irctc.co.in'
console.log(address.pathname); // '/nget/train-search'
console.log(address.searchParams.get('from')); // 'NDLS'