Web Design & Development
[ Web Design & Development Topics ]
So now we know what HTML is, lets talk a little bit about the basics of programming (aka, writing) in HTML.
First off, you need to have a way of writing your HTML documents. Lucky for you any text editor will work as all you need to be able to do is create plain text files
Some free of cost text editor options include:
Windows Notepad (go to "start", "run" and type "notepad")
Textpad which you can obtain free if charge from http://download.com.com/3000-2352-10196626.html?tag=lst-0-1
SimpleText for Macintosh
Editpad which you can obtain free of charge from http://www.editpadpro.com/editpadlite.html
Smultron for Macintosh free of charge from http://www.apple.com/downloads/macosx/development_tools/smultron.html
The one thing you do not want to do is use a Word Processor to make your HTML files and then do "save as HTML". This adds a ton of code that you don't really need to your HTML document. If you do use a Word Proecessor then you will want to save as Plain Text. You are far less prone to error though if you just use a text editor instead.
This leads me to my next point - clean code. What do I mean? Well, we want to write code that doesn't have a bunch of unnecessary or redundant stuff in it. We want our code to be as short and clear as possible while still following established standards. The reason we want to do this is so that it is easier to manage in the future, and so that we can be confident about what the outcome will be for that page on many different types of browsers.
A sample of not-so-clean code (actually the font tag is deprecated, meaning no longer to be actively used):
<body lang=EN-US style='tab-interval:.5in'>
<div>
<font face="Arial, Helvetica">
<p><span style='font-family:Arial'>Here is my sample code<o:p></o:p></span></p>
</font>
</div>
</body>
A clean version of the same:
<body>
<p style="font-family:arial">Here is my sample</p>
</body>
The second one is easier to understand, isn't it? There is actually a program that is free that checks to see if your code is "clean". It is called Tidy, a utility originally by Dave Raggett and now developed at SourceForge. It cleans up and fixes errors in HTML pages. You can check it out at http://www.w3.org/People/Raggett/tidy/
The best way to get to know HTML is to start trying to write it yourself, so lets get started! The basic HTML document, as noted above, has three main items: something saying it is HTML and what version it is, the header section, and the body section. It looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
Body text goes here.
</body>
</html>
Notice that every "opening" tag such as <html xmlns="http://www.w3.org/1999/xhtml"> has an "ending" tag </html>. This is considered good coding. Some things will work without the ending tag but it is best to always put an ending tag on anything you open.
Try typing the above in your text editor, save it as test.html and then try opening it in your Web browser. You should see a page that just says " Body text goes here". That was your first XHTML page!