CSCI 185: Spring 2024

Introduction to Programming for the Web

CSCI 185: Spring 2024

UNCA Logo

Fish by @akeatk

Practice for Quiz 1

To study for Quiz 1, please complete the practice quiz by downloading the starter files and following the instructions (below). If you have questions, please ask during class time or in office hours.

Download Starter Files

Part 1: Setup

You are going to build the webpage pictured below:

Inside of the practice-quiz01 folder, create a brand new HTML file called index.html that is a direct child of the practice-quiz01 folder. If you did it correctly, your file structure should look like this:

practice-quix01
├── images
│   ├── landscape1_300x200.jpg
│   ├── landscape2_300x200.jpg
│   └── landscape3_300x200.jpg
├── index.html
└── pages
    ├── about.html
    └── gallery.html

Edit index.html file by adding an HTML “skeleton” with the following tags:

<!DOCTYPE html>
<html lang="en">
   <head>
   </head>
   <body>
   </body>
</html>

Part 2: HTML Tasks

Edit the index.html pages as follows:

2.1. Metadata

  1. Add a title tag inside of the head tag, with the display text of “Practice Quiz 1: Your Name.”

2.2. Header Section

  1. Add a header tag inside the body tag (don’t get the head and the header tag confused).
  2. Inside the header tag, create an h1 tag that displays the text “Practice Quiz 1: Your Name.”

2.3. Navigation

  1. Below the header tag, create a navigation section using the nav tag.
  2. Inside of the nav tag, create three hyperlinks:
    • One that links to gallery.html (in the pages folder) with the display text of “Photo Gallery”. Use a relative path.
    • One that links to about.html with the display text of “About Us”. Also use a relative path.
    • One that links to Instagram’s home page, the display text of “Instagram”. Use an absolute path.

Note: you may not move the gallery.html or about.html files outside of the pages folder.

2.4. Main Section

  1. Below the nav tag, create a main tag.
  2. Inside the main tag, create a section that has an id of “images”.
  3. Inside of the section you just made, create 3 img tags that display the three images in the images folder, using relative paths.
    • Don’t forget to use the alt attribute to give each image a description (for people who use a screen reader).

Create a footer section below your main section using the footer tag. Within the footer, create a paragraph tag that says “Copyright Your Name, 2023.”

Part 3: Styling tasks

Create a CSS file called styles.css that is a direct child of the practice-quiz01 folder. If you did it correctly, your file structure should look like this:

practice-quix01
├── images
│   ├── landscape1_300x200.jpg
│   ├── landscape2_300x200.jpg
│   └── landscape3_300x200.jpg
├── index.html
├── pages
│   ├── about.html
│   └── gallery.html
└── styles.css

Edit your index.html file by adding a link to your stylesheet. Then, complete the following tasks within styles.css:

3.1. Body

Create a rule for the body element that sets the background color to a light gray (#F0F4EF) and the margin to 0px.

3.2. Header

Create some style rules for the header element (and any relevant child elements) to:

3.3 Navigation

Create some style rules for the nav element (and any relevant child elements) to:

Create some style rules for all of the a tags inside of the nav element:

3.5. Main

  1. Create some style rules for the main tag:
    • Add some padding
    • center align the images (text-align: center)
  2. Create a style rule for the img tag that adds a left margin of 30px to each image.

Create some style rules to set the footer’s background color to #344966, and the footer’s text color to white.

What to Submit (if this were a real quiz)

If this were the real quiz, you would commit and push your changes (like we’ve been doing in class). Then, you would paste two links into the Quiz 1 section;

  1. A link to your code repository (e.g., https://github.com/vanwars/csci185-coursework)
  2. A link to your homepage (e.g., https://vanwars.github.io/csci185-coursework)