Part 0: Text editors and HTML Basics.
I hope to provide a series of video entries that will explain basic programming on the web. I’ll be talking about Javascript, at least at first, and giving a variety of demos and examples as I go along. But before I can do that, I need to cover a few bases.
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 www.demo.com/some/file.html
it gives me the file.html it has inside its some directory.
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 file:///
Officially it’s file://localhost/,
but most browsers abbreviate that as file:///.
instead of http://:
file:///C:/Documents and Settings/Luther/My Documents/file.htmlfile:///home/Luther/Documents/file.htmlfile:///Users/Luther/Documents/file.htmlIt is common for the server to supply more than just an HTML document; in addition to images and videos and so forth, most modern web pages contain code sent by the server for the client (web browser) to run. This code is currently written in an ugly language called JavaScript, and will be the starting focus of my tutorials.
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;
and </p> is a tag that closes the “p” element.
If I want to add attributes I do that as one more more name="value" pairs
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.
<html>
One of the important things the head can include
is a <script> tag that will either contain or point to some JavaScript code.
Anything we put in the body will actually get displayed when we load the page in a browser.
<head>
meta-level information goes here
</head><body></html>
the content of the page goes here
</body>
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!
Looking for comments…