Currently Browsing: Home

Neatly Styled Forms With CSS

Regular HTML forms may seem too simple and unappealing. They could be too small or have a poor font for your site. Or maybe they just don’t go too well with your design.

All these reasons and more give you the perfect incentive to style your forms. In this tutorial, we will create a comment form out of 3 simple images.

You may download these images (as well as our finialized HTML and CSS files!) here, or just follow along with the rest of this post.

Read the rest of this entry »

Stunningly Simple Content Boxes

First impressions are always important. Whether it’s a website, movie, or book, that primary effect can persuade you to put it down or continue. Website design is a key element in attracting visitors to a site. If your words are barely legible, will you really generate much traffic? This usually results in the inevitable answer: no.

With beautiful content boxes, visitors will love to read what you have in store. Let’s take a ride and learn how to create stunningly simple content boxes with just an open source image editing software and your favorite text editor.

This tutorial will be explained using GIMP, the GNU Image Manipulation Program, which can be downloaded here for free, as it is open source.

Read the rest of this entry »

GZip files with .htaccess and PHP

Many hosts have a set bandwidth clients can use. In this day and age, files are getting larger and heavier, but bandwidth costs aren’t getting much cheaper. So, one of the best and easiest things to do is to GZip.

From “The Definitive Post on GZipping your CSS

CSS files for larger sites can become pretty large themselves. Gzipping or compressing these files has shown to provide a reduction in the neighborhood of 70-80% of the original file size, a fairly significant ‘weight loss’.

So obviously, GZipping CSS is great. But what about JS? JavaScript files are becoming increasingly huge, so what should we do about that?

Read the rest of this entry »

PHP Includes

Let’s say you had a website with two pages and a navigation bar on each page. Now assume that you have to change this navigation bar. The basic way to do this would be to go into each file and change the HTML markup.

With just two pages, this isn’t much of a hassle. But what about five pages? How about 20? 100? As you can see, this method is just unreasonable as your website increases in size.

Many web developers solve this problem with PHP includes. PHP is a server-side scripting language whose files can contain HTML markup and the ability of using PHP:

<?php
// php code is placed here
?>

Looking back at the problem, we need a way to change the navigation bar on all the files efficiently. Because we will be using PHP, all the files need to be changed to a .php extension. Once this is completed, we can look at the PHP include_once function.

Read the rest of this entry »

Toggling Visibility with JavaScript

Have you ever seen a link that toggles an element’s visibility? It can blend in to create an interactive web page. JavaScript enables web designers to achieve exactly this.

Before we can actually code this effect through JavaScript, we must have an understanding of the CSS (Cascading Style Sheet) display property.

For those of you who are unfamiliar with CSS, a property of an element defines a certain attribute. For example, the CSS property width defines the width of an element.

In this tutorial, we will be focusing on two possible values for this property – block and none. A display value of none hides the element from the viewer. Block shows the element as a block-level element, which is the default setting for most text and is normally visible.

To set the display style of an element in JavaScript, we use the following line:


object.style.display = value;

Read the rest of this entry »