Modern Web Design

HTTP

HTTP is an incredibly simple text-based protocol for fetching resources from web servers. From root shell, you can see the request by standing up any text-based server on TCP port 80, the default HTTP port:

nc -l 80

If you then surf to http://localhost/foo/bar, you should see this request arrive:

GET /foo/bar HTTP/1.1
Host: localhost
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8
Cookie: FOO=BAR

You can respond with:

HTTP/1.1 200 OK
Content-Type: text/plain
Content-Length: 3  

OK!

The ASCII headers continue until a blank line, where it switches over to the content. So this should show up an OK! in the browser.

JavaScript

JavaScript is the usual way to add interactivity to web pages. JavaScript is not related to Java, except in that back in the 1990's both were used to script web pages. Java on the web subsequently died out due to persistent security holes.

Press F12 in any major browser to open the JavaScript debug console. You can enter JavaScript code directly, and interact with stuff on the page. The simplest is to pop up a dialog box:

alert("Hi!");

Or you can change the title of this page like this:

var x=document.getElementsByTagName("h1")[0];
x.innerHTML="wuz here";

Here "x" is a variable storing a handle to the DOM node object representing the headline.

Cookies

A cookie is a short string sent to the server along with each web request. Cookies can be set by the server via HTTP Set-Cookie header, or by javascript code on the client. The browser only sends cookies back to the server that created them, but since any page can source javascript from any server, most of the ad networks use these "third party" cookies everywhere.

On your localhost page, set a cookie in the JavaScript console:

document.cookie="FOO=Barzo;";

The big advantage of cookies is that you don't need to repeatedly log in to Facebook every time you visit a link. But there are many other places this can cause huge problems:

Malware JavaScript from a banner ad can stretch a huge invisible "like" button across any random page, and silently forward your first click to Facebook, which will accept them because your browser helpfully forwards Facebook's "presence" cookie along with any request to Facebook. The same sort of clickjacking can buy products on Amazon, or perform any one-click action in a web service.
A phishing scam email can include a link that performs any one-click action. The browser will again forward all cookies as it follows the link.
On any web page, a tiny invisible 1x1 pixel image like <img src="https://192.168.1.1/admin/reset_dns_server.htm?new_dns_server=12.34.56.78&user_confirm=yup"> can subvert your browser to attack your home internet router from inside your network, in this case spoofing a request to change your DNS server to one the attacker controls. Again, the browser will happily forward saved login credentials or session cookies, even if you last looked at your router several years ago. The attacker does need to guess your internal IP address.
A <script src="https://gottatrackem.all/tracker.js"> tag will send the tracker's "third-party" cookies back to the tracking server from anywhere. Google Analytics uses cookies named "utm" to track you across the web.

Web services need to be structured to prevent Cross-Site Request Forgery, for example by passing along an unguessable random session token in legitimate sessions, and checking the HTTP Referer field.

Cookies were explicitly called out in a 2002 EU privacy directive requiring informed consent, hence the annoying "This website uses cookies, press OK" popups everywhere. (Although ironically, that EU government page that explains the cookie requirements itself appears to use Pikwik tracking cookies without user consent.)