Jonas Stawski

Everything .NET and More

HTML 101

As promised, here I am back with some basic HTML concepts. You can take this post as the promised second part of "Oh my, look at that HTML." Anyway, let's get started.

As mentioned before, HTML is the most basic part of a website and if it's not well formed, then it might not render as we intended. Here are some basic concepts:

1. HTML is very similar to XML, but it's neither XML nor a subset of it. As opposed to XML, HTML is more forgiven. It is not case sensitive and not all tags have to have an ending tag.
2. Designing website with HTML is not like designing photos with Photoshop. You can't move an object around and place it wherever you want by simply dragging and dropping. You have to use tables and play around with cellpading, cellspacing, and borders to display objects where you want them on the screen. Visual Studio 2003 contained a feature where you could move objects around by dragging and dropping. It used CSS to set an X and Y coordinate, but like I just mentioned, this is not HTML, it's CSS. That feature was on by default and I hated it. The first thing I did when I created a new web project was to turn it off. In 2005 that feature was removed, or if it wasn’t removed then it's not on by default. I wonder why...
3. An HTML page should contain, at a minimum, the following tags:
Everything in the HTML document should be contained within the <HTML></HTML> tags. Any header information like the title of the page should be contained within the <HEAD></HEAD> tags. And the body should be inside of the <BODY></BODY> tags.
4. It is a good standard to have a closing tag for every opening tag, but it is not always necessary. A closing tag should be included whenever the opening tag contains children objects. For example the HEAD, BODY, TABLE tags all contain children and therefore should contain a closing tag. The INPUT tag for example doesn't contain children and therefore it is not necessary to include a closing tag.
5. A tag can be closed in 2 ways:
    A. Adding the opening tag with a "/" infront of the tag name. I.E. <TABLE></TABLE>.
    B. Adding the "/" at the end of the tag. I.E. <IMG />
6. Each parent tag can contain specific elements as children. Here are a few examples:
    A. Tables can only contain rows as children: <TABLE><TR>...
    B. Rows can only contain cells as children: <TR><TD>...
    C. Cells can contain almost anything.
    D. A dropdownlist can only contain options as children: <SELECT><OPTION>....
7. With point 6 established the following HTML segment is malformed:
    <TABLE><FONT SIZE=3><TR><TD>hello world</TD></TR></FONT></TABLE>
8. A Last In Last Out approach is used when closing tags. If you open a FONT tag and then a BOLD tag, you should first close the BOLD tag and then the FONT one. I.E. <FONT COLOR=RED><B><I>Some red, bold and italics text</I></B></FONT>

That's it for now. Happy Programming!

Add comment