Lecture 7 - CS50's Computer Science For Lawyers
Lecture 7 - CS50's Computer Science For Lawyers
OpenCourseWare
Donate (https://cs50.harvard.edu/donate)
Lecture 7
HTML
Lists
Headings
Links
Languages
Images
Tables
Document Object Model
Forms
Querying With Google
CSS
CSS in an Attribute
CSS in an HTML File
CSS in its Own File
JavaScript
Saying Hello
Changing Backgrounds
Changing Text Sizes
Returning Location
HTML
When we visit a URL, we’re requesting a file from a web server.
This file is written in HTML, or Hypertext Markup Language, which the browser is able to understand.
Instead of having functions, loops, or conditionals like a programming language, HTML is a markup
language with tags.
These tags tell the browser when to start doing something and when to stop doing something.
Let’s write some code inside index.html .
<!DOCTYPE html>
<html>
<head>
<title>hello, title</title>
</head>
<body>
hello, body
</body>
</html>
<!DOCTYPE html> indicates to the browser that this file is written in HTML.
<html> is a start tag or “open” tag, while </html> is an end tag or “close” tag.
<!DOCTYPE html>
<html>
<head>
<title>paragraphs</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in tinc
<br>
Ut tempus rutrum arcu eget condimentum. Morbi elit ipsum, gravida fauci
</body>
</html>
To get a space between two paragraphs, we might surround each paragraph the <p> and </p> tags,
where p stands for paragraph.
<!DOCTYPE html>
<html>
<head>
<title>paragraphs</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in
</p>
<p>
Ut tempus rutrum arcu eget condimentum. Morbi elit ipsum, gravida f
</p>
</body>
</html>
Lists
To create an unordered list, we can use the tags <ul> and </ul> to surround our list. To create an
ordered list, we can use the tags <ol> and </ol> instead.
For each list item, we can surround it with <li> and </li> tags.
Suppose we wanted an unordered list with foo, bar, and baz.
This is what our code might look like:
<!DOCTYPE html>
<html>
<head>
<title>list</title>
</head>
<body>
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
</body>
</html>
Note that with an ordered list, if we wanted to add or remove an item, we can simply add or delete a
list item. The browser will take care of the numbering of each item for us.
Headings
In HTML, we can include some styling with heading tags.
We can surround text with heading tags: <h1> and </h1> , <h2> and </h2> , <h3> and </h3> ,
<h4> and </h4> , <h5> and </h5> , and <h6> and </h6> .
Let’s explore how each tag styles the text. Here is some code, and below is the output. We might note
that as we go from h1 to h6 , the text remains bold but becomes smaller and smaller.
<!DOCTYPE html>
<html>
<head>
<title>headings</title>
</head>
<body>
<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
<h5>Five</h5>
<h6>Six</h6>
</body>
</html>
Links
To link another webpage, say https://www.harvard.edu, on our webpage, we use <a> and </a> tags,
or anchor tags. Additionally, we must provide a reference, or the link we’d like to follow, and we can
pass this in as an attribute of the anchor tag.
Attributes modify the behavior of the tag it is passed into.
The attribute for providing a link is named href , so we pass in the key-value pair, href =
"https://www.harvard.edu/" , to the anchor tag.
<!DOCTYPE html>
<html>
<head>
<title>link</title>
</head>
<body>
Visit <a href="https://www.harvard.edu/">Harvard</a>.
</body>
</html>
Note that within our anchor tags, we have the word “Harvard,” which users will click to access the link
that we have specified.
Phishing can potentially occur via this construction, where Person A might try to “socially
engineer” Person B to click a certain link. Person B believes that this link is taking them
someplace, but actually, this link is taking them someplace else.
For example, if we had written Visit <a
href="https://www.harvard.edu/">PayPal.com</a>. instead, the page would look like
this:
Languages
In the beginning of the file, we have a tag that indicates the start of our HTML file, or <html> . We
can pass in an attribute to this tag to specify the language of this file. This is particularly useful when
a browser is attempting to translate a page, as it will know what language the page currently is in.
For example, we could write <html lang="en"> to specify that this webpage is in English.
Images
To include an image, we can use the <img> tag and pass in an attribute that specifies the image we
would like. For example, if our image was named cat.jpg, we can pass in the key-value pair
src="cat.jpg" .
Additionally, we can pass in another key-value pair that provides a placeholder for the image. To do
this, we can add alt="Grumpy Cat" as an attribute of the <img> tag.
Our code might look like this:
<!DOCTYPE html>
<html>
<head>
<title>image</title>
</head>
<body>
<img alt="Grumpy Cat" src="cat.jpg">
</body>
</html>
Tables
To create a table in HTML, we first specify that we want a table using the <table> tags. Within the
start and end of the table, we would like rows, which can be specified by <tr> tags. Within the start
and end of each row, we would like some data, which can be specified by <td> tags.
For example, to create a representation of a phone’s numberpad, we might write this code:
<!DOCTYPE html>
<html>
<head>
<title>table</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>*</td>
<td>@</td>
<td>#</td>
</tr>
</table>
</body>
</html>
In the code for this table, there are many HTML elements, which include everything from a specific
start tag to its end tag.
These HTML elements form a tree, and we can see this by looking at the indentations of the code.
Inside of the table element, there are 4 table row elements. If we consider the table element to
be the node, then it has 4 children.
Inside each table row element are 3 table data elements. If we consider the table row element
to be the node, then each has 3 children.
At the top of this tree, we have document , which contains everything in the file.
The only child of document is html . html has two children, head on the left and body on
the right.
Inside head , we see the title element. However, inside the title element, there are no
elements, only a value. We’ve denoted this value with a different shape on the tree. Since the
title element does not contain any more elements, it is considered a leaf of this tree.
Inside body , there are no elements, only the “hello, body” value. The body element is also
considered a leaf of this tree.
Forms
To create a form that can ask the user for information, we can use the <form> and </form> tags.
To ask the user for input inside these forms, we can use the <input> and </input> tags.
The <input> tag has many possible attributes:
The type attribute specifies what type of input we want the user to provide. If the type is
text , then the user will be able to type into a box. If the type is submit , then the user will be
able to click a button.
The placeholder attribute specifies the text that will appear in an input box before user
input.
The value attribute specifies the text that will appear on the submit button.
Our code might look like this:
<!DOCTYPE html>
<html>
<head>
<title>search</title>
</head>
<body>
<form>
<input placeholder="Query" type="text">
<input type="submit" value="Search">
</form>
</body>
</html>
Let’s try to fix our “Search” button so that it returns a Google Search.
When the user submits our form, we want to go to that base URL, or https://www.google.com/search.
We can write this in code by passing in an action attribute to the <form> tag.
We would also like to append the query to the end of that base URL. Thus, we need a key-value pair,
where the key is the input name. To denote the input name, we can give that specific <input> tag a
name attribute, where the name is “q.”
<!DOCTYPE html>
<html>
<head>
<title>search</title>
</head>
<body>
<form action="https://www.google.com/search">
<input name="q" placeholder="Query" type="text">
<input type="submit" value="Search">
</form>
</body>
</html>
Additionally, we can add other attributes to the <input> tags. For example, we can turn
autocomplete off to ensure that the user must type their query entirely each time. We can also set the
box to autofocus, in which case the box is immediately selected upon loading the page.
Our code might look like this:
<!DOCTYPE html>
<html>
<head>
<title>search</title>
</head>
<body>
<form action="https://www.google.com/search">
<input autocomplete="off" autofocus name="q" placeholder="Query" ty
<input type="submit" value="Search">
</form>
</body>
</html>
CSS
There are many other tags in HTML. For example, we can indicate the header of a webpage with the
<header> tag, the main portion of the webpage with the <main> tag, and the footer of the
webpage with the <footer> tag.
<!DOCTYPE html>
<html>
<head>
<title>css</title>
</head>
<body>
<header>
John Harvard
</header>
<main>
Welcome to my home page!
</main>
<footer>
Copyright © John Harvard
</footer>
</body>
</html>
Note that © is an HTML entity. The computer recognizes this as the copyright symbol and
displays that symbol on the webpage. The ; afterwards denotes the end of that HTML entity.
Opening this file in a browser, we see this:
CSS in an Attribute
To introduce styling, such as positioning, sizes, fonts, and colors, we need another language, namely
CSS, or Cascading Style Sheets.
If we want to change the style of a certain element, we can add an attribute to that element named
style . Then, as the value, we can include styling, which follows a specific syntax. CSS requires that
the styling syntax be a keyword (like “font-size”), a colon, and then a value (like “medium”).
For example, we can change the header element to have a large font size by writing <header
style="font-size: large"> . Similarly, we can change the main element to have a medium font
size, and the footer element to have a small font size.
Additionally, if we want every HTML element within the body element to be centered, instead of
adding that tag to each element within body , we can simply add style="text-align: center"
to just the <body> tag. This will affect all elements within the body element.
Our code might look like this:
<!DOCTYPE html>
<html>
<head>
<title>css</title>
</head>
<body style="text-align: center">
<header style="font-size: large">
John Harvard
</header>
<main style="font-size: medium">
Welcome to my home page!
</main>
<footer style="font-size: small">
Copyright © John Harvard
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body
{
text-align: center;
}
header
{
font-size: large;
}
main
{
font-size: medium;
}
footer
{
font-size: small;
}
</style>
<title>css</title>
</head>
<body>
<header>
John Harvard
</header>
<main>
Welcome to my home page!
</main>
<footer>
Copyright © John Harvard
</footer>
</body>
</html>
Opening this file in a browser will have the same result as including style tags in each HTML
element.
Additionally, we can create classes, or collections of properties. For example, we can make a class
named “centered”. Inside this class, we can include the property text-align: center .
Now, for every HTML element that we want to have these properties, we can give them the attribute
class="centered" . Since we can use these for multiple elements, classes are considered reusable.
For our program, if we use classes instead, our code might look like this:
<!DOCTYPE html>
<html>
<head>
<style>
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
</style>
<title>css</title>
</head>
<body class="centered">
<header class="large">
John Harvard
</header>
<main class="medium">
Welcome to my home page!
</main>
<footer class="small">
Copyright © John Harvard
</footer>
</body>
</html>
.centered
{
text-align: center;
}
.large
{
font-size: large;
}
.medium
{
font-size: medium;
}
.small
{
font-size: small;
}
In our HTML file, we can “link” the CSS file in the head by including this line: <link
href="css3.css" rel="stylesheet"> .
This tag link tells the browser to link this HTML file to another file called css3.css . The
rel="stylesheet" part simply states that the relationship between css3.css and our HTML file
is that css3.css is the style sheet.
The browser will copy-paste the contents of the CSS file as though it were at the top of the
page.
We can reuse this CSS file by linking it to multiple HTML pages. Browsers exploit this property—if a
browser realizes that a webpage we visit has the same CSS file as another, it will only download the
file once.
This saves the user time because we no longer have to wait for the file to be downloaded.
This saves the website bandwidth because it doesn’t have to download the same file twice.
Our HTML file might look like this:
<!DOCTYPE html>
<html>
<head>
<link href="css3.css" rel="stylesheet">
<title>css</title>
</head>
<body class="centered">
<header class="large">
John Harvard
</header>
<main class="medium">
Welcome to my home page!
</main>
<footer class="small">
Copyright © John Harvard
</footer>
</body>
</html>
JavaScript
JavaScript is a programming language that allows for functions, conditions, boolean expressions,
loops, and more.
JavaScript allows websites to be changed after a user has already downloaded it via the virtual HTTP
envelope.
For example, any time we receive a message in Gmail, we get a new row in the table of emails.
We do not have to reload the webpage to see these updates.
How might the site change? After receiving some simple HTML page, the browser loads the HTML
into memory via the DOM. With JavaScript, the DOM tree can evolve over time by asking some server,
via HTTP, for the new data. Then, this new data can be presented to the user via an HTML element.
JavaScript can also listen for users’ input and provide some sort of response.
Some events JavaScript can listen for include blur, change, click, drag, focus, keypress, load,
mousedown, mouseover, mouseup, submit, touchmove, and unload.
For example, when we’re surfing Google Maps, we might drag the map around. Each time we
drag the map, new images appear. This occurs because each time we drag the map, the browser
sends requests for more images and embeds them into the page.
Saying Hello
Suppose we want to create a webpage that has a user input their name and click a submit button.
Then, the webpage should display an alert greeting the user with their name.
We can use a similar form as earlier—we’d like a text type input that has placeholder “Name” and a
submit button. However, instead of searching on Google after submitting the form, we want to call a
function that greets the user. To do this, we include onsubmit="greet();" as an attribute to our
<form> tag, where greet is the function that greets the user.
Now, we have to write the function greet() . This is written in JavaScript, so we’ll surround this
function in <script> tags. In this function, we have to recall the person’s name and display an alert.
To recall the person’s name, we have to fetch the value they submitted. To do that, we need to
identify the text box that they typed in. By providing the <input> tags another attribute called
id , we can later uniquely identify that particular element. Thus, for the text type input, we can
add id="name" .
To fetch that value, we can write let name = document.querySelector('#name').value; .
let name = assigns a value to the variable name .
Note that the # in #name is required to indicate that the name we’re searching for is an
id instead of a tag.
<!DOCTYPE html>
<html>
<head>
<script>
function greet()
{
let name = document.querySelector('#name').value;
window.alert('hello, ' + name);
}
</script>
<title>hello</title>
</head>
<body>
<form onsubmit="greet(); return false;">
<input autocomplete="off" autofocus id="name" placeholder="Name" ty
<input type="submit" value="Submit">
</form>
</body>
</html>
When opening this file in the browser and submitting the form with input “David,” we see this:
Changing Backgrounds
Using JavaScript, we can also change the aesthetics of a webpage.
Suppose we want to create a button that, when clicked, changes the background to red.
To create this button, we’ll use the <button> tags and write <button> id="red">R</button> .
Note that we’ve given the button an id so we may select it in JavaScript later.
Below this button, we can write a script that, when this button is clicked, changes the background to
red. Note that this time, the script is below the code for the button because now, we would like the
button to exist before the code executes.
In <script> tags, we’d like to listen for an onclick event, particularly when the button is
clicked. To do this, we can use the id from earlier and write
document.querySelector('#red').onclick .
When this button is clicked, a function should be called that changes the color of the
background.
In JavaScript, we can create a function with no name and no parameters. In the function, we’d
like to change the backgroundColor property of the body element’s style.
Inside the function, we might write
document.querySelector('body').style.backgroundColor = 'red'; .
<script>
document.querySelector('#red').onclick = function() {
document.querySelector('body').style.backgroundColor = 'red';
};
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>background</title>
</head>
<body>
<button id="red">R</button>
<script>
document.querySelector('#red').onclick = function() {
document.querySelector('body').style.backgroundColor = 'red';
};
</script>
</body>
</html>
After opening this file in our browser and clicking the button, we’ll see this:
We can also include more than just an “R” button. Maybe we want to include “G” and a “B” buttons too.
Our code might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>background</title>
</head>
<body>
<button id="red">R</button>
<button id="green">G</button>
<button id="blue">B</button>
<script>
</script>
</body>
</html>
Note that we factored out some code to another variable. Instead of repeatedly calling
document.querySelector('body') , we stored that value in a variable called body , and now,
we have immediate access to that element.
After opening this file and clicking the “B” button, we see this:
After selecting xx-large from the drop-down menu, the webpage displays this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>size</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in
</p>
<select>
<option value="xx-large">xx-large</option>
<option value="x-large">x-large</option>
<option value="large">large</option>
<option selected value="initial">initial</option>
<option value="small">small</option>
<option value="x-small">x-small</option>
<option value="xx-small">xx-small</option>
</select>
<script>
document.querySelector('select').onchange = function() {
document.querySelector('body').style.fontSize = this.value;
}
</script>
</body>
</html>
In this HTML file, we have some text and a dropdown menu of many sizes created with the
<select> and <option> tags. The default selected size is “initial.”
In our <script> tags, we’re listening for changes in our select element. Once there is a change,
the font size of everything in the body element changes to this.value .
this is a placeholder for the variable that we currently have implicit access to. Since this code
is associated with the select element, this.value returns the value of the select
element.
Returning Location
To get someone’s current location, we might write this code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>geolocation</title>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(function(position) {
document.write(position.coords.latitude + "," + position.coords
});
</script>
</body>
</html>