Code as a Liberal Art, Spring 2021

Unit 3, Exercise 1 homework

Due: Tuesday, April 20, 8pm

  1. Review the class notes for this week.

  2. Create a very simple website locally on your computer comprised of 5 interlinked HTML files with one CSS file by following these steps:

    1. Create a new folder for this assignment named unit3-exercise1.

    2. Take a linear bit of text (it can be something you find, something original that you've already written, or something that you write for this assignment) and break it up into five fragments. (For example, this could be an essay broken up into paragraphs, a poem into lines, or something else).

    3. Create five new .html files in your new folder using the HTML template that I've provided as a starting point. Name the first one index.html, and name the other four anything you wish. The filenames should correspond to your text in some way. For example, you could call them paragraph1.html, paragraph2.html, etc; or you could call them line1.html, line2.html, etc; or stanza1.html, stanza2.html, etc; or you could use another scheme where perhaps the filename corresponds to the contents of each fragment.

    4. Put each fragment of text into its own file, within the <body> tag. Add any additional HTML tags that you wish.

    5. Within each page (each file), create at least two links. For each link, use one word as the clickable contents of an <a href> tag that links to another page. One link should be "linear" — i.e. fragment 1 links to fragment 2, fragment 2 links to fragment 3, and so on. But the second link should be nonlinear, linking to a different page based on some kind of association or just randomly.

    6. Add an image to each page that corresponds to the text in some way. Experiment with putting your <img> tags inside their own <div> tags, so that they appear on their own lines rather than with adjacent text. We'll talk about how to control the color, size, layout, and other visual attributes of these elements next week. (This assignment previously asked you to create a CSS file, but since we did not get to that in class, we'll address this part of the exercise next week.)

  3. Create a sitemap diagram that represents the structure you've just created. Represent each page with a symbol (a box will do, but you can use anything you'd like), and use lines to indicate the links between pages. You can do this with pen or pencil on paper, or in any digital tool or platform of your choosing. Create a new subfolder called images (as a "sibling" of css) and put this image file into that folder.

  4. Upload this entire folder into your Google Drive.

  5. Install Cyberduck on your laptop, available from cyberduck.io. Cyberduck is free and open source software, meaning that you are able to access, view, and modify the source code if you'd like. It also does not cost any money to acquire, although the project does solicit donations if you wish to contribute support. It should be an easy and straightforward download and install process but if you have any questions, let me know. We will work with this next class.