Tuesday, November 16, 2004

Some Website Coding Tips

Creating Websites by Hand
http://www.osnews.com/story.php?news_id=8838

I feel stupid after reading this article, because I've always been coding websites and writing the layout using <tables> and <tr> and <td>, but this article (yes, I'm kind of outdated) teaches you how to use the modern XHTML way to do it. It teaches you the basic stuff of dividing your code into layout and data (or text, whatever way you want to see it). Layout being the CSS file, and data being your text you wanna show.

I'm not much of a web developer, but I've recently learnt quite alot about web development, especially using CSS (Cascading Style Sheet) extensively. But this article brings it to an entirely whole new level for me. I'm quite excited to try it out.

Anyway I've been working on the SgDotNet website for some time, from time to time updating it, and improving it. But using <div> and CSS to completely disect your layout/style and data would be interesting to do, and I would love to try it out on the SgDotNet website.

Another thing I see this different way of coding your webpages would be dividing your webpage into sections, e.g. header, sidebar, menu, content. The thing about this, why I'm touching on, is because each section are enclosed in a <div> and the styles are controlled by your css file. Furthermore, creating your templates would be much easier using ASP.Net, i.e. Masterpages, because currently I'm using tables and it's quite the mess. Using <div> tag to seperate it into different sections would be excellent in this case.

Oh btw, perfect masterpages framework to use. Grab it from MetaBuilders - MasterPages Templating Framework. It beats waiting for ASP.Net 2.0's Masterpages.

Anyway, back to code.

e.g.
in the header.ascx file

<% @ Control Language="C#" %>
<!-- add your inline code -->
<div id="header">
 <!-- add your content header -->
</div>

instead of doing something like this (which is what i'm currently doing)

<% @ Control Language="C#" %>
<!-- add your inline code -->
<table>
 <tr>
  <td>
  <!-- add your content header -->
  </td>
 </tr>

Ok. Did I mention my html sucks? Did you know HOW freaking difficult it was to type those code? Can anyone tell me how to write html code in blogger?! Life would be SO much easier because I'll be writing LOTS of code here! Dang.

Anyway back to that example. Notice how bad the tables method was? Basically there wasn't a close table tag, i.e. </table> which totally sucks because you'll have to close it somewhere. And it screws up everything if you don't know where to close it. Bad coding. In my sense at least. Using <div> looks alot much better, well formatted, well structured, and it closes within the same control page. Perfect. Nothing to worry about closing tags.

Enough of my chattering. That was something I'd like to share with everyone. Hope you guys found it interesting. For those who are still stuck to tables, and do server-side web development, PLEASE take a look at this method. It's much better and cleaner, and guarantees proper html structure, instead of putting your close tags in another file. And of course, the other benefit is that layout is seperated from data. Not quite an exciting feature for a developer like me.

P.S.
As you can see, I diverge and converge quite alot on my thought process, branching out to various other sub-topics and sometimes never coming back to the original topic, but bear with me, I'll try to do better as I write more.

No comments: