Welcome to CS 318. In this class we learn to make web pages. We’ll learn some technologies like HTML5 and CSS, which are the 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 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:
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:
ingredients112cupswhitesugar1egg212cupssourcream4cupsallpurposeflour 2teaspoonsbakingsoda14teaspoonsaltdirectionspreheatovento350degreesf 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 a hierarchy. 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. That leads us to an exercise.
Devise a scheme for communicating to your partner your family tree. Include three generations: your grandparents’ generation, your parents’ generation, and your generation. But use only words, not pictures nor gestures, and use as few words as possible. The fewer, the better!
After the time is up, communicate your trees to each other, and draw your partner’s tree. No questions are allowed, nor feedback, until both partners have shared.
We’ll share some of our strategies.
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 are information in elements, which have an opening tag and a closing tag:
<bun> patty </bun>
HTML is a lot like our family tree problem, with the advantage that the information has a single root element from which all other elements descend.
We’ll dive into HTML in more detail next lab. For the rest of the time today, we’re going to get our tools for writing and publishing HTML set up.
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. Periodically, you will be asked to trade places.
Feel free to ask questions of your instructor or teaching assistant.
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:
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. Follow these steps to make your repository:
cs318for your Repository name.
cs318 folder that you just made resides on the internet, but we need it on our own computer in order to add and edit its files. If you are using a lab computer, click on the Start Menu and search for GitHub_Install. Click Install. If you are using your own computer, download and install it.
Sadly, GitHub did not make this software easy for system adminitrators to install in a lab setting. It installs into a temporary location that only you can access—and only on your current computer. This temporary location will be cleared periodically, and it won’t be available if you switch machines. Likely you will need to install it several times throughout the semester. But let’s not worry about that right now. Minimize the hassle by using the same machine all semester. Pick a good one! (They’re all the same.) Or bring a laptop.
Now, let’s pull down our
cs318 repository using GitHub Desktop:
cs318repository in the left panel, and click Open in Explorer or Open in Finder.
GitHub Desktop doesn’t help us author webpages. It just helps us share them. To author webpages, we will use Brackets, a free editor started by Adobe but now in the hands of the people. It is already installed on the lab machines. If you’re using a personal machine, download and install it.
Open Brackets via the Start Menu. Click Getting Started / Open Folder… and navigate to the
cs318 directory that you pulled down with GitHub Desktop.
Now we are ready to make some web pages!
We will start by making the simplest of web pages.
Let’s create a directory for this first lab:
lab01. Be exact, as your instructor uses tools for grading that are very picky. Notice the leading 0 and the lowercase letters. For files on the web, you want to avoid uppercase and space characters.
Now let’s create a web page:
lab01and choose New File.
hello.html. Be exact.
<!DOCTYPE html> <html> <body> Goodbye, Pluto! </body> </html>
Let’s get this page up on GitHub now because the world needs to see it.
Add first page. If it helps, pretend that you are giving a command to the changes.
At the end of every work session, you are expected to commit your changes. If your computer falls in the river, at least your latest changes will still be on GitHub, but only if you commit regularly.
Now it’s time to let GitHub serve out our web pages:
cs318repository and click View on GitHub. The browser will display your remote repository, which should now contain your
https://YOURUSERNAME.github.io/cs318/lab01/hello.htmlin your browser, replacing
YOURUSERNAMEwith your real GitHub username.
We only need to do these steps once in the semester.
Now switch places with your partner.
Let’s revisit the process of creating and committing a file:
hello.html. But instead of the planetary salutation in the
bodyelement, insert your first names and last initials—on separate lines. View the page in the live preview.
<p>tag. What is it closed by?
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.
jobs. Besides the link, briefly summarize in your own words what the job entails and what qualifications are expected. Look for positions in a location where you could picture yourself living.