CSCI 185: Fall 2023

Introduction to Programming for the Web

CSCI 185: Fall 2023

UNCA Logo

Fish by @akeatk

Assignments > HW2: Linking to Internet Resources

Due on Fri, 09/15 @ 11:59PM. 20 Points.

Overview

For your second homework, you will practice some basic HTML tasks that are fundamental to the development of high-quality websites:

  1. Linking
  2. Using Semantic Containers
  3. Publishing to GitHub

Please download the starter files (below) and complete the tasks described below. Read the instructions that are outlined under each task very carefully. You must complete each exercise exactly as the instructions indicate to receive full credit. Otherwise, you will receive partial credit for the parts you correctly completed.

Homework 2 Starter Files

[10pts] Task 1: Linking to Pages & Media Using Relative & Absolute Paths

For Task #1, You will be creating the website shown in this video and pictured in the screenshots below.

To do this, open the task01 folder. You should see a file structure that looks like this:

task01
├── images
│   ├── mammals
│   │   ├── fox.jpeg
│   │   ├── lion.jpg
│   │   ├── monkey.jpg
│   │   ├── squirrel.jpg
│   │   ├── tiger.png
│   │   └── zebra.jpeg
│   ├── reptiles
│   │   ├── chameleon.jpeg
│   │   └── turtle.jpeg
│   └── sea-creatures
│       ├── fish
│       │   └── fish.png
│       └── other
│           └── jellyfish.jpeg
├── index.html
├── pages
│   ├── mammals.html
│   ├── reptiles.html
│   └── sea-creatures.html
└── styles.css

Then, complete the 4 subtasks:

[6pts] Task 2: Using Semantic Containers

For your second task, you are going to practice working with semantic tags. Recall that semantic tags help screen readers and search engines (i.e., robots) understand the structure of your webpage. Using these tags effectively has huge implications for the usability of your website and how effectively search engines and web scrapers are able to index and understand what your page is about.

To practice using semantic tags, you are going to do two things:

  1. Read this article on semantic tags
  2. Complete this quiz on semantic HTML and copy the completed HTML to task02/history.html (inside the body tag).

Please Read Carefully

You will submit your task02 answers as follows:

  1. Before you click the “Check Your Work” button on Step 10 (the last step of the quiz), you will copy all of the HTML code (with all the edits that you made) and paste your code inside of the body tag in the task02/history.html file.
  2. Important: Make sure that you copy all of your code BEFORE you click the “Check Your Work” button. Once you successfully complete Step 10, the quiz WILL NOT LET YOU GO BACK and preview your work, so you’ll have to do it again (which is good practice, but also annoying).
  3. If you correctly completed the assignment, your task02/history.html web page will look like the web page pictured below:

[4pts] Task 3: Publishing to GitHub using git

When you’re done with task01 and task02:

Here is what my homepage looks like after I’ve published it, except for your HW2 will be a completed HW2 (versus the starter files):

What to Submit

Please Read Carefully: To submit Homework 2, please paste the following links into the Moodle under the Homework 2 submission section (just like you did for Tutorial 3):

  1. A link to your homepage (the one you made in Tutorial 3) on GitHub pages, which should link to your hw02 assignment (and previous tutorials and classwork you have done).
  2. A link to your GitHub code repository (where your code files are stored).