Rambling into the void...

HTML and CSS: Building a Static Website

You can download the full code for this tutorial at my github under release 1.0

Websites have come a very long way since the 90s when pretty much everything was pure HTML with maybe a little CSS thrown in. Though that's not to say that a pure HTML website cannot be totally rad (nineties lingo on purpose). This series of tutorials will cover how to make a basic two page website using flask and apache. But before we can go over the more advanced stuff, we need to go over the basics. And the most basic component of any website is HTML and CSS.

What is HTML and CSS?

The best explanation I have heard for how a website is built is to compare it to a person. HTML is the bones. It provides the underlying structure of the website. The CSS is the skin. It provides the appearance of the website--and without it the website would not look very good, much like a human with no skin. This metaphor gets dark quick. The final component is the javascript, which is the muscles of the site. It is what allows the website to move and provides interactivity. We won't cover javascript in this series of tutorials. No muscles means no movement, which is why this is a static website.

Let's lay out the HTML

Ok, now we know what HTML is conceptually, we need to lay the foundations of our website (I will abandon the bones metaphor at this point).

First let's create an HTML file called index.html in a new project folder. This is going to be the homepage of our new site. It is convention to name a homepage index.html, but sometimes it is also required. For instance, an Apache webserver will serve index.html as the homepage by default.

So to create a new page, we need to use a text editor. You can use notepad to start, but I would recommend VS Code as it has it more modern features that can make development easier.

In your new index.html file paste the following:

<html>

<head>
    <title>Example</title>
</head>

<body>
    <div>
        <p>Create Your Static Website</p>
        <p>Here is the content of your site.</p>
    </div>
</body>

</html>

If you open up your index.html file in chrome, you will see something like the below:

And if you were to right click and press inspect in chrome you will see the html you just wrote!

What are HTML Tags?

Let's break down what we have here a little bit.

Try and think of a html tags as sections of a webpage, with different tags creating different types of sections. Each section has an opening and closing tag.

So surrounding everything is an <html> tag meaning that everything is organized into an html section. Within the <html> tags, you will see <head> and <body> tags. These divide your html code into the head of the document and the body of the document.

The head contains the parts of the webpage that are not displayed. Instead it contains things like the <title> and links to CSS and javascript. The body contains the part of the webpage that you can see. Here are some common html tags that you will find within the body:

<h1> <h2> <h3> - These are header tags, they create different headers size based on the number that follows the h. h1 is the largest, h2 is the second largest and so on.
<div> - The div tag is a bit more conceptual. It separates the page into divisions but does not have any properties of its own, like how an h tag makes text larger or smaller. As such, div tags are often used as containers for CSS or javascript, which we will cover later.
<p> - This is the paragraph tag. Within these tags, you can write text.
<a href="yourlink.html"> - the a tag creates hyperlinks to other webpages.

Let's add these tags into our website. As you know the a tag links to other webpages, so we are going to make a second page as well. To create this second page, we are going to create a new folder called pages and put it in there.

Homepage

<html>

<head>
    <title>Example</title>
</head>

<body>
    <div>
        <a href="pages/second.html">Link to your second page</a>
        <h2>Create Your Static Website</h2>
        <p>Here is the content of your site.</p>
    </div>
</body>

</html>

Second Page

<html>

<head>
    <title>Second Page</title>
</head>

<body>
    <div>
        <a href="../index.html">Link to your homepage</a>
        <h2>Now you have two pages!</h2>
        <p>Isn't that nice</p>
    </div>
</body>

</html>

Take a look at how we did that link on the second page. To go back a folder, you use ... At this point your website should look like this:

Applying CSS Styles

Ok, at this point, our website looks admittedly pretty bad. Thats because we have just built the bones (metaphor is back), but not the skin! Let's add some skin (ok maybe we should retire it again).

You can apply a style directly to a html tag using the style argument. For our example, we will be adding a background color and a text color. To add style to a tag, just put the style tag within the opening tag, like so:

<html>

<head>
    <title>Example</title>
</head>

<body style="background-color:#f9fbfd; color:#2F4F4F;">
    <div>
        <a href="pages/second.html">Link to your second page</a>
        <h2>Create Your Static Website</h2>
        <p>Here is the content of your site.</p>
    </div>
</body>

</html>

Our website will now look like this:

Interestingly, every tag within a tag will also have that enclosing tag's styles. This is called inheritance. The enclosed tag will be called the child tag and the enclosing tag will be called a parent tag. So in our example, every tag within the body tag will have the same background color and text color.

Using a Separate CSS Style Sheet

So for all the nerds reading this. I am aware CSS stands for Cascading Style Sheets, and that I just wrote Cascading Style Sheets Style Sheet. But here is the thing, I don't care about that.

Anyways, let's go over how to use a separate CSS style sheet.

We mentioned earlier the head of the document can link to the CSS sheets. Doing this will accomplish a few things. First, it will create a separation of concerns. In programming, we typically want to keep things as simple as possible. Separating out the style from the structure can make it easier to track both.

More relevantly for us, we can reuse the CSS style sheet for many different pages. This will allow us to reduce the amount of code that we need to write overall. And if we want to update the styles for our website, we would only need to update the shared style sheet rather than all the individual pages.

We are going to have to work across a few different scripts to make this work.

First, we will need to create a CSS sheet called style.css, and place it in a new folder called styles. Our file structure should look like this:

|----index.html
|---------pages
|--------------second.html
|---------styles
|--------------style.css

Creating a Style Sheet

In style.css, copy paste the following:

.page-style {
    background-color:#f9fbfd; 
    color:#2F4F4F;
}

We just created our first style! We named it .page-style and gave it two attributes, one for background-color and one for color. All we had to do is take the text from within the style argument we wrote earlier and define it as a class.

Adding it into the HTML

Now in our index.html, write the following:

<html>

<head>
    <title>Example</title>
    <link rel="stylesheet" href="styles/style.css">
</head>

<body class="page-style">
    <div>
        <a href="pages/second.html">Link to your second page</a>
        <h2>Create Your Static Website</h2>
        <p>Here is the content of your site.</p>
    </div>
</body>

</html>

First, we need to load the CSS into the page by adding it to the head of our document. That is accomplished by this line:

    <link rel="stylesheet" href="styles/style.css">

Note that in the href, which you may remember from the <a> tag from earlier, creates a hyperlink. Right now we are linking to a local resource, because that style sheet is on your computer. But you can also access online resources with this line. We will go over this more in the next tutorial when we cover bootstrap.

Finally we need to apply our class to a html tag. We do that on this line:

  <body class = "page-style">

The great thing about css classes is that they can be stacked. So if we had a second stack called second-style, we could apply both like so:

  <body class = "page-style second-style">

And there you go! Applying the concepts here will let you create a really good looking static website.