Someone called me with a project, they sent me the content for their website, which I would then upload to Microsoft Frontpage or a text editor, insert some HTML tags for formatting and some graphics to make the site colorful, and the job was finished.

The wireless revolution changed everything. Almost every electronic device now comes equipped with access to the web and email. Palm tops, laptops, cell phones, even computer screens installed in automobiles are now connected to the internet. The web browsers and operating systems installed on these wireless devices are often very different from what is installed on an ordinary desktop PC. Many elements of the HTML programming language are not compatible with some of these wireless platforms. As a result, web design has completely changed. Cross-platform programming languages and specifications have been created so that websites can be viewed on any PC or wireless gadget.

These new innovations include languages such as XML, XHTML, and XSL, to name a few. XML was probably the most important of all of them, because it allowed a programmer to define data without telling the browser how to display it. The problem with HTML is that it defines data and also tells the browser how to display it. XML is different in that it merely defines the data, and allows the browser to display the data as it sees fit. Languages such as XHTML and XSL were developed in order to convert XML documents into web pages that could be displayed in a manner that was compatible with all browsers.

Now that you have some background on how and why web design has changed, you are now ready to learn about Document Type Definition (DTD). DTD is a tool that enables a programmer to define the format to be used for the data in an XML document. Remember, XML does not tell the web browser how to display or format content. DTD helps to establish the format.

An XML document consists of five different components. There are elements, attributes, entities, PCDATA, and CDATA. We will start with elements. Elements of XML are the tags. There are no predefined tags with XML; you can create your own tags. HTML does not work this way. All of the tags used in HTML are predefined, such as the paragraph tag and the body tag. Attributes provide additional information about the tags, such as the source file for an image, or the alignment to be used for a paragraph. Entities are variables that define commonly used text, such as the no-breaking-space entity. PCDATA is used to mark data that is to be parsed or separated into more easily processed components and to cause tags within that data to be interpreted as markup instead of as ordinary data. CDATA is used to mark data that is not to be parsed and to cause the tags within that portion of the text to not be treated as markup. As an aside, markup is any language that defines how certain text is to be displayed or structured.

For novice programmers, DTD is a little hard to get used to. I recommend that you search for tutorials on any major search engine, or perhaps find some courses offline at a local college or computer science institute. If you have never studied XML, XHTML, or XSL before, then you should find a broad-based curriculum of computer programming courses that teach you all of these languages so that you can learn to incorporate them together when you create web sites.

Learning to use these new specifications and languages is essential for any web designer. With so many people using cell phones and other wireless devices to surf the net, by creating your web sites exclusively with HTML you run the risk of your site being invisible to a wireless internet user. Designing web sites that are cross-platform compatible is a must in the wireless age we now inhabit.

Tag:

Add to Del.icio.us | Digg | Yahoo! My Web | Furl

Bookmark WebProNews:

Jim Pretin is the owner of http://www.forms4free.com, a service that helps programmers make email forms.

Part One can be viewed here. For Part Two I will discuss:

A. What to validate your web pages for

B. The validation process

C. Validation Tools

D. Common validation errors

A. What to validate your web pages for:

1. Doctype

2. HTML or XHTML document ( or other coding languages you have used)

3. CSS style sheet

4. Links

5. Browsers

6. Screen Resolution

7. Connectivity

B.The validation process

1. Use the correct DOCTYPE ( Document Type Definition, or DTD)

This defines which version of HTML or XHTML your document is actually using. It’s needed by browsers or other tools to process the document correctly.

Using an incomplete, outdated or no DOCTYPE at all, throws some browsers into “Quirks” mode, where the browser assumes you’ve written old-fashioned, invalid markup.

This means that your web pages may not render well in all the major browsers.

The DOCTYPE tag should be placed at the top of each web page.

Here are the correct DTDs to use:

HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Here’s an example of a web site I recently designed which has correctly validated XHTML and CSS: http://www.discount-real-estate-listings-md.com/

2. Validate your HTML or XHTML document ( and other coding languages you have used).

If you validate your code it will make it easier for:

- search engines to index your web pages

- pages to load faster

- make your pages accessible for other devices that surf the Web.

- checking coding errors by running your pages through a validator.

3. Validate your Cascading Style Sheets (CSS).

If there are errors in your CSS, the layout of your web pages will be affected and your site will not appear correctly when viewed in any of the main browsers.

4. Validate your links

Broken links in your web pages will:

- frustrate your visitors when searching for relevant information from your site.

- affect search engine rankings. When spiders can’t index the links on your site they won’t find your keyword rich web pages.

5. Check browser compatibility

The main browsers you should design your web site for include: Internet Explorer (IE6, IE5), Firefox, Opera, and Netscape (Mozilla).

This is according to the current statistics taken from: http://www.w3schools.com/browsers/browsers_stats.asp

6. Test for different screen resolutions

The current trend is that more and more computers are using a screen size of 1024×768 pixels:

Here are the stats for June 2005:

1024×768…………………………56%
800×600………………………….28%
Higher than 1024×768…………11%

7. Check connectivity speeds

Web pages that contain a large number of graphics or tables, use flash or video, will load slowly or sometimes not at all with a dial up connection but will be fine with a cable or dsl connection. Although the trend is towards people converting to high speed connections many still use dial-up to surf the Net for information. Therefore design your site for both.

C.Validation Tools

HTML/XHTML validation

http://www.validator.w3.org/

CSS validation

http://jigsaw.w3.org/css-validator/

Link checker

http://validator.w3.org/checklink

Browser Compatibility

http://www.anybrowser.com

Connectivity Test

http://www.websiteoptimization.com/services/analyze/

http://www.netmechanic.com/maintain.htm

D.Common HTML/XHTML validation errors

Improper Nesting of Tags

This is a very common error. You should close tags your in the reverse of the order you opened them:

<xx><yy>content</yy></xx>.

An easy error to make, but it’s easy to fix, too.

Missing alt tags

You should include alt tags for all your images with a text description so that visitors will still know what the image is about even if they turn off viewing images in their browser.

Improper closing of tags

ie <p>This is a paragraph<p>. The end tag should be </p>

It will validate in html, but not xhtml.

For XHTML 1.0 validation it’s easy to omit these closing tags:

<br /> or <hr /> or <img src="xx.gif" />

Margin height and width

marginheight="0"
^Error: there is no attribute “MARGINHEIGHT” for this element. Use CSS to fix this error.

marginwidth="0"
^Error: there is no attribute “MARGINWIDTH” for this element. The only fix for this is to utilize CSS and absolute positioning.

Horizontal Line Color

<hr size="1" color="#C0C0C0">
^Error: there is no attribute “COLOR” for this element.

This can only be fixed with CSS.

ie <div
style="color:#000;background-color:#C0C0C0;height:1px;font-size:1px;">
</div>

Border Color

bordercolor="#ffffff"
^Error: there is no attribute “BORDERCOLOR” for this
element. This can only be fixed with CSS.

Unescaped Ampersand (XHTML)

Always use & in place of &.

Conclusion:

If you get into the habit of always validating your web pages, your web site will be faster loading, more search engine friendly, accessible to a greater number of devices and therefore appeal to a larger number of visitors.

Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of http://www.iSiteBuild.com. Affordable
Web Site Design and Web Hosting. Subscribe to his
“Marketing Tips” newsletter for more original articles.
mailto:subscribe@isitebuild.com. Read more of his
in-depth articles at: http://www.isitebuild.com/articles

Let’s recall that some basic features of XML are:

XML can keep data separated from your HTML XML can be used to store data inside your HTML documents XML can be used as a format to exchange information XML can be used to store data in files or in databases

The power and beauty of XML is that it maintains the separation of the user interface from structured data, allowing the seamless integration of data from diverse sources. Customer information, purchase orders, research results, bill payments, medical records, catalog data and other information can be converted to XML on the middle tier, allowing data to be exchanged online as easily as HTML pages display data today. Data encoded in XML can then be delivered over the Web to the desktop. No retrofitting is necessary for legacy information stored in mainframe databases or documents, and because HTTP is used to deliver XML over the wire, no changes are required for this function.

Once the data is on the client desktop, it can be manipulated, edited, and presented in multiple views, without return trips to the server. Servers now become more scalable, due to lower computational and bandwidth loads. Also, since data is exchanged in the XML format, it can be easily merged from different sources – ok, this is the aspects that personally interests me. The portability of data. Database programmer all over the world face unlimited problems while tackling with data of multifarious formats. If formats cease to matter, anybody, anywhere, on whichever machine, can view and manipulate the data.

From the previous article, we might recall the XML, unlike HTML, does not have proprietary tags. We can go on a wild trip and define our own tags, according to the necessity. Consider this for example:

-==-

If you can’t make out what this is all about, don’t worry. This is just an imaginary schema of a data structure that can be represented through an XML document.

Before you get the time to come to grips with the gory XML introduction, I present a more evolved version of the above mentioned XML code:

-==-

The above is a comprehensive example of a DTD – Document Type Definition. XML provides an application independent way of sharing data. With a DTD, independent groups of people can use a common DTD for interchanging data. Your application can use a standard DTD to verify that the data you receive from the outside world is valid. You can also use a DTD to verify your own data.

In this example, the data structure is well defines. Each parent node has a child node, and some child-nodes have grand-child nodes and so on.

Amrit Hallan is a freelance copywriter,
and a website content writer. He also dabbles
with PHP and HTML. For more tips and tricks in
PHP, JavaScripting, XML, CSS designing and
HTML, visit his blog at

http://www.aboutwebdesigning.com

To see how, take a look at two pages on our test Web site. We’ve used Browser Photo to create a screen shot of each page as viewed with IE 6.

These pages are identical, except for one line of HTML code that tells IE 6 whether it should use its “classic” rendering engine, or the new standards compliant rendering engine. Page 1 uses the classic rendering engine and displays the way we intended. Page 2 uses the standards-compliant engine, and doesn’t render the page anything like we’d intended.

Why? The new rendering engine changes the rules for writing style sheets so that some things that were permitted in the past are now illegal. In our example, there are three specific rules that we’ve violated. These minor errors were forgiven by older versions of Internet Explorer and by IE 6 when it uses its classic rendering engine, but the new rendering engine isn’t so generous.

This switch between the new and classic rendering engines is triggered by a single line of HTML code known as your Document Type Definition, or DTD.

Officially, every one of your Web pages should begin with a DOCTYPE tag. This tells the browser exactly which version of the HTML standards to use when interpreting your page. The DOCTYPE tag is one of the more arcane parts of the HTML language. Understanding exactly how to write a DOCTYPE can be a real chore.

In practice, you can build a Web page without specifying a DOCTYPE tag. However, many conscientious HTML coders include it, and many HTML editors will automatically insert it into your pages.

IE 6 uses the DOCTYPE tag to decide which rendering engine to use. If your page doesn’t use a DOCTYPE, then IE 6 will use its classic engine. Also, if you use a DOCTYPE that includes the words “Transitional,” then IE 6 will usually use the classic engine. That’s the way Page 1 is written, using this DOCTYPE tag:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

However, if your DOCTYPE tag includes the words “Transitional” and gives a URL where the DTD can be found, then IE 6 will instead switch to the new rendering engine. So this version of the tag will use the new engine:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

Likewise, if your DOCTYPE doesn’t include the word “Transitional” or includes the word “Strict,” then IE 6 will use the new rendering engine. So either of these DOCTYPE tags will trigger the new rendering engine:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN”>

Are you confused yet? You should be – the rules for the DOCTYPE switch are complex. To see a full explanation of them, check Microsoft’s site for details.

By now you may be asking why in the world Microsoft decided to introduce such a complex feature. Why introduce something that will undoubtedly break a lot of Web sites?

In truth, with the introduction of its dual rendering engines, Microsoft is trying to play by the rules, and do so in a way that minimizes the disruption to Webmasters.

In the past, Microsoft and Netscape have both been criticized for not complying with the W3C HTML standards. During the height of the Browser Wars, both companies introduced proprietary HTML tags in an effort to dominate the browser market. That created major headaches for Web Designers who have to decide which HTML tags work under which browser.

Those headaches still remain, and are the main reason for testing your pages for Browser Compatibility with a tool like our HTML Toolbox.

In recent years, though, both companies have tried to move closer to the official HTML standards. For its part, Netscape completely re-wrote Version 6 of their browser to be more standards complaint. But in doing that, they introduced other major problems for Webmasters by ignoring backward compatibility. Many Web pages that worked just fine under earlier versions of Netscape Navigator were suddenly broken under Version 6. That’s especially true for pages that used Dynamic HTML. In an effort to play by the rules, Netscape made life worse for Webmasters.

With the introduction of IE 6, Microsoft is likewise trying to move closer to standards compliance. The main difference is that Microsoft has made the change with an eye toward backward compatibility. By allowing you to use the DOCTYPE tag, you can control whether the browser works the old way or the new way.

We’ve violated three specific rules for creating Style Sheets. These violations are forgiven by older versions of both Internet Explorer and Netscape Navigator, but Version 6 of both browsers strictly enforces the rules.

That’s an important point, since you may be tempted to dodge errors like those on our demo page by forcing Internet Explorer to use the classic engine. You can try that, but your pages will still be broken under Version 6 of Netscape.

Problems like this illustrate why you need to test your pages using all major browser and computer types. Just because you’ve fixed the problem under one browser doesn’t mean you’re safe.

Tom Dahm is Chief Operations Officer at NetMechanic Inc., a leading developer of online maintenance, monitoring and promotion services that has “tuned up” over 32 million Web pages. He can be reached at 256-533-0076 x103 or tom.dahm@netmechanic.com. Learn more about NetMechanic tools by visiting their site: http://www.netmechanic.com

Below are some of the mechanics of the language:

The Prologue, is the first part of your WML article. It contains information for the browser to let them know what kind of document it is and where they can find the rules (DTD) for this document. It usually is:
http://www.wapforum.org/DTD/wml_1.1.xml

<?xml version=”1.0″?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”
“http://www.wapforum.org/DTD/wml_1.1.xml”>

Line Space and Formatting Tags

<wml>
<card title=”Horses”>
<p>
Welcome!<br/>To the <u>wonderful</u> world of <i><b>Horses</b></i>!
</p></card>
</wml>

Here is an example of making a table in WML (This too is the same as HTML):

<wml>
<card title=”TableofHorses”><p>
<table columns=”3″>
<tr>
<td>Thoroughbred Horses</td>
<td>Quarter Horses</td>
<td>Arabians</td>
</tr>
</table>
</p></card>
</wml>

<anchor>
When you use the anchor tag, you should use “go”, “prev”, or “refresh” tags to let the browser know what specific action to take.

<wml>
<card title=”HorseLinks”><p>
<anchor>Thoroughbreds
<go href=”thoroughbreds.wml”/>
</anchor>

<anchor>Arabians
<go href=”arabians.wml”/>
</anchor>

<anchor>Paints
<go href=”paints.wml”/>
</anchor>

</p></card>
</wml>

<a>
The <a> tag always performs a “go” task, with no variables. The example below does the same as the <anchor> tag example:

<wml>
<card title=”Secretariat1″><p>
<a href=”secretariat2.wml”>More Information</a>
</p></card>
</wml>

Image
>A WML card can be set up to display an image:

<wml>
<card title=”Picofsecretariat”> <p>
Here is a picture of Secretariat
<img src=”../images/Secretariat.wbmp” alt=”Secretariat” />
in a paragraph
</p></card>
</wml>

Input Fields
Letting a user enter information

<wml>
<card title=”Input”>

<p>
Name: <input name=”Name” size=”15″/><br/>
Age: <input name=”Age” size=”15″ format=”*N”/><br/>
Sex: <input name=”Sex” size=”15″/>
</p>

</card>
</wml>

Select and Option Tags for Forms

<wml>
<card title=”Fastest Miler”>

<p>
<select>
<option value=”secretariat”>Secretariat</option>
<option value=”drfager”>Dr. Fager</option>
<option value=”spectacularbid”>Spectacular Bid</option>
</select>
</p>

</card>
</wml>

Selecting More Than One Item

<wml>
<card title=”Choose Your Favorite Breeds”>

<p>
<select multiple=”true”>
<option value=”arabians”>Arabians</option>
<option value=”quarters”>Quarter Horses</option>
<option value=”saddlebred”>Saddlebreds</option>
</select>
</p>

</card>
</wml>

Fieldset

<wml>
<card title=”HorseFieldsets”>

<p>
<fieldset title=”horse info”>
Title: <input name=”breed” type=”text”/><br/>
Prize: <input name=”name” type=”text”/>
</fieldset>
</p>
</card>
</wml>

Go Tags allow you to change to the next page

<wml>
<card>
<p>
<anchor>
Next Page
<go href=”nextpage.wml”/>
</anchor>
</p>
</card>
</wml>

Prev Task

Going back To The previous card

<wml>
<card>
<p>
<anchor>
Previous Page
<prev/>
</anchor>
</p>
</card>
</wml>

iEntry provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.