Course catalog: one course

CRUD web apps deal with structured data, like rows in database tables. We'll be using JS objects for that.

An object is a collection of data and functions. You've already been making objects, without knowing it. You know those namespacing things?

"use strict";
var CourseScore = CourseScore || {};

CourseScore is a JS object.


Suppose we want a catalog of university courses. Let's start with one course for now. Here's how you could store information about it:


Links and URLs

The story so far

You know how to make HTML files, and put them on your server. You can make headings, paragraphs, line breaks, lists, and tables.

Now let's learn how to make links.

The a tag

Use the <a> tag to create links. Here's an example:

<a href="links-and-urls">Links and URLs</a>

href is an attribute of the <a> tag. It shows up inside the tag's opening <>.



The story so far

You know how to put files on servers, so they show up on the web. You've learned a couple of HTML tags. Time for some more.

Unordered lists

Unordered lists look like this:

  • An item
  • Another item
  • Yet another item

They're called "unordered" because they just show bullets in front of each item, rather than numbers.

Make a list like this:

  <li>An item</li>
  <li>Another item</li>
  <li>Yet another item</li>

The <li> tags are nested inside the <ul> tags.


Headings, paragraphs, and line breaks

The story so far

You know how to put files in server directories, so those files will be available on the web. But what do you put in those files?

Time to learn a little HTML.

This is a heading

Most documents have headings. A heading is like "This is a heading" just above. It identifies a piece of a document.

Create headings with tags <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Each one has the same structure:

  • An opening tag, e.g., <h1>
  • Some content, e.g., Buffy the Vampire Slayer
  • A closing tag, e.g., </h1>

The full heading would be: