Websites, Part I — Markup basics

This post follows up on the tech tip I recorded for Episode 257 of the Just the Books podcast. This is the first post in a new series about websites and how they’re made. This series is not intended to deeply explore the topic, the primary goal is to build a foundation for understanding how websites are put together, the tools that can be used, and how innovation is changing and advancing this topic.

Plain text.. and character sets
Typing a plain text document is relatively easy, in the US that is most often in ASCII. Each character converts to a number and that number is easily understood by the computer. However, ASCII means you can’t easily type in French or Hebrew. Leaving out accent marks and transliteration are not acceptable work-arounds. It used to mean there were lots of different encoding systems — one for each language!

Unicode is the standard for encoding text that has allowed for the localisation of programs beyond the English speaking borders. It is backwards compatible with ASCII but doesn’t work the other way around. It’s why you might sometimes see a word such as that’s display as that’s. (see Will Unicode Soon Be the Universal Code? by Ritchie S. King IEEE Spectrum, July 2012)

When the title of a book is underlined or a line of text is highlighted, it is considered marked up. Markup comes from the editorial marks and is used to format the display of text or provide an instruction.

There are several types of Markup Languages in use today. HTML is the most widely used, though LaTeX and I have spent many hours together.

Markup languages separate the content of the document from the formatting instructions. They do this using special reserved words and characters.

HTML Basics
Computers require specific and discrete instructions to perform every task. A simple computer program includes beginning and ending commands.

For example, the following instructions:

print "Hello World!";

Could be a valid computer program. The words begin, print, and end are reserved words that the computer knows are instructions. The apostrophes are signaling to the computer to print whatever is within them.

An HTML page showing the same thing could be as simple* as this:

The Beginning

Hello World!

* – yes, I have incredibly over simplified this example.

HTML tags are enclosed in angle brackets. Closing tags include a / .

There are many, many guides to learning HTML out on the web. It’s overwhelming. Below is a very short list of a few introductory sites.

Do I recommend all of the new sites sprouting up to teach coding basics? I’m all for online education! I just need to caution and remind you that you won’t be an expert overnight. You will need to practice and work hard. I haven’t evaluated all of these programs so I’m not sure if one stands out above the rest. Just please, do not expect any book with a title … in 24 Hours expect to live up to its promise.

Next week I’ll cover some basics of CSS.