Welcome!
- In previous weeks, we introduced you to Python, a high-level programming language that utilized the same building blocks we learned in C. Today, we will extend those building blocks further in HTML, CSS, and JavaScript.
The Internet
- The internet is a technology that we all use, interconnecting computers throughout the world.
- Using our skills from previous weeks, we can build our own web pages and applications.
- The ARPANET connected the first points on the internet to one another.
- Dots between two points could be considered routers.
Routers
-
To route data from one place to another, we need to make routing decisions. That is, someone needs to program how data is transferred from point A to point B.
-
You can imagine how data could take multiple paths from point A and point B, such that when a router is congested, data can flow through another path. Packets of data are transferred from one router to another, from one computer to another.
-
TCP/IP are two protocols that allow computers to transfer data between them over the internet.
-
IP or internet protocol is a way by which computers can identify one another across the internet. Every computer has a unique address in the world. Addresses are in this form:
-
Numbers range from
0to255. IP addresses are 32-bits (for IPv4), meaning that these addresses could accommodate over 4 billion addresses. Newer versions of IP addresses (such as IPv6), implementing 128-bits, can accommodate far more computers! -
In the real world, servers do a lot of work for us.
-
Packets are structured as follows:
- Packets are standardized. The source and destination are held within each packet.
- TCP, or transmission control protocol, helps keep track of the sequence of packets being sent.
- Further, TCP is used to distinguish web services from one another. For example,
80is used to denote HTTP and443is used to denote HTTPS. These numbers are default port numbers for these services. - When information is sent from one location to another, a source IP address, a destination IP address, and a TCP port number are sent.
- These protocols are also used to fragment large files into multiple parts or packets. For example, a large photo of a cat can be sent in multiple packets. When a packet is lost, TCP/IP can request missing packets again from the origin server.
- TCP will acknowledge when all the data has been transmitted and received.
DNS
- It would be very tedious if you needed to remember an IP address to visit a website.
- DNS, or domain name systems, is a collection of servers on the internet that are used to route website addresses like harvard.edu to a specific IP address.
- DNS is simply a table or database that links specific, fully qualified domain names to specific IP addresses.
DHCP
- DHCP is a protocol that assigns the IP address of your device.
- Further, this protocol defines the default gateway and nameservers your device uses.
- Now, no more about what’s outside our metaphorical envelope: Let’s look inside the envelope.
HTTPS
- HTTP or hypertext transfer protocol is an application-level protocol that developers use to build powerful and useful things through the transfer of data from one place to another. HTTPS is a secure version of this protocol.
- When you see an address such as
https://www.example.comyou are actually implicitly visiting that address with a/at the end of it. - The path is what exists after that slash. For example,
https://www.example.com/folder/file.htmlvisitsexample.comand browses to thefolderdirectory, and then visits the file namedfile.html. - The
.comis called a top-level domain that is used to denote the location or type of organization associated with this address. httpsin this address is the protocol that is used to connect to that web address. By protocol, we mean that HTTP utilizesGETorPOSTrequests to ask for information from a server. For example, you can launch Google Chrome, right-click, and clickinspect. When you open thedeveloper toolsand visitNetwork, selectingPreserve log, you will seeRequest Headers. You’ll see mentions ofGET. This is possible in other browsers as well, using slightly different methods.- For example, when issuing a GET request, your computer may send the following to a server:
Notice that this requests via HTTP the content served on www.harvard.edu.
- Generally, after making a request to a server, you will receive the following in
Response Headers:
- This approach to inspecting these logs may be a bit more complicated than need be. You can analyze the work of HTTP protocols at cs50.dev. For example, type the following in your terminal window:
Notice that the output of this command returns all the header values of the responses of the server.
- Via developer tools in your web browser, you can see all the HTTP requests when browsing to the above website.
- Further, execute the following command in your terminal window:
Notice that you will see a 301 response, providing a hint to a browser of where it can find the correct website.
- Similarly, execute the following in your terminal window:
Notice that the s in https has been removed. The server response will show that the response is 301, meaning that the website has permanently moved.
- Similar to
301, a code of404means that a specified URL has not been found. There are numerous other response codes, such as:
- It’s worth mentioning that
500errors are usually your fault as the developer when they concern a product or application of your creation. This will be especially important for next week’s problem set, and potentially for your final project! However,500errors can also be due to infrastructure issues and third party services problems.
HTML
- HTML or hypertext markup language is made up of tags, each of which may have some attributes that describe it.
- In your terminal, type
code hello.htmland write code as follows:
Notice that the html tag both opens and closes this file. Further, notice the lang attribute, which modifies the behavior of the html tag. Also, notice that there are both head tags and body tags. Indentation is not required but does suggest a hierarchy. You can download this code here.
-
You can serve your code by typing
http-server. This served content is now available on a very long URL. If you click it, you can visit the website generated by your own code. -
When you visit this URL, notice that the file name
hello.htmlappears at the end of this URL. Further, notice, based upon the URL, that the server is serving via port 8080. -
The hierarchy of tags can be represented as follows:
html code next to a hierarchy showing parent and child nodes -
Knowledge of this hierarchy will be useful later as we learn JavaScript.
-
The browser will read your HTML file top to bottom and left to right.
-
Because whitespace and indentation are effectively ignored in HTML, you will need to use
<p>paragraph tags to open and close a paragraph. Consider the following:
Notice that paragraphs start with a <p> tag and end with a </p> tag. You can download this code here.
- HTML allows for the representation of headings:
Notice that <h1>, <h2>, and <h3> denote different levels of headings. You can download this code here.
- We can also create unordered lists within HTML:
Notice that the <ul> tag creates an unordered list containing three items. You can download this code here.
- We can also create ordered lists within HTML:
Notice that the <ol> tag creates an ordered list containing three items. You can download this code here.
- We can also create a table in HTML:
Tables also have tags that open and close each element within. Also, notice the syntax for comments in HTML. You can download this code here.
- Images can also be utilized within HTML:
Notice that src="bridge.png" indicates the path where the image file can be located. You can download this code here.
- Videos can also be included in HTML:
Notice that the type attribute designates that this is a video of type mp4. Further, notice how controls and muted are passed to video. You can download this code here.
- You can also link between various web pages:
Notice that the <a> or anchor tag is used to make Harvard a linkable text. You can download this code here.
- You can also create forms reminiscent of Google’s search:
Notice that a form tag opens and provides the attribute of what action it will take. The input field is included, passing the name q and the type as search. You can download this code here.
- We can make this search better as follows:
Notice that autocomplete is turned off. autofocus is enabled. You can download this code here.
- We’ve seen just a few of many HTML elements you can add to your site. If you have an idea for something to add to your site that we haven’t seen yet (a button, an audio file, etc.) try Googling “X in HTML” to find the right syntax! Similarly, you can use cs50.ai to help you discover more HTML features!
Regular Expressions
- Regular expressions or regexes are a means by which to ensure that user-provided data fits a specific format.
- We can implement our own registration page that utilizes regexes as follows:
Notice that the input tag includes attributes that designate that this is of type email. The browser knows to double-check that the input is an email address. You can download this code here.
- While the browser uses these built-in attributes to check for an email address, we can add a
patternattribute to ensure that only specific data ends up in the email address:
Notice that the pattern attribute is handed a regular expression to denote that the email address must include an @ symbol and a .edu. You can download this code here.
- You can learn more about regular expressions from Mozilla’s documentation. Further, you can make inquiries to cs50.ai for hints.
CSS
CSS, or cascading style sheet, is a style sheet language that allows you to fine-tune the aesthetics of your HTML files.- CSS is filled with properties, which include key-value pairs.
- In your terminal, type
code home.htmland write code as follows:
Notice that some style attributes are provided to the <p> tags. The font-size is set to large, medium, or small. Then text-align is set to center. You can download this code here.
- While correct, the above is not well-designed. We can remove redundancy by modifying our code as follows:
Notice that <div> tags are used to divide up this HTML file into specific regions. text-align: center is invoked on the entire body of the HTML. Because everything inside body is a child of body, the center attribute cascades down to those children. You can download this code here.
- It turns out that there are newer semantic tags included in HTML. We can modify our code as follows:
Notice all the style tags are placed up in the head in the style tag wrapper. Also, notice that we’ve assigned classes, called centered, large, medium, and small to our elements, and that we select those classes by placing a dot before the name, as in .centered You can download this code here.
- It turns out that we can move all our style code into a special file called a CSS file. We can create a file called
style.cssand paste our classes there:
Notice that this is verbatim what appeared in our HTML file. You can download this code here.
- We then can tell the browser where to locate the CSS for this HTML file:
Notice that style.css is linked to this HTML file as a stylesheet, telling the browser where to locate the styles we created. You can download this code here.
Frameworks
- Similar to third-party libraries we can leverage in Python, there are third-party libraries called frameworks that we can utilize with our HTML files.
- Bootstrap is one of these frameworks that we can use to beautify our HTML and easily perfect design elements such that our pages are more readable.
- Bootstrap can be utilized by adding the following
linktag in theheadof your html file:
- Consider the following HTML:
Notice how, when looking at a served version of this page, it’s quite plain. You can download this code here.
- Now consider the following HTML that implements the use of Bootstrap:
Notice how much prettier this website is now. You can download this code here.
- You can learn more about this in the Bootstrap Documentation.
JavaScript
- JavaScript is another programming language that allows for interactivity within web pages.
- Consider the following implementation of
hello.htmlthat includes both JavaScript and HTML:
Notice how this form uses an onsubmit property to trigger a script found at the top of the file. The script uses alert to create an alert pop-up. document.querySelector('#name').value selects the textbox with the id name on the page and obtains the value typed by the user. You can download this code here.
- Generally, it’s considered bad design to mix onsubmit and JavaScript. We can advance our code as follows:
Notice that this version of the code creates an addEventListener to listen to the form submit being triggered. Notice how DOMContentLoaded ensures that the whole page is loaded before executing the JavaScript. You can download this code here.
- We can advance this code as follows:
Notice that the DOM is dynamically updated in memory as the user types out a name. If there is a value inside input, upon the keyup on the keyboard, the DOM is updated. Otherwise, default text is presented. You can download this code here.
- JavaScript allows you to dynamically read and modify the html document loaded into memory such that the user need not reload to see changes.
- Consider the following HTML:
Notice that JavaScript listens for when a specific button is clicked. Upon such a click, certain style attributes on the page are changed. body is defined as the body of the page. Then, an event listener waits for the clicking of one of the buttons. Then, the body.style.backgroundColor is changed. You can download this code here.
- Similarly, consider the following:
This example blinks a text at a set interval. Notice that window.setInterval takes in two arguments: A function to be called and a waiting period (in milliseconds) between function calls. You can download this code here.
- Consider the following implementation of JavaScript that autocompletes text:
This is a JavaScript implementation of autocomplete. This pulls from a file (not pictured here) called large.js that is a list of words. You can download this code here.
- The capabilities of JavaScript are many and can be found in the JavaScript Documentation.
Summing Up
In this lesson, you learned how to create your own HTML files, style them, leverage third-party frameworks, and utilize JavaScript. Specifically, we discussed…
- Internet
- Routers
- DNS
- DHCP
- HTTPS
- HTML
- Regular expressions
- CSS
- Frameworks
- JavaScript
See you next time!