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 the Killersites.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.

CONCLUSION

I hope you found the Killer Zebra Tables script interesting and easy to use. With this script in hand, you will be able to style all your tables easily and quickly.

Get website deisgn and development here

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.

These script are very short and easy to work with, even if you don't know programming. You should also find them better to use than the complex scripts that a program like Dreamweaver might spit out – not that I have anything against Dreamweaver! :)

NEXT: HTML FORMS PART 2

Get website deisgn and development here

ASCII stands for American Standard Code for Information Interchange. Computers can only understand numbers, so an ASCII code is the numerical representation of a character like 'c' or '#' or an action of some sort. Here are some sample ASCII codes and the characters they represent:

033 -- !
034 -- "
035 -- #
036 -- $

So for example the code '035' will give you the character: #

  Why use ASCII codes

Knowing ASCII codes allows you to insert a character that is not found on your keyboard.

Examples would include: ™   ¾   ®

How to insert ASCII codes:

Place your mouse cursor where you want to insert the special ASCII character in your document:

1. Hold down the "ALT" key.
2. Type the ASCII number code.
3. Let go of the"ALT" key.

The character will appear on your screen at that location. Knowing ASCII codes is not only useful in web design, these codes will work in just about any program including software like MS Word and Excel and even simple programs like notepad.

If you happen to have a copy of MS Word, you can get to a list of ASCII character easily by selecting: Insert -> symbol. You have all your ASCII characters there but be careful, you will also find a bunch of characters that work in Word but not in your web pages.

Dreamweaver MX also has a 'Character' tab at the top of the window with many of these codes for you you to use.

Get website deisgn and development here

There are 2 basic ways you can send an email from a web page: with the built in HTTP method using the ‘mailto’ attribute of a hyperlink or by using a server side script.

google_ad_client = "pub-2331144157348643"; google_alternate_ad_url = "http://www.killersites.com/killerSitesGoogle.htm"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_color_border = "F9F9F9"; google_color_bg = "F9F9F9"; google_color_link = "0033FF"; google_color_url = "008000"; google_color_text = "000000"; //--> 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.

So where do you go to find such a script? There are places on the web where you can get free scripts that you can install. If you have the ability to use PHP you can do it in a PHP page, but that’s harder than using my free script:

Get website deisgn and development here

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 different 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.

 

If you liked the article and you want to see more let me know

Stefan Mischook

Get website deisgn and development here

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.

google_ad_client = "pub-2331144157348643"; google_alternate_ad_url = "http://www.killersites.com/killerSitesGoogle.htm"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_color_border = "F9F9F9"; google_color_bg = "F9F9F9"; google_color_link = "0033FF"; google_color_url = "008000"; google_color_text = "000000"; //-->

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.

Get website deisgn and development here

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.

google_ad_client = "pub-2331144157348643"; google_alternate_ad_url = "http://www.killersites.com/killerSitesGoogle.htm"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_color_border = "F9F9F9"; google_color_bg = "F9F9F9"; google_color_link = "0033FF"; google_color_url = "008000"; google_color_text = "000000"; //-->

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.

Short article but hopefully you got something from it.

If you liked the article and you want to see more let me know!

Get website deisgn and development here

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.

google_ad_client = "pub-2331144157348643"; google_alternate_ad_url = "http://www.killersites.com/killerSitesGoogle.htm"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_color_border = "F9F9F9"; google_color_bg = "F9F9F9"; google_color_link = "0033FF"; google_color_url = "008000"; google_color_text = "000000"; //--> 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 Mircrosoft’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 Micorsoft'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.

Check out some CGI scripts

Links of interest related to this article:

You can learn about CSS from my Article on CSS.

This site has a collection of CGI scripts.

You can learn more about JSP from the source.

PHP's home page.

This site has a nice collection of PHP scripts

You'll learn more about ASP at Micorsoft's website.

If you liked the article and you want to see more let me know!

Stefan Mischook

Get website deisgn and development here

In this short article, I am going to introduce you to the types software used in creating web graphics.

google_ad_client = "pub-2331144157348643"; google_alternate_ad_url = "http://www.killersites.com/killerSitesGoogle.htm"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_color_border = "F9F9F9"; google_color_bg = "F9F9F9"; google_color_link = "0033FF"; google_color_url = "008000"; google_color_text = "000000"; //-->

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 theei 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.

Buy or try Xara

Buy or try Webstyle

If you liked the article and you want to see more let me know!

Stefan Mischook

Get website deisgn and development here