The Basics

This section of the tutorial is placed first so that the user (that means You!) can see how HTML is supposed to work and understand the logic behind it. With a good idea of how things work and tie together, it'll make a lot of things easier in the long run.


Nature of the Beast

First things first, an explanation for the word "HTML" is called for. HTML stands for "hypertext mark-up language". The "language" part is a bit of an exaggeration, as HTML is not a true programming language. While it looks like a language at first glance, one with any programming experience will notice that it works much differently. That's where "mark-up" comes in. HTML takes straight text, such as what you'd type in Notepad, Word, or whatever, and modifies, or marks up, the display. To do this, it uses elements not that are not normally found in regular text documents; this is what is meant by "hypertext", as the tags used in HTML aren't typical text.

So, what does it all boil down to? Simply this: HTML is a regular document as written in any common word processing or text editing program that uses specialized tags to spruce up the display. When you type, "The quick brown fox leapt over the something or other," and you want it underlined and italicized, you'll type:

<u><i>The quick brown fox leapt over the something or other</i></u>
which will turn out like this:
The quick brown fox leapt over the something or other
Where to start

In order to come up with a useful and enduring web site, you have to think of one thing first: CONTENT. You can have more bells and whistles than any other site out there, but aside from the wow factor, who gives two craps about that? The World Wide Web is all about information and exchange of ideas (with a little porn and piracy on the side, of course), and looking at a site with a ton of graphics and applets and other stuff that take forever and a day to download, belie the purpose for the page, and become a total annoyance is going to make people leave and not come back until they want to rip something off your page. That's not to say that things like that are all bad; if you're aiming to serve multimedia, then go for it. But what is most important is what you're offering on the page is something that someone may find really useful or entertaining and that it's not buried in crap.

This'll sound pretty lame, but visualization of your goal is the first step toward realizing it. Take out a pad and pencil and sketch how you want it to look; take time doing the research on the subject so that you don't present skewed information; don't plaigarize (steal) information, always credit your source (unless all the other sites have it up and the source is unknown, in which case why are you wasting your time posting it?); or otherwise make an idiot of yourself. Netizens are very touchy on certain subjects, and these are a few of them. You don't want visitors to your site to think you're a dunce, because it'll haunt you for a long time afterwards.

Once you have an idea of what you want to do on your site, you should really figure out how you want to publish it. For example:

     What web service will I be using to upload my page to?
     What program(s) will I use to make my pages/graphics/multimedia?
     Who am I looking for to visit my site?

And on and on and on...

A good example of what thought processes go into this: I have a personal web site that has a lot of information specific to me (favorite movies, music, celebrities, etc.) that I wanted to have up so people I know but am separated from could keep up with what I was doing. I come up with some interesting things for people to do at my site, such as download samples of my favorite songs, links to web sites devoted to my favorite films, and sign a guestbook so my friends and I can keep tabs on each other. After coming up with the content of the site, I started looking around for a place to stick it; since my 10 megabyte university account was collecting dust and serving no real use, I decided to poke it there after contacting the university help desk and figuring out how to do it. I then started putting everything together for the site. First I discovered what could be used to create a site (I started out using Notepad, MS Paint, and DOS FTP for creation of pages, graphics, and moving them to the server; not exactly the easiest to use but it was free!). Next I started writing out things to say on the pages, and added relevent links in parenthesis where helpful. I finally took the plunge into HTML by going to the fantastic HTML Goodies site, which I credit for my very disturbing affinity for hand coding web sites. When I had something that passed for a decent site, I put it on the web. I continued to add things fairly regularly to the page, such as music samples, a site search engine, and frames.

As you can see from the above example, HTML is only a small part of making a site. There's a ton of other stuff that should be thought out and examined before you job yet another aimless and useless page onto the pre-existing sea of junk on the Internet.

HTML Conventions

HTML is not a very demanding format, particularly when compared with the real programming languages. All one really has to remember about HTML is to close the tags that you open around the text. For example, if you want to boldface something, you start with opening the tag (<b>), then you write your piece, and you close the tag (</b>). There are some exceptions; with the "new paragraph" tag (<b>), it's acceptable to write is as <p />, and in fact it is desirable that you do so in upcoming revisions of HTML. I use this all the time, mainly because it makes the source code (the raw document as viewed outside the browser) much cleaner, easier to read, and shorter. However, until the just-starting web author comes to know what he/she can get away with, stick with what's foolproof; as long as you open your tag and close it, you'll make it just fine.

Another nice aspect of HTML is the use of white space. White space is any space not taken up by code. Take this for example:

<ol> <li>Number One</li> <li>Number Two</li> <li>Number Three</li> </ol> <ol>
     <li>Number One</li>
     <li>Number Two</li>
     <li>Number Three</li>
</ol>

Either way, the two above pieces of code will result in this:

  1. Number One
  2. Number Two
  3. Number Three

White space allows for convenient placement of tags and such that will make code much easier to debug and figure out later. You can also make use of white space inside the tags if necessary. This is in direct opposition to conventional programming practises, as breaking up a piece of code indiscriminately will cause problems in the program in result in tons of errors.

Another common convention in HTML (as well as in any other scripting or programming language) is the act of commenting. A comment is just what it sounds like; you place a comment in the code to describe what it does so that you can more easily figure it out later. This is a great habit to get into! There are two ways to leave comments in your HTML source code: either use the <comment>...</comment> tags or the <!-- ... --> tag. With big and/or complex pages, you'll want to leave comments everywhere in your code where it isn't obvious what's happening (side note: when using JavaScript, the comments will look like /*..*/ or //...; as JS is a programming language, HTML tags won't apply, but placing the JS code inside an HTML comment prevent the JS code from appearing on your site)

Extra-HTML items

JavaScript was mentioned in the previous passage. If you've never heard of JavaScript before, it's a subset of mnemonics from the Java programming language that is interpreted directly by the browser from inside an HTML document. In lay terms, it's a bunch of specially picked Java codes that can be placed in the page and can be used to perform some nifty little tricks like image flipping, linked lists, and a lot of other helpful things. However, it can also contribute to the dreaded pop-up advertisement and cookie tracking, so don't expect every browser to have the option to run it turned on.

Java applets are specialized programs that were created to run in browser windows and generally serve to spruce up a design, present a modified graphic, actually run simple games, and many other things. They are really cool, but they have the downside of taking forever to load and requiring a real programmer to create applets (translation: $$$).

Flash is a special type of program that can be embedded in an HTML document. It's almost like a Java applet in that it does something impossible in standard HTML, but that's about it. It's used a lot like a PowerPoint presentation, sometimes even giving the appearance of an animated movie. While very dynamic and highly entertaining at times, it is plagued by being a slow download and being used by poor webmasters to make up for poor site content. Flash is similar to Shockwave, which must be run from a special server in order to display over the internet, but from the user's side the differences are difficult to see.

CGI, or Common Gateway Interface, is a program that runs on the server side (as opposed to client side; i.e., your browser) and does many things such as data collection and dynamic HTML generation. For example, ezboard and most other popular message forums run on CGI or a derivative of it. While easy on the user computer, it can tax the server it sits on and can be slow, depending on network usage and server load.

Cascading style sheets (CSS), or more commonly referred to today as style sheets, are used to pre-set the way a specific HTML document is displayed. One of the more useful and widespread uses of CSS is to create a consistent layout between many pages without having to repeat code over and over again. It can also be used to actually re-define the meaning of HTML tags, leading to the arrival of Dynamic HTML (DHTML) and the advent of extensible markup language (XML)

Use of these extras is well and good, but it is emphasized that one knows what they are doing before unleashing rogue JavaScripts, huge Java applets, crappy Flash or Shockwave animations, buggy CGIs, and garish style sheets. While all these things can greatly add to a web site's appeal, they can also ruin an otherwise solid page.

Wrapup

  • HTML is essentially a text document with tags that change the textual format, or way the words are presented.
  • All good web sites start with content, some useful or entertaining "stuff" presented within that will make people want to see and stay apprised of. All the cool little doohickeys that can be crammed into a page doesn't make a good site; at best they are literally one-hit wonders
  • Have an idea of what is to be accomplished by the site's existance before any coding begins.
  • Use good web sites as examples when figuring out how you want it to to work/look like/present information.
  • Remember a few things about HTML in order to stay straight: Close every tag that is opened, take advantage of white space to help you work with the page, and leave comments in the code.
  • Be aware of the other commonly seen yet non-HTML things and know what effect is desired and how it is done before trying to incorporate them into a web site.