Category Archives: Web Design

Memformat tabel HTML otomatis dengan JavaScript

SOMETHING TO ADD TO YOUR BAG OF TRICKS – KILLER ZEBRA TABLES

A member on the Killersites.com Forum mentioned in a post how he was working with (or trying to work with) an article he recently read by a guy named David F. Miller.

Basically, the article had some interesting JavaScript code that automatically changed the background color of every 2nd row in an HTML table. The reasons for wanting to do this are many; here are a couple of big ones:

  • To make the table look good
  • To make the table information easier to read

You can see an example here.

I want to point out a couple of things:

  1. This is for tables that are being used to present data. Think of spreadsheets, MS Excel et cetera.
  2. Typically when you’re displaying data in a table, you would be sucking it in from a database using something like PHP (articles on PHP coming soon, grasshoppers!) and in that case you would just do this in the PHP code and not bother with doing this with JavaScript.

Because of that (the PHP thing), when I first took a look at the article, I did not pay much attention. But about 2 weeks later, I found a place (my new HTML tags/codes page) where I could use this script!

So I got the JavaScript code, and put it to use on my page. Everything worked fine ‘out of the box’, except for one thing – it would not allow you to use the script on more than one table on the page … I needed to use it on many.

I could have taken the easy way out, and just manually colored the many table rows. But I quickly realized that the manual way was going to be just too much freaking work – too much work just goes against my basic sensibilities. Too much video game playing time would be lost, so something had to be done!

I got out my nerd-cap and started banging away at the JavaScript and CSS code that made this nifty script work. Thinking I could also write a nice article out of this, I settled on a variation of the script (out of a few) that made it easy to apply the script to as many tables as you wanted to; easy even for the non-programmer.

The original article was called ‘Zebra Tables’ (as in zebra stripes), so I thought that my modified version of the script should be called ‘Killer Zebra Tables’.

ARTICLE: CREATING KILLER ZEBRA TABLES

Since this is an article about using the Killer Zebra Tables tool (script) and not about how the JavaScript programming works, I will spare you the details of the JavaScript.

That being said, you are free to go into the code and check it out for yourself. You’ll find it well commented (my own and some left over from David F. Miller) along with some testing code that will allow you to ‘see’ the script work as it styles the tables.

The whole thing can be downloaded here.

You will find in the ZIP file a simple HTML page and a .js file with all the JavaScript. I left the required CSS code in the HTML page since it’s really short, but you can easily extract it into its own CSS document.

THE 3 STEPS TO MAKING THIS WORK

  1. Applying the CSS.
  2. Applying table ID’s.
  3. Changing the HTML ‘body’ tag to ‘talk’ to the script.
  4. (Optional) Setting the standard color in the .js file.

1. APPLYING THE CSS

Let’s start by looking at the CSS:

.taglist {
border: 1px solid #666666;
margin-top:40px; margin-bottom:30px;
}
.taglist tbody tr td {
font-family: "lucida grande", verdana, sans-serif;
font-size: 8pt;
padding: 3px 8px;<
border-left: 1px solid #D9D9D9;
}
.taglist tbody tr.selected td {
background-color: #3d80df;
color: #ffffff;
font-weight: bold;
border-left: 1px solid #346DBE;
border-bottom: 1px solid #7DAAEA;
}

Even if you don’t know any CSS, all you really need to know about the above code snippet is:

It’s CSS code – CSS is used to style web pages. This code targets our tables specifically. In a nutshell, I’ve created a CSS class called ‘taglist’ and 2 other more targeted CSS selectors (‘.taglist tbody tr td’ and ‘.taglist tbody tr.selected td’) that help to further define the look of the tables.

What you have to do is ‘tag’ your tables with the class: ‘.taglist’. You do this by going to your table code and write this:

<table id="table1" class="taglist">

I’m not going to go into the details of CSS; this is standard stuff and if you are having problems, you should go to my CSS Tutorial website.

Again, all you need to know is that for each table that you want to have styled, will need this text included in its’ tag:class=”taglist”

2. ‘TAGGING’ THE TABLES TO BE STYLED (Applying ID’s)

The next thing you need to do, is to give a unique ID to each table that you want the zebra tables script to affect.

To do this, all you need to do is ‘tag’ each table with the text ‘id=’ and the unique name you want to give it. The ‘unique’ name can be anything as long as it’s the only tag on the page with an ID of that name.

For example:

<table id="table1" class="taglist">
…
</table>
<table id="table2" class="taglist">
…
</table>

You’ll notice that one table has an ID of ‘table1’ and the other has an ID of ‘table2’. There cannot be another table (or any other HTML tag) with either of these ID’s. I hope this makes sense? The JavaScript uses these unique ID’s to find the tables that you want to have affected by the script.

3. HOW ARE WE ‘TALKING TO’ THE PROGRAMMING?

Finally, we’re almost done! Ok, the last thing you have to do is ‘talk’ to the Killer Zebra Tables script. You do this in the HTML ‘body’ tag. As with many other things in life, it’s just easier if I show you:

<body onload="stripeTables('table1','red','table2', 'blue');">

So what I’ve done in the HTML ‘body’ tag is to tell the browser to ‘talk’ to the script called ‘stripeTables’ and fed the ‘stripeTables’ script some information it needs – the name of the table and the color I want the alternate row to be. For each table I want the script to affect, I need to include the tables’ unique ID (that I gave it) and the color:

‘table1′,’red’, -> for the first table

‘table2’, ‘blue’ – > for the 2nd table

As you can see it always works in pairs: table ID + color. You will also notice that I single quoted each table ID and each color with commas in-between.

If you’re a little confused by this, don’t worry; it will soon clear up for you. Just download the sample and try it out, change the colors and see what happens. If you’re still having problems, just post a question to theKillersites.com forum and I will answer.

4. SETTING ANOTHER STANDARD COLOR

If for some reason you want to change the standard color used in all the tables (the other color that makes the zebra pattern in your tables) you will need to open up the ‘killerZebraStripes.js’ file and look for this code:

// hard coded here and applies to all tables.
/*
*********
*********
*/
var oddColor = "#eee";
/*
*********
*********
*/ 
// hard coded here and applies to all tables.

What you are actually looking for is this line of code:

var oddColor = "#eee";

This can be found around line 30 of the page. Right now it is set to an off white color: ‘#eee’. You can change it to any other color that you want – just type it in and re-save the file.

Build your own Dynamic Web Applications

Using Model-View-Controller (MVC)

By Richard Mischook

It’s easy to fall into a trap and treat designing dynamic web sites in the same way one treats developing static web sites. In this article we will be looking at how the MVC design pattern works and why we should use it.

This article is part of a series on server side development exlusive to Killersites.com.

Introduction

There are lots of technologies and tools available for building dynamic web applications. These include ASP and .Net from Microsoft, J2EE from Sun Microsystems, PHP, Cold Fusion – the list goes on. Regardless of which of these technologies/frameworks one selects, there are certain common patterns that one finds show up over and over again. One of the most talked about is the MVC or Model-View-Controller Pattern and yet for those who might be used to a page-centric style of design, understanding how the MVC pattern works or the need for it can be difficult.

This article hopes to explain the MVC pattern as simply as possible. In subsequent articles we will look at a simple framework I have evolved to enable MVC development in Java without relying on outside frameworks such as Struts.

The Page-Centric Design Pattern

Before discussing the Page-Centric Pattern we need to distinguish between a dynamic web application and a static web site – although for many readers this will probably be obvious. Essentially a static web site is composed of HTML pages that never change, or only change when the author/web-master manually changes them. Contrasted to this, a dynamic web site features content that changes in response to user input. The simplest example is a search engine like Google where what you see depends on what you asked for. More complex examples include shopping and banking sites. Because of their interactive nature these sites can be thought of as applications or programs – that is, tools that can be used to do work.

Some of the easiest technologies for adding dynamic features to web sites include Active Server Pages (ASP), Java Server Pages (JSP), PHP and Cold Fusion. Each of these technologies shares a common attribute: the ability to embed tags on the page that are parsed by the server before being delivered to the client web browser. For example the following bit of JSP:

<%out.println(new java.util.Date())%>

will print the the current date and time when the JSP page is loaded. Hitting reload in your browser will cause the value that is displayed to change each time. Voila – a simple dynamic page.

The ability to embed tags in a page coupled with some simple programming logic opened doors previously been to many web developers. The only real option for dynamic web site creation prior to that was CGI scripting using programming languages like C which, for many HTML developers, made dynamic web scripting un-achievable. The flip side of the accessibility introduced by tag-based development though, is that some bad habits were introduced. For HTML developers used to the web page as the center of their universe, it made sense to put everything in the page. This might be OK for a simple web site wanting to display a counter or the current date and time, for example. But when you start building applications with complex business logic and many functions, this approach can turn into a nightmare.

Anatomy of an Application Request

It might help to look at what generally happens when a user makes a request from a web application. Take a look at the diagram in figure

The first thing a user does is make a request. Let’s use the search-engine example: a user types in what they are looking for and hits the search button (User Makes Request). The web application server receives the request and evaluates it (Evaluate Request). The next step for the application is to assemble the data that the user is looking for, i.e. matching web sites (Retrieve Data). And finally the user needs to be shown the results of the search (Show Response).

Many applications (web or otherwise) will tend to follow this pattern, at least in outline. The meat of the application lies in the work that is done in steps 2, 3 and 4. The Page-Centric model puts all of the code to manage these steps in one place – the page. A smarter approach breaks the code up into components, each of which handles a particular step in the process. Some reasons for doing this are:

  • debugging pages can be difficult and time consuming, whereas debugging components is often far easier
  • using components promotes code-reuse, e.g. a login component can be used from different pages
  • refactoring operations in response to changing requirements are hard to do on pages
  • moving all the tricky stuff out of pages means that non-programmers can work on the pages while those with programming skills can focus on the components

We could discuss this in greater detail but it is beyond the scope of this article. Those of you who have had to deal with complex and hard to understand (and debug) ASP/PHP/JSP pages may already have some idea of what I am talking about though.

MVC Understood as Data-Presentation-Logic

When I first read about the Model-View-Controller pattern I was confused by the terminology. I have always preferred to think of it as Data-Presentation-Logic. Here’s why:

Model = the information that will presented to the user (Data)

View = the component(s) that handles the way that the data will be shown to the user (Presentation)

Controller = the component(s) that evaluate and handle the user request (Logic)

So the model is the data that the user asked for; the view is how the data will be formatted for presentation to the user; and the controller is the component that evaluates the user request. We can map these components to our process in figure 2:

Earlier I mentioned that the MVC pattern really starts to shine when the application get complicated. Our search engine example is useful but perhaps a little simplistic. I want to look at a slightly more complicated scenario to illustrate one way it could be implemented using MVC. In this scenario the user wishes to load a dashboard-style page like My Yahoo, for example.

The first thing we need to do is identify some of the things that can happen in response to a user request to load his or her dashboard (note that the scenario below is still far too simple for a real-world application).

We start with the request by the user to show the dashboard and follow through some of the things that can happen:

If the user is not logged-in then we need to log them in.

After logging in (or if already logged in) we need to check their access rights (for simplicity I have omitted dealing with a fail here).

If the user has not specified their preferences (e.g. they have not chosen what content they want on their dashboard) then we forward to an appropriate module/component to handle that.

Otherwise we fetch the data and show them their personalized dashboard.

Notice that in this scenario there are a few decisions that need to be made in response to the user’s initial request. It is the Controller’s job to make those decisions and invoke the appropriate path in the process. Note also that the Controller can use other components to get things done: a Login component to handle logging the user in, a Data Access Component to get the data from a database and so on. Each of these can be thought of as helpers or business objects because they provide services that can be re-used in other contexts. Note also that as each sub-component is invoked (e.g. login), we probably need a mechanish to send processing back to a Controller so that the user’s original request (to see the dashboard) gets executed.

At the end of this process is a View component that expects to be supplied with some data – in this case the contents of the user’s dashboard. I’ll talk about how we do this in concrete terms in a subsequent article. The thing to note is that the View component (which could be an ASP, JSP or PHP page) does not care how the data gets to it. All that is required is that when the page is invoked, it is supplied with the data it needs to show the dashboard. The View is and should be a relatively ‘dumb’ component with as little logic as possible.

 

HTML Forms: Basic Concepts

If you are new to web design in general, then you have to check out my online course on web design before you can benefit from this article to its fullest.

HTML FORMS: BASIC CONCEPTS

When the web was first invented, it was just an elegant and simple system of exchanging information with the world using a simple page paradigm. Yet one of the problems with simple web pages was that there was no way to gather information from people who were visiting a web site.

To solve this problem, some smart people came up with an extension to HTML (the language/system used to build web pages) called ‘forms.’

WHAT IS AN HTML FORM?

An HTML form is made up of a bunch of HTML tags that allow people visiting web sites to enter in information or select information from a list that can then be transmitted to the server for processing.

We all know that HTML tags are used to build a web page; some tags are used to create headers, others to create tables and yet others are used to create forms and form elements. HTML has a bunch of tags that are used to create forms and the sub-elements that make up an HTML form.

To make an HTML form you need to first create the mother of all form tags that creates the ‘form’ and defines its region or boundary:

	        <form action="myFormScript.php " method="post" >
	        … All the form buttons and fields are inserted here
	        </form>

This set of form tags does a couple of things:

  1. It defines the region of the form: Any form tags inserted in between these two tags are considered (by the browser) to be part of the same form.
  2. Tells the browser where to send the information entered into the form.

So what does that mean in practical use?

To understand what that means, you have to understand one important point: the content of an HTML form (what ever the user / person fills in) is sent to the server as a collection of information.

It may be easier to think of an HTML form as a basket of information about a particular subject. So when someone fills in the HTML form, it is like someone is adding things to a basket. When the person is finished filling in the form (the basket is filled) he or she then ‘walks over’ (submits the form by clicking on the ‘submit’ button) to the ‘checkout’ (server) so that the contents of the basket can be processed.

Many times the information that is filled out in a form is sent to a server so that a server script (a server script is like a mini-program) can insert this information into a computer storage program called a ‘database.’

If you ever heard of CGI, ASP, PHP, JSP and others like them, these are server side programming / scripting languages that are often used with HTML forms. As I mentioned above, these languages (ASP, PHP, JSP etc.) are used to create scripts that can read (geeks like to say ‘parse’) the information sent to it using an HTML form.

One last point for this newsletter; as mentioned above, the form tag also tells the browser (Netscape for example) where to send the information, or as a geek would say: where to submit the form too.

This is done with this text: action=”myFormScript.php”. The ‘action’ attribute of the form tag specifies the location of the script that will handle the form data, more about this in part 2.

In part 2 of this little series I will show you some of the HTML form tags that are actually used to collect information from people. I will also show you how to set up a form and even give you a practice script you can work with to see your form in action!

For you more advanced coders who are out there, I also plan to include some flexible JavaScript code that you can use to validate your forms.

can Send emails from Webpages that we create

Option 1: Browser’s built in support for sending email.

The easiest way to send an email is by using the browser’s built in support for mailto:

<a href=’mailto:someAddress@killersites.com’>Email Me!</a> 

When the user clicks on a link with the ‘mailto’ attribute written in, the browser is smart enough to know that is should open up the default email program and set the ‘to’ address to the one specified in the link.

So in this case the address would be:

someAddress@killersites.com 

You can get a little fancy by setting the ‘Subject’ field by adding this to the address:

 someAddress@killersites.com?subject=I have to break up with you because you are a nerd … 

Now that subject will be automatically inserted as well.

Advantages: Easy to do and widely supported.

Disadvantages: Spam bots can pick up the email address listed on the page (but there are ways to protect against that.) – Not all people’s machines will be able to support it. – People can see where you are sending the email.

NOTE: Whenever you create a URL there should never be any spaces in it. In this case this would include the subject we just appended to the URL:

subject=I have to break up with you because you are a nerd …

So to make this proper you would add the space character (%20) like so:

subject=I%20have%20to%20break%20up%20with%20you ... 

This is the strict way of doing it and is best practice, but many browsers are forgiving …

Option 2: Use a server side script.

Today there are many options for sending mail via server side scripting engines like PHP and PERL CGI. PHP has a built in mail function and there are many CGI scripts that will do it for you too.

HOW IT WORKS:

You would build an HTML form according to the scripts instructions where the form would post to the script, be it in a page (like in PHP) or to a CGI bin script like with PERL CGI.

The problem is that you have to have the server set up to run the scripts and you have to know just a little programming. In addition to that, unless the person enters his email address in a form field, you can’t know who emailed you.

On the positive side, if the user does not have an email program on his/her computer (say he/she found your site while at an internet coffee shop) he/she will still be able to send you an email. Another positive is that spam bots have no way of snooping for your email address on that page. And yet another advantage is that people will not be able to send you an email virus this way, even by accident.

Work with Website Designers

This article is targeted at business owners, small and large who are interested in getting a web site built for them. When approaching a website design firm, or individual web designers, these preliminary questions will go a long way in forwarding the project.

Although this article is speaking to the business looking to hire a web designer, the information is also relevant to web designers and is recommended reading for people new to web design.

Questions about the site:

1. What is the goal of the web site?

That is the first question you have to answer. Do you want to sell something to end-user; do you need to e-commerce enable it? Is it a support site for your offline business, an information resource or contact point? Or is it simply a branding tool?

2. How big will it be, how many pages?

3. Do you perceive the need for any special technologies? For example, are you interested in FLASH animation, protected directories, hooking your product catalogue database into the site?

4. What is your target launch date; when do you want this site live?

5. Do you already have a domain name and/or an existing web site?

6. Have you looked into hosting or do you need the web designer to handle that for you?

7. If you are already hosting your site somewhere you need to let the web designer know what type of servers the web site is sitting on and what technology they will need to work with. Examples of such server-related technologies include: ASP, PHP, MySQL, SQL server etc …

This piece of information can be very important when dealing with the web designers, as they may not have the skills to use the technology that your current servers support. In that situation, if you want to work with certain web designers you may need to switch servers.

8. Your budget: Some people don’t like to give out their budget and wait to get bids. While others will give a ballpark figure of what they are looking to spend. This 2nd option helps give an idea to the web designers on what scale you are looking to build the web site. When you go out for RFP (request for proposal) the more detailed your specification is, the more accurate quote you are going to get.

Choose a web designer or firm that matches your business:

You will find that in this business just like many others, there are specialist and levels of experience. You need to judge what your project is in terms of size and subject and try to pick a company or web designer that match’s you. If you’re a small company it might be a better choice to find yourself a free-lancer type of designer rather than the big firm. And the opposite is true for larger companies. Also consider the experience of the company/designer you are looking at, have they created sites of the same nature in the past, have they worked on other web projects for companies in the same or similar field?

Be flexible with the details of the site:

As the client you have every right to have the site delivered to you the way you want it. But it is always wise to be flexible in those micro-requirements and defer to the experience of the web designers. Sometimes they (the web designers) may see a better way of implementing some feature that is diff

erent from what you had envisioned. Many times this alternate method will in the end give you a better web site. Why hire experts and not listen to them?

Web designers should work with an iterative process:

The larger the site, the more this rule comes into play. I have found over the years that most clients are not exactly sure what they want until they see it. Or perhaps more accurately, they know what they don’t want when they see it! As such I have developed an iterative process in web design. My goal is to get out something for the client to see as quickly as possible so I can get feedback. You should look for this in the process of building your site as it helps to eliminate potential misunderstandings and speeds up the project production as well.

Why Style Web Pages With CSS?

The web today is a much different place than it was just 5 years ago. Technology for the web has grown in leaps and bounds and is reflected in the sites we see and the way they are built. In the past, the HTML markup language – the language that is used to build web pages, had an assortment of tags to both set the structure and the style of the page.

Today the preferred method of styling pages is something called CSS or Cascading Style Sheets. CSS is an extension to HTML, an extension whose sole task is to style pages. Before CSS, all we had to work with was HTML’s built in styling elements like the bold tag:

<b> This becomes bold</b>

There are several other tags in HTML that allow you to style your pages, but they are limited in many ways. To deal with these limitations and browser incompatibility issues, designers would resort to creating GIF or JPEG images of text rather than using raw HTML text. These images would establish the style for the pages and because HTML (at the time) simply had limited capabilities, images would allow the designers to get the specific look/layout they were after.

This could result in many images in your pages – images not just used to show off a nice photo or logo, but images used to replace text that should have been created with HTML. The only positive about this approach is that you get the exact style you are looking for, after that it goes down hill …

Having images make up your body text is a time consuming process to be sure. Now you have to jump back and forth between your HTML pages and your image editor to make changes to your text.

Many times the process of fixing one error can require many trips back and forth from the image editor to the HTML editor. If on the other hand the text were created with HTML only, the changes would take only a fraction of the time.

Another negative in using images for body text is that they begin to quickly bloat the page in terms of kilobytes. You should strive to make your pages as ‘light’ as possible so that the user can download the pages very quickly. The old rule of thumb is if a web page doesn’t load within 10 seconds you will lose most of your visitors. Even today with many people going with high speed Internet, I try to get my pages in at around 50-60k.

Another good reason to not use images to create your pages’ text content is GZIP compression. All web servers today support GZIP; GZIP is a method of dynamically compressing HTML content to as much as 1/10th of its original size!

So if you have an HTML page that is 50k, with GZIP turned on you are now only sending the surfer 5k! GZIP only works on text and not images, most images are already compressed to their maximum when in GIF or JPEG format anyhow.

Consider this: HTML not compressed with GZIP is already much lighter than the same text in image format. But when HTML is compressed, then there is simply no comparison! Ok, so now we know that we should use images sparingly in our HTML pages, but how do we get around the limitations of HTML layout? The answer is found in CSS.

CSS is very powerful as it allows you to style your page in a way that was not possible before. Up until recently CSS implementation in browsers was spotty and not consistent. As such people stayed away from it and only used it to a minimal degree. I myself am guilty of that and up until this day I still mix the ‘old ways’ of doing things with the new.

Today I will still use tables as my main structure of the page and will still use some images to create headlines for my pages, but never body text! But I think that at last we can feel safe with using CSS1 and CSS2, the first 2 specifications of CSS, being fairly certain things will work properly in all the browsers. Since IE has about 95% to 97% of the market and it supports the CSS standard well for the most part, we should be ok.

The emergence of stylistic guidelines:

When the web first started to go public and browsers became able to support sophisticated layout and images, people went wild in terms of design. It was a free for all and the diversity of styles and websites that are still out there today is evidence of that.

The problem with the anarchy was that there was no consistency in the way websites worked – navigation and other structural elements could be totally different from site to site and even from page to page. This has had a major impact in terms of usability of the web for the average surfer.

In mature software platforms, patterns and best practices emerge. These standards are put in place to make things consistent for both the guy working to build the software and for the user destined to use it. When MAC established strict look and feel guidelines for their OS there were many complaints at first but in the end it made for a much better user experience and it made it easier for the programmers to create their software.

The web today is slowly moving toward that same goal; CSS starts’ by making the styling of the pages consistent while experienced web developers have developed structures that they know work and they use them consistently on all their projects.

Over the years I have done the same, both with my programming and web design. People will argue this approach it just using templates and not original; I would argue that good ideas should be reused and that original work can be found within the context of an established working structure.

A page’s ‘mood’ is all about the colors and fonts; structure only makes it easy for users to navigate the page and website. One nice image properly positioned can make all the difference between a good-looking page and a bad-looking page.

Today I style my pages with CSS and a few well-placed images. I combine some traditional methods (like table formatting) with the occasional CSS positioned element. I am not totally CSS centric yet but plan to explore the possibilities more so over the next little while.

What you need to first start creating a website

Making websites doesn’t require much at all; a text editor like Notepad and a browser to test your code and you are ready to go if you know HTML.

If you don’t know already, HTML is what makes web pages. HTML is what is called a markup language, and what HTML does basically is tell the web browser (like Internet Explorer or Netscape) how and what to display on the page.

Like any language, HTML has rules and words that have a meaning, in this case the meanings of those words are related to displaying web pages. These ‘words’ are called ‘tags’ or ‘HTML tags’, so when building HTML pages you are actually just typing out a series of HTML tags with text and images (among other things) stuck in-between.

Example: This is an HTML tag that tells the browser to make text bold:

<b> This text will be bold. </b>

The ‘b’ in-between the angled brackets ‘<>’ stand for ‘bold’. This tag tells the web browser to make whatever is in-between the <b> and </b> bold. Most HTML tags come in pairs where there is always an opening tag: <b> and a closing tag: </b>.

There are many tags that do everything from formatting text (as we did with the <b></b> tag.) to structuring the page globally. This is the very basics and I will not go any further in this article.

Now you know the magic behind web pages! You now can guess that all those programs that make web pages (GoLive, Dreamweaver, FrontPage) are just really writing out a bunch of HTML tags for you. Don’t get me wrong, I think using HTML editors is a must, but it always good to know what these programs are doing ‘behind the scenes’.

How to view your page:

Once you have written all your tags on the page and inserted the text and links to images you want to display, all you need to do is change your actual file to have a file extension of HTML or HTM. Every computer file has a file extension (mostly) so for example Notepad produces a file with the extension of ‘txt’. So you might have a file called ‘myGroceries.txt’ if you typed out your grocery list in Notepad. So if you typed out your web page in Notepad, all you have to do to let browsers know that your file contains HTML is to change it from ‘.txt’ to ‘.HTML’ or ‘.HTM’. When a browser is directed to open up a document that has an HTML or HTM extension, it knows that this is an HTML page and it reads your tags to display the page as you intended. That is basically what is going on when you are surfing on the web.

See what Acronyms are Used in Web Design

On this page we discuss some technologies commonly used in the world of the web. The aim is to slowly introduce you to these concepts so that when and if you ever need to work with any of them, you will at least have some basic knowledge of what people are talking about.

Some basic concepts by acronyms:

HTML: HyperText Markup Language -> the written language of tags that you use to create web pages.

– What is a tag?

To explain what a tag is we need to talk about page elements. Elements are the base components of an HTML page. Examples of elements are tables, paragraphs, and lists. HTML tags are used to mark the elements of an HTML file for your browser. Elements can contain plain text, other elements, or both.

To mark the different elements in an HTML page, you use tags. HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>). Tags are typically paired (e.g., <B> and </B>) to start and end the tag. The end tag looks just like the start tag except for a slash (/) that precedes the text within the brackets.

URL: Uniform Resource Locator -> this is the geek’s way of saying ‘address’. So for example: http://www.killersites.com is a URL.

CSS: Cascading Style Sheets -> an extension to HTML that allows you to style your pages in ways you cannot do with standard HTML. Check out my article on CSS.

XML: Extensible Markup Language -> a way to store and present data in a format readable by humans. XML is used today for all sorts of things. For example: as configuration files for web servers, as mini-databases, and as a universal means of exchanging information between computers. XML can come into play in a big way when you get into server side programming and FLASH work.

PHP: PHP (recursive acronym for “PHP: Hypertext Preprocessor”) PHP is a very popular web scripting language and engine. It allows you to create dynamic web pages easily and quickly. It is easy to learn and so once you get the basics down you will progress quickly and start writing some useful scripts. In non-geek terms: it’s an engine that runs in conjunction with a web server that allows you to create web pages that change – examples of such include guest books, discussion boards … and so on.

I’m not going to try and teach you PHP but I thought it might be fun for you to see what it looks like. PHP is very simple to use, the first thing to note is that PHP is embedded into HTML. That is to say that PHP code is intermingled to some extent with your HTML code:

<html>
<head>
<title>Example</title>
</head>
<body>

<?php

echo “Hi, I’m a PHP script!”;

?>

</body>
</html>

The PHP code is enclosed in special start and end tags that allow you to jump into and out of “PHP mode”.

The special start tag is:

<?php

And the special end tag is:

?>

Anything in-between these special tags is processed by the aforementioned PHP engine (The PHP engine is just a program that knows how to read and use the PHP code – in a nutshell). In the above example we are telling the PHP engine to do something very simple; print “Hi, I’m a PHP script!”.

In PHP (like in all programming languages) there are special keywords that tell the PHP engine to do something. In the above example ‘echo’ it is a special keyword/command that tells the PHP engine to print something to the HTML page.

So now you know PHP pages are just like HTML pages except that they have special PHP code in places surrounded by the special PHP start and end tags. Oh yeah, PHP pages have the extension (that is to say: end with the letters) ‘.php’ rather than ‘.html’.

So if you have an HTML page called: ‘books.html’ and you wanted to add some PHP in the page to for example grab a list of books from a database, you would first have to change the page name to: ‘books.php’ and then insert the PHP code into your page. You need to rename any pages that have PHP so that the PHP engine knows that there is PHP code in there. Finally, you cannot run PHP pages unless your server has PHP installed. This is very likely since PHP is free for everyone, and runs on both Windows and non-Windows servers like Linux.

If you want to learn more about PHP you might want to go to the ‘source’ of PHP.

You can get at a whole bunch of PHP scripts here.

ASP: Active Server Pages -> Microsoft’s Scripting Engine.

Active server pages is Microsoft’s PHP-like scripting engine for dynamic pages. It is different from PHP in many ways (ASP uses VBscript or Jscript as it’s programming language and it is free only on windows) but it is also very similar in that they have the same purpose of providing a means to creating dynamic web pages. If you want to learn more, please let me know and I’ll start writing!

You’ll learn more about ASP at Microsoft’s website.

JSP: Java Server Pages -> Java’s version of ASP and PHP.

You can learn more about JSP from the source.

DBMS: Database Management System: A program that provides all kinds of functionality to allow you to easily save, update, delete, and search for information. Examples of DBMS products are MySQL and Oracle, among many others. People typically refer to DBMS products as simply ‘databases’.

SQL: Structured Query Language -> the language of relational databases, databases like MySQL and Oracle. Relational databases are a type of database that has been around for about 20 years. A relational database is the most popular type of database out there today and is commonly used with dynamic web sites.

Just in case you’re confused, there are several different types of databases as there are several types of automobiles. If you ever get into database work, you’ll find that there is a 99% chance you will be working with a relational database so you need not worry about the other types. But for those wannabe nerds who really want to know, here are some other types of databases out there:

Object Databases: everything is saved as a programmic object. Has everything to do with Object Oriented Programming, Object Oriented Programming is a way/style of programming that organizes the code as conceptual objects. OOP (object oriented programming) is very popular today and can be found in languages like Java, JavaScript, and C#.

Flat File Database: Typically a custom way of storing the information in a simple text file (as in: example.txt). It was common just a few years ago for programmers to create their own database by saving the data to a series of simple text files referred to as flat files.

This is a very primitive form of database and is not normally something you need to do today with so many commercial and free database products out there that have a lot of functionality built in.

CGI: Common Gateway Interface -> the first method developed to create dynamic web pages. Usually written in the PERL programming language, CGI has been replaced by easier-to-use and more advanced technology like PHP, ASP, and JSP. Yet CGI is still used today by many people.

Because CGI has been around a long time, there are a lot of free scripts out there that you should be able to easily run on your webserver as just about all webservers support/allow for CGI scripts – to a certain degree.

Type of Graphics Used on the Website

The two basic types of graphics software:

There are many companies selling software to make graphics for both the web and print. All of these products have their own nuances and capabilities, but generally speaking, graphic images that have been processed by a computer can usually be divided into two distinct categories; such images are either bitmap files or vector graphics.

As a general rule, scanned images are bitmap files while drawings made in applications like Xara or Adobe Illustrator are saved as vector graphics. Yet today you can convert between these file types and even mix them.

Read on and see why Xara is the best web graphics software out there! –> Try Xara!

1. Vector illustration:

Vector graphics are images that are created using mathematical equations. These types of programs are typically used to create drawings, shapes, and lines. It is easier to create these sorts of graphics in vector illustration software than it would be in a bitmap editing software. Vector graphic files are usually very small (in kilobytes) because they only contain data about the shapes that form the drawing

2. Bitmap or image editing:

Examples of bitmap editing software are products like Adobe Photoshop and Corel PhotoPaint. These programs where originally designed to edit images like photographs. The key difference between vector and bitmap editing software is that the bitmap editors work on pixels where vector illustration software works with mathematical equations that set the dimensions of the shape(s). Bitmap editing software produce much larger files than vectors software since the files have to store information about each pixel in the image.

My ‘secret weapon’ in web design.

Over the years, I have used many programs from both camps and from many companies. Of them all, hands down my favorite is a little less known software called Xara. Directly quoted from their web site:

“XARA X is quite simply the best value vector graphics package you will ever see.”

This is no lie, it is faster and easier to use than anything else out there and it produces great work. It is vector software with some decent bitmap handling capabilities like transparencies. It was designed from the start for web graphics and it shows with its’ built in abilities to create web menus, rollovers, drop shadows, and bevels with a simple click of a button yet with total control!

On top of all its power is the fact it is really cheap at about $149 US, this compared to competitors who sell their products for 3 to 4 times the price! It also comes with a collection of photos, fonts, and clip art that are all important tools when creating web sites. And now they even include for free a CD with videos showing you how to use Xara! As you can tell, I like this tool and I highly recommend it for both the absolute beginner who will be amazed at how easy it is, and for the professional web designer who will be amazed at how fast it is.

Xara also has a ‘little brother’ that is also great; Webstyle is based on Xara and is even made easier but does not have all the features and power. But it still can be a good choice for some people at $69 US.

If you pick up one of these products through us, you will be helping us to build this site and you will in return be getting the best graphics tool in web design.

General way for New Web Designers

Web site designers today have plenty of options in terms of tools and technologies they can use to build their web pages. Many questions come up: should we use Flash, do we need database driven web pages, do we need a shopping cart for our e-commerce web site etc …

This article takes a step back and deals with some of the fundamental questions/issues in web site design.

1. Do not use framesets in your web sites:

They are not required in most cases and framesets will kill you with search engines.

2. Do not use a ‘heavy’ background in your web pages

that distracts the users from what you are trying to present to them and makes the text hard to read. Remember what you are trying to do with your website, and I think for most, it is not trying to impress people with some tacky background tile. Keep it easy to read; there is a reason why solid colored text on a solid colored backgrounds are used often on web pages and in print.

3. Use sharp clear pictures:

This is really important, a good looking web page can be made with just one clear sharp image and at the same time, the best looking web page can be made to look bad with just one crappy image.

4. Get sharp clear copy of your logo:

If you are a company, you want to look professional so that people have confidence in giving you their money, a crappy looking logo isn’t going to do it.

5. Avoid the IE page transitions:

IE (Internet Explorer) can create many special effects, things like page transitions (page wipes, etc. …) are tempting and may be suitable sometimes, but for 99% of web sites they are not.

6. Avoid the flying text:

Again, the decision whether or not to do this has much to do with the content of your web pages, but it should be clear that for most websites this would not be a good thing.

7. If you are trying to sell something,

having live credit card processing will increase your sales substantially. Sometimes when people want to start selling online they avoid the perceived trouble of hooking up with a credit card processing service because of the programming required. This is a big mistake, studies have clearly shown that web pages that provide credit card processing in their e-commerce enabled web pages (web pages that sell stuff) have much greater conversions.

Above all, make the web site pages no more than 60-70k (I shoot for 50k) if you can, and keep things very simple so your clients have an easy time finding things. You can help this along by strategically making use of the browsers caching capabilities.