Kids today take computers for granted. They play on the YouTube and their MySpaces and really have no idea what it takes to create such fantastic pieces of software. I do. Because I'm a programmer.
When I explain to people what it is that I do for a living, I get one of two responses. "Oh, that's nice." or "I could never do that." Sometimes both. The later of the two is not entirely true. You just need instruction from someone who can speak your language.
That's what I'm attempting to do here.
--
Before we get started, there are a few things that you should know. This first part is very long and might be kind of boring, but it's vital if you hope to understand anything further down the road.
Programming, or "coding", as we call it, is the process of writing words and numbers and symbols (or "code"). That code is run through a compiler or an interpreter which transforms the code into a program. It's just that simple.
All websites are created in such a fashion. A programmer will write code (sometimes utilizing other programs to assist in the code writing) and your web browser acts as an interpreter which translates the code into a web page. You can readily view the source code of any given page by right-clicking the page and selecting "View Source".
Technically, however, websites are not generally considered programs. Programs are created by running the source code through a compiler which produces a separate application that can be run completely independent of the compiler. Websites are interpreted, which means that the code has to be re-interpreted every time you view the page, and thus are completely dependent on the interpreter. "Programs" written in interpreted languages are typically called "scripts". I think (now, don't quote me on this) that they are called scripts, because it's like an actor reading a script and acting it out. Whatever the case, I almost always refer to web pages as simply "Web pages" or "Web sites".
So... Web pages are actually just source code that is run through a web browser which interprets the code and displays all the pretty colors and pictures and stuff. Enough of with the theory.
To create a web page, you need 3 things. A text editor (to edit the code), a web browser (to interpret the code), and a language in which to write the code.
For the text editor, you can use MS Notepad (start->programs->accessories>notepad) and for the browser/interpreter, just use whatever browser you're using to view this page.
Modern webpages utilize a series of interconnected languages to provide the rich user experience we have today. The browser itself usually only interprets 3 of them: HTML, JavaScript, and CSS. Which brings me to an interesting aside.
In web programming, there are two different types of languages: Server-side and Client-side. The server is the big computer that the company will host the site on. You're computer, or the client, will contact the server and download the webpage which is then interpreted by your browser. Server-side scripts are run on the server, before your computer ever gets them. The Server-side script (written in Perl, or PHP, or C#, or Java ) will usually do some complex calculation or database interaction that your browser is unable to do. It creates a page with only Client-side code (javaScript, HTML, CSS) and sends THAT to your browser. Your browser interprets that code and displays the page. Because you only have access to the client (your computer and your web browser) we'll be focusing on Client-side languages.
A run down of the languages that we'll be covering:
HTML: HyperText Markup Language. This is the bread and butter of web sites. If you know nothing else, you can still make a decent web site that only uses HTML. It was originally designed to mark-up text in order to link pages together. Since then, it's been expanded to include formatting tools (bold, italic, tables, etc). HTML simply tells the browser how to render the page and does not provide much interactivity besides linking to other documents and pages. The current incarnation is called XHTML. It's more strict on syntax and adds more features but is, for the most part, still static.
CSS: Cascading Style Sheets. This language is used to make pages pretty. While it is possible to change colors and fonts and stuff using HTML, CSS allows us more options and freedom in regards to formatting and styling our pages.
javaScript: Or simply "JS". Not to be confused with Java (which is a compiled language that has absolutely nothing to do with javaScript). This language provides more interactivity with web pages. Plain HTML is very static. Adding javascript can make a page very dynamic. While it's pretty easy once you know the basics, it can be VERY powerful if you use it right.
--
That was clear as mud, right? I promise, it's easier than it sounds. Rather than putting you through a lot of computer science theory and trying to explain keywords and constructs and a lot of nonsense that I don't even know... I'm just going to drop it on you. You'll need to know a little HTML first, then we'll jump right into the javascript and all the fun stuff. We'll start simple and work our way up.
Now, open up notepad. First things first... Select File->Save As... from the menu bar. Change the "Save as Type:" to "All Files". This prevents notepad from adding ".txt" to the end of the filename. Name the file "index.html" (without the quotes) and save it to a place on your computer where you'll remember it (I usually save it on the desktop).
A long long time ago, someone decided that the default page of a website should be called "index.html". No one really knows why, but it's the standard. Sometimes, depending on where you host or what language you're programming in, the default name could be something like index.htm, index.php, default.html, default.aspx, or some other variation. You can name all the other pages of your site whatever you want, but the main landing page that the user first sees should always be one of those variations.
Enter the following code:
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
Balls!
</body>
</html>
Save the file. Open a new window in your browser (File->New->Window or Ctrl+N). Open the file you just created in the browser (File->Open->Browse).
Now, what you should see is a page with the word "Balls!" displayed in the top left-hand corner and the words "My First Webpage" in the title bar.
Congratulations. You've created your first webpage.
Now for an explanation of what this code means. HTML is a "markup language" which means that you're basically putting tags around bits of text. The tags tell the browser what a piece of text is supposed to do or what it's supposed to look like. Bits of HTML can be nested in other bits of HTML. For example, the "head" chunk is nested in the "html" tags and the "title" bit is nested in the "head" tags.
The <html> tags must begin and end the web page. This tells the browser that the page is, indeed, an HTML page and should be interpreted as such.
The <head> section defines meta-data (data about the data) relating to the page. This section is not rendered (displayed) in the actual page. It tells the browser, and some other programs, interesting information about your page. This is where we will later add in the Style Sheets and the javaScript.
The <title> tags tell the browser what should be displayed in the title bar. Makes sense, right? Because this is not information that is to be displayed in the browser window, it belongs in the header section.
The <body> tags define the content (or body) of the page. This is the section that will actually be rendered in the browser. Right now, we've only got a small bit of text (Balls!) in there, but later on, we'll be adding all kinds of fun things like tables and lists and images.
There you have it. A simple page that demonstrates the (very) basics of web programming. The vast majority of HTML tags are named according to what they do in plain English. The <head> tags hold header information. The <body> tags hold the body of your page. And so forth.
Keep in mind that HTML tags must be closed. When you open a block of code with an opening tag (<body>), you have to end that block with the matching end tag (</body>). End tags are almost exactly the same as the beginning tag, except the tag name begins with a forward slash (/). Also, keep in mind that all tags must be properly nested. When a tag is nested within another tag, the inner tag must be closed before the outer tag. For example:
<head>
<title>My First Webpage
</head>
</title>
The above bit of code is incorrect. The title tag must be closed before the head tag. Incorrectly nested tags may cause errors and your page may not render properly.
Another thing to make note of is that HTML (as well as most other programming languages) ignores most white-space characters. White-space is the space between words including spaces, tabs, and line-breaks. For example:
<html>
<head>
<title>My First
Webpage</title>
</head>
<body>
Balls!
</body>
</html>
<html>
<head>
<title>
My First Webpage
</title>
</head>
<body>
Balls!
</body>
</html>
The above two pieces code will render EXACTLY the same as your original code. The indention of the original example is simply there to make the code more readable by humans. Computers really don't care. Anything after the first space after a word is completely ignored. The only thing to be careful about is that a space at the beginning of a tag will break the code. Example:
<html>
< head>
< title>My First Webpage< / title>
</head>
<body>
Balls!
< / body>
</ html>
The above code WILL NOT work correctly.
There are ways to reposition elements and add extra spaces and line breaks, but we'll get to that next time. If you're feeling ambitious, you can google HTML and learn about other tags to play around with. If you're not feeling so ambitious, I'll explain new tags as I get to them.
--
Well, that's it for now. I know this hasn't been very exciting, but the information presented in this article has hopefully provided you with the very basics of web programming. Next time, I'll introduce javascript which, I promise, will be a bit more exciting.
Until next time,
~~Ben
Wisdom Archive
- August 2008 (2)
- July 2008 (2)
- June 2008 (3)
- May 2008 (3)
- April 2008 (4)
- March 2008 (7)
- February 2008 (6)
- January 2008 (1)
- December 2007 (3)
- November 2007 (9)
- October 2007 (26)
- August 2007 (1)
- June 2007 (1)
- May 2007 (1)
- March 2007 (1)
- February 2007 (2)
- December 2006 (4)
- November 2006 (4)
- October 2006 (5)
- September 2006 (2)
- August 2006 (1)
Categories
- poonheads (22)
- music (17)
- comic (16)
- site news (12)
- coding (11)
- Classic Wisdom (10)
- video (10)
- I Love Music (9)
- javascript (9)
- photo (9)
- rant (8)
- tutorial (8)
- web design (8)
- hardware (7)
- hobby (7)
- mustaches (7)
- gear (6)
- horrifying (6)
- story time (6)
- earworm (5)
- food (5)
- art (4)
- software (4)
- Coding for Complete Noobs (3)
- movie (3)
- Captain Numbskull (2)
- Everyday Wisdom (2)
- beverage (2)
- knives (2)
- review (2)
- toys (1)
Thursday, February 14, 2008
Coding for Complete Noobs: Chapter 1
Labels:
coding,
Coding for Complete Noobs,
javascript,
tutorial