main.append(addSubHeader("What is HTTP?"));
main.append(addParagraph("HTTP requests are designed to be easily readable by humans.  They use straightforward verbs such as"));
main.append(addInsetBulletList(["GET", "POST", "PUT", "DELETE", "CONNECT"]));
main.append(addParagraph("and so on."));
main.append(addParagraph("HTTP requests are stateless so no request is linked to any other requests, including previous similar requests so, for instance, you will always go back to the start state unless there is something else, such as cookies, to preserve a session.  Although HTTP is stateless, it is not sessionless.  HTTP requests and responses can include HTTP headers and this includes cookies which are used to preserver a session.  For rxample, if you are viewing a website and you close the browser, but then revisit the website and find that the state has been preserved (which may mean that you are viewing an image you viewed previously or you are at a particular point in a LinkedIn Learning course, this is because session data has been stored in cookies which are then used to restore that session."));
main.append(addParagraph("There is other information that can be sent in a header either as part of a request or a response."));
main.append(addParagraph("Every time something happens over HTTP, such as viewing a website, updating you r contact details on facebook and so on, this always starts with a request sent to the web server (from the browser, usually) and a response sent from the web server back to the browser."));
main.append(addSubHeader("HTTP, HTTP/2 and HTTPS</h2>
main.append(addParagraph("Around three quarters of web transactions use a newer version of HTTP known as HTTP/2 but often referred to as simply HTTP.  The rest use the older version of HTTP, HTTP/1.1.  This is often because HTTP/1.1 is a fallback option, used when HTTP/2 fails.  To compare these protocols, HTTP/2 is faster and more secure.  It's faster because it compresses headers and allows for multiplexing which means that multiple files can be transmitted simultaneously over a single connection.  HTTP/1.1 does not compress headers and can only send a single file at a time."));
main.append(addParagraph("It is more secure because it requires encryption via HTTPS between the client and server.  HTTP/1.1 sends unencrypted data."));
main.append(addParagraph("It is more secure because it requires encryption via HTTPS between the client and server.  HTTP/1.1 sends unencrypted data."));
main.append(addSubHeader("HTTP Terminology</h2>
main.append(addParagraph("There are a lot of terms you will often hear used in connection with HTTP, but these are often not defined so we will do that here."));
main.append(addParagraph("main.append(addParagraph("<h3>Browser</h3>"));
main.append(addParagraph("Am application used to access and navigate between HTML documents.  It is usually a graphical UI of some kind but there are other types of browser such as text only or audio (text-to-speech) and others."));
main.append(addParagraph("<h3>A User Agent</h3>"));
main.append(addParagraph("Also referred to as a client application, it is any application that works on behalf of the user.  Usually, this will be the browser but it could also be the server, an online service such as Google and so on."));
main.append(addParagraph("<h3>TCP</h3>"));
main.append(addParagraph("Transmission Control Protocol, one of the main internet protocols used by the web, FTP, email and others."));
main.append(addParagraph("<h3>IP</h3>"));
main.append(addParagraph("Internet Protocol, the protocol used to transmit data across the internet, making use of IP addresses to do that."));
main.append(addParagraph("<h3>URL</h3>"));
main.append(addParagraph("Universal Reource Locator, a human readable address pointing to some web resource, DNS is used to convert between a URL and an IP address."));
main.append(addParagraph("<h3>HTTP</h3>"));
main.append(addParagraph("Hypertext Transfer Protocol, a client server protocol, it handles both the requests and repsonses made between a client machine and a web server."));
main.append(addParagraph("<h3>Proxy</h3>"));
main.append(addParagraph("A service that operates between the client and the server, it can be either hardware or software and is often used either to hide an IP address or when the client is behind some kind of barrier such as a firewall."));
main.append(addParagraph("<h3>Request</h3>"));
main.append(addParagraph("Always includes an HTTP verb such as GET, POST and so on, an address and a header - it may also include a payload if the client needs to send data to the server."));
main.append(addParagraph("<h3>Response</h3>"));
main.append(addParagraph("Also includes a header which contains a status code in the 100 to 500 range.  The 200 range indicates success, the 400 range indicates an error such as page not found (404) and the 500 range indicates a server error.  The header can also include instructions for caching data such as CSS, how long to store it and so on."));
main.append(addSubHeader("The HTTP Flow</h2>
main.append(addParagraph("The first step in any HTTP transaction happens when the browser opens up TCP connection to the server.  This includes transactions conducted over HTTPS (in which case TLS certificates are exchanged between the client and server to ensure that only the client and server can encrpyt or decrypt the transmitted data."));
main.append(addParagraph("Next, the browser sends an HTTP request.  This must contain an HTTP method (GET, PUT, POST and so on) and a URL.  It may also include headers which may inlcude cookies, authentication data or a payload."));
main.append(addParagraph("The server actions the request and sends a response back.  The response always includes a status message to indicate sucess or failure and the requested data (assuming the request was dealt with successfully).  There may also be additional headers."));
main.append(addParagraph("Finally, the TCP connection is closed."));
main.append(addParagraph("Typically, an HTML document will include links to other files such as CSS and JavaScript files.  Since HTTP/2 allows for multiplexing, these files can be sent simultaneously, and they are all sent over the same TCP connection.  HTTP/2 allows the server to push data to the browser so if a particular file depends on other files, these can also be sent to the browser at the same time."));
main.append(addSubHeader("Tools to See HTTP in Action</h2>
main.append(addParagraph("You can see HTTP in action in the browser window whenever you view a website, but you are only seeing the results of running the HTTP request.  To see what is going on behind the scenes, you need to get into the browser developer tools and in particular, the Network tab.  You could do this for any website, but the one used in the course video is an article on the <a href=\"https://mor10.com/gutenberg-and-the-future-of-wordpress-conditions-for-success/\">mor10.com</a> website.  We can open up the page, right-click anywhere inside the page and select Inspect.  Inside the browser developer tools, click on the Network tab.  At first, there won't be a lot shown here, but make sure that all is seelcted at the top of the developer tools and refresh the page and you should see all of the HTTP requests sent by the browser to the server."));
main.append(addImageWithCaption("./images/figure1.png", "Figure 1 - output shown under the network tab."));
main.append(addParagraph("Figure 1 shows the output under the network tab.  Note that the Developer Options have been detached from the main window.  We are only seeing a relatively small part of the output here but there is quite a lot going on."));
main.append(addParagraph("At the top, there is an html file and it shows with a status of 200 and a method of GET, so this shows that we have received a file we requested.  We can also see a lot of additional instances of a file with status 200.  If we have visited a site before and the data is cached, we would see status 304."));
main.append(addParagraph("We can also select one of these transactions to see more info and an example of this is shown in figure 2."));
main.append(addImageWithCaption("./images/figure2.png", "Figure 2 - more details on one of the JavaScript files retrieved"));
main.append(addParagraph("Again, we can see here that the file has been requested (with a GET method) and was successfully retrieved (status 200).  This is also shown in the right-hand pane along with the response headers and the request headers.  For both of these, we have the option of viewing these as raw headers as shown in figure 3."));
main.append(addImageWithCaption("./images/figure3.png\", "Figure 3 - the same output as shown in the previous image but with the headers shown in raw format."));
main.append(addParagraph("One thing we can see in the request headers which is worth noting is the user agent (User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0) which is the method by which the browser identifies itself to the server.  We can see that it also provides some details of the operating system.")); 
main.append(addImageWithCaption("./images/figure4.png\", "Figure 4 - the headers from a wiki page."));
main.append(addParagraph("Figure 4 shows the headers from a different page (the wiki page for motor racing driver Alice Powell).  This shows some details we didn’t see in figure 2 or figure 3, including the type of the server, ATS 8.0.7 (Apache Traffic Server) and a link to an image file, <strong>&lt;/static/images/project-logos/enwiki.png&gt;;rel=preload;as=image;media=not all and (min-resolution: 1.5dppx),&lt;/static/images/project-logos/enwiki-1.5x.png&gt;;rel=preload;as=image;media=(min-resolution: 1.5dppx) and (max-resolution: 1.999999dppx),&lt;/static/images/project-logos/enwiki-2x.png&gt;;rel=preload;as=image;media=(min-resolution: 2dppx).</strong>"));
main.append(addParagraph("We can also see several x-headers.  These are custom headers that tell the browser what’s going on."));  
main.append(addParagraph("You can look at any related files in this way including, if there are any, cookies so the browser tools provide a full breakdown of what happens in the browser.  However, if you need to run more in-depth tests on request and response headers, you can use a dedicated REST client."));
main.append(addParagraph("These clients include Postman, Insomnia and the VS Code Rest Client Extension which allow you to send custom request headers as plain-text and returns the responses as plain-text, so you don’t have to use the browser interface."));

addSidebar("webdev");