Lab 1: Introduction to HTML

Overview

Hi everyone! Welcome to the first lab. Today you will be getting a little light practice with the basics of HTML. Don't feel the need to spend a lot of time making your write-up pretty or super well-formatted. This is mostly about getting a bit of practice to make sure your development environment is set up. For the first section, you are free to work together. For the second and third sections, please complete them independently.

Part One - Using the Developer Tools

For this part of the lab, please use the developer tools in your browser of choice to answer the following questions:

  1. On the page https://rk0.xyz/courses, how many <div> elements are there?
  2. In desktop view, how tall is the green top navigation bar?
  3. What is the precise color of the top navigation bar?
  4. On the page https://developer.mozilla.org/en-US/docs/Web/HTML, what is the class attribute of the dark grey <footer> on the bottom of the page?

Part Two - Writing HTML

For this section, please write an HTML page that contains the following features:

  1. Multiple levels of headers
  2. A couple lines of text
  3. An image
  4. Links to a few external sites
  5. A table with 1 header row, 3 body rows, and 4 columns.
  6. A numbered list with bullet point sub-lists

Please also:

  1. Make sure that the tab for this page is labeled with your name

The text content of the page is not important.

Part Three - HTML Attributes

Please copy the HTML file from the previous part and use HTML attributes to achieve the following effects. Please only add / change HTML attributes unless otherwise directed:

  1. Your image should have a width of 600px and a height that preserves the original aspect ratio (your image should not get squashed or elongated)
  2. When somebody clicks your links, they should open in a new tab
  3. One of the column headers in your table should line up with two of the table body columns (you can change your header a little to make this happen)
  4. Your numbered list should start with 3.

Submitting

To submit this lab, please upload a zip file with:

  • A text file with the answers from part 1
  • The HTML file from part two
  • The modified HTML file from part 3

Grading

Parts 2 and 3 will be worth 80% of the grade for this lab. Part 1 will be worth 20%. I will not be evaluating the style of your page when calculating your grade (but feel free to make it look nice if you want to skip ahead a bit)

Hints

  • If you're using VSCode to complete this assignment, remember to create your HTML files with a .html extension before you start editing. That will tell VSCode that you are trying to write HTML and will turn on syntax highlighting / autocomplete
  • Try looking at https://developer.mozilla.org/en-US/docs/Web/HTML/Element for information about HTML element types and their respective attributes.
  • You can use the LiveServer VSCode extension to make it easier to iterate on your HTML