Dear Friend,
Following what have been left off from the first article in the series, this time I will talk about the body section. As you will see, the beta template contains both ordinary HTML tags such as <div> and <span> and special tags of its own such as <b:includable> or <b:if>. But first, a little explanation on an important XML/XHTML rule.
Nowadays, the two acronyms HTML and XHTML mean almost the same thing: a tagged document that can be shown on any modern browser such as Firefox or IE6. But the "X" in front of "HTML" means that this is a well-formed XML document. What does this means? It means that the tags are (almost) always come in the form of a pair of tags, an opening one, and a closing one. For example, this is a correct XML pair: <div> and </div>. The backlash "/" in front of a tag always represents the equivalent closing tag. Usually, in between these two tags, there are either texts or more well-formed tags.
In some cases where the tag is self-sufficient, a "/" is always added at the end, right before the > sign. An example would be the new-line tag: <br />
Since the new beta template is a well-formed document as declared by its very first line:
<?xml version="1.0" encoding="UTF-8" ?>
the template must obey the well-formed characteristic of an XML document. This is both a good thing and not-so-convenient thing. The good thing is that being a well-formed document, it is going to be much easier for desktop or web programs to be able to read in and process data in an expected manner, using shared and/or open source parser programs. The bad thing is, amateur web coders will have much tougher time trying to write/hack a decent program and not missing a > sign, a closing tag, or mixing tags together in an unorder fashion.
But enough of XML definitions. Let us take a look at what is inside the next level down of the body tag.
Div Tags, more div tags, and some more div tags
After clicking on the pluses and minuses while opening the template inside IE6 for a while, this is what I have:
If you try to ignore the "div" tags and some other minor tags, but concentrate on the ids, you will see that the body section is made up of these main components:
*outer-wrapper
---header-wrapper
---content-wrapper
......main-wrapper
......sidebar-wrapper
---footer-wrapper
Basically, what we have is a header section, a content section composed of a main and a sidebar, and a footer section. Sound familiar? Have you seen this layout visually before? Of course you did!
As you can see, the Page Element follows very closely, and in fact it is the visual representation of the textual template!
Knowing this one-to-one relationship, now you can start to understand why and how a three-column template can be made: by adding a new sidebar-wrapper div to the content-wrapper section. The same concept apply if you want a 4 or 5 column template.
Here is the link to my own solution illustrating how to quickly add a new column. This solution is never added to my official hacks, since my friend Ramani has already found out how to do it far earlier time than I did and publish also the solution on his site.
What's next
But wait a minute! Where are the two rectangulars (Blog Archived and About Me) represented textually inside the template, you ask?
It's there, of course, just one level down.
These beta tags will be our focus point of the next article.
Have a wonderful day and see you next time.
Nguồn: http://hoctro.blogspot.com
Cảm ơn bạn đã ghé thăm Blog của tôi, nếu bạn muốn theo dõi thường xuyên các bài viết hãy đăng ký nhận bản tin RSS. Và nếu bạn có thắc mắc hay góp ý gì về các bài viết, xin hãy để lại nhận xét của mình bằng cách nhấp vào link "Đăng một nhận xét mới" hoặc "Post a Comment" ở phía dưới. Xin cảm ơn!.
Following what have been left off from the first article in the series, this time I will talk about the body section. As you will see, the beta template contains both ordinary HTML tags such as <div> and <span> and special tags of its own such as <b:includable> or <b:if>. But first, a little explanation on an important XML/XHTML rule.
Nowadays, the two acronyms HTML and XHTML mean almost the same thing: a tagged document that can be shown on any modern browser such as Firefox or IE6. But the "X" in front of "HTML" means that this is a well-formed XML document. What does this means? It means that the tags are (almost) always come in the form of a pair of tags, an opening one, and a closing one. For example, this is a correct XML pair: <div> and </div>. The backlash "/" in front of a tag always represents the equivalent closing tag. Usually, in between these two tags, there are either texts or more well-formed tags.
In some cases where the tag is self-sufficient, a "/" is always added at the end, right before the > sign. An example would be the new-line tag: <br />
Since the new beta template is a well-formed document as declared by its very first line:
<?xml version="1.0" encoding="UTF-8" ?>
the template must obey the well-formed characteristic of an XML document. This is both a good thing and not-so-convenient thing. The good thing is that being a well-formed document, it is going to be much easier for desktop or web programs to be able to read in and process data in an expected manner, using shared and/or open source parser programs. The bad thing is, amateur web coders will have much tougher time trying to write/hack a decent program and not missing a > sign, a closing tag, or mixing tags together in an unorder fashion.
But enough of XML definitions. Let us take a look at what is inside the next level down of the body tag.
Div Tags, more div tags, and some more div tags
After clicking on the pluses and minuses while opening the template inside IE6 for a while, this is what I have:
If you try to ignore the "div" tags and some other minor tags, but concentrate on the ids, you will see that the body section is made up of these main components:
*outer-wrapper
---header-wrapper
---content-wrapper
......main-wrapper
......sidebar-wrapper
---footer-wrapper
Basically, what we have is a header section, a content section composed of a main and a sidebar, and a footer section. Sound familiar? Have you seen this layout visually before? Of course you did!
As you can see, the Page Element follows very closely, and in fact it is the visual representation of the textual template!
Knowing this one-to-one relationship, now you can start to understand why and how a three-column template can be made: by adding a new sidebar-wrapper div to the content-wrapper section. The same concept apply if you want a 4 or 5 column template.
Here is the link to my own solution illustrating how to quickly add a new column. This solution is never added to my official hacks, since my friend Ramani has already found out how to do it far earlier time than I did and publish also the solution on his site.
What's next
But wait a minute! Where are the two rectangulars (Blog Archived and About Me) represented textually inside the template, you ask?
It's there, of course, just one level down.
These beta tags will be our focus point of the next article.
Have a wonderful day and see you next time.
Nguồn: http://hoctro.blogspot.com
Cảm ơn bạn đã ghé thăm Blog của tôi, nếu bạn muốn theo dõi thường xuyên các bài viết hãy đăng ký nhận bản tin RSS. Và nếu bạn có thắc mắc hay góp ý gì về các bài viết, xin hãy để lại nhận xét của mình bằng cách nhấp vào link "Đăng một nhận xét mới" hoặc "Post a Comment" ở phía dưới. Xin cảm ơn!.
Đăng nhận xét
NỘI QUY KHI BÌNH LUẬN :
» Không sử dụng từ ngữ thô tục, thiếu văn hoá, gây mâu thuẫn; Không bàn luận chính trị, sắc tộc.
» Được chém gió thoải mái nhưng Không được Spam.
» Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc
» Mọi thắc mắc xin liên hệ qua Email: info@taichinhlinhhoat.com,
Cảm ơn bạn đã chia sẻ!