CS412
Fall 2024

Assignment 1: Introduction to HTML and CSS

due by 9:00 p.m. EDT on SEPTEMBER 9, 2024

Preliminaries

In your work on this assignment, make sure to abide by the collaboration policies of the course.

If you have questions while working on this assignment, please post them on Piazza! This is the best way to get a quick response from your classmates and the course staff.

Learning Objectives

After completing this assignment, students will be able to:

Task 1: A Personal-Presence Web Page

In this task, you will become familiar with HTML encoding, which is crucial to display content on the Web. You will write and test a simple web page, and verify that it displays correctly in your web browser locally on your comptuer.

Use VS Code to create a new HTML file, and save it with the special name index.html. The web server looks for this special filename and will load this page by default at your public URL.

Developing a web page should be an iterative process. Test as you go, i.e., write a small section, and then test your web page by opening/reloading it in your browser locally.

As you develop your web page, get in the habit of including comments to explain each major section, and make notes to explain anything that is confusing.

Develop a personal presence web page (i.e., “about you”) with the following elements:

  1. An <h1> heading on the page should display your name.

  2. A table consisting of one row with two columns, with the following layout:

    • On the left-hand side, a picture of yourself with a width of 400 pixels. The height should be constrained to keep the correct proportions with this width.

    • On the right hand side, display your name, class year (e.g. class of 2025), and major.

  3. A “Short Bio” section. Begin with an <h2> heading, followed by a short biographical paragraph (approximately 50 words), which should tell readers about where you grew up and what you are studying here at BU.

  4. An “Activities and Interests” section. Begin with an <h2> heading, followed by a table displaying at least 3 of your activities/interests. The table should contain one row with four columns for each activity:

    • an image related to the activity/interest; make this image display with width of 300 pixels.

    • an <h3> heading to identify the activity

    • a short paragraph (approximately 25 words) with a description of the activity, and your involvement in this activity/interest.

    • one or more links to organization(s) or group(s) with which you do these activities.

  5. Create a file called styles.css, which will contain a Cascading Style Sheet. Link this style sheet into the <head> section of your HTML file.

    Use this CSS file to customize the presentation of the web page to make it visually appealing. You have a lot of discretion in this regard, so long as you do not use the default colors (e.g., black text on white background). The goal is to experiment with using a CSS file to control the look and feel of the web page.

    Customize the following elements: background color, foreground color(s), heading font style/size, paragraph font style/size, etc., link colors/styles, text alignment, margin, and padding.

    These are the minimal requirements; you may add any additional information or customization that you wish.

Task 2: Publishing Your Web Page

In this task, you will publish your web page to the public World-Wide Web on our cs-people webpage webserver.

Pre-requisite Task: Setting up your Web Space

The CS Department automatically creates CS Unix accounts for all students who are registered for a CS class. The Department maintains a web server called cs-people.bu.edu.

Set up your cs-people webpage Web Space (public_html directory)

If you have done this before, you may skip this part.

In order to publish web pages on this server, you must run a short script to activate your account and set the permissions correctly. You will need to connect to the host csa2.bu.edu. Here’s how:

  1. Open an SSH connection to the csa2.bu.edu server.

On Mac

Open the built-in Terminal app. Type the following command at the command prompt: ssh username@csa2.bu.edu

Example with Aaron’s username: ssh azs@csa2.bu.edu

On Windows

You will need to install an SSH client program. I recommend that you download/install the Putty software. Open Putty. The default setting is fine for our purpose. In the prompt for Host Name (or IP address), use the hostname csa2.bu.edu and click “Open”.

  1. Log in by typing your BU username and Kerberos password (which will not show on the screen).

  2. After you are logged in and see the unix command prompt
    (the line will end with $ or ~ or %), type the following command, and hit enter:

    web-ok

You will see an error message if it does not work, but no message if successful.

After your account is set up, go the main cs-people webpage and check that your name/account is set up. If not, ask for help!

The Main Event: publishing you web page

Transfer your files to the web server to get them to display on the public World-wide Web.

This task is illustrated in the example videos about publishing your web page. Use a file-transfer program (WinSCP or Fetch) to upload the files. Set the permissions accordingly, to UNIX code 755 (rwxr-xr-x). * Test by viewing your web page in the browser.

The page should be visible using this URL: http://cs-people.bu.edu/username/ where you replace username with your BU username.

Important Notes

  • The UNIX file system is case-sensitive with respect to file names. Your image file name and the src used in the image tag must agree, including the file extension. .JPG and .jpg are considered different!

Submitting Your Work

50 points; will be assigned by code review

Log in to GradeScope to submit your work.

Be sure to name your files correctly!

You must submit at least 2 files to gradescope:

  1. Your index.html and styles.css files. Include any ancillary files (e.g., images) that you use in your web page.

  2. A text file a1_url.txt, containing the URL to your web page, and nothing else. For example: http://cs-people.bu.edu/azs/.

    This file will be used by the autograder to locate your web page, so you must get the URL exactly correct. Do not include any other text or code in the file.

Notes: