Text Files and Markup

Markup Languages

A markup language is a way to describe a document for a computer using only plain text. For example, LaTeX is a markup language often used for scientic and mathematical documents. Someone writing a LaTeX document would type code like this:

This is a sentence with an \emph{emphasized} word, and a formula: \(x^2 - x + 1\).

The markup must be processed into a final document using some kind of tool. For the LaTeX markup above, the resulting document will look like this:

The details aren't important, but notice that the markup code contains some processing instructions that the LaTeX tools turned into formatting in the output: emphasized text was rendered in italics, and the formula was processed to look nice. (LaTeX is good at formulas: that's why it's used a lot in science and math publishing.)

We aren't concerned about LaTeX in this course, but it is a good example of a markup language. We are concerned about HTML, which we will start writing soon. It's not as good at formulas, but the HTML markup to represent the same content would be something like this:

<p>This is a sentence with an <em>emphasized</em> word,
and a formula: x<sup>2</sup> - x + 1.</p>

Since this document is written in HTML, we can show you exactly what that HTML looks like by including it here:

This is a sentence with an emphasized word, and a formula: x² - x + 1.

Text Files and Text Editors

Our HTML files contain only characters, but no formatting. All of the formatting we do will be done with code in the markup file. The same will be true of our CSS and JavaScript files: they are just characters.

All of these are text files, which is a generic term for what was just described: a file that contains only characters. These files could be for storing data (like CSV files for spreadsheet data), or could be documents (like LaTeX or HTML files), or could be programs (in JavaScript, Python, Java, C, …).

In order to work with text files, you will need a program called a text editor. A text editor's job is basically what you'd think: it's a tool to create and edit text files.

There are many text editors, but they all do fundamentally the same job. Text files created with one text editor can be edited with another. You may be used to working with documents that are very different that this: for example Word documents are designed to be created and edited with Microsoft Word. Text files are the opposite: they are a very simple file that you can use any one of dozens of text editors to work with.

So, when choosing a text editor, you can really pick any one that you like. Good text editors will do a few things to make your life easier. Maybe most importantly, they will do syntax highlighting, so you can see the different parts of the markup (or stylesheet or program) that you're working with. This will mean that code that you type incorrectly will be coloured differently: as you get used to it, this will help you catch a lot of typos in your code. Here is the snippet of HTML from above, displayed in a few text editors that I had at-hand:

The code looks slightly different in each of these editors: different fonts and colours. But, since these aren't part of a text file, each of these produces the exact same result when it saves the file. The different editors also had different window sizes, which is why they have different line breaks: line breaks are part of the file, but most editors will wrap long lines if you have a small window.

Suggested Text Editors

You will need a text editor to work on the HTML (and other text files) in this course. See the appendix Software for links and instructions.