CSci 284 - Homework 4

Due: Thursday, Mar 26th, 2026

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. Define the terms path and directory
  2. What is returned when you issue the command echo $HOME?
  3. What command will return the name of the current working directory?
  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. Save this HTML file to your ~/html/CS284 directory, but rename the page to index.html. Load it into your web browser, and take a screenshot of the page.
  7. Post two files to BrightSpace: one containing your answers to these questions and the screenshot from the last question.

Part 2. Basic HTML

For the web pages 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. All web pages you develop will have an appropriate title in the header and heading

  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 web server)
    • if you have images in your web page already, no need to add new ones
  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 web page 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. In the same html file add a new, separate form for requesting a doctor's appointment. Use the <hr> tag to separate this section from the previous form. Include these input types:
    • two text inputs, for the requestor's first and last name
    • fields for entering the date and time of the appointment: look up the HTML Input Types DATE and TIME for these fields
    • a textarea for entering any symptoms
    • and of course, a submission button

    Give this section a heading like Request an appointment with Dr. Koella

Part 4. Simple Flask Example

Run through this basic introduction to Flask, similar to what we did in class. One change: in the section Create a directory and change into it, the directory for your Flask projects will be ~/CS284/Flask instead. It can be rooted in the Documents directory (macOS) or just your home folder (Linux, etc).

Deliverables