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...

Amazon.ca

Indigo

Code Energy

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:

  1. Creating a CODEPEN account and starting to get familiar with the platform's interface.
  2. HTML tags for heading (<h1></h1>), paragraph (<p></p>), and buttons (<button></button>).
  3. How to specify CSS for tag types (we just write the tag and then put the style specification in curly brackets as usual).
  4. How to write a simple JavaScript function (the keyword "function" followed by the name of the function followed by parentheses followed by curly brackets).
  5. How CODEPEN shows results in the webpage as soon as we change the HTML or CSS.
  6. A few CSS properties (color, background-color, font-style, font-weight) and a few of the values these properties can take.
  7. How we can pass information to a function from a button.
  8. 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.