Let’s learn some HTML

2021-03-02T22:51:34+00:00

Cats are not very fastidious record keepers by default, so they never know how many carrots they have planted. Or harvested. Or really what they’ve planted at all.

You figure that you should make a website for the cats to help keep their farm records in order. They’ve got a computer that they share in the house, and they’ve all got smart phones. They’ve vowed not to discuss iOS vs Android ever again, as they’ve only recently finished healing from the last skirmish.

The basic building blocks for a webpage are made using HTML. That stands for Hypertext Markup Language, if you care. It sounds very futuristic, but it’s really just a way to tell web browsers what the text we’re sending them means. We’ll just cover a bit here to introduce the concepts and get into more as we need to later on.

Paragraphs

Here’s an example:

<p>This is a paragraph.</p>

That p tag tells the browser “hey, this is a paragraph.” Note the slash inside the second one – this marks the end of the paragraph.

Links

Another important tag is for making links. Links are also called anchors, which is important only because otherwise it’d be very confusing that it’s an a tag:

<a href="https://rubycat.farm">Ruby Cat Farm Rules</a>

It might still be confusing. But don’t fret.

This bit of HTML makes a link to https://rubycat.farm with the text “Ruby Cat Farm Rules”.

“What is that href thing?”, you ask. Fair question. It stands for hypertext reference.

What, that’s not helpful? Basically it tells the browser where to link. It is an attribute of the a tag.

The original creators of HTML lived in a different time (1990) and were super nerds.

Pictures

Another important tag to know is for including pictures on a page. Not all the cats can read very well, and we want them to know what’s going on.

<img src="carrots.png" alt="Lovely bunch of carrots">

The tag name for pictures at least makes sense – img for image. The src attribute points to the file for the image to include. The alt attribute allows an “alternate” value for the image. This is useful for screen readers so cats who can’t see very well can still know what’s in the image.

Divs

A <div> tag doesn’t do much. It stands for “division” and is just used to wrap distinct blocks of content, so you can use it to wrap different sections of content. For example:

<div>
  This is one section.
</div>
<div>
  This is another section.
</div>

Lists

There are two types of lists: ordered lists and unordered lists. If it’s an ordered list, it’ll get a number before each item. If it’s an unordered list, it’ll get a bullet (y’know, a circle). Here are some examples:

<ul>
  <li>Bulleted item one</li>
  <li>Bulleted item two</li>
</ul>

<ol>
  <li>Ordered item one</li>
  <li>Ordered item two</li>
</ol>

When viewed in the browser, that looks like:

Delightful! The abbreviation for ordered list (ol), unordered list (ul), and list item (li) actually make sense.

The whole document

The basic layout for every HTML page looks looks this:

<html>
  <head>
    <title>This goes in the title bar</title>
  </head>
  <body>
    <p>Content goes in the body while information about the page generally goes in the head</p>
  </body>
</html>

Everything’s wrapped in an html tag – that tells the browser “hey, this stuff is HTML”. Inside that, there’s a head section and a body section. The head stuff is sort of information about the page. The title is what you see up in the tab for for a webpage. The body contains the actual content of the page.

Okay, now let’s see it!

If you put that in a text editor, save it as for_the_cats.html. Double click the file and it should open in your favorite web browser, and then revel in the glory of your first webpage. Great success.

Go ahead and try adding some of the other elements talked about in this chapter. Play around! Have fun!

So what is a cat farm, anyway?

2021-03-01T22:51:34+00:00

Well. Close your eyes. Actually, don’t – we wouldn’t get any further. But imagine with me a small farmhouse atop a lovely verdant hill with fields of vegetables in the valley just below us. Chickens and horses meander around, making their appropriate noises.

All around and over the house and fields below are cats. The cats are all hard at work. Mostly. As their attention allows. Many are plucking vegetables out of the ground. Others are plantings seeds. Some are napping under the nearby weeping willow tree. Okay, most are napping under the tree.

This is the cat farm. It’s all run by cats. Those that can keep their eyes open. Don’t tell the humans in the nearby town of Smog. They cannot be trusted. They’ve grown quite jealous of the cats’ ability to harvest as many crops as they do while still getting fifteen hours of sleep a day.

The cats, however, keep having kittens. It’s truly incredible how much those babies can eat. The cats need to harvest more. They’ve done wonders with absolutely no organization, but they would be be absolutely spectacular with some level of coordination and record keeping. And the kits get to keep eating, and they very much like eating.

You are to be the guardian of the cat farm. Of the kittens. Please don’t let them go hungry.

The cats are not the most process-oriented of creatures. They forget how many vegetables they’ve planted. They get distracted by climbing up – and napping under – their beautiful tree, and suddenly they’ve forgotten how many carrots they have.

You need to help them. They need their naps.

You are going to write some software to help them run the farm smoothly. If everything is recorded, forgetfulness isn’t an issue. Then they know just how hard they have to work before it’s nap-time.

We’ll be using Ruby on Rails 6 to build a website to help these cats run an efficient farm. They can’t change who they are, so let’s help them out.

We’ll start by looking at some fundamental technologies that make the web work and then ease into Ruby before jumping into Ruby on Rails, which is a powerful framework that ties it all together. We’ll get the cats more efficient in no time.