Introduction
We’ve all used the internet (and are doing so, even as we speak), but have you ever paused to consider how it all came to be? How do websites and applications find their way onto your device?
This week will tackle just how sites and devices interact with the internet, and explore the languages and protocols involved in creating a static website.
Let’s break down Week 8.
So How Does the Internet Work?
In order to understand how websites operate and how data is transferred across the vast, invisible web that is the internet, we’ll need to take a closer look at the role of routers, DNS, and HTTP.
Routers
Let’s take a more in-depth look into how data is transferred across the internet.
Assume we needed to transfer some data, say an image, from point A to point B. Routers are the technology that allow this data transfer.
However, one thing to consider is what if one route gets jam-packed, busy, and extremely slow. To solve this potential issue, pathways are designed such that if one or two are unavailable, data can flow through a different route.
Think about this concept of multipath routing like a parallel circuit.
Much like with string lights (which use parallel circuits) even if one pathway or bulb fails, the rest will still run. In the same way, if one route fails, that data can simply access another one.
Moving onto the two main protocols responsible for this transfer of data:
IP or internet protocol
Think of IP like an identification system for computers. Each device has a unique set of four numbers ranging from 0 to 255, separated by periods.
For instance, 12.0.56.123 could be an example of an IP address.
While IPv4 is 32-bit and can accommodate over 4 million devices, IPv6, its 128-bit counterpart can take up to… well, 2^128, which is to say a lot more.
TCP or transmission control protocol
This protocol is used to assign port numbers to different web services, like HTTP and HTTPS, in order to differentiate between the two.
TCP/IP send their respective port numbers and IP addresses when information is sent across the internet, and then break large files into packets, which are like puzzle pieces of the larger data. These protocols may also help retrieve missing packets when they get lost!
DNS
Remember how each device has a specific IP address–well, imagine having to memorize that address each time you want to visit Google or YouTube. That’s where DNS comes in handy.
DNS or domain name systems map website domains like google.com to specific IP addresses so you don’t have to!
HTTP
HTTP is just short for the mouthful that is hypertext transfer protocol, which, in short, helps developers build applications.
How so? HTTP (and HTTPS, which is just a “secure” version of the former) are protocols that allow the browser and website to communicate and send data to and from one another.
In specific, HTTP uses the GET and POST requests to obtain information from a server.
As you can imagine, GET retrieves data from the server while POST sends data to the server.
Sometimes, as you’ve probably noticed before, websites throw response codes–this is also the work of HTTP:
200 OK 301 Moved Permanently 302 Found 304 Not Modified 304 Temporary Redirect 401 Unauthorized 403 Forbidden 404 Not Found 418 I'm a Teapot 500 Internal Server Error 503 Service UnavailableWe can also manually harness the power of commands by, in the terminal window, asking the server to GET information about our query “cats” from google.com.
GET /search?q=cats HTTP/1.1 Host: www.google.comHere, q stands for query and ? signifies user input.
HTML
Not so surprisingly, HTML is another abbreviation, standing for hypertext markup language.
In HTML, you’ll encounter tags, like <html></html>, which can be modified by certain attributes, like lang=“en”, in the case below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>hello, title</title>
</head>
<body>
hello, body
</body>
</html>
Just how it’s important to write code with good design in languages like C and Python, in HTML, indenting your tags helps readability.
HTML also offers other tags including:
<head>Defines the head section in an HTML document
<title>Defines the title of the document and what appears in the browser title bar
<body>Defines the main body section in an HTML document (where most of your content will be)
<p>Provides an area for text to be written
<h1> … <h6>Headings for text, which can be useful for chapters, sections, subsections
Comes in 6 different styles, <h1> being the most important and <h6> being the least
<ol> <li><ol> creates an ordered list
<li> creates a list item within the ordered list, which can have anything from text to images within
<table> <tr> <td><table> creates a table
<tr> creates a table row
<td> stands for table data, within which data can be stored in individual cells
<img>Allows for image creation
Attribute alt gives the image a name or brief description when hovered over
Attribute src holds the file path where the image file is stored
<video>Allows for video creation
Attribute width defines the width
<a>Anchor tag that creates a clickable link
Attribute href stores the link to another page
<meta>Stores information about the HTML file
<form> <input> <button><form> can either take input or post data through the action attribute
<input> retrieves user input
<button> adds a clickable component to submit the form
Note that most of these tags, excluding <img>, <meta>, and <input>, also require a closer tag, which is the same as the opener except with a prepended forward slash like </body>.
CSS
While HTML lays the groundwork for a web application, CSS or cascading style sheet, is ultimately what makes these documents visually appealing and presentable.
Luckily, this markup language is much easier to understand and implement than perhaps any other language CS50 has worked with so far–it’s just a matter of assigning a value to some attributes.
For instance, we can change the font-size and text alignment within a <p> tag using the style attribute.
<p style="font-size: medium; text-align: center;">
Welcome to my home page!
</p>
Furthermore, if a style is applied to a tag, all the other tags within that larger tag (shown by indentation) also receive that attribute, which improves our program’s design.
<!DOCTYPE html>
<html lang="en"> <head> <title>css</title> </head> <body style="text-align: center"> <div style="font-size: large"> Lorem ipsum </div> <div style="font-size: medium"> Welcome to my home page! </div> <div style="font-size: small"> consectetur adipiscing elit. </div> </body> </html>
Note that <header>, <main>, and <footer> are used to divide up the main body more descriptively.
Although placing the style attribute next to a tag does work, it’s not necessarily ideal. CSS and HTML are usually isolated from one another so that things like collaboration and readability are improved.
In a new file called style.css, we can write the following code…
.centered { text-align: center; } .large { font-size: large; } .medium { font-size: medium; } .small { font-size: small; }
<!DOCTYPE html>
<html lang="en"> <head> <link href="style.css" rel="stylesheet"> <title>css</title> </head> <body class="centered"> <header class="large"> Lorem ipsum </header> <main class="medium"> Welcome to my home page! </main> <footer class="small"> consectetur adipiscing elit. </footer> </body> </html>
Firstly, we’ve used this dot notation before the variable name of our css style. In the main HTML file, style.css is connected using the <link> tag, and the styles are accessed via the class attribute, which is assigned to the variable name we gave each style!
Bootstrap
Bootstrap is something called a framework, similar to libraries in Python, that bring third-party code into our HTML file.
This specific framework is popular for its simplicity in helping make HTML pages that are visually pleasing, and can be linked to your document using the <link> tag.
JavaScript
So we’ve got the backbone of our web application using HTML and the aesthetic element thanks to CSS… but JavaScript is what makes an application or website dynamic and interactive.
Much like how we used a <style> tag for CSS, JavaScript makes use of the <script> tag.
JavaScript can aid developers in:
Creating variables
Evaluating conditionals
Creating loops
Creating functions
Listening for specific user actions or inputs and dynamically modify the document
Geolocating (finding the precise location of the device)
For more information on the syntax, consider taking a look at the JavaScript Docs!
Final Thoughts
From Python to SQL, and now HTML, JavaScript and CSS, it seems as though we’re slowly but surely gathering the building blocks necessary to develop our own web application.
This was Week 8!
Comments