CSci 284 - Homework 4

Due: Thursday, Mar 27th, 2025

This assignment is worth 50 points. For full credit:

Reading. The Mozilla Developer Network tutorial on Web Forms

Part 1. Linux CMD Tutorial Q's

Work through these sections of the Linux command line tutorial Learning the Shell. Use the information there to answer these questions:

  1. What is a path? What is a directory?
  2. What is returned when you issue the command echo $HOME ?
  3. What command will return the name of the current working directory (assuming it is not displayed in the prompt)?
  4. Write down the shortest command you know that will change directory to $HOME  from anywhere.
  5. Show the command you'd use to create the following directories. Don't run these commands - you should have done this already! - just show the commands:
  6. Drop this HTML file to the ~/html/CS284 directory, load it into your web browser, and take a screenshot of the page
  7. Post a text file containing your answers and the screenshot to BrightSpace

Part 2. Basic HTML

For the webpages you develop in this section, feel free to modify colors and fonts, but keep the pages visually simple. A single relevant photo or background is okay.

  1. Extend your index.html file in the sandbox directory in the following ways:
    • one image that is local (saved to your sandbox directory)
    • another image that is not (give the complete URL to fetch it from another webserver)
    • if you have images in your file already, you need not add new images
  2. Edit the html file you added in Part 1, Problem 6. Make the following changes:
    • give the page a title with your name, and then use an <h2> tag to identify this as your CSci 284 page; this can be as simple as Welcome to John Doe's CS284 Page!
    • add an unordered list with three list elements, initially empty (just <li></li> pairs)
    • make the first list element a link to the webpage you created in the last exercise before break, ~/html/sandbox/index.html. Use a relative link.
    • make the second a link to the page exercise6.html you created in the Forms Example class exercise
    • make the third a link to the page you created when doing the Your First Form tutorial

Part 3. Web Forms

For each webpage you develop in this section, feel free to spruce up the page as you like, but don't take the focus away from the user entering data into a form.

  1. You should have a file exercise6.html in the sandbox directory. Using this as a template, create a new file hw4.html with the following form elements:
    • a second button (not submit)
    • one set of (at least 2) checkboxes
    • one set of (at least 3) radio buttons
    • label tags for everything, your choice
  2. Add a new, separate form for entering a movie review. This will include:
    • one text input for the reviewer's identifier (one word, like moviezaremylife123)
    • another for the movie title
    • a field for entering the date when the movie was viewed
    • a textarea for entering the review

Part 4. Simple Flask Example

Run through this dead-simple introduction to Flask, similar to what we did in class. One change: in the first part, make a directory called CS284/flask instead. It can be in the Documents directory (macOS) or just your home folder (Linux, etc).

Deliverables