The Internet
HTML, CSS & JavaScript
Hyper Text Markup Language (HTML)
HTML is the code that provides details of the structure and content of a web page. Raw HTML pages were the first pages on the web and were extremely basic, usually just text with some minor formatting options to make the text appear in formats like bold or italic.
<! DOCTYPE html>
<html>
<head>
‹title>This is the page Title</title>
</head>
‹body>
<h1>This is the First Heading</h1>
‹p>Here is a paragraph. </p>
</body>
</html>
An HTML file comprises elements that wrap around pieces of content, allowing us to set how the content should look or act. Each element is wrapped in opening <> and closing </> _tags _that outline what the element should do, for example, display an image or create a link to another page.
<p>This is an example of a paragraph element used for longer text sections, with an opening paragraph tag at the start and a closing paragraph tag at the end.</p>
The combination of the opening, content, and closing tag makes up the element.
An element can also contain attributes that provide extra information. A commonly used attribute is class, a non-unique identifier that we can use to target the element for later styling or interactivity with CSS or Javascript.
<p class=”example-class”>This is an example of a paragraph element with a class attribute called example-class.</p>
The HTML file itself will start with a <head> element that contains additional elements with general information about the page, like its <title>, and any external resources it needs, like CSS or JS files. After the closing </head> tag, you’ll usually find the <body> element, which will contain all of the content rendered visible on the webpage, like the text and any images or tables.
Cascading Style Sheets (CSS)
CSS files tell the browser how a web page’s content should be styled. They contain lists of rules that are targeted to different elements of the HTML.
As an example, if you wanted to style the main heading text on the page, you would target the H1 tags:
<h1>This is our heading text.</h1>
With CSS similar to this:
h1 {
font-size: 2em;
font-weight: 800;
color: #999999;
}
The CSS above is saying, “For any H1 elements on the page, make the font size 2em, the font-weight 800, and the color #999999”.
We can also use CSS to target specific classes of each element. Using our example from the HTML section above, if we wanted to change the size of the text for the paragraph element with the class name “example-class” then we could target it like this:
p.example-class {
font-size: 40px;
}
In this case, the CSS is saying, “For any paragraph elements that are also classes of “example-class”, make the font size 40px”.
Javascript
Javascript, or JS, is a programming language that is used to add interactivity to websites, including animating images and updating sites with fresh content while we are still viewing them.
Javascript will commonly be associated with HTML elements on the page, like a button or div (a type of container element). Programmers can then write Javascript code to determine what will happen when we interact with these elements, for example, if you click the button or drag an item into a div.
$(document).on('turbo: load', function(){
$('.lesson-sortable' ).sortable({
cursor: "grabbing",
cursorAt: { left: 10 J,
placeholder: "ui-state-highlight",
update: function(e, ui){
let item = ui.item;
let item_data = item.data();
let params = {_method: 'put'};
params [item_data-modelName] = { row_order_position: item.index() }
$-ajax ({
type: 'POST'
Since Javascript is executable code, it opens up some potential security risks. We don’t want random websites to be able to run code on our machines simply! Modern web browsers prevent this by turning each browser tab into a “sandbox, “ allowing the code to run in a safe, isolated environment.
Cookies
A cookie is a small file a web server sends to a user’s web browser to help identify the web browser for future requests.
Cookies are commonly used for session management, a technical way of describing how a web server can remember if a user is signed in to their service.
A session management cookie will contain information that identifies the user to the web server when each request is sent, allowing the user to remain signed in as they use the site (otherwise, they would have to re-authenticate with the web server at each request which would be very annoying!).
Render
When our web browser has received all of the HTML, CSS, JS, cookies, images and videos, it can render the final page for us to browse.
I can get frustrated when I click a link, and it takes a while to process, but the reality of what is going on in the background is quite amazing.
What started as a research project attempting to deal with nuclear strikes during the Cold War now allows me to sit in Sweden and make request files from a server in the USA. The request will travel across undersea fibre optic cables at close to the speed of light, and then a server in the USA will receive and respond to my request by sending files back to my web browser to process and render.
And all of this happens in less than a second. So to the creators of ARPANET, Tim Berners-Lee, Marc Andresson and everyone else involved with the development of the internet and web: thank you!