So I see you have found your way to the first real chapter. Well, let's get started with a list of concepts (I'm an admirer of those old text-books).
- The tools you need
- The concept of tags
- Start tag syntax
- Attributes and what they are
- End tag syntax
- A few final notes about HTML
- A recap about syntax <<Go here for a quick start
The Tools You Need
First off, where does one write HTML coding? Do you need a special program or compiler? Of course not! All you need to write high quality HTML code (like I do) is a word processing program, the simpler the better. You don't exactly need Microsoft Word 98® to write down some gibberish! Windows machines come with Notepad® and Macs come with Simpletext®. Both are great. Just remember to save the file with an .htm extension for Windows, and a .html extension for Macs. It's that simple.
Next, what the heck do you type in, anyway? The tag, the basic information unit in HTML. Well, let me explain this slowly. HTML is comprised of many elements that have different functions. In order to use an element, such as an image, you must use its respective tag. Tags are really just like placeholders for people at a dinner table; you want a person to sit somewhere, but they don't know where they sit. So you put a placeholder to tell them where to sit. A browser is like that. It uses tags to assmeble your page because it doesn't know where everything is put.
Now let's take the placeholder analogy further. Just as everyone has a name, many have nicknames, too. So you put their nickname on the placeholder. That's kind of how it is in HTML. Tags sometimes don't have the name of an element, but instead a nickname of sorts. And there's a lot of other stuff you can put on a placeholder. Like how much the person eats (OK, I realize I'm stretching it here, but give me a break, it's not easy to write a book). Tags contain things called attributes that describe the properties of the element. Like the element's size, placement type, et cetera. Now, there are many types of elements, such as images, links, fonts, et cetera.
And now here's a new concept: the end tag. Tags have end tags which tell the browser where to end an tag/element. Most tags have them. There really is no analogy I can use. Now that I've confused you enough, on with the explanations!
When you begin to code your HTML document, you type in tags. There is a standard syntax for tags. It is very simple. Here it is:
The Concept of Tags
Start Tag Syntax
You see? The syntax for HTML is very simple. Every tag is enclosed by the less-than(<) and greater-than(>) signs. The name of the tag goes first, like tag_name; that's required. The attributes follow the name, in no particular order. Attributes with values have the values going after an equals symbol, like the attribute1 attribute. Attributes without valuus are just put in, like attribute2.tag_name represents any element (link, image, et cetera). Many tags (for our purposes tag and element are interchangable) have attributes which are properties that can be altered by the programmer. For example, if we take image element, we can do several things to our image, as shown below:
Now, what is that img thingy? Well, that's the HTML "nickname" for image. So if you want an image, you will type in img instead of image. Now, what is src? Well, that's an attribute, and the most important for this tag (don't worry if you don't quite get it; I'll explain this tag in more detail in chapter ). Src is a shortened version of "source." The src attribute identifies the source of the image to be placed in the page. The width and height attributes obviously define the height and width of the image.
Now let's concentrate on the attributes. If you remember, attributes are the properties that certain elements have; you can change the attributes to achieve the effect desired. Attributes often have values, either numerical or alphabetical. These values can be written in several ways, as shown below:
Attributes
attribute = 1
attribute =1
attribute="value"
attribute=value
As you can see, there are so many ways to write down the attributes. HTML is a very flexible language. It is not case-sensitive. It doesn't care if you include a space after the equals-sign, a space before, no space at all, et cetera; if it's an alphabetical value, HTML doesn't require you to include quotations. However, there are certain things that most programmers prefer: don't include spaces before or after the equals-sign, don't use quotation marks for numerical values, but do use them for alphabetical values. You can do whatever you want. Basically, BE CONSISTENT! That's about it.
There is another thing concerning HTML syntax. An end tag is a tag which identifies the end of the element. For example you have coded the tag for making text bold. But you don't want all the text bold. Just a few words. So you have to use an end tag which tells the browser where to stop the bold effect. So you write something like this:
End Tags
If you typed that in (with other code, of course), you would get this:
| Sample Text - Microsoft Internet Explorer |
| This is the text to be in bold and this is the text not to be in bold. |
Incredible, isn't it? Well, to make part of the text bold, I wrote the <b> tag. But to end the bold effect, I had to use the end tag of the <b> tag, the </b> tag. Now I can explain. End tags have a simple syntax, as shown below:
There it is. The syntax (aren't you just in love with that word by now?) for end tags is very simple. You have the less-than symbol, then a slash (/) which tells the browser that this tag is an end tag, the name of the tag/element that you want to end (tag_name) and the greater-than symbol. Unlike start tags, no attributes are ever written in the end tag. Just four simple things. Voila!
There's something you need to know: Browsers will ignore any extra characters. That means that if you include a few extra spaces into a tag, nothing will happen. That also means that browsers will not recognize extra "returns". What I mean is that when you press "Enter" to get a line break, that break will not show up on the page. You can press it all you'd like, and nothing will happen. In the code, it will seem like there is a break, but when you view it in the browser, you'll sadly note that there is nothing there. It's not "what you see is what you get" in HTML. Far from that. (By the way, there's a tag to create a line break on the page, the <br> tag. Don't worry about that right now.) But remember: extra characters in the HTML code will not effect the web page when it is seen in a browser window.
Hopefully, you the reader now has a grasp on the syntax of HTML. But for those of you with short attention spans, here's a quick recap:
A Few Final Notes
A Quick Recap
Well now that you are knowledgeable about the syntax (how many times have I used that word?), go on to Chapter 2: Page Structure and Format Tags.