Languages

Markup Languages

As we learned before in the unit on Software, there are many different programming languages. When making web pages, one uses different languages as well--however, here there are some key differences. For one thing, web pages can use several different languages, mixed together in one document. Also important to note is that some of these language are not true programming languages, but intead are called markup languages.

The word "markup" comes from the editing done on documents from several decades ago. Say, for example, an author writes a book (using a typewriter and paper); the book's editor needs to make notes to the printer about how to lay out certain things--font size, bold or italic text, indents or other design considerations. An editor would often use a blue pencil to make marks designating how the document would be formatted. Essentially, they "marked up" the text.

Early Word Processing

Before the GUI was widely used, a similar technique was used by early word processors. Because the display was not WYSIWYG"WYSIWYG" (pronounced "wizzy-wig") stands for "What You See Is What You Get," meaning that the display on the screen is exactly the same as the final version, for example the printed page., special formatting had to be done using special marks within the text. Take the following examples from documents of that time:

In the above examples (the markup language is highlighted in blue), codes such a ".cj" and ".lj" were used to describe text justification (center and left in this case), and "^B" marks were used to show when bold text would begin and end. When such documents were printed out, the markup language would not show--instead, it would be converted into actual formatting.

This is how web pages are made. Simply put, a web page is a text file with markup language. When you make a web page, you can type the text you wish displayed--and then add markup language to show alignment, spacing, fonts and font sizes, and other design points such as styled text (bold, italic, underlined) or colors.

Web Page Markup

Take this text as an example--first, unformatted:

Luis Poza Writing Workshop October 15, 2010 My Essay This is placeholder text, it is not a real essay. I would not want to go to the trouble of writing a whole actual essay just for an example. You might want to, but I would not. But that is just how I am–lazy. There's just no way around that fact.

Notice that there is no formatting in that text--not even line breaks. In order for it to show up as formatted, I would have to add markup:

<p>Luis Poza</p><p>Writing Workshop</p><p>October 15, 2010</p><p align="center">My Essay</p><p style="text-indent: 0.5in; line-height: 2em;">This is placeholder text, it is not a <b>real</b> essay. I would not want to go to the trouble of writing a <i>whole actual essay</i> just for an example. You might want to, but I would not. But that is just how I am–lazy. There's just no way around that fact.</p>

The <p> stands for a paragraph; the <b> and <i> stand for bold and italic. Other coding in the markup sets paragraph alignment, indent, and line spacing. To make the markup a bit more clear, you can add line breaks:

<p>Luis Poza</p>
<p>
Writing Workshop</p>
<p>
October 15, 2010</p>
<p align="center">
My Essay</p>

<p style="text-indent: 0.5in; line-height: 2em;">
This is placeholder text, it is not a <b>real</b> essay. I would not want to go to the trouble of writing a <i>whole actual essay</i> just for an example. You might want to, but I would not. But that is just how I am–lazy. There's just no way around that fact.</p>

That markup would cause the text to look like this:

Luis Poza

Writing Workshop

October 15, 2010

My Essay

This is placeholder text, it is not a real essay. I would not want to go to the trouble of writing a whole actual essay just for an example. You might want to, but I would not. But that is just how I am–lazy. There's just no way around that fact.

Other markup can be used to introduce background colors and images, as well as photographs and other graphic elements.

Hypertext

One key element in web page markup is the link, also known as a reference or even a hyperlink. It is links that create what is called Hypertext, which means text with links to other pages; the links will take you there when clicked on. When you add links to markup language, you have HyperText Markup Language--HTML.

HTML by itself is fairly limited. It does not allow for exact formatting. It was intended as a simple way of putting information on documents that could be transmitted easily to computers across the world--it was not intended as a way to create fancy designs with highly accurate typesetting and layout features. For example, you can change font colors and styles, but you cannot specify line spacing or indents. And even though you can control the font size, you can't control is exactly, but instead just by steps. Plain HTML is rarely used by itself anymore because of these limitations.

Instead, we use an additional language to beef up the formatting: CSS, which stands for "Cascading Style Sheets." CSS allows much more precise control over formatting of text and graphics on a web page.

In the example above, I used a little of what is called "inline CSS"--that is, CSS mixed into an HTML tag. The command <p> used at the start of the paragraph text has a "style" attribute which adds "text-indent: 0.5in; line-height: 2em;" that last part with the "text-indent" and "line-height" are CSS elements, not HTML.

More Languages

To add interactivity to web pages, other special language elements can be added. The programming (not markup) languages PHP and Javascript, for example, can create effects such as text or images which change when the mouse rolls over them, or allowing viewers to send comments to the web page author.

While these extra languages are mixed in with the HTML, they must be defined and are more and more complex than just plain HTML. For example, while CSS can be "inline" like you see above, using CSS more extensively requires special declarations of the styles in the Head of the web page.

What About This Class?

Don't worry--you won't have to learn all of these languages! You will learn a few dozen HTML commands, and I will teach you how to use some basic inline CSS. It's a good idea to have a reference sheet with all the commands you learn written down so you can remember them more easily.

On our in-class test--for which you may not use notes or a reference sheet--I will test you on HTML usage only. However, I will ask you to use some inline CSS in your project due at the end of the semester.