Tutorial: How to change your color image to black and white

This is a simple tutorial to demonstrate how to change a  color photo to a stunning black and white image.

Javascript Tutorial: Handling All Errors

I found a very interesting method to handle errors on JavaScript. What this does is to handle all error occurs in the script to a single function so whenever any error occurs, it will go into this particular function and alert the user.

JavaScript

function handleError()
{
alert(An error has occurred!');
return true;
}
window.onerror = handleError;

CSS: Box Model Problem/Hack

The problem caused by different browsers way of interpreting a CSS element has emerge the need of CSS hack. The box model hack was developed by Tantek Celik, the lead developer of Internet Explorer for the Mac to solve the issue on IE 5 border and padding problem. The total width of the box SHOULD be calculated by adding the border thickness on the left and right, the padding on the left and right and the width of the content. Thus, Consider the following code:

<code>#test{
background: #ff8132;
border: 5px solid #ff0000;
padding: 15px;
width: 100px;
}
</code>

The above code should create a box with a 5-pixel border and 15 pixels of padding around the content which has a 100 pixel width. This gave a total width of 140 pixels.

Point to consider when building a dynamic site

Understanding layout on Web

All web layouts have two basic parts. The first part is the content area while the other part is filler. Based on this balance, there are four broad categories of web layout.

  • Unrestrained. The content is allowed to stretch horizontally from the left edge to the right edge of the window and vertically down to the bottom edge of the window which eliminate the needof filler.
  • Fixed width. The content is given a set fixed size on its width, restraining the content horizontally.
  • Fixed height. The content area is given a fixed length on its height, restraining it vertically.
  • Fixed size. Both height and width are given a fixed width restraining the content regardless of screen size.

Understanding Hypertext, Navigation  and Controls

  • Navigation: these are links used to move the visitor between different general sections and pages within the site
  • Controls: these are links or buttons used to perform a specific action, such as submit a form
  • Hypertext: these are links used to display additional information about the specific text being linked.

Four D's of Web Design

  1. Define
  2. Design
  3. Develop
  4. Deploy

Define

In order to start designing a site, one have to collect, identify, and distill the information that will make up your site.

  • Collect your content
  • know your audience
  • establish your goals
  • plan features and interactivity
  • consider the graphic design style

These are the points must be taken into consideration when defining and planning the site.

Design

  • Outline the site
  • create a site map
  • Sketch the layout grid
  • create a storyboard
  • define the look and feel

these are the points needed before designing the site.

Develop

  • prepare the content
  • create the code
  • create a template
  • Assemble the pages
  • test your site

Deploy

The web site may be built and tested and its now ready to go live!

HTML: Values and Units

Length values

Length values come in two varieties:

  • Relative lengths, which vary depending on the computer being used.
  • Absolute values, which remain constant regardless of the hardware and software being used.

Relative lengths values:

  • em: Em dash
  • ex: x-height
  • px: pixel

Absolute length values:

  • pt: Point
  • pc: Picas
  • mm: millimeters
  • cm: centimeters
  • in: Inches

Color values

Color can be written in different way,

  • #RRGGBB
  • rgb(R#, G#, B#)
  • rgb(R%, G%, B%)
  • name

Percentage

The behavior of percentage value depends on the property being used.

URLs

A uniform resource locator (URL) is the unique address of something on the Web.  URL can be written so that it cancel itself

<a href="#">Link</a>

or

<a href="javascript: void('')">Link</a>

In some situation placing any URL in the href will interfer with the DHTML functions so the latter code will be used instead. These function simply tells the link to do absolutely nothing.