Because PBJ isn't the only sandwich around

February 10, 2020

Peanut butter and jelly sandwiches are good but they aren't the only three letter sandwich. Bacon, lettuce, and tomato sandwiches are also quite good.

Lets go back to our PBJ sandwich page and make it into a recipe website with TWO sandwiches.

Adding another sandwich

Grab some more bread and make another sandwich or through the magic of computers, copy the file and rename it.

First, I am going to rename my files sandwich.html and sandwich.jpg to pbj.html and pbj.jpg to help keep track of the two different sandwiches.

When renaming files it is important to go into the html file and update the names there as well.

I copied my new pbj.html and named the copy blt.html.

I updated the ingredients and directions to be a BLT.

Browser window with BLT receipe in it.

There are two recipes now but no way to go from one to another. I'm going to create a main recipe page to link these sandwiches all together.

A recipe box of sandwiches

The homepage or main page of a website is often called index.html. This makes the URL look nicer. You do not have to do that.

As I am now up to three pages. I am going to take my CSS out of my sandwich pages. This way I only have to update it in one location and all three pages will get the updates.

Removing style to add style

Currently there is a style block in each page for the styles.

<style>
* {
    font-family: sans-serif;
}
body {
    padding: 3rem;
}
h1, h2 {
    font-family: serif;
}
main {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}
<style>

We can take all those CSS rules out of the style block and put them into their own style sheet.

I made a new file called recipe.css and pasted the rules in there.

Do not copy the <style></style> tags. We just want the content inside of the tags.

The head of my blt.html now looks like this:

<head>
    <title>Bacon, lettuce, and tomato sandwich</title>
    <link rel="stylesheet" type="text/css" href="recipe.css">
</head>

Creating the sandwich index

My new index.html looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sandwich Recipes</title>
        <link rel="stylesheet" type="text/css" href="recipe.css">
    </head>
    <body>
        <main>
            <h1>Sandwich Recipes</h1>
            <p>Sandwiches are great! Here are a few of my favorites.</p>
            <ul>
                <li><a href="blt.html">BLT</a></li>
                <li><a href="pbj.html">PBJ</a></li>
            </ul>
        </main>
    </body>
</html>

We can now navigate to the two sandwich recipes through the use of the anchor tag.

Anchors aweigh

The <a></a> tag is called the anchor tag. The "href" attribute is location where the tag links to. This location can be a section in the page, a different page in the site, or another website entirely.

The sandwich pages have no links to this main index page, lets add a link to the top of the page for each. Add the following line to both the PBJ and BLT pages to add a link back.

<a href="index.html">Home</a>

Browser window with a link back to Home and the title Peanut butter and jelly sandwich.

The index page isn't very impressive at the moment. But that is a problem for next time.

References

Today's code is in the recipes folder on my html-starter repo.