Tutorial 1 Fall 2021
https://slides.com/djjr/inf1339f21-tut01
"…just stare at the machine. There is nothing wrong with that. Just live with it for a while. Watch it the way you watch a line when you are fishing and before long, as sure as you live, you'll get a little nibble, a fact asking in a timid, humble way if you are interested in it. That's the way the world keeps on happening. Be interested in it."
Robert M. Pirsig, Zen and the Art of Motorcycle Maintenance
/meeting
utoronto.zoom.us
https://
/82914838514
/meeting
utoronto.zoom.us
https://
/82914838514
/meeting
utoronto.zoom.us
https://
/82914838514
Protocol
HyperText Transfer Protocol Secure
Domain Name
Service Requested
Particulars
What do we want it to do?
To what "server" should this be sent?
With what data?
https://www.amazon.ca/gp/product/B0731JG96F
Speaking of books...
utoronto.zoom.us
Let's look at that domain name again
3 . 235 . 73 . 94
utoronto.zoom.us
DOMAIN NAME
Dan Ryan
3961 Greenwood Ave
Oakland, CA 94602
Person: Dan
Family: Ryan
House: 3961
Street: Greenwood Ave
City: Oakland
State: CA
3 . 235 . 73 . 94
utoronto.zoom.us
DOMAIN NAME <-> "IP" Address
3 . 235 . 73 . 94
utoronto.zoom.us
DOMAIN NAME
Internet Protocol Address
Chrome, Safari, Firefox, etc.
Let's take apart a plain vanilla web page
Code Sandboxes
Create CodePen Account
https://codepen.io/
Webpage = HTML
HyperText Markup Language
Hypertext : 19th/20th century
Markup : 16th/17th century
Webpage = HTML + CSS
Ontario Style Rules
UofT Style Rules
Faculty of Information Style Rules
Dan's Style Rules
Webpage = HTML + CSS + JS
This tutorial takes us on a short walking tour of CodePen, learning a little bit of HTML, CSS, and JavaScript along the way. Here's what it will cover:
- Creating a CODEPEN account and starting to get familiar with the platform's interface.
- HTML tags for heading (<h1></h1>), paragraph (<p></p>), and buttons (<button></button>).
- How to specify CSS for tag types (we just write the tag and then put the style specification in curly brackets as usual).
- How to write a simple JavaScript function (the keyword "function" followed by the name of the function followed by parentheses followed by curly brackets).
- How CODEPEN shows results in the webpage as soon as we change the HTML or CSS.
- A few CSS properties (color, background-color, font-style, font-weight) and a few of the values these properties can take.
- How we can pass information to a function from a button.
- How to embed a CODEPEN in a Quercus essay answer.
Tutorial Instructions
Create a new Pen
In the HTML tab type this bit of HTML:
<h1>Hello World</h1>
<p>I hope you are ready for me</p>
and then this
<p>Here's what I bring to the table:</p>
<ol>
<li>Verve</li>
<li>Vigor</li>
<li>Vivacity</li>
</ol>
A
Add some CSS
h1 {color: orange;}
p {background-color: yellow;}
And change the styling for the p elements:
p {background-color: yellow;
font-weight: bold;
font-style: italic;}
B
Name Your Pen
1
2
Add a Button
Change the <h1> tag so it looks like this:
<h1 id="ralph">
<button type="button">CHANGE</button>
Below the paragraph, add this:
C
A little bit of JS
function change() {
document.getElementById("ralph").innerHTML="Some New Headline Text";
}
D
Make the Function more Flexible
<button type="button" onclick="change('Aliens Attack Warth')">
CHANGE
</button>
function change(newText) {
document.getElementById("ralph").innerHTML = newText;}
}
E
YOUR TURN
Fork your pen and rename the new pen something like CodePen 102.
Change the initial heading in the HTML to "Hello COVID." Make the button change it to "GOODBYE COVID."
Then copy and past the button code to make a second button. Change the label of this one to CHANGE2 and make it change the text of the headline to "GET LOST, COVID!"
Add some styling to the CSS tab. Take a look at the color name options you have here (Links to an external site.) and style the <h1> element some other color.
When you have the page working, embed the code.
Computational Reasoning Tutorial 1 Fall '21
By Dan Ryan
