Objective: Memorize basic HTML structure and acquire a comprehensive knowledge of HTML tags and their capabilities.
HTML is a very simple mark-up language for text. The markers or tags are nearly all of the format
<tag [tag-attributes, directives or data] >
Typically, tags affect all the text following them until the next occurrence of their own closing tag
</tag>
although some tags like the line-break, <br>, and the horizontal ruler, <hr>, may be found by themselves unpaired with any corresponding closing tag.
Tags are case-indescriminate—they may be in lower, uppper or mixed.
Interspersed with these tags, text gets dressed up so that when displayed by a browser, it gets formatted into a nice looking page.
For example, the simple section heading and first paragraph at the top of this introduction are expressed
<h4> A Brief Introduction </h4> <p> HTML is a very simple mark-up language for... </p>
which you can see by right-clicking on the page you are reading and choosing View Page Source if using Firefox or View Source in Internet Explorer. This ability to view the mark-up of any webpage you are reading is the key to learning to imitate tricks that may never occur to you if you only learn HTML through a tutorial. It is also useful for viewing CSS and JavaScript code, though often these are hidden in separate .css and .js files and you will have to copy their names (and paths) and figure out how to amend your browser's address line to sneak into them.
(Note: if you peruse my HTML code, you may notice the absence of many closing tags. This is because browsers are generally looking to the start of the next tag and don't always care about closing tags. It is considered poor practice not to close tags and your HTML code will not pass any of the HTML/XML checker application programs. Neglecting them does improve readability, however, and if you open your HTML file in any HTML editor like Dreamweaver, Nvu or FrontPage, all these tags will be inserted in the right place although your formatting will be destroyed.)
Last, dynamic HTML is magic produced through a clever combination of cascading-style sheets (CSS) and HTML. This is still mark-up code, but it's sensitive to simple states like whether the mouse is hovering over a particular area, whether the mouse is in a certain construct when clicked, etc. Rather elaborate effects such as hierarchical menus and repainting techniques can be implemented without resorting to CGIs or Perl scripts on the back end (the server host holding the page) or even JavaScript on the front end.
With these ideas in mind, you are ready to find a tutorial among those listed immediately below. At the end of this list you will find a free pop-up utility from VisiBone that can be very useful once you have grok'd HTML. VisiBone sells some wonderful cheat sheets that can be hung on a wall or otherwise quickly consulted. I own several cheat sheets for HTML, CSS and JavaScript.
In keeping with the ultimate project, a DVD cataloguer, create the following form using HTML. Hint: do not peak at the HTML on this page if you do not want the answer before you have tried to work it out for yourself.
As it sits here, this form sends the information filled out to [email protected], but ultimately, we'll be posting the data to a server-resident application (or servlet) that manages the actual entry into the database. Also, we'll have to provide a way to find and delete entries from our DVD titles.