Thursday, July 17, 2008

XHTML Tags

There are a number of differences between HTML and XHTML, and most of them serve as an improvement. In HTML it was easy to write sloppy code. Sloppy code is hard to read, harder to edit, and even harder to troubleshoot. If one could write clean code, it would make it far easier to read, edit and troubleshoot.

Here are some basic things to remember:

  • Attribute names must be written in lower case (table, not TABLE; a href, not A HREF)
  • Attribute values must be quoted (width="100%", not width=100%)
  • The id attribute replaces the name attribute
  • The XHTML DTD defines the mandatory elements

Let's look at some of the basics of HTML, then go further into the above examples.

html Defines the Document as Hypertext Markup
head Where title tag, css references, javascript, and other code goes. Separate from the body of the page.
body This section contains the viewable area of the document. What the user will see is written here.
h1-h6 Header tags. In order of size, biggest to smallest, beginning with h1
p Paragraph tag
br Line break tag

The above tags will be most commonly used. In HTML, the tags were all upper-case. As HTML progressed, this became more interchangeable. XHML requires lower-case tags.

The one key to XHTML is that when you open a tag, you must close it. <table> must end with </table>. The "/" is how you close a tag. Some tags, like br and hr (horizontal rule), don't have a closing tag. They can be closed with <br /> and <hr />, respectively.

As we go further into this tutorial, we will look at other tags you may need, including tables and images. Let's take a quick look at the other XHTML rules.

In HTML, an item was named with the "name" tag. XHTML replaces "name" with "id". An example would be a form field. <input type="text" id="field_name">, where field name can be name, email address, mailing address, etc. This example covered the quotation rule as well. All attributes must be quoted.

These are the very basics to get you started. In the next lesson, we will build our first XHTML page.


Posted by Jared at 9:26 PM 0 comments
Labels: ,

Sunday, July 6, 2008

HTML - Document Type Definition

In the last lesson, "HTML - An Introduction", we discussed briefly the origin of HTML, and what it is. As HTML has continued to evolve, it has become apparent that many pages write "bad" HTML. To counter this, and to help usher in XML as a standard, HTML 4.01 was upgraded in a sense to XHTML.

Briefly, I will explain a bit about XHTML, as it will become the new cornerstone for this tutorial series. XHTML stands for Extensible HyperText Markup Language. This is similar to HTML, with the addition of the word Extensible. XHMTL is intended to replace HTML. XHTML is not too different from HTML, so the transition for those who are familiar with it will be easy. For those unfamiliar with HTML, you should begin with XHTML. XHTML is defined as an XML application, so it is going to be more relevant for a longer time.

There are three main sections of an XHTML document. They are:

  1. The Document Type (DOCTYPE)
  2. The Head
  3. The Body

This lesson will focus on the DOCTYPE. In XHTML, there are three standard DOCTYPE options:

  • STRICT
  • TRANSITIONAL
  • FRAMESET

Most of you won't be building pages with frames, as they are somewhat out-dated. I will not cover the FRAMESET here. I will focus most on the TRANSITIONAL, since it is not as complicated as STRICT. I build my pages in STRICT, so if you want to try your hand at it, feel free.

Again, as I won't be focusing on the STRICT, I will mention it briefly here. The DOCTYPE for STRICT is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The TRANSITIONAL type, which we will be focusing on, is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This code doesn't change often, so you can just copy and paste from one document to the next. This should be at the top of each page, above the <HTML> tag.

Next lesson: XHTML tags.


Posted by Jared at 7:49 PM 0 comments
Labels: ,

Friday, July 4, 2008

HTML - An Introduction

So you want to build a web page, or add some spice to your blog, and you heard about this thing called HTML. "What is HTML?" you may ask. It is an acronym standing for Hyper Text Markup Language. There is a lot of background behind the HTML name, but suffice it to say you are making a text document that you will mark up with something called tags. HTML is saved with a .htm or .html extension. Thus my page called "newpage" will become "newpage.htm" or "newpage.html". HTM is intended for older operating systems such as Windows 3.1. You should name your files with the .html extension.

Wikipedia has this to say about the origins of HTML:

"In 1980, physicist Tim Berners-Lee, who was an independent contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee and CERN data systems engineer Robert Cailliau each submitted separate proposals for an Internet-based hypertext system providing similar functionality. The following year, they collaborated on a joint proposal, the WorldWideWeb (W3) project,[1] which was accepted by CERN.
http://en.wikipedia.org/wiki/HTML

I think this is a good start on the history of HTML, and I don't think I want to bore you with too much more of it. My fellow nerds can look to wikipedia to get more technical stuff.

You may be asking "Why, out of all the people teaching HTML out there, should I listen to you?" I hope to answer that question here.

The Internet, or Web, hit the mainstream in force in 1995. I was just a sophomore in high school at the time. By my senior year the bug hat bit. I was hooked. I have been building web pages for pay, for free, and for personal interest and development since 1997. I am currently employed as the Manager of Web Development and Digital Media at a well-known southern Calfornia Law School. I build and manage pages all day, then go home and build pages all night. I take time for my family and my blogging too, but that is beside the point. I am fluent in HTML, Javascript, PHP, SQL, MySQL, XHTML, and CSS. I have experience in XML, XSL, Java, ASP, PERL, and Apache. I am continually learning new things, and will be passing new knowledge down to you.

Well that about sums it up. Ready to get started? Watch for my next post on Document Type Definitions (DTDs), the cornerstone to modern web page development.


Posted by Jared at 11:22 AM 0 comments
Labels:
Subscribe to: Posts (Atom)