Fourth Tutorial -- Why XHTML?

Hi guys.Now begins our fourth tutorial of web standard. I guess you've seen through our previous newsletters, right? Yes, I'm glad you still remember. We've discussed about how we did in HTML in the early days, the deficiency of HTML and the birth of XML. Perhaps some of you might have already come up with a question: Since XML appears so great, why we still need to step into XHTML as an intermediate before getting to XML? Why don't we learn XML directly? That's the issue we are going to discuss.

So firstly, I would like to let you guess: how long did it take for me to learn XML? 1 or 2 years? No. It would take me at least 4 years to learn. The reason I use the word "would" here is that until now I can't say I know XML. I got touch with the idea in senior middle school, 17 years old. I tried to study its manual, but I cound't found any so called manual. Then I turned to some online forums, trying to find some hints about XML. However, I could barely understand a word. "I must be stupid", I thought. Later, I started to realize that I've adopted the wrong way at the first place. I treated XML as a new kind of markup language, and studied it as I studied HTML. Actually, rather than being a concrete language like HTML, XML is more likely to be described as a "standard". It has no tag pre-defined! You are entitled to use anything you want to use, and at the same time you have to define whatever you want to use. Knowing how to define a tag is definitely too much for any novice page builder, which makes XML extremely difficult to learn.

On the other hand, we can't throw away our current web which has been built with HTML for long. It's too huge, and many people are reluctant, too busy or unable to change. Moreover, many people still building websites in HTML. They are too accustomed to the old standard. Browsers also don't want to give up the existing market. Say all the browsers suddenly give up to support unstandard web pages one day, probably, most of the site will crash within several days. HTML, as a long used tool to build the web, still have its reason to exist.

In order to get rid of the deficiency of HTML while still keeping its convenience, scientist devices a "new" language too meet both sides, that is, XHTML. Generally speaking, XHTML is the HTML based on XML. Its page is actually written in XML, with all tags defined in HTML language. That's the trick. When we program in XHTML, we are getting accustomed to XML's standard, conventions, yet still keeping our pages easy to program and available to most of the browsers. To conclude, we may try jumping directly into the jam of XML, or we can choose to taste it bit by bit by learning XHTML.

Referrence: XHTML -- Example by Example

CityU Web Hacker - Butterfly

eXtreme Web Designer Launched!

With great honor I am telling that our site for eXtreme Web Designer contest has hosted here. Please take a visit if you like.

Third Tutorial--Let there be XML!

Third Tutorial

The birth of XML and its application

the earth was without form, and void; and darkness was upon the face of the deep. And the Spirit of God moved upon the face of the waters. And God said, Let there be light：and there was light. And God saw the light, that it was good：and God divided the light from the darkness.
Genesis, Bible

At the time when everybody was frustrated with the chaotic webpages, and browser producers and software engineer were exhausted with endless updates, there came a group of men, who said:" No! Wait a minute! " and launched a brand new web standard--XML. The future of the web then had been changed for ever.

So let's see how XML solved the problems HTML had given us. Firstly, according to the standard, XML tag should not contain any style definition. Therefore, the definition of style is seperated from the content. It makes the whole XML fiile clean and tidy. When reading it, you can focus only on the contents for presentation, leaving all those visual design to another people. In addition, the separation of content and design makes it extremely easy to either apply a coherent style to multiple files or change the style of many elements all at the same time. Thus, a lot of manual work is saved.

Secondly, rather than allowing syntax mistakes spreading around in the webpage like HTML is doing, XML, on the other hand, strictly forbids any misuse of the language. The rules include every tag should be ended correctly, e.g. a <student> tag must be followed by a </student> tag in later coding, and the correct nesting of of tags, etc. Any syntax mistake is not tolerated in XML. If you try, you may see an error statement telling you what's going wrong, conspicuously. The strictness of syntax also entitles XML to be applied to various types of browsers. For many cases, the same XML may be viewed from computers, TV screens, PDAs, and even digital cameras, probably in the same way if it has correct style definition. On the contrary, HTML sometimes even look extremely different among different computers.

Thirdly, XML relieves browser programers from endless updates, and gives page coders full flexibility to program in their webpages. Perhaps it's why it has its name, XML--eXtensible Markup Language. Instead of listening to vast users to decide whether to have a new tag included in the new version of language, XML allows users to define their own tags. It is a marvellous idea since it has ended the arguments of tags theoretically. Of course, if you intend to invent a new tag, you should add some definition to tell the browser what you've added. That is the .DTD file, or to say, the XML schemas. Updates of browsers now seem unnecessary. XML, when giving the web a clear, strict standard of its accessibility, also brings us great flexibility in our own charge.

Generally speaking, XML is not an language but actually a standard. Scientists begin to apply XML into various kind of programming, from webpages, to desktop application, to mobilephone, etc. It enlightens people to see a brilliant future of web programming and applications. Let there be XML!

referrence: XHTML--Example by Example

Link: development history of XML

Second Tutorial

Second Tutorial

Why we need to throw away HTML when it does so good?

Still remember the topic in last tutorial? Yes we've talked about the basic organization of a webpage and the mechanism--HTML--we used to suffice the organization. Indeed, HTML once upon a time did so well that many people, including me, believed it would lead the way in the future website development. But later on, when some disadvantages started to rise people changed their mind.

Before we start with the first disadvantage of HTML, I'd like to ask a question: How many of you have ever used HTML to "program" a webpage. I believe some of you do have that experience. As we've discussed before, HTML divided elements in the website to make it clear to both the browser and the reader. But you may have found that some elements are actually about styles. For example, the <b></b> element, is actually defining a string of letter to be in bold style. So are the <i></i>, <s></s> and so on. On the other hand, we are defining string of characters using the <font></font> element's attribute. The different ways apply to solve the same kind of problem will result in chaotic programming. Worse still, the two different ways have overlapped each other, somewhat. The bold style for instance, may be represented in the font's style attribute. And to make the the situation worse, many times we need to apply a certain kind of style to many many strings. If HTML is the only way, that we'll have to add tags individually to the target strings. It will definitely cause unnecessary redundancy and manual work.

Secondly, HTML syntax is pretty loose. That means, you may have a great bunch of syntax mistakes within your website and still have a page shown. Sometimes it's good but it will bring you nightmare to debug and maintain. Since errors are tolerated, you may not have any idea about what's going wrong with the webpage if it doesn't show up as you wish. Remember that sometimes just a missing of tag ending may lead to serious layout change, and worse till, you just can't locate the problem within a mess of codes.

Thirdly, the "browser war". Actually it is due to the historical development of HTML language. At the very beginning, HTML just support a few of today's features. Webpages are no more than several structured pure text documents which live on the internet. Later on, more softwarr manufacturers start to pay attention to this field and developed their own browsers to support the language. However, rather than signing an agreement of the language development, they start off in different directions. They developed some unique tags which are only supported by their own browsers, because every company have a dream that they will rule the entire web by creating their own standards. At the same time, the creater of HTML, w3c, also launch different version of HTML to suffice the need. Endless elements are required to be included into the language, as a matter of fact, everyone was tired of the chase. The browser developers were exhausted to upgrade their software in order to keep up to the trend. The webpage programmers also showed great unwillingness to follow since their need to remenber everything newly invented in the language, though at a risk that they would be left behind of the technology. And for HTML itself, redundant tags and attributes had already made it too fat, unable to move any further.

To conclude, every developments has its own stages. Once a thing has reach the limitation, the next step is to invent something new to replace the old one. That's exactly what we've done in web programing languages. At the sunset of HTML, XML, a brand new language brought by the scientists, was launched and denoted a new era of web programming.

Referrence: XHTML: Example by Example, Aaron E. Walsh and Dave Raggett, Pearson Education

Online Resources:

History of HTML

Introduction of XML by W3C

Would Wide Web Consortium

Portrait

The portrait will be shown on the side, but not in this entry. I'll use this photo for my portrait on the blog. Have fun.

And I've got another place to reveal my emotional world. See Another Part Of Tom

First Tutorial

First tutorial class about Web Designing
Html--What we did gorgeously before

Before we really get down to our subject, let's have some general ideas of websites. First I'd like to ask you a question: what do you think a good website should consist of? Yes, text, images, and sometimes music are considered necessary elements to build a website. And some of you have already known that when visiting a website, we are actually visiting different webpages. So what do you think that a webpage may consist of? All the data represented in the browser? Well, no. Webpage, rather than a data container, plays a role which is more like a data organizer. That is, we don't naturally include detailed data of images and music in the webpage. We just give an index to those resources, than the browser will go according the guidane and represent those introduced resources. All webpages in fact contain only text.

Since webpages only consist of text, what we do in a browser is actually read the guidance included in the text, and represent resources correctly. To make this method sound, a special kind of language(or to say, standard) is publish. This is HTML, hypertext markup language. We do things in HTML this way:

Firstly, in HTML, we divide the webpage into different elements. We may have paragraphs of text in the page, and of course images, forms, tables, etc. To make the relation clear, we device different tags to distinguish different elements, like (p)(/p) for paragraph and (img) for image. Different contents are included in different parts of the webpage, and "wrapped up" by tags. By doing this, we make the webpage clear with different respective entity, with no interfering with others. Since we have so many elements in the page, many tags were created to suffice the need to name each of them. The creation, theoretically, covers all needed definition in the entity division.

However, the invention of tags does not suffice all the need. We still need ways to distinguish entity from entity. So in HTML, we have another concept involved, the attributes. For instance, we may like to have a paragraph of text linking to another webpage. So we may add an tag <a></a> outside the tag <p><p>, and add an attribute to the tag <a></a>, like <a href="http://www.world.com/"><p>helloworld!</p></a>. The word "href" denotes an attribute of the included material. The string after "=" denotes the address of the link. Generally speaking, we may find out all needed attributes of all defined tags(i.e. elements), and include them in the language. That is actually what we have done. Size of table, color of the fonts, and tips shown when mouse halt on an image are all defined this way.

After a cover-all definition mentioned above, HTML is able to represent all supported resources in any supported way you like. And by the development of HTML, tons of development tools as well as websites were generated. At that time, we programed gorgeous websites in this way.

Ps: All parentheses "()" mentioned in tags are actually "<" and ">". The replacement is due to that the use of "<"">" will generate a syntax error. Please replace them back when you read.

Ps: I've made some correction into the code. So now the replacement mentioned above is not necessary.