Browsers, HTTPS, and IP Addresses

You type a page address, press Enter, and a moment later you see a finished page. Along the way, three questions are worth asking: who turns code into an image, who keeps your password from eavesdroppers, and how does data know which computer to go to?

Web Browser

A browser is a program that downloads files from websites and displays them on the screen. The most popular browsers are Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. Each browser has a rendering engine that converts HTML, CSS, and JavaScript code into a visual page. Chrome and Edge use the Blink engine, Firefox uses Gecko, and Safari uses WebKit.

Mohamed explains: "A browser is like a scribe who reads hieroglyphs from papyrus and translates them into beautiful images on the temple wall!"

Different engines sometimes interpret the same code slightly differently, so pages are tested in several browsers. I recommend keeping two browsers with different engines installed, e.g. Chrome and Firefox.

How Does a Browser Render a Page?

Once the page files reach your computer, the engine goes through five stages:

1. Parsing HTML - the browser reads the HTML code and builds the DOM tree (Document Object Model)
2. Parsing CSS - it analyzes styles and creates the CSSOM model
3. Render Tree - it combines DOM and CSSOM into a render tree
4. Layout - it calculates the position and size of each element
5. Paint - it draws pixels on the screen

The whole process usually takes a fraction of a second. You'll meet DOM and CSSOM again in the CSS module - they decide which style goes to which element.

What Does the Browser Get from the Server?

Before the engine starts parsing, it has to know what it actually received. The server begins every response with a status line, followed by headers - short pieces of information about the delivery:

1HTTP/1.1 200 OK
2Content-Type: text/html

The first line is the protocol version (HTTP/1.1), the status code (200) and its description (OK) - you know code 200 from the previous lesson as "success". The Content-Type header tells the browser that the response is an HTML document, so it should be rendered rather than downloaded as a file. The page content itself comes after the headers, separated by an empty line. You can inspect the headers yourself: press F12, open the Network tab and refresh the page.

HTTPS - Secure Communication

HTTPS (HyperText Transfer Protocol Secure) is the encrypted version of HTTP. The difference is crucial:

• HTTP - data sent as "plain text" - anyone can intercept it. Like a messenger without protection on a dangerous road.
• HTTPS - data encrypted using SSL/TLS. Like a messenger with an armed escort and an encrypted message.

SSL is the older name - today connections are encrypted by its successor, TLS. By default, HTTP uses port 80 and HTTPS uses port 443. You can recognize HTTPS by the padlock icon in the browser's address bar. Never enter passwords or personal data on a page without the padlock! The padlock means an encrypted connection, though, not an honest website - scammers can have HTTPS too, so always check the address in the bar.

A comparison like this looks great in a table. You build a table from <tr> rows, and inside them from <th> header cells and ordinary <td> cells:

1<table>
2    <tr>
3        <th>Feature</th>
4        <th>HTTP</th>
5        <th>HTTPS</th>
6    </tr>
7    <tr>
8        <td>Encryption</td>
9        <td>None</td>
10        <td>SSL/TLS</td>
11    </tr>
12</table>
13<div>Never enter a password on an HTTP page!</div>

The first row contains column headers, which the browser shows in bold by default, and the following rows contain data. The <div> below the table is an ordinary container for the warning: it doesn't decorate anything by itself - you'll style it later with CSS. We'll cover tables in detail later in this module.

IP Addresses

Every device on a network has its own IP address (Internet Protocol), unique within that network. It's like a home address in the digital world - without it, data wouldn't know where to go.

IPv4 is the most popular format: four groups of numbers from 0 to 255, separated by dots, e.g., 192.168.1.1 or 93.184.216.34. This gives about 4.3 billion addresses - too few today.

IPv6 is a newer format with longer addresses: 2001:0db8:85a3:0000:0000:8a2e:0370:7334 - created because IPv4 addresses are running out. There are enough IPv6 addresses for every device in the world with a huge margin to spare.

The address 192.168.1.1 is an example of a private address, the kind a router hands out in a home network. It's unique in your home, but your neighbor's network uses exactly the same one.

Mohamed summarizes: "An IP address is like GPS coordinates - it points to the exact location of a computer on the network. And DNS converts an easy-to-remember name into those coordinates!"

Practice

In the editor below you'll see a list of browsers with their engines, an HTTP vs. HTTPS table with port numbers, and sample IP addresses. Add a "Browser icon" row to the table and see how the preview changes:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Browsers and HTTPS</title>
6</head>
7<body>
8    <h1>Web browsers</h1>
9    <p>A browser is a program that <strong>downloads and displays</strong> websites.</p>
10
11    <h2>Popular browsers</h2>
12    <ul>
13        <li><strong>Chrome</strong> - engine Blink (Google)</li>
14        <li><strong>Firefox</strong> - engine Gecko (Mozilla)</li>
15        <li><strong>Safari</strong> - engine WebKit (Apple)</li>
16        <li><strong>Edge</strong> - engine Blink (Microsoft)</li>
17    </ul>
18
19    <h2>HTTP vs HTTPS</h2>
20    <table border="1" cellpadding="8">
21        <tr>
22            <th>Feature</th>
23            <th>HTTP</th>
24            <th>HTTPS</th>
25        </tr>
26        <tr>
27            <td>Encryption</td>
28            <td>None</td>
29            <td><strong>SSL/TLS</strong></td>
30        </tr>
31        <tr>
32            <td>Port</td>
33            <td>80</td>
34            <td>443</td>
35        </tr>
36    </table>
37
38    <h2>IP Address</h2>
39    <p>Every device on the network has a unique <strong>IP address</strong>.</p>
40    <p>IPv4: <em>192.168.1.1</em> | IPv6: <em>2001:0db8:85a3::8a2e:0370:7334</em></p>
41</body>
42</html>

Remember: the browser is a scribe reading hieroglyphs, HTTPS is a messenger with an escort, and an IP address is the coordinates of the chamber the messenger carries the message to.