Basic Syntax
What HTML looks like
Here's a sample of some typical, simple HTML code:
|
You might be surprised to know that you can view the code of any web page yourself, to see how it was done. It's very simple. In Netscape, just go to the View menu and select Page Source. In Internet Explorer, go to the View menu and select Source. When you view the source, you'll see something that looks like the source code above, though on many pages it will be more complicated than this.
Tag basics
Notice the items that look like this: <HEAD>, <BODY>, <TITLE>. These are tags. Tags are always contained within "angle brackets," the < and > characters. The first word in the tag is the tag name, which is sometimes followed by a list of attributes.
For example: the tag <P> is named "P." Sometimes the name, P, is followed by additional tag attributes, like this: <P ALIGN="CENTER">. Attributes are specific properties of a particular tag that modify the way the tag is displayed. We'll learn about the different attributes as we learn each tag.
Some tags come in one part, such as <HR> or <BR>. These are called standalone tags, because you only need to place one standalone item on the page to use these tags. Most tags, however, come in two parts, such as <P> and </P> or <BODY> and </BODY>. These are called container tags, because they "contain" and apply to the text that appears between the two halves of the tag. For example:
|
In the previous sentence, the word "too" is contained inside the <I> and </I> tags. The effect of those tags will apply only to the word ("too") contained between them.
Tags are case-insensitive, so there is no difference between <BODY>, <body>, and <Body>. But when you are writing HTML, it's a good idea to type your tags in all caps, like this: <BODY>. This will make it easier to read your code once your pages get longer and more complicated. It's hard to scan your pages for code errors when the tags are all lower-case -- they tend to blend right in with the rest of the text, and code errors become very difficult to find.
There is a newer markup language, the successor to HTML 4, called XHTML. One way that XHTML differs from HTML is that XHTML tags are case-sensitive, and all tags in XHTML must be lower-case. For now, you are learning HTML, and so you can go ahead and write tags the HTML way -- just be aware that you will probably be converting your pages to XHTML someday, and at that point you may need to change a few things.
Later in the course I'll mention a few other XHTML issues.
Getting started
We're about to create your first Web page. The first thing to do is open a new file in a basic text editor. You don't need any expensive software to do this; a simple plain text editor will do. If you are using Windows, NotePad will work. On the Mac, SimpleText will be fine. And on Unix, Pico is a good basic editor.
Open a new file and save it. (Sometimes it won't let you save until you've actually typed something in the file. In that case, just type a letter or two, then go back and delete after you've saved.) When you are asked to type a name for your new file, make sure you give it a name that ends in .html. For example, mypage.html or helloworld.html. If you don't name the file this way, the page will not display correctly in your web browser.
Also, don't put any spaces in your file's name, and name the file in all lower case letters. This will make your life much easier when you get to the point of uploading your files to an actual working web server.
|
mypage.html
|
my page.html
|
Good:
Bad:
In the next section, we'll make your first page. Hang on, we're about to take off!