Part 0: Text editors and HTML Basics.
The first essential to understand about nearly all programming languages is they are saved in “plain-text format”. What that means is that there is not special meta-information about styling or presentation in the file: from the first byte to the last, all that is in the file is a bunch of characters. A character is what a typographer would call a glyph: a letter, number, space, punctuation mark, etc.
To write a program you need a text editor. It is possible to use whatever your computer comes with, but I suggest picking one that will format the text based on the programming language you are writing. A simple, functional one that is available on all major OSs is gedit. If you do use gedit, I’d suggest opening the “edit” menu, selecting “preferences”, and checking at least “Display line numbers”, “Highlight matching bracket”, and (in the Editor tab) “Enable automatic indentation”. Other options are up to you.
There are a few keystrokes you’ll want to get down in your text editor. Undo/Redo is typically Ctrl+Z/Shift+Ctrl+Z or Ctrl+Z/Ctrl+Y. Copy is usually Ctrl+C, paste often Ctrl+V or Shift+Ins. Save is Ctrl+S. On OS X, all those Ctrls are replaced by Cmds.
There’s a lot more your text editor can do, but this is enough to start.
The most important thing to know about the web is the server/client barrier. I send a request to the server, it sends a web page back. Period. The server can do anything it wants to decide what page to send me, but once it is sent it is sent.
The simplest model for this is to have the server
store a bunch of
.html files on its disks
and send you the file you requested for each web page.
So if I request
it gives me the
file.html it has inside its
Many web pages don’t do that anymore,
running a program that generates the
file.html you see on the fly,
but it is still fairly common and it’s how we’ll start off.
We’ll also start off with no server,
so we’ll use the
but most browsers abbreviate that as
file:///C:/Documents and Settings/Luther/My Documents/file.html
HTML is a variety of SGML that looks a lot like, and is being replaced by, XHTML, which is a variety of XML. Which means… well, basically that not all examples out there are “good”, even if they “work”. I’ll discuss only concepts that apply to HTML and XHTML.
HTML works on the assumption that a web page can be decomposed into a sequence of various elements pulled from a small set of standard elements like “paragraph” and “header” and “table”, and that each of those elements can have attributes and content, possibly including more elements, and so on. But, this general idea wasn’t carried all the way to its logical conclusion so it sometimes gets a little… fickle.
To mark the pieces of a web page, HTML uses tags
which usually (for XHTML, always) come in pairs:
an opening tag, some content, and a closing tag.
For example, I might have <p>stuff</p>:
<p> is a tag which opens a “p” element, representing a paragraph;
“stuff” is the content of that “p” element;
</p> is a tag that closes the “p” element.
If I want to add attributes I do that as one more more
as part of the opening tag (but not the closing), like
<p id="p1" class="demo">stuff</p>.
By default, HTML treats any amount of spaces and newlines as a single space.
Every HTML document is wrapped inside of a few special tags: html, head, and body.
One of the important things the head can include
Anything we put in the body will actually get displayed when we load the page in a browser.
meta-level information goes here
the content of the page goes here
That’s probably enough high-level orientation for now. I’d encourage you to get a text editor and play around with a few html pages, loading them in the browser to see what they look like. I hope to be back with some programming for the web soon!