Before You Begin

Tesserae is structured a bit differently from a traditional web design reference site in that it explains concepts, not tags or declarations. A Tesserae category is designed to introduce you to the topic at hand (say, this basic HTML section), and then show you things you can do with it. Everything builds on one another.

To follow along, you'll need a web browser (you're reading this on one), a text editor, and some basic computer text editing ability (namely copy-and-paste and the ability to save a file).

How Tesserae pages are structured

Each page on Tesserae explains a singular concept at a level suitable for the category. The page on images will demonstrate how to get an image on a page and some useful attributes and tags for using them on pages. It won't explain how to align images or give them any sort of extra styling.

Sometimes, I'll need to explain fundamentals before I can tell you how best to use the tag. Be sure to read these bits so you understand exactly what's going on. You can't understand, say, margins and padding without also understanding the box model both of those are contained in.

It's important that you read the entirety of a category before continuing. If you skip around, especially if you're following the basic HTML tutorials, you will miss things. Tesserae is cumulative. Every page builds on the ones before it.

Each page ends with a summary section, which bulletpoints the page's content. If you're not about to read the entire page, at least read the entire summary.

Terminology

Tesserae stresses calling things by their proper names for clarity. Other sites might not do this. To clear things up, here's a list of basic terms I use throughout the site and what they mean.

A word on text editors

You'll be writing out your site in a program known as a text editor. Text editors let you write plain text and nothing more. There's a wide variety of them out there; Windows comes with a basic one called Notepad, while MacOS has the TextEdit program, which can be used in a text editor mode.

Excellent free or paid text editors include Notepad++ (Windows only), BBEdit (MacOS only), and Sublime Text (Windows, MacOS, and Linux). These will make writing and editing pages much easier and include features like syntax highlighting (where tags and attributes will be colored differently so you don't miss them) and tag autocompletion (write the opening tag, and the closing tag will be provided for you). They're not strictly necessary, but if you're editing a lot of pages, you'll want to try them out.

Tesserae provides markup and styling examples, which look like this:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Hello world!</title>
	<meta charset="utf-8">
</head>
<body>
	<h1>Hello world!</h1>
</body>
</html>

These can be copy-and-pasted into your text editor, and you can play with them to see what happens. Any text (like that Hello world!) can be changed, and so can the attributes (if you wanna set your own image or link, for example). You can add onto them. They're provided for your reference and usage. Don't be afraid to try things to see if they work or not. You won't hurt anything with a broken web page, or styling that doesn't work.

(As much as I try to avoid making copy-and-paste mandatory like some tutorials, that example above is provided as a full starter web page. Paste it into your text editor unedited and skip to "Saving and testing a page" if you're still not sure where to start.)

HTML and CSS are loose but structured, and where you paste these examples on your page does matter. If it's a visual element, like a heading or an image, make sure you're pasting somewhere between the <body>...</body> tags. If it's metadata, it goes in between the <head>...</head>.

Remember that all of your pages should look like that example page. Every single one you make needs a <head> and <body> element and should end off with the </body> and </html> tags. No example given should just be pasted at the tail end of the file, but remember—try it out for yourself.

Saving and testing a page

When you're ready to test a page, you'll need to save it with an appropriate extension. The two you'll be using the most are .html and .css. You can usually accomplish this by adding the extension to the end of the file name. The front page of your site should be called index.html, generally.

Both MacOS and Windows will try to help you by adding the extension automatically, and if it detects wrong, your page won't open properly. On MacOS, you'll want to uncheck the "Hide extension" checkbox when you save, and on Windows, set the "Save as type" dropdown to either the HTML option or "All types", if it doesn't have that. This keeps both from messing with your file names.

Double-clicking the file should automatically open it in the web browser of your choice. You can now test things by editing them in your text editor, saving, and refreshing the page in the browser to see your changes.

You should keep all of your site's files (markup, styling, assets) together in a folder. If you toss things about, you're more likely to end up with a confused browser that can't find your stuff. Keep things neat and together.

Summary:

  1. Tesserae does things differently from a reference site.
    • Each page explains a singular concept. It's not exhaustive, but it will teach you how to make use of the topic on your page.
    • Any fundamentals required to understand a concept will be explained before I tell you how to implement the concept. Read everything, or at least the summaries.
    • It's very important that you read through the entire category, as pages reference and build on one another. If you skip around, you'll confuse yourself.
    • Tesserae also provides markup and styling examples. You can copy-and-paste these into your editor and play around with them. Be bold and try things that may or may not work. Your computer won't blow up, I promise.
  2. You'll need at least three things to start making a website: a text editor, a web browser, and a small amount of computer know-how for things like extensions and copy-and-pasting.
  3. Save web pages with .html and stylesheets with .css. Save your first page as index.html.