Saturday, December 3, 2005

the 30 minute website creation tutorial.

(This tutorial by Carl van Tonder November 2005. All rights reserved)
(Permission granted to be displayed here.)


1. Who is this for?
This tutorial is for anyone who wants to create a website. There are many 'website' tutorials out there, but basic HTML is not a website. Nor is PHP, Javascript, business planning or any other out-of-focus subject vaguely related to web design.
The website I will help you create will be yours, and that is a critical aspect of this tutorial. No templates will be used and no source will be provided (but I will tell you how to use both effectively). This method will work for a business website, a personal blog, the website of software you have created; anything. It is a guide to creating a good website.

2. Conventions and practices
I will be assuming that you have a working knowledge of all discussed technologies (HTML, FTP etc.),or a readiness to learn at least how to implement them.
I myself use Bluefish for code editing, or failing that PHP Designer 2005. Failing that, notepad. At no stage along this path will I advise the use of WYSIWYG tools. I personally do not make heavy use of images, but I will explain how to implement them properly. I will not advise the use of Flash for anything other than short videos, cartoons and games. If you desperately want these, look elsewhere. I don't believe in other usages of Flash but many do and will be happy to help.

3. Stage 1: Planning
When thinking about your website, consider the following important questions:

What will it be about?
The following are suitable answers to this question:
- A personal blog
- The homepage of a piece of software or a gallery of graphics you have created
- A webdesign resource with tutorials, graphics and templates
- A fan site
- or anything else that is similarly specific....
It is dangerous in terms of focus and coherence to combine things, e.g. make a Harry Potter fansite that's also got Gorrilaz song lyrics. The number of people who like Harry Potter and Gorrilaz is going to be far smaller than either the number of people who like Harry Potter or Gorrilaz. Consider making two websites if your passions are that strong


One thing that does go well with other things is a blog, but it is not necessarily a good idea to merge the two to a huge extent (e.g. have development updates on your software on the same page as how great your holiday is Barbados was). Bear in mind that if you offer two distinct things on your website, some visitors only want one.

Who are you aiming at?
This is linked with the above, and should probably be decided at the same time as the subject material of your website. This will have a great impact on later design choices, so make sure you plan it carefully. Ensure that if you identify more than one distinct group of people you are aiming at you are able to divide your website in a similar way to your viewers, e.g. different sections or mayber even different websites.

Are you going to try and make money?
If the answers to the above two questions create a large enough group of potential target visitors then you may well be able to at least pay your own website bills from it. Consider things like keyword rankings and how well sites based on similar topics are doing. Also consider whether there is a gap in the market or whether it is sort of saturated. Remember, however, that this is a delicate balance and aiming too niche will make you lose visitors again. Making money from a website is a very complex science and I will not dwell on it too much for the benefit of those who aren't soulless capitalists.

How much work are you willing to put in?
A good website is a significant commitment. A news- or article-based website requires frequently-updated content to draw visitors, and even an active forum requires near-constant moderation to keep standards high and visitors returning. The best way of ensuring visitors is to create original content, and bear in mind that simply indexing or reproducing others' work is unlikely to get you anywhere unless this is actually a useful service.
A graphics website needs graphics, a Blog needs blog posts, a news website needs news and a tutorials website needs tutorials. Bear this in mind when creating it, and expect a lengthy commitment to keep it active. Consider drafting in others to help with updating content and ensuring a steady stream. I write actual content for only one of my 3 websites.

How much are you willing to learn?
There is obviously massive potential to create a website without any knowledge whatsoever with such tools as Frontpage, PHP-Nuke and the like. Unless, however, your content is genuinely unique and excellent, there is a limit (and not a very forgiving one) on the number of people that will put up with default skins and default settings. In addition, you'll be unable to fix or diagnose problems and your website will come to a slowdown as optimizations tasks are left un-done. It is beneficial for everyone if you are prepared to learn even a small amount along the way.

4. Stage 2: Design
At this stage, things begin to fork off. Depending on budget, time and level of e-competence you have several options in terms of design:


Do your own everything

If you want a website that you can strum like a harp, you may need to do everything yourself. From the PHP CMS to the CSS styles to the JS menus to the Cron scripts to the Mysql databases to the bare HTML, everything. A single-user personal blog does not need about 60% of the features of Blogger, LJ or Wordpress. A light CMS may well need some advanced features later on, but something as unwieldy as PHP Nuke is doubtless a bad starting place.
(NB: I do NOT recommend or use a custom forum.)

Templates/pre-built systems
The internet is positively littered with free and paid-for website templates and free CMS and Forum software. Some are better than others (obviously) and the magic is in sorting out the wheat from the chaff. Follow my design principles below when selecting a template, and select any pre-built software based on requirement. A 2- or 3- user news site doesn't need as large a system as a 30-user one, and few of these systems are really scalable. Consider a Wiki as a CMS or cutenews for a simple news CMS.
Generally things that enforce 'MADE WITH FOOPROG' or 'POWERED BY FOOPROG' messages are bad, and the few £ to remove therse messages may be worth it in some cases. In short you don't want people coming to your website and thinking, 'Hey, Drupal.' as opposed to 'Hey, Harry Potter-themed Gorrilaz videos. Cool!'. Another good rule of thumb is the fewer links to other sites, especially prominent ones, the better. This is especially true with services in broadly the same area as yours.

Hire someone
You can always hire some schmuck to do all this for you. Depending on the company, this may well remove problems with prominent 3rd-party software on your site and also take much of the work out of your website. Some downsides are that website designers massively, massively overcharge and there are probably more cowboy webdesigners than cowboy plumbers.

Take a long look at their website and consider if you'd be happy with that website. Decide whether you're saving money on your website by hiring a webdesigner and whether you're going to get return on this investment.

Consider whether you'd care if the amount of money you're paying would be significant if it turned out to get you nowhere, and if it is, consider if it's large enough for anyone else to care if it does. If your budget is £100 and you're on a limited income, paying a webdesigner is possibly not a great plan, as £100's worth of webdesign isn't very much, and if you think they have (or they have) stolen your money by providing a substandard (or worse, no) service, it'll be difficult to find authorities that care about a £100 loss. In addition, scammy webdesigners are unlikely to be scared by the legal faculties of someone with a £100 budget.

5. Stage 2: Design (part 2)
Having decided who and how your website will be made, here are some tips on how to do it. If you're getting a template, get one that fits these or get one that nearly does and modify it until it does. If you're designing from the ground-up then try and plan according to these. If you're hiring someone, you might want to mention if any of them wildly contradicts these guidelines, but if they tell you that it's bullshit (in a convincing manner) then it probably is and they know best. Anyway:

Make sure the website is yours
This, unsurprisingly, is by far the most important part of making your website,. When people fire up your website in a browser they want to know which website they're on, not which CMS it's using or which WYSIWYG program it was deigned in. On this note, avoid:
- Any default templates. At all. PHPBB, PHP-Nuke, Frontpage, ANYTHING
- Anything that you can't template easily.

- Anything that is obviously that system. If it's an often-used theme, a recognisable interface or anything like that, it distracts people from the fact that they're on your website
- Default HTML layouts. Grey BG, black text, blue links, purple visited links etc.
- Too many (or any) links to websites of your hosting company, your template source, your favourite search engine etc. on every page
To summarise, if there is a website that any of your visitors is likely to have seen that looks like yours, they will spend time thinking 'hey, this looks like slashdot' or whatever instead of thinking about your content.

A site designed for a purpose
There are general rules here.
A software or 'geeky' site is ordinarily clean and easy-to-use, perhaps using a Wiki if there's a lot of text (like a HOWTO archive). Colors are light and graphics are not used extensively.
Clan or gaming sites often make extensive use of slick image-based layouts to create a very graphical impression. Such sites are often doing this to (often successfully) hide the fact that there isn't a great deal of content, but they also fit in more with the graphics-centric arena of gaming.
Blogs usually use either an artsy or a clean layout similar to the first type mentioned, depending on the personality and genre of the blog.
News sites often have a clean layout, but populated with slick touches for menus and banners.

These aren't concrete and a bad but appropriate layour is debatably worse than a good but inappropriate one. Bear in mind, however, that as the amount of content increases so will the need for easy navigation and easy reading. Again, this type of thing isn't vital but do at least consider it.

A professional site.
This is vital. No-one takes you seriously if your site looks like it was designed by a 13-year-old in Frontpage Express, especially if it was. Here are some (read: all) the points.
Some things to avoid:
* Anything flashing or moving
* A website that looks like it has (or has) been designed in Frontpage express or Microsoft Word
* Useless JavaScripts like cursor trails or things like that
* Elements like clocks and counters that serve no purpose and/or are very unsubtle
* Counters at all. If your website gets little traffic, it makes it look unpopular. If it gets a lot, you're wasting resources counting it all.
* Equally, any kind of running statistics (members online etc.) suffer the same problem; bad appearence when low, system-heavy when high
* Animated GIFs. Already under the flashing/moving header, but as a rule of thumb, if you have animated GIFs on your website, delete it. The website, that is.
* Dead links
* Spelling errors
* Grammar errors
* PHP error messages. Either turn them off or (ideally) fix them
* Anything else that doesn't work.
* Flash. A Flash nav bar can ruin a day. A Flash website can ruin a week. Just don't do it. Plus they are search engine unfriendly.

-
DO:
* Have good navigation. Your users should be able to reach any page with 3 clicks, and there should be no dead links.
* Make your site look presentable in at both IE and Firefox. It is not acceptable in this day and age to screw over 20% of the internet because you're lazy. If your page is at all tech-related then you're turning your face on over an estimated 40-60% of your users by being lazy. Unprofessionalism to the MAX.

CMS, CMS, CMS
Unless you and your users want to be spending hours poking around in HTML, for the love of god use a CMS. I can't reccomend any specific ones, but many good ones like Joomla, Drupal are free.

- Please do, however, keep in mind the previously-mentioned aspects of a CMS you need to consider, i.e.
- Size and scalability; will your site have one or one hundred users? Will the CMS handle either or both?
- Customisability; can this be made to look as part of your website and not as a random add-on?
- Features; choose based on what you need, not the size of the feature list. Also remember that many allow you to add features.
- Price; a general rule of thumb is that price > £0 = NO!
- Integration; linked with customisability is how well it will look as part of your site, and whether users will be able to tell without trying what CMS it's using. This applies to forums as well but to a lesser extent.

Friday, December 2, 2005

The 30 minute CSS tutorial.

What is CSS?

CSS is the technology used to make the layout for webpages. They are Cascading
Style Sheets, used to style your HTML documents. They are slowly replacing tables
as the preferred medium to layout your pages. They free your content (the HTML
document) from the layout (the CSS file), so you may change your website look
and feel easily.

CSS basics.
With HTML, you would define the attributes as you write the HTML. With CSS,
you first define the style. Then as you are writing the HTML, you apply the
required style. So the first step to write CSS document is defining your styles.
There are two ways to apply your CSS to your file. You may either include it
in your HTML file by placing your stylesheet in head of your HTML as,






The Selectors.
After you write your style, the computer needs to know where to apply that style.
This can be done using the selectors. The selectors are of three types.
1. HTML tag selector: If you want to change the look of any of your html tags,
you will use this type of selector. You may decide that all of your h2 elements
must have red text. It is trivially easy with CSS.
2. Class selector: you would like particular parts of your webpage to have a
style, but that part is not always in same html tag. Not to worry, you can enclose
that part with a div tag and apply your style.
3. ID selectors: If some element occurs only once it is styled using id selectors.

Your First Stylesheet.
With your first stylesheet, you will modify the page to look yellow with a blue foreground.



Page title



some text

The HTML part is simple, so let’s look at the CSS part.
body{
background-color:yellow;
color:blue;
}

We wanted to modify the body so we used the body tag selector. This basically
said to the computer that this style needs to be applied to whole body of html
document. Then we used the background-color property to set the background and
the color property to set the foreground. What if you wanted to set all the
text to bold? Oh that’s simple too, you just add this line inside the
body selector. font-weight: bold;


Getting something useful.
The last css though simple was not very useful. Let us design a useful CSS which
might be used on a site. Before that you must learn positioning elements using
CSS.
We would like to have a three column layout. So I will use three selectors(Id
selectors) named sidebar, content and rightsidebar.
Theses lines of codes declare our selectors.
#sidebar
#content
#rightsidebar.
Then we will tell how these should look like.
I want my sidebar and rightsidebar to have aqua colored background. This is
done using background: Aqua;

Next we add borders to all our selectors and add a top margin of 20 pixels.
We would like the contents to be bolder, so we add font-weight: bold; to content.
After that we decide to spice up our links by making them of a different color
and removing the underlines, by getting a
color:#c60;
text-decoration:none;
To give the user a visual indication of the link when she moves her mouse, we
swap the link colors.
This is done by changing the style in a:hover.

So this is what our finished page looks like.

Preview




content
a link




What! Do I have to learn all these tags and attributes?
No. But you must remember the more important ones. Also the attributes have
very common sense names. What should you do to change the background color of
your webpage. Yeah this.

body{
background:Aqua;
}

That’s all. SO if you are going to use CSS for any length of time, you
will get to remember the tags. A css editor like TopStyle lite can be really
useful when you are learning css.

Thats all for today. Hope you learnt something useful from this tutorial.




Php Variables Tutorial.

Written by raver, owner of the Romanian Php Portal http://phpzone.frih.net
A) What exactly is a variable?
To better understand what exactly is a variable let’s use a real world
example. Let’s assume that on a Friday evening your girlfriend calls you
to set a date at a certain hour, let’s say 19:00. You agree, but after
half an hour she calls again telling you that she cannot make it because she
has to talk about you with her friends and it would be better to meet at 20:00.
After you hang up another friend calls and ask you when you will meet your girlfriend.
You say: “At 20:00”. Let’s see how this can be interpreted
in PHP code:

//first call
$hour = "19:00";
//second call
$hour = "20.00";
//when are you going to meet your girlfriend?
echo "Ill meet my girlfriend at “.$hour;
?>

This is a more practical (although weird) way of representing a variable. You
can think of a variable like a piece of memory in which you can store data.
Any kind of data (almost).

Here are a few things worth remembering when using variables:
a) Every variable must start with the dollar ( $ ) sign. This indicates to the
PHP engine that what goes after it will be a variable.
b) When naming variables you must always use alpha-numerical characters. Here
are a few examples:
$_variable;
$_a;
$ variable 1;
$_1984;
$o_longer_name_of_a_variable;

c)variables are case-sensitive. So $variable is different than $Variable or
$VARIABLE

B)Variable Types
I`ve mentioned earlier that variables can hold all kinds of data. Let`s see
exactly what types it can hold.

a) String
String variables can hold words and sentences. Let`s see a quick example in
which you will also learn about the concatenate operator ( . ).

$string = “Hi there, I am a string”;
$string2 = “ inside a string”;
Echo $string.$string2;
?>

This will display:
Hi there, I am a string inside a string. Using the dot ( . ) operator you can
merge in one sentence 2 or more variables.

c) Integer
If you finished grade school than you must know that integer means whole numbers.
So we have:
$integer = 5;
$integer2 = 25;
//You can also perform basic mathematic operations with them:
$sum = $integer + $integer2; //will hold 30
$withdraw = $integer2 - $integer; //will hold 20
$multiply = $integer * $integer2; //will hold 125
$divide = $integer2 / $integer; //will hold 5

d) Double
A double refers to numbers with a decimal point.
$double = 25.4;

e) Boolean
Variables of this type can only hold two types of data, true and false, best
used in conditional sentences .

f) Array
Variables of type Array can of course, hold arrays.

Incrementing and decrementing
If you are new to programming the terms may sound a little weird, but trust
me, it is very simple. Many times you will have to increase or decrease a variable
by 1. Incrementing means adding 1 to a variable, and decrementing decreasing
by one. Ex:


$variable = 1;
$variable++;
echo $variable; //will print 2
$variable--;
echo $variable; //will print 1;
?>

This is very useful in loops and searching through an array. Here is another
example:


$number = 1;
For $number <10
{
echo $number;
$number++;
}

?>

Running this will print the numbers 1 – 10.

Well this is all for the moment, I hope you liked this tutorial. For more tutorials
and scripts visit http://phpzone.frih.net (Romanian php portal)

The 30 minute photoshop tutorial.

© 2005 Jean X. (Brilliantbeauty)
Hello there. I am sure many of you have a graphics program and are wondering, what the hell do I do now? Well, what many beginners miss is the art of the blend. This tutorial is designed to help the BEGINNER. If you are a graphics genius and think this tutorial is idiotic, live with it, this is, I repeat, a tutorial on how to get started. With practice, you should develop your own style, but for now, try this one. Please keep in mind that I am making the assumption that you kind of know what’s on the toolbar.
1. New Canvas. (Ctrl-N) Set it to the size you want. For now, I am doing your boring average blend size. 450x450. By no means does the blend have to be boring though.
2. Think of a theme. DUH! For this one, I’m going to do a Southern belle, played by Emmy Rossum, because I have far too many Emmy images. Use whomever you would like.
3. Find the pictures. I suggest finding four. Two of your person, and two landscapes stock images. They should be a fairly high resolution, rather large, and kind of matching each other in terms of resolution. (Meaning do not use a high-res photoshoot, alongside a low resolution screencap. It will make your graphic less cohesive.)
I chose these ones.
Image hosted by Photobucket.com
Image hosted by Photobucket.com
Image hosted by Photobucket.com
Plantation
4. Now drag, if you have them saved, or copy and paste them onto your canvas as a new layer. Ctrl+E. If you copy and paste, don’t forget to promote the selections, ctrl+shift+P. Then deselect all, ctrl+D.
5. Arrange them how you would like and using a 60 px brush, set at 25% hardness, opacity 100% erase gently around the edges, going into them a bit so they become semi transparent around the edges. Rearrange until they look good. Feel free to mirror, resize, and rotate, the images to fit your needs.
Image hosted by Photobucket.com This is what I came up with. Do not worry, it gets WAY better, I promise. ; )
6. Now with your eraser brush at 22% opacity partially erase some extraneous parts like edges of hair.
Image hosted by Photobucket.com a bit better
7. Now add some effects! I merged my Emmy layers together, duplicated it, then set a 1 pixel guassian blur (Adjust>>blur>>Guassian blur) on them, and repeated 5 times. Then I set the blurred layer to overlay at an 87% opacity. Use screen if your person is more tan rather than overlay. Merge down and sharpen the merged layer. Adjust>>sharpen>>sharpen.
Image hosted by Photobucket.com She’s all glowy now
8. New raster layer. Pour in black and set it to color legacy. It should be grayscale now. Now its time to add color and the whole "graphic" idea of it. We are going to use my favorite method, textures! You will find more boxy textures as well, but for this type of thing I prefer blendish textures.
Made by my lovely friend Amanda (MySundayWarning)
Now add that on at soft light.
Image hosted by Photobucket.com Instant transformation!
9. But we’re not done yet. Now new raster layer. Fill with the darkest blue from the swatches (#000040) and set the layer to exclusion. New raster layer again. Choose a pretty gradient (I used your standard duotone brown) in your materials palette, flood fill and set layer properties to soft light.
Image hosted by Photobucket.com lovely, isn’t it?
10 BRUSHES! Now, while you shouldn’t rely heavily on these, they can really spice up your image! New Raster Layer. I used a brush from the abandoned photo set at http://1greeneye.net/brushes The color is basic black and I spread it around the whole image. Now set the layer to soft light.
Image hosted by Photobucket.com brush tastic.
11. Text and accents. Find something to say, and say it. The text color will be your background color. Just make sure the stroke width is set to 0. New Raster layer. I used one of my self created tiny text brushes and some more brushes from greeneye to create pretty accents.
Image hosted by Photobucket.com Almost Done!
12. Borders and touch ups. This is basically your own thing. I ended up blurring the background once, but that’s all I really did for touchups. Then I took greeneye’s vertical horizons brush, new raster layer, in black and created a border.
Image hosted by Photobucket.comMAGNIFIQUE!
I hope you learned much from this tutorial and continue on with your graphics journey, good luck! -Jean

Sunday, November 6, 2005

The 30 minute guide to search engine optimization.

What is search engine optimization?
Search engine optimization, generally called SEO, is the process by which you tweak your website to get high rankings in results of search engines like yahoo, google etc.

Why SEO?
The internet is a blind alley. The people surfing the internet do not know where the document they are looking for exists. So they turn to search engine for help.
Most of these people, will visit a site which comes up on the first page. If you are on the first page, its like the search engine saying, yeah this site is good.
So whether you are trying to sell something or just want your blog to be read by many more people, if you need more visitors to your site, you need to do SEO.

How SEO?
How to get a good ranking in search engines? Hmm. There is no clear answer to it. The SE(search engines) have very complex and intelligent algorithms to rank websites. And no one knows what these algorithms are. But some data about the algorithms is known. And we have to base our SEO on that.

Your first steps: Meta tags.
HTML pages have a meta tag describing the page. The content within the meta tag is not visible to the visitors of your pages. But the SE use them to find out about your pages. However these days most of the SE give very little weight to meta tags. This is due the fact that in past web masters used meta tags to fill the page with keywords. So even if the page was about buying used cars, the webmasters used “get rich quick” in meta tag, if they came to know that many people were searching for this. But still some SE use meta tags, you must use your meta tag to tell the SE about your site.

Designing your website.
The SE are bad at indexing pages containing frames, excessive javascript and based on flash. So it might be a good idea to use them sparingly. If you use them, be aware that you are taking a SE hit.

Getting linked.
The technique most of the SE use these days to find out how good your site is to find the number of pages which link to your pages. Think about it, if someone is putting a link to your site, it is as if they are saying, hey man visit this site, its cool. Also SE see, how popular a site which links to you is. If a page which is very popular links to you, you will get more benefit.
So if you want to rank higher, you will have to get links to your site. The easiest and also the hardest is to write good and unique content for your website. If your website is good other people will automatically link to it. So in essence they are helping you for free. Your various pages too should be linked together; this too increases your link popularity.
You must submit your website to the web directories like DMOZ and Yahoo Directories, for them to be indexed. SE give a lot of value for being linked in these directories.
Another method is reciprocal link exchange. In this you look for a website similar to yours, and about as popular. Then you ask the webmaster of that site if they would put up a link to yours site, if you linked to them. Many would agree as it helps them too.

Choosing the right keywords.
You must have an idea of what your potential visitors will search for when they visit your site. No matter how highly your page is ranked, if it does not have the correct keywords, no search engine is going to show it. So, if your web site is about buying used cars, make sure that this key phrase is used many times in your page. Some places which are given special importance by SE are the URL of the page, the heading of the page, bold text. But do not fill your pages with keywords excessively as some SE consider this as spam.

Submitting to SE, link farms etc.
SE have page where you can submit your site to them. However this is seldom necessary. If you have links coming to your site, it will soon be picked up by the SE. So your time is better spent creating content for your website.
Link farms are pages which let you add links to your pages free of cost. It is best to avoid them as the SE know the link farms and don’t even visit them. Even if SE visit them, they are so full with links that your site does not get any value out of being linked there. So at best you do not get any advantage, at worst you are penalized.

Breaking the rules.
There are many underhand techniques used to gain SE popularity. One method used in the past was to make key word text and background as same color. Then the visitors saw something else from the SE. However today’s SE can detect such underhand techniques and penalize it. So it is best to stay away from such techniques.

SEO dos and do nots.
Dos

  1. Create content rich, unique websites.

  2. Get links from similar websites.

  3. Submit to directories like DMOZ.
Do nots
  1. Avoid frames, flash etc if at all possible.

  2. Avoid underhand tactics, like text and background as same color.

  3. Avoid link farms, FFA etc

  4. Don’t waste your time submitting to search engines. Let them find you.

The next steps.
SE use complex algorithm to rate webpages which is constantly changing. The ideas above are just indicators. Visit various websites to find out what the current techniques are.

Some parting tips.
1. Use link:yoururl in google/msn/yahoo search to find number of pages linking to you. Dont worry if you find only some pages linking to you, as SE these days only show a fraction of links they know.
2. Use site:yourdomain in google search to find the number of your pages indexed by Google.

Saturday, November 5, 2005

The 30 Min HTML tutorial.

What is HTML?
HTML is the languague the web is written in. If you want to develop webpages,
this is the first thing you need to learn. Though there are enough Visual editors
a familiarity with HTMl helps as the Visual editors too use HTML behind your
back.


HTML: the tags.
A HTML document consists of two parts: the user data and information on how
to display them. The tags are what tell the computer how to display the user
data. The tags are easy to distinguish from normal data as they are present
inside a pair of < and > signs. For example this is a tag .<br /> Tags are like parenthesis as most of the tags which are opened must also be<br />closed. So <title> is opening tag and is closing tag.


Your first HTML document.
Let us try to write the simplest HTML document possible. Ok here you go. Type
this in your favorite text edtor and save as 1.html





Hello World!




Hello World. Again.





This would get you a screen like this.



Wow looks nothing like our file at all. That is because the tags have been
used up to display our data. If you noticed the tags we used are ,
, and <body>. Also all our tags were closed<br />using </html>, </head>, and .

Before we move further, lets see the tags a little more.

Any thing between opening and closing tag is the
part of displayable document. The .. section contains
the and other tags which we will see soon. The text between the<br /><title>… tag is displayed in the title bar. The ..
will contain most of your content.

If you want to see the document you created, right click inside the web page
and choose “view source”.


Spicing up our pages.

What good is a webpage without any color. So next try to add some formatting
to the page.

Tags have attributes. For example say you want to make the background of your
page red. Now the content between the .. tags is the
body. To make the background red, we need to change the “bgcolor”
attribute of body. So our body tag will become .
Lets modify the page to make it look slightly snazzier.





Hello World!





Hello World. Again.




This is some strong text.



This is some italisized text.



This is some huge heading.












This is a normal heading.



This is a italicised heading.







This is what your page now looks like.






(Only the body is shown, not the title bar.)

We changed the bgcolor attribute of body tag to make our page green. And we
changed the color attribute of font tag to make some text red. The new tags
we added are

, ,,

. They modify the
text within as you can see from the screenshot.

Now the
tag is a bit special. Note that we do not close it. That
is because
tag is used to create line breaks. So the idea of between
doesnot apply to it and it is not closed.




Images, Hyperlinks and other tags.

Now lets try to put images in the HTML document. This is accomplished by the
tag. But we will also need to tell the computer where our image
is located. This is done by the src attribute of the tag. So to
put images we need to put a tag similar to this

.

And you want to link your pages together? Right? This is achieved by the
tag. To tell about the web page you are linking to use the attribute href. So
our tag looks like

. Please note that we had used
the direct links in src and href tag, but you could use paths relative to current
document.

The

and
    ..
tags are used to create
a list. For example you might like to create a list of your favorite singers.
The items of the list are named using
  • tags. Lets put our
    ideas to good use.





    Hello World!






    Visit yahoo

      My favorite singers.

    • Metallica


    • Bon Jovi


    • Udit Narayan




      My favorite movies.

    1. The Matrix


    2. DDLJ


    3. ET







    After this your page should look something like this.




    Formatting your pages.

    After all this work, our pages are still pretty badly laid. To lay them like
    you want to, you have two options: tables and css.

    Suppose we want our page to look like this.


    So our table needs to have two rows and two columns. The left column must occupy
    only 25% of the screen. So we use the

    ..
    tag. The
    tag creates a new row. And the creates a new column in
    the present row. So to get a layout with two rows and two columns, the table
    will look like this.





















    Along with content this is what our whole document is.





    Untitled Document
































    To err is human to forgive divine.






    And we will get a page like this.






    Since we wanted the table to be invisisble and to be the size of the page we
    set the attributes width=”100%” and border=”0”.

    The other method to layout a webpage is to use CSS. But since this is a 30 min
    tutorial, we will skip it.




    The final pot pourri.

    Let us put all we have learnt to use, to create a really snazzy site.





    A really cool page































    You could put anything here
















    Can you see the image to the
    left?



    This was originally a cat. But aliens got her. And see


    her state now.



    Warning: Aliens may be trailing you
    now. Get

    out of their way.

    NOW!





    How to hide from aliens?


    Visit Nasa's site. They have information about them.





    I am not an alien! I hate them!











    Copyright you. Contact me








    This is our final page.




    Thank for for visiting. I hope I have been able to be of some help.




    Sunday, October 30, 2005

    Blogger Templates

    Do you use Blogger a lot? Then you will surely have sometime or the other changed
    the template. I did. And it set me thinking, what are these <$Blogger$>
    symbols. How are these templates designed?

    If you want to read to design a template read on. You will probably need to understand
    how HTML works. Some CSS might be useful too. But apart from that nothing else
    is needed.

    The Blogger templates are based on CSS and HTML. Any valid HTML/CSS construct
    can be used. But then Blogger adds some more extensions. These are the Blogger
    tags. So any non HTML tags you see in a template, it’s a Blogger tag.

    Why do we need Blogger tags? A template is nothing but a, well template. It must
    show different data depending upon the blog, author and a million other things.
    Say I want to show the name of the blog in the title bar. Now there is obviously
    no HTML tag for it. So what should I show. Will “I hate aliens” caption
    be ok? But fret not, Blogger tags to rescue. <$BlogTitle$> does it.

    Now some of the Blogger tags will have the $ sign in front and at end like <$BlogTitle$>.
    These are the variables. They take different values depending upon the blog, post
    etc. The tags without the $ sign allow formatting. But more about them later.
    Oh one more thing, the Blogger tags case sensitive, unlike the HTML tags.

    With all this information behind us let us try to make the simplest template possible.
    It just shows the various posts without any formatting and any hyperlink.


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    <$BlogTitle$>







    <$BlogItemBody$>






    When I apply this template, this is what my blog looks like.


    We used three Blogger tags- <$BlogTitle$>, , <$BlogItemBody$>.
    The <$BlogTitle$> tag was used to get the name of the Blog in the title
    bar. Then we used the tag. Did you notice it had no $ sign.
    It is repeating kind tag. Anything between this tag repeats for all entries.
    So as we wanted to show all our posts, we included the <$BlogItemBody$>
    between Blogger tags. Also as you might have guessed the <$BlogItemBody$>
    gives us the posts of the blog. We need to close the opening
    tag with a closing
    tag. Any Blogger tag without the $ sign
    must be closed. But the tags with $ sign are not closed.

    By the way this template sucks, doesn’t id. Like you wrote the blog, and
    it does not even acknowledge the wri

    Blogger Templates

    Do you use Blogger a lot? Then you will surely have sometime or the other changed
    the template. I did. And it set me thinking, what are these <$Blogger$>
    symbols. How are these templates designed?

    If you want to read to design a template read on. You will probably need to understand
    how HTML works. Some CSS might be useful too. But apart from that nothing else
    is needed.

    The Blogger templates are based on CSS and HTML. Any valid HTML/CSS construct
    can be used. But then Blogger adds some more extensions. These are the Blogger
    tags. So any non HTML tags you see in a template, it’s a Blogger tag.

    Why do we need Blogger tags? A template is nothing but a, well template. It must
    show different data depending upon the blog, author and a million other things.
    Say I want to show the name of the blog in the title bar. Now there is obviously
    no HTML tag for it. So what should I show. Will “I hate aliens” caption
    be ok? But fret not, Blogger tags to rescue. <$BlogTitle$> does it.

    Now some of the Blogger tags will have the $ sign in front and at end like <$BlogTitle$>.
    These are the variables. They take different values depending upon the blog, post
    etc. The tags without the $ sign allow formatting. But more about them later.
    Oh one more thing, the Blogger tags case sensitive, unlike the HTML tags.

    With all this information behind us let us try to make the simplest template possible.
    It just shows the various posts without any formatting and any hyperlink.


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    <$BlogTitle$>







    <$BlogItemBody$>






    When I apply this template, this is what my blog looks like.



    We used three Blogger tags- <$BlogTitle$>, , <$BlogItemBody$>.
    The <$BlogTitle$> tag was used to get the name of the Blog in the title
    bar. Then we used the tag. Did you notice it had no $ sign.
    It is repeating kind tag. Anything between this tag repeats for all entries.
    So as we wanted to show all our posts, we included the <$BlogItemBody$>
    between Blogger tags. Also as you might have guessed the <$BlogItemBody$>
    gives us the posts of the blog. We need to close the opening
    tag with a closing
    tag. Any Blogger tag without the $ sign
    must be closed. But the tags with $ sign are not closed.

    By the way this template sucks, doesn’t id. Like you wrote the blog, and
    it does not even acknowledge the writer. And by the way when did you write it.
    An hour ago or a million years ago. So now let’s add the name of the author
    and the time to the blog. And while you are at it, make a navigation structure
    to move through the blog.



    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    <$BlogTitle$>













    <$BlogItemBody$>

    Posted by <$BlogItemAuthorNickname$> on <$BlogItemDateTime$>

    permanent link






    Back to index









    As you can see now the name and time are visible along with a link to the post
    pages.


    Let’s see the new tags we have used. We want to write the name of the
    post author and the time post was created. We can do it using <$BlogItemAuthorNickname$>
    <$BlogItemDateTime$> tags. But then we want a link to individual posts.
    <$BlogItemPermalinkURL$> provides the address where current blog resides.
    But then when the user visits one of the post pages he needs a link to the index
    page. But we do not want a link if we are already on the index page. So we put
    a link using Back to index,
    but enclose it within a tag. Anything within the
    tag will only print if the current page is a individual post page. So our link
    will be visible only on the post pages.

    Next we need to allow the people viewing our blog to post comments. And what
    is the permanent link doing on a post page. Let’s see our next template.



    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    <$BlogTitle$>


    >









    <$BlogItemBody$>

    Posted by <$BlogItemAuthorNickname$> on <$BlogItemDateTime$>



    permanent link






    <$BlogItemCommentFormOnClick$>>

    <$BlogItemCommentCount$> comments













    <$BlogItemCommentCount$> Comments:









    <$BlogCommentBody$>




    By <$BlogCommentAuthor$>, at



    <$BlogCommentDateTime$>


    <$BlogCommentDeleteIcon$>





    <$BlogItemCommentFormOnClick$>>

    Post a Comment




    Back to index









    This is what our blog looks now.


    And our post pages will also show the comments.

    We have enclosed the permanent
    link


    tag in a tag so that the permanent link is not visible on post
    pages. We need to allow users to make comments only if comments are enabled.
    So we use the conditional tag .
    is a tag similar to tag in the sense that is will repeat anything
    between it for all the comments. All other tags have fairly descriptive names.



    Saturday, October 29, 2005

    Eclipse

    Introduction:

    Eclipse is an integrated development environment for “everything and nothing in particular”. Plugins exist for every thing including Java, C++, Cobol and others.

    Eclipse was first licensed by IBM and then donated to the open source community. IBM and group of other companies are backing Eclipse. With open source community Eclipse has grown from strength to strength.

    But eclipse has strong support for Java. The plug-in for Java comes out of the box with Eclipse. If you are looking for an IDE to develop Java desktop applications, look no further.

    Comparison with other IDEs:

    If you are developing serious Java apps, you will need a good IDE. The market for Java IDEs is taken by four players, Eclipse, Netbeans, JCreator, and IDEA.

    Of these Eclipse and Netbeans are free. JCreator has a free non-expiring version but with some features disabled. So if you are not looking to spend some money, Eclipse is your best bet. It has almost all the functions found in commercial IDEs. It is considerably faster than Netbeans.

    Installing Eclipse:

    To install eclipse you will need

    1. JRE 1.4 or higher
    2. Eclipse zip
    3. A utility to unzip the zip file.

    Unlike some other utilities Eclipse does not come with a installer. You just need to unzip it to a directory and it will start to work.

    Common problems:

    1. Java runtime environment not found.

    Solution: Get JRE from the sun site. Install it before you run Eclipse. Eclipse does not contain a JRE.

    Your first program:

    Here we will develop the HelloWorld program using eclipse. When you start eclipse you will get a screen similar to this.

    Since we need to write a Java program change to Java perspective by, Window>Perspective>Open perspective>Java.

    Image hosted by Photobucket.com

    If you cannot see option for Java in open perspective choose other and then choose Java.

    Every program must have a project associated with it. So we will create a new project using, File>New>Project.

    Image hosted by Photobucket.com

    Lets name it HelloProject.

    Next we need to create a new class. This can be done by File>New>Class.

    Image hosted by Photobucket.com

    After giving it a suitable name( HelloWorld?) write your program. Now save it by pressing Ctrl+s. there is no need to compile as Eclipse automatically compiles.

    It can be executed by Run>Run as>Java application


    Image hosted by Photobucket.com

    That’s it. Your program is compiled and running. To see the output change to console tab at the bottom.

    Image hosted by Photobucket.com

    This was the basic of eclipse IDE.

    Friday, August 12, 2005

    History of Python

    Here is the history of Python from wikipedia. For the latest version head to

    History of PythonHistory



    Python was created in the early 1990s by Guido van Rossum at Stichting Mathematisch Centrum (CWI) in the Netherlands as a successor of the ABC programming language. Guido is Python's principal author, although it includes many contributions from others. Guido's continuing central role in deciding the direction of Python is jokingly acknowledged by referring to him as its Benevolent Dictator for Life (BDFL).



    The last version released from CWI was Python 1.2. In 1995, Guido continued his work on Python at the Corporation for National Research Initiatives (CNRI) in Reston, Virginia where he released several versions of the software. Python 1.6 was the last of the versions released by CNRI. In 2000, Guido and the Python core development team moved to BeOpen.com to form the BeOpen PythonLabs team. Python 2.0 was the first and only release from BeOpen.com.



    Following the release of Python 1.6, and after Guido van Rossum left CNRI to work with commercial software developers, it became clear that the ability to use Python with software available under the GNU General Public License (GPL) was very desirable. CNRI and the Free Software Foundation (FSF) interacted to develop enabling wording changes to the Python license. Python 1.6.1 is essentially the same as Python 1.6, with a few minor bug fixes, and with a different license that enables later versions to be GPL-compatible. Python 2.1 is a derivative work of Python 1.6.1, as well as of Python 2.0.



    After Python 2.0 was released by BeOpen.com, Guido van Rossum and the other PythonLabs developers joined Digital Creations. All intellectual property added from this point on, starting with Python 2.1 and its alpha and beta releases, is owned by the Python Software Foundation (PSF), a non-profit modeled after the Apache Software Foundation. See http://www.python.org/psf/ for more information about the PSF.

    PHP: History of PHP

    The passage here is directly from the PHP site and is here only for your convenience. I have not written it and claim no copyright ( or anything) over it. For the latest copy you might want to check

    PHP: History of PHP and related projects - Manual



    History of PHP

    PHP/FI



    PHP succeeds an older product, named PHP/FI. PHP/FI was created by Rasmus Lerdorf in 1995, initially as a simple set of Perl scripts for tracking accesses to his online resume. He named this set of scripts 'Personal Home Page Tools'. As more functionality was required, Rasmus wrote a much larger C implementation, which was able to communicate with databases, and enabled users to develop simple dynamic Web applications. Rasmus chose to release the source code for PHP/FI for everybody to see, so that anybody can use it, as well as fix bugs in it and improve the code.



    PHP/FI, which stood for Personal Home Page / Forms Interpreter, included some of the basic functionality of PHP as we know it today. It had Perl-like variables, automatic interpretation of form variables and HTML embedded syntax. The syntax itself was similar to that of Perl, albeit much more limited, simple, and somewhat inconsistent.



    By 1997, PHP/FI 2.0, the second write-up of the C implementation, had a cult of several thousand users around the world (estimated), with approximately 50,000 domains reporting as having it installed, accounting for about 1% of the domains on the Internet. While there were several people contributing bits of code to this project, it was still at large a one-man project.



    PHP/FI 2.0 was officially released only in November 1997, after spending most of its life in beta releases. It was shortly afterwards succeeded by the first alphas of PHP 3.0.

    PHP 3



    PHP 3.0 was the first version that closely resembles PHP as we know it today. It was created by Andi Gutmans and Zeev Suraski in 1997 as a complete rewrite, after they found PHP/FI 2.0 severely underpowered for developing an eCommerce application they were working on for a University project. In an effort to cooperate and start building upon PHP/FI's existing user-base, Andi, Rasmus and Zeev decided to cooperate and announce PHP 3.0 as the official successor of PHP/FI 2.0, and development of PHP/FI 2.0 was mostly halted.



    One of the biggest strengths of PHP 3.0 was its strong extensibility features. In addition to providing end users with a solid infrastructure for lots of different databases, protocols and APIs, PHP 3.0's extensibility features attracted dozens of developers to join in and submit new extension modules. Arguably, this was the key to PHP 3.0's tremendous success. Other key features introduced in PHP 3.0 were the object oriented syntax support and the much more powerful and consistent language syntax.



    The whole new language was released under a new name, that removed the implication of limited personal use that the PHP/FI 2.0 name held. It was named plain 'PHP', with the meaning being a recursive acronym - PHP: Hypertext Preprocessor.



    By the end of 1998, PHP grew to an install base of tens of thousands of users (estimated) and hundreds of thousands of Web sites reporting it installed. At its peak, PHP 3.0 was installed on approximately 10% of the Web servers on the Internet.



    PHP 3.0 was officially released in June 1998, after having spent about 9 months in public testing.

    PHP 4



    By the winter of 1998, shortly after PHP 3.0 was officially released, Andi Gutmans and Zeev Suraski had begun working on a rewrite of PHP's core. The design goals were to improve performance of complex applications, and improve the modularity of PHP's code base. Such applications were made possible by PHP 3.0's new features and support for a wide variety of third party databases and APIs, but PHP 3.0 was not designed to handle such complex applications efficiently.



    The new engine, dubbed 'Zend Engine' (comprised of their first names, Zeev and Andi), met these design goals successfully, and was first introduced in mid 1999. PHP 4.0, based on this engine, and coupled with a wide range of additional new features, was officially released in May 2000, almost two years after its predecessor, PHP 3.0. In addition to the highly improved performance of this version, PHP 4.0 included other key features such as support for many more Web servers, HTTP sessions, output buffering, more secure ways of handling user input and several new language constructs.



    Today, PHP is being used by hundreds of thousands of developers (estimated), and several million sites report as having it installed, which accounts for over 20% of the domains on the Internet.



    PHP's development team includes dozens of developers, as well as dozens others working on PHP-related projects such as PEAR and the documentation project.

    PHP 5



    PHP 5 was released in July 2004 after long development and several pre-releases. It is mainly driven by its core, the Zend Engine 2.0 with a new object model and dozens of other new features. To get more information on this engine, see its webpage.

    Wednesday, August 10, 2005

    Start

    Here Ill post my programming tutorials.

    Friday, March 4, 2005

    Microsoft Changes the Product Activation Process

    Thursday, March 3, 2005

    Lamest Computer Accessories

    Wednesday, March 2, 2005

    Windows Update

    Tuesday, March 1, 2005

    Testing Your Defenses (Part 2)

    Monday, February 28, 2005

    Testing Your Defenses (Part 1)

    Friday, February 25, 2005

    Wireless Update Rollup is Available

    Thursday, February 24, 2005

    Free eMail Notification (Software)

    Wednesday, February 23, 2005

    Media Player Update Protects Against Spyware

    Monday, February 21, 2005

    Displaying the Quick Launch Toolbar

    Friday, February 18, 2005

    Google New Search Toolbar for IE

    Thursday, February 17, 2005

    Free Classic Games

    Wednesday, February 16, 2005

    Windows Antispyware Will Remain Free

    Tuesday, February 15, 2005

    Security Basics (Video)

    Monday, February 14, 2005

    Netcraft Anti-Phishing Toolbar

    Thursday, February 10, 2005

    Update Your System, or Else

    Wednesday, February 9, 2005

    Triumph Over the 1040 with Tax Software (Review)

    Tuesday, February 8, 2005

    Launch XP Utilities from the MS-DOS console

    Monday, February 7, 2005

    Deals on the Web

    Friday, February 4, 2005

    Free Windows XP SP2 CD

    Thursday, February 3, 2005

    SphereXP 3D desktop replacement

    Wednesday, February 2, 2005

    Google is Offering Free Photo Management Software (v2.0)

    Tuesday, February 1, 2005

    Free Encrypted Email

    Monday, January 31, 2005

    Access Your PC Anywhere In the World For Free

    Friday, January 28, 2005

    Free Online Computer Courses

    Thursday, January 27, 2005

    Surf the Web With Your Peers

    Tuesday, January 25, 2005

    Windows AntiSpyware (Beta)

    Monday, January 24, 2005

    Staying Safe Online

    YouSendIt.com

    Friday, January 21, 2005

    Password Protect Your Compressed Folders

    Thursday, January 20, 2005

    Microsoft Time Zone (Cool Utility)

    Wednesday, January 19, 2005

    Microsoft PowerToys for Windows XP

    Tuesday, January 18, 2005

    Manually Opening Ports in Windows Firewall

    Monday, January 17, 2005

    Using the "Show Updates" Option (Windows XP SP2')

    Friday, January 14, 2005

    Changing the Default Action With Removable Media

    Thursday, January 13, 2005

    Choosing the Windows Explorer Start Folder

    Wednesday, January 12, 2005

    Creating a Password Recovery Disk

    Tuesday, January 11, 2005

    Windows XP: Creating Your Own Toolbar

    Monday, January 10, 2005

    Modifying XP's Visual Effects

    Friday, January 7, 2005

    Producer for Microsoft Office PowerPoint 2003

    Thursday, January 6, 2005

    AuditMyPC.com

    Wednesday, January 5, 2005

    Creating a System Floppy Disk

    Tuesday, January 4, 2005

    Quickly Access Network and System Properties

    Monday, January 3, 2005

    'No to all' When Modifying Files

    Saturday, January 1, 2005

    Welcome to Windows Tip of the Day