Monday, November 28, 2005

What should i put in my web site?

Sometimes, is not the matter of how well we can design our web site, or how fancy can the graphics be. Most of the time, contents and information is the KING!

If your still remember my previous post about some basic guidelines on building web site.

Perhaps by know, we all know content is important for your web site, peoples browse through the Internet searching for information, your web site must be INFORMATIVE, and these information must also relevant to your LINE OF BUSINESS!

Most of the time, we just can't get any idea on what should we start of with, well, i am sure you have noticed this before, most of the web site out there, esspecially company's web site (typical .com web sites) will have the following pages: -
  1. Home - Introduce your web site!

  2. About Us - About your company.

  3. Products / Solutions / Services Offered - What your company can do, or what your company sells.

  4. What's New - Some announcements / news about your company.

  5. Contact Us - How can peoples contact your company, where is your company located.

  6. FAQs - Some general Questions and Answers about your Products / Solutions / Services / Company.

Be observant! Make some search on the Internet and prove me wrong! On the next article, let's see what content should be put in to spice up our web site (Maybe chillis)

Sunday, November 27, 2005

Gentlemen, please start your design

Managed to get myself on my laptop to start writing... Well, as promised, this blog will be teaching how to create a web site. Without any nonsense, let's start our new post of the day (Forgive webidiot for some of those crapy posts for the past few days).

We have learnt so far some guidelines (or considerations) to be put in place before building a web site. I also shared with you all some guidelines in choosing a domain names, and a web hosting, i hope by now, everyone know what's a domain names and web hosting, if your have not read about my previous post, please go to the following postings: -
  1. Buy domain name today! http://webidiot.blogspot.com/2005/11/buy-domain-name-today.html
  2. Hosting, after a domain... http://webidiot.blogspot.com/2005/11/hosting-after-domain.html

After you get your domain name and your web hosting, the next thing you have to do is to design your web site, when i mentioned about designing your web site, it doesn't mean that you have to know how to design using Photoshop. What i mean about the design here is the layout of your web site. This including the placement of the following components: -

  1. Logo and Banner, a banner usually made up of a graphic which is symbolic to your web site, or the nature of your business. For example, a banner for a University web site may be a photo of the campus, or some student life; you won't be putting a porno as a University site's banner! When you are building a web site for a company, the company logo of is a MUST!

  2. Navigation. The navigation on your site must be consistent, and you must have a navigation panel linking all the pages in your web site!
    If you web site is complicated, too complicated, please prepare a sitemap (A sitemap is a page which will be listing all the pages in the web site, in an organized and hierarchical manner)

  3. Footer. Put your copyright statement here!

Okay, let's look at a typical low fidelity prototype for a web site.

A simple web page layout with navigation at banner

Example web site on Sample 1, http://www.vkeducation.com

Another type of web page layout

Friday, November 18, 2005

Overlapping DIV Element Issues

OK, my last technical article for this week, before i move on to my step-by-step "Build your Web Site"

This is a common question for all techqie, when u have a DIV element which overlapped any windowed controls like text box, drop down list, list box and etc, no matter what z-index your set, it will always be covered by the text box.

Here goes the solution

IFRAME

The IFRAME control has a unique nature in IE 5.5. It can
exist in both the zIndex of windowed controls and the zIndex of regular HTML
elements. Simply put, you can shim an IFRAME under your DIV. The
IFRAME will block out the windowed control.
Set up your IFRAME:





The src attribute is set with a useless JavaScript statement so that the IFRAME
does not try to load a page (which you won't notice it doing, but it will be the
cause for tripping the "Unsecured Items" message if you use it on a HTTPS
page).

You can code your IFRAME as a static element on the page, or if you
are going to be using more than one of them you may want to dynamically create
them as required. The insertAdjacentHTML() method is good for that.

Now, all that is needed is to size the IFRAME according to the dimensions of your DIV, position it, place it one layer beneath the DIV in the zIndex order and
make it "visible". The IFRAME's style object will allow you to do these
tasks:

iframe.style.top
iframe.style.left
iframe.style.width
iframe.style.height
iframe.style.zIndex
iframe.style.display

Hope this may help, for anyone who facing this problem.

A cite from my favorite domain registration web site...

A web hosting service allows you to "rent" or "borrow" space on very fast hard drives called servers. Free web hosts allow you to store your files on the servers for no monthly fee. In exchange you may purchase a domain from the host, display a banner on your site, or be expected to submit to an active forum to offset the costs of your 'free' hosting.

You can either share space (shared hosting) or have your own hard drive (dedicated hosting.) These servers are connected via a backbone to a huge communications network called The Internet. Your web site can then be accessed by anyone worldwide through a special address called a URL which contains your unique domain name.
The amount of space your host provides you is called disk space, or web space. The number of times your site is accessed by you or users is called bandwidth. Prices vary widely based on what your host is willing to provide.

Thursday, November 17, 2005

Techqie, let's make your hand dirty

I've came across a question in a forum,

How can i write a banner with rounded corner? Just like the banner displayed in your blog


This is my blog's banner
Okay, let's look at the solution, not very difficult, basically, you need four images, for each of the corner, it's the image that made up the rounded corner!
Let's look at the CSS,


The CSS, click to enlarge the image

After CSS, let's look at the HTML!

The HTML, click to enlarge the image

Here is what we get, the result!

Wednesday, November 16, 2005

Hosting, after a domain...

The next thing, after you have purchased a domain name; you still need to have a web hosting in order to build a web site.

Often, a domain name registrar (please refer to previous post, Buy domain name today! to get your domain name) will offer hosting plans for an extra monthly fee. But remember, it is not necessary to use the same company to host your web site!
What i mean here is, you can register your domain at Company A and get your hosting from Company B (I've few domains registered at namecheap.com and maintaining hosting from zesthost.com)

There are hundreds of thousands of web hosts and the pricing and services vary considerably. Choosing a web host can be difficult if you do not know where to begin. Depending on your hosting needs your preferences will differ.

Newbie may prefer free hosting as they are just getting started, newbies which deal with mainly HTML can easily get a free hosting from geocities.com, brinkster.com (Educational Package) and etc.

More experienced webmasters may choose a low cost host like, iPowerWeb, ZestHost and etc, with more advanced features and supported technologies.

Buy domain name today!

Okay, now you know why we need a domain name (top level domain name) and how to choose a good domain name (Well, i really hope this blog does provide you some information, perhaps some fundamental ideas about choosing a domain name).

So what about geting a domain name? Where should we register a domain name? Which registrar should i choose?

Let's visit http://www.100best-domain-names.com/ for the complete information on top level domain name registrar. To be honest, this is the best reviews and rating web site I’ve found on the Internet, this web site even provides a page for you to compare different registrar, SIDE BY SIDE!

Tips from expert! Choose the right domain name

Well, some tips from expert!

  1. Your Domain Name Should Be Your Website Name
    Naming your site after your domain may seem obvious to some of you, but you'll be surprised to learn that not every website is named after the domain name even when the webmaster owns that domain name.

    Naming a site after its domain name is important, for the simple reason that when people think of your website, they'll think of it by name. If your name is also your URL, they'll automatically know where to go. For example, when people think of thefreecountry.com, they don't have to wonder what URL to type into their browser to get there. The name of the site is also the URL.

  2. Generic Name VS Brand Name
    There is always controversial between choosing a generic name, or a brand name. But again, even though i always mention about how important to brand your web site, often the case, we are stuggling, to be generic, or to be specific.
    If, you are building a web site for your company (say your company sell condom, and so happened your company is Dulex (Du*ex), i guess you won't choose a domain name of comdom.com or domdom.com, certainly, dulex.com would be your choice.

  3. Long Domain Name VS Short Domain Name
    The Longer The Better! But does it applicable here? I quite particular on this matter, a short domain name is always more preferable. I am short but i am strong (I mean height)!

  4. Hyphented Names VS Non-Hyphented Names
    Hyphented is prefered, if your prefered domain name has been choosen. For example, if you would like to apply for a domain name, malaysianidols.com and is so happened taken by someone, and you are so desperate for the domain name, for god sake, go for malaysian-idols.com

Of course, there are lotsa guidelines or best practices out there. But the key is, choose a domain name which is easy to remember, easy to type, and related to the nature of your web site!

Tuesday, November 15, 2005

The war has begun here

As promised, let's compare the tools

Know your "Weapon"!

Okay, let's get into topic now, understanding your weapons!

I am an IT Consultant (Some prefer to classified us as Programmer, or Developer! But i must emphasize, i am a CONSULTANT!!!), most of the time, i will need to get into development work (Yes, the fact is, i do programmer's works as well). Following are some of the tools that i have experienced with, i will share with you what i think about each of the tool i introduced, at the end of this posting, i will also summarize the features and functions of each tool: -

  1. Microsoft Office FrontPage - My favorite tool, i've started of with FrontPage since the very first version, i think is back in Windows 98 which runs on PWS (Personal Web Server), if i am not mistaken.
    To be honest, not much major changes on FrontPage along the way (I mean in term of features and function for HTML Authoring). Major enhancement over the latest version is the integration with Microsoft Sharepoint Portal Server and Windows Sharepoint Services. FrontPage is the official customization tool for both of these products.

  2. Macromedia Dreamweaver - Most peoples favorite authoring tool. I've been using this tool for few months, for a simple classic ASP based project. Not really impressing at that point of time (3 years back). But, there must be a reason why most peoples (Developers, Web Designer, Programmer) love this tool.

  3. CuteHTML Pro - If you have heard abot CuteFTP, the name CuteHTML Pro will sounds familiar to you. Is actually from the same company, GlobalScape. CuteHTML Pro will be your choice if you are looking for a lightweighted, yet powerful authoring tool. It has the capabilities in managing code including CSS, HTML, XHTML, XML, DHTML, JavaScript, ASP, PHP, WML, ColdFusion, and Perl. CuteHTML Pro can generate complex HTML code quickly and efficiently using wizard-like assistants.

  4. NotePad - Don't laugh when i mentioned about this, some peoples do write their HTML pages using NotePad (At least i did that, once upon a time). But, without any Intellisense, color coding, auto indentation, this is certainly not a choice.
    The only reason for this is because it is FREE!

Sharpen your weapon before you go for a Battle!

Yes, this is true, very true!

Knowing the tools before you start making your hand dirty in doing all the works. It is always important to choose the suitable tools, choosing the right tools will make your life easier. Believe me, pay some times in learning each of the tool and find the one which is most suitable for you, my suggestion may not be the best, it is ultimately your human instinct to choose the tool that fit your “taste” (More than half of my friends love Macromedia Dreamweaver, but honestly, I am those few who loves Microsoft FrontPage, for whatever reason).


I will summarize the features and the friendliness of each tool in the later post, perhaps it will provide you some idea before trying out each tool. There are two types of tools we will need to start off: -
  • Authoring Tool – The tool you will be using to author the HTML text, use this tool to produce all your HTML documents

  • Design Tool – The tool to design the layout of your web site. Also use this tool to produce all required icons, graphics and etc.

Monday, November 14, 2005

The Process Cycle

The previous post is about guidelines (or best practices) to be considered for building a web site. Now, i would like to discuss about the process cycle, the process cycle of a web site.

Take a look at the following image,

There are 3 steps involved in the entire process cycle: -

  1. Gather - If you still remember in my previous posting, i emphasized in the guidelines, target the market and contents!
    So, the first step of the process would be gathering contents which able to target the market, contents can be coming from any sources like Books, Magazines, Web Sites, Journals, Newspapers, and etc.
    Make sure you gather enough RELEVANT INFORMATION, again i would like to emphasize, please gather only RELEVANT INFORMATION!!!
  2. Publish - This steps, publish your content to the internet. Of couse, at this point of time, you may not be able to publish information to the Internet (Assuming you are newbie, know nothing about web site development). But no worries, later in this blog, you will be able to find very useful information in web site development. I am sure you can do it if you follow all my posting. You may be able to find lots of web sites out there teaching you how to create web site, go and try all those tutorial sites first, if they failed you, this blog is always right here waiting.
  3. Enhance - Of course, do not easily satisfied with the contents you collected yesterday, always work on to improve what you have. Enhance the existing information while moving on for new and fresh information!

The Guidelines from Expert (So called)

Well, let's start of with some theories first.

To be honest, i don't like theory, i like action. One will not reaches the goal by just memorising the theories or principles he / she learnt from the books (or the web)

Being an expert (I claimed to be) as well as a consultant, i must be able to spell out the guidelines (some peoples called it best practices) before i can convince you (or my customers) to continue reading my blog, am i rite?

Okay, let's look at some guidelines: -
  1. Target your market - Without a clear idea of your target market, you will never be able to success. What i trying to say is, you must know to which market your web site is cater for, identity the market needs, focus on the needs and you will be there.
    Taking this blog as an example, i know what my blog caters for, i will only publish information related to my topics and my target market, i can't be publishing some information related to Cosmetics Products here. You get what i trying to say?
  2. Content, Content and Content - Simple as it is, you need content in your web site. Well, don't get me wrong, what i mean here is really useful and updated contents. Okay, if you can't squeeze any contents, go copy from others web sites. Make sure you asked for permission before you copy. There are some web sites out there offers free articles, the famous one would be EzineArticles
  3. Build for simplicity - Make your web site as simple as possible. What "Simplicity" here means: -
    1. Information must be easily located and accessed
    2. Information must be categorized. As much as possible, build catalog of information in your web site, for example if your web site is targeting IT market, you may then categorized your articles according to the field like Hardware, Software and etc.
    3. Simple navigation on your web site. On every page in your web site, there must be linkage to all other pages, or category in your web site, always allowed user to go back to Home, or back to previous page
  4. Consistency is the key - Make sure the site is consistent in look, feel and design. Nothing is more jarring and disturbing to a users than feeling as if they have just gone to another site. Keep colors and themes constant throughout the site.
  5. Need for speed - Speed is essential? Yes, or may be not as for today. Well, i will not emphasize much on this guideline. Broadband is so widely adopted in every part of the world, for those dial up users, we greatly apologize.
    Again, back to point No. 1, if you know your target market, which mainly on dial up users, so this is a killing factor which you must pay attention.
  6. Mutiple Browsers Support - Argh... This is again optional for my consideration. I know, i know FireFox users population is increasing, i know MAC users population is increasing. But, the fact is, Internet Explorer is still the king.

Although i don't really believe in theories, but the fact is, you must obey the first 4 (No. 1 to No.4) guidelines as much as possible. Trust me, it does help.

Why this blog?

It was 3 years back, when I was hosting my very first web site, which is part of the deliverable for my college module (Not to mention about those homepages built using Geocities). I still remember the pain it takes to host a public accessible web site!

Well, I have started of developing the web site from scratch, by referring to some very “useful” HTML reference books; those books taught me every single thing about HTML, I mean, is really all about HTML and not more than HTML (I bet if you have ever bought any HTML books, you will find it very true). As a beginner, I am expecting some guidelines, what I mean is some very useful guidelines about what are the tools I need, what are the steps I should follow, and what are the best practices, my ultimate aim is to get my web site done and hosting on the web so it is public accessible, not about learning all the elements in HTML!

I’ve came across the pain, and I know your pain; that’s the motivation for me to work on this blog, which is essentially what you want to know, and what you really have to know, to build your HTML web site.