SECTIONS BEFORE THIS

Quickstart -- rename to Intro, remove pages vs sites.

A Quickstart for Total Beginners

If you don’t know the first thing about how webpages are made, we’ll get you up to speed here.

If you have even a little bit of experience building web pages, you may want to skip past the basics and read about the specifics of using elements on Hot Page.

HTML - the basic stuff of the web

HTML, which stands for HyperText Markup Language, is the basic stuff of the web. Of course, there’s loads of other programming languages used on the internet, but HTML is the language of web browsers. So, no matter what crazy stuff you’re doing with Python or databases, you’re probably sticking it in HTML before you send it to your users. HTML is called a markup language because it’s basically a text format, with some code mixed in to “mark it up”— to change the way it looks. Here’s a really simple example:

The <strong>Queen of Hearts</strong>, she made some tarts

Here we’ve marked up Queen of Hearts with <strong> “tags”, to make it bold. The tags are the bits in angle brackets. When the browser renders the page, you don’t see the tags, you only see that the text is bold. Tags often come in pairs like this— an “opening tag” and a “closing tag,” with some stuff in between. The tags are sort of like a container, affecting only the stuff they contain. The whole container including its contents is called an “element”.

On a web page, pretty much everything is an “element.” This paragraph, the menu at the top of the window, the links in the menu—these are all elements. And in most cases, you’ve got elements nested inside of other elements, like this:

<p>The <strong>Queen of Hearts</strong>, she made some tarts</p>

Here, we have an example of a paragraph made with the <p> tag, just like the one you’re reading now. Inside of that, “Queen of Hearts” is still bold. By the time you’ve got a whole web page, it usually has a complex hierarchy of elements inside of other elements.

Some tags don’t come in pairs, because they can’t contain text or other elements. For example, it wouldn’t make sense to wrap an image around some text.

<img src="cat.gif" class="thumbnail">

And so <img> tags just use a src “attribute” to tell the browser where to find an image file. Some tags, like <img>, come with essential built-in attributes, but all tags can have any number of optional attributes as well. Attributes can tell the browser to do all kinds of different things, but for us they’re most useful for styling elements. Tags come with some basic presentation defaults— like how links are underlined and headings are shown in bigger text. But if we want more control, we need to use CSS styles.

Cascading Style Sheets - How we make it look cool

If HTML defines the basic structure of your page content, CSS is how you make it look awesome. CSS is short for Cascading Style Sheets. Thank God it’s one of those acronyms that is never really spelled out and many people who use this language every day may not even know what it actually stands for.

CSS is made up of “rules” that look like this:

img.thumbnail {
  width: 600px;
  height: 400px;
  border-color: pink;
}

A CSS rule has these parts:

• Selector: This identifies which elements to apply the rule to. Selectors attach CSS styles to HTML elements.
• Declaration Block: Contains one or more property-value pairs enclosed in curly braces {}. Each declaration is a property:value pair.
• Property: Which part of the thing we’d like to style. Different elements have different properties. For example, an image can have a border-color but not a font-style.
• Value: the setting we’d like to use. Different properties accept different values. For example, a border-color can be pink, but not 400px.

There are lots of properties to know, but you’ll learn them quickly. After that, you’ll find yourself using the same stuff over and over again. Selectors, however, are the really powerful part of CSS, so pay attention to selectors. There are many ways to select elements, which means you can be really expressive. You can be targeted when you to need to be, or you can apply a single style to many different elements at once. As a quick intro, here are the three most common ways to identify elements:

• Tag name. A selector like img will apply styles to all images on the page

img {
  border-width: 2px;
}

• ID. This lets you target single elements based on their unique ID. IDs in CSS are notated with a #.

#banner {
  background-color: yellow;
}

• Class. Any number of elements may share a class, which makes them easy to reuse in lots of places. Classes in CSS are notated with a ..

.center {
  text-align: center;
}

Of course, there are a lot of other things you can do, and it gets way more interesting when you start combining these techniques to make longer, more specific selectors.

Putting it Together

We’ve looked at some HTML tags and CSS styles, but let’s focus in on how they work together. This is key to understanding the Hotpage way of building web pages. Let’s say you’ve got an element in your code that looks like this:

Hello, world!

Elsewhere you might style it like this:

div.test {
  padding: 1rem;
  border: 2px dashed green;
  background-color: yellow;
}

And you’ll end up with this:

You can see that <div class=”test”> and div.test are really just two ways of saying same thing. When we’re building a web site, we write elements and styles constantly, and it’s a little confusing to have to switch back and forth between these two styles. And the HTML style is real pain to type because it’s full of brackets and quotes and stuff. So here on Hotpage we employ the CSS shorthand style in our body editor. When making an element on Hotpage, you just write it like this:

We use this same convention for other attributes as well. For example, on Hotpage you can make an img element with an attribute written in CSS style like this:

And we’ll get this:

As we continue in this documentation, we’ll get into more detail about elements, selectors, properties and values. We’ll focus on the key ideas to keep in mind when working with these things. Since you can’t be expected to know every HTML element or CSS property by heart, we’ll also provide links to references where you can simply look that stuff up.

SECTIONS AFTER THIS

Honestly I think you can pretty much leave it as is. I cribbed from existing pages a bit, so you'd want to read thru it from top to bottom. The heading text for Elements probably changes. Pages vs sites can move to the Hot Page Editor section.