teaching machines

CS 318: Lab 1 – HTML and Tools

January 22, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Welcome to CS 318. In this class we learn to make web pages. We’ll learn some technologies like HTML5 and CSS, which are primary tools of the web design trade. But more importantly, we’ll also grow our brains to think about how to structure information, separate style from content, and communicate through technology to audiences with diverse abilities and devices.

This class will always meet in a computer lab because we will be doings things and not just talking about doing things. At the start of each lab, I will lead a 20-30 minute discussion, during which time I ask you to leave your computer monitors turned off. For the remainder of the lab you can have them on, because you will work with a partner to complete hands-on exercises spelled out below my notes here.

Let’s break some ice. Find a neighbor that you do not know and interview them with a couple of questions:

  1. If this class was prison, you’d ask, “What are you in for?” I hope this class is not prison. Ask them why they are taking the class and what they hope to do with the knowledge and skills they gain from it.
  2. Ask them about their pets or former Halloween costumes or their favorite family vacation. Find something that’s human about them.

We will spend a few minutes getting to know each other.

Now let’s get into the meat of the class. Suppose you are rummaging through a box in a grandparent’s attic, and you encounter a yellowed piece of paper, which we’ll call Exhibit A:

112cupswhitesugar1egg212cupssourcream4cupsallpurposeflour
2teaspoonsbakingsoda14teaspoonsaltpreheatovento350degreesf
175degreesclightlygreaseorlinebakingsheetswithparchmentpapercombinet
hesugarbeateneggandsourcreamtogethermixintheflourbakingsodaandsaltbl
endthoroughlydividedoughinhalfandformeachhalfintoalongrollnoteifyour
kitcheniswarmkeepthehalfofdoughyourenotworkingwithintherefrigeratorc
utoffanarrowsliceofdoughrolllightlywithhandsonlightlyflouredboardint
opencillikestripabout7incheslongformintoafigure8andpinchendstogether
placeoncookiesheetrepeatwithremainingdoughbakeat350degreesf175degree
scfor12to15minutes

What is it? Does it communicate information effectively?

A lot of our communication is “one-dimensional”. We broadcast a line or sequence of information. To group chunks of information into words, phrases, and sentences, we just add a little punctuation. But some of our information is far more complicated. It’s hierarchical. We usually show hierarchies in pictures, but when we get to a computer, all that information has to get funneled into a one-dimensional channel of bits. Imagine trying to communicate your family tree to your neighbor with only a 1D sequence of words.

Communicating hierarchies of information and content is what the web is designed to do. The solution that Tim Berners-Lee invented for doing so in 1989 and which has stuck with us is called HTML: hypertext markup language. In HTML we sandwich our information in elements, which have an opening tag and a closing tag. Here’s a bun element whose contents are patty:

<bun>
  patty
</bun>

Elements can nest inside one another. Let’s put a ring inside a box inside the hamburger:

<bun>
  patty
  <box>
    engagement ring
  </box>
  patty
</bun>

The elements can’t be as silly as this, however. We’ve got to stick with the elements that are defined as part of the HTML standard. Let’s walk through what a real but simple HTML page should look like.

  1. The outermost—or root—element is html: 
    <html>
</html>
  2. Two child elements, head and body, are just inside the root: 
    <html>
  <head></head>
  <body></body>
</html>
  3. A title element is nested inside the head element: 
    <html>
  <head>
    <title>Oprah 2020</title>
  </head>
  <body></body>
</html>
    The title is what shows up in the browser’s title bar.
  4. Nested inside body is the content, the actual information that we want to provide: 
    <html>
  <head>
    <title>Oprah 2020</title>
  </head>
  <body>
    She's more than talk.
  </body>
</html>
    Elements communicate structure; content communicates information. Elements are for the browser; content is for the humans.
  5. Modern HTML pages need one more line at the very top: 
    <!DOCTYPE html>
    The presence of this line tells the browser that you are dealing with version 5 of the HTML standard. Your page might still show up without it, but you are playing with fire.

This is just a start. There are many more elements in the HTML standard. For the rest of the time today, we’re going to explore these and get our tools for writing and publishing HTML set up.

Here’s your TODO list for next time:

Sincerely,

Lab

We have a few goals for today’s lab:

Please find a partner and work together on the steps below. Use only one machine and do a lot of talking to each other. Only one of you should be at the “helm,” running the keyboard and mouse. The other should be contributing with ideas, questions, and encouragement. Halfway through each lab you will be asked to trade places.

Feel free to ask questions of your instructor or teaching assistant.

GitHub Account

All your work this semester will be stored on and submitted for grading via GitHub, a web service that’s like a USB drive on steroids. We’re using it for a few reasons:

Create a GitHub account by doing the following:

  1. Visit GitHub.
  2. Enter a username, email address, and a password of your choosing. Click Sign Up.
  3. Choose the free plan. Click Continue and complete the rest of the form as you prefer.
  4. Check your email and verify your email address.

Repository

Now create your repository, which we can think of as a folder that resides on the internet. You’ll use a single repository for all your work this semester—which means if you do this step correctly, you will never need to do it again for this class. Follow these steps to make your repository:

  1. On the main page of your GitHub account, click Start a project.
  2. Enter cs318 for your Repository name. Do not use CS318. Do not use CS 318. Do not use cs 318. Do not use anything but cs318.
  3. Click Create repository.
  4. Copy the line the address that looks like this: https://github.com/USERNAME/cs318.git. Whenever you see CAPITALIZED words, understand that these are just placeholders for information that should be tailored to you. We’ll need this address in a bit.

Visual Studio Code

The cs318 folder that you just made resides on the GitHub on the internet, but you need it on your computer in order to add and edit its files. Visual Studio Code can pull it down. If you are using a lab computer, click on the Start Menu and search for Visual Studio Code. Open it. There’s a similarly named Visual Studio 201*—that’s not the one we want.

Pull down your cs318 repository by following these steps in Visual Studio Code:

  1. Type F1 to get a command prompt.
  2. Type clone and select Git: Clone from the list of matches.
  3. Paste in the address you copied earlier as the repository URL.
  4. Enter H: for the parent directory. Don’t ever save anything on the C: drive—which gets wiped weekly. If you organize your H: drive with directories, feel free to choose a path within these directories—like H:\courses\spring2018.

Your setup is complete. The steps above need only be done once in the semester.

PSA

It’s time for a public service announcement. When you make websites, you will have the chance to name many files. Here are two things to keep in mind:

Why? There are at least two reasons. First, because punctuation is annoying to type—especially on mobile devices. Second, because the more symbols/choices we have, the probability of entering the file’s name incorrectly goes up. Do us all favor. Restrict yourself to lowercase letters, numbers, and the period character.

Here’s a list of potential file names. Drag the good ones above the separator line, and the bad ones below:

  1. index.html
  2. busroutes.pdf
  3. appendix
  4. oprah2020
  5. -----------------------------------
  6. pic.JPG
  7. chapter-1.html
  8. Dolphins.jpeg
  9. lab17 test
  10. Lab01
  11. time_table.pdf

Directory Structure

I ask that you make a directory in your repository for each lab. Today is lab 1. Since we will get into the double digits before the end of the semester, let’s name our directory lab01. By padding with a leading 0, our directories will stay sorted.

Make your directory in Visual Studio Code. Hover over the four buttons right above the panel for your cs318 repository. One of the buttons makes a new file. Make note of that for later. One makes a new directory. Click it and enter lab01. Not lab1. Not lab 1. Not Lab01.

Hello, World!

Create a web page with these steps:

  1. With lab01 selected, click the New File button.
  2. Name the file index.html. Be exact.
  3. Enter the following text in the editor. I encourage you to type it rather than copy and paste. Feel the rhythm of HTML run through your fingertips. 
    <!DOCTYPE html>
<html>
  <head>
    <title>First</title>
  </head>
  <body>

Goodbye, Pluto!

  </body>
</html>
    Match the whitespace indentation as you see it above to make it human-readable.
  4. Believe it or not, but files like this are what make the web. We just don’t normally see the raw HTML. We must render the HTML. Right-click on index.html and select Open with Live Server. Your web browser should pop open and display the rendered HTML.
  5. Arrange Visual Studio Code and the browser so that you can see both side-by-side. If you have two monitors, use them both. Edit the text, save, and watch your page automatically update in the browser.

Committing

Let’s get this page up on GitHub now because the world needs to see it.

  1. Save any edits to your file in Visual Studio Code.
  2. Click the Source Control button in the left panel. It’s the third one down and should have a number notification on it. You’ll see a list of all the changes that you’ve made on the local machine but that aren’t on GitHub yet.
  3. Click the plus icon to stage your edits to index.html.
  4. Enter a message to describe this collection of changes. Like Crushed lab 1. A meaningful description will help you and others better navigate your repository’s history.
  5. Click the Commit button, which is the checkmark at the top of the source control panel. This “saves” your work to a clone of your repository, but that clone is still only on the local machine. The next step is essential.
  6. Click on the More button (represented by three dots) and select Push. Your repository is synchronized with the version on GitHub’s computers.

At the end of every work session, you are expected to commit and push your changes. Don’t wait until a project is entirely completed to do this. Commit and push early and often. If your computer falls in the river, at least your latest changes will still be on GitHub.

GitHub Pages

Now it’s time to let GitHub serve out our web pages so they can be viewed by others:

  1. Back in your browser, visit your repository on GitHub.
  2. Open the Settings tab and scroll down to the GitHub Pages section.
  3. Click on Source and select master branch.
  4. Click Save.
  5. Now visit https://USERNAME.github.io/cs318/lab01/index.html in your browser, replacing USERNAME with your real GitHub username.

We only need to enable GitHub Pages once in the semester.

Another Challenge

Now switch places with your partner.

Let’s revisit the process of creating and committing a file:

  1. Create a new file named partners.html in your lab01 directory.
  2. Insert the same HTML structure as you did in index.html. But instead of the planetary salutation in the body element, insert your first names and last initials—on separate lines. View the page in the Live Server. It should look like this: 
    Chris J.
Nick H.
  3. What do you notice about the formatting in the preview? Fix the problem by embedding each of your names in a paragraph element, which is opened by a <p> tag. What is it closed by?
  4. Commit your new file and push it to GitHub. Make sure it displays in your browser. Pushing is an easy step to forget, but it is a required step to receive credit for your work. Not pushing is identical to not turning in a paper. Always check your work through GitHub Pages to verify that you pushed successfully.

Once you have completed all these steps, check in with your instructor or teaching assistant to get your work checked off. You are free to leave when you have completed the steps or when lab ends, whichever comes first.