How To Password Protect a Website Page With .htaccess on Apache WebServers

As you might know, a website or webpage can be easily password protected from unauthorized access through several methods, easiest being the login screen where users need to enter their valid login credentials before they can access any page in a website. But in this case users can still easily access resources like images, scripts or other non-executable files from your site. If you want to password protect some particular webpage or directories or some specific urls within your site then the strongest protection to your webpage is the server side authorization by .htaccess.

Create a .htpasswd file in your Apache WebServer

How to Create a Link To Smoothly Scroll To The Top of a Page by jQuery

"Go to top" is a very popular link that we use to put into web pages when pages tend to be long and users always need to go back to the top of the page to avail the options. Users can obviously go back by scrolling up and up and up. But we can also provide them with an option at the bottom of a page, clicking which will automatically take the user to the top of that page.

The most natural and effective way to do it is to place a "quick link" or "inpage link" which should be linked to the ID of the topmost element on the page.

Example of go to top link on a webpage:

How to Create Easy Collapsible and Expandable Lists in JavaScript

Here is a very quick and easy way to make your lists collapsible and expandable on clicks by using JavaScript. Now when presenting a long lists of item you can set them to remain collapsed on page load, but after that users can click and expand any of those list headings to see the full list of items. Unlike accordion, here users can easily open up all the lists one by one. Checkout the Demo of Collapsible and Expandable Lists which is created here.
First, just include a JavaScript file in your <header> section of the page -

<script src="http://www.acmeous.com/tutorials/demo/acmeousCollapsibleLists/acmeousCollapsibleLists.js" type="text/javascript"></script>

Then just below it, within the <header> section of your page, add the following code -

Differences Between Strict and Transitional DOCTYPEs

Attributes which are deprecated in Strict DOCTYPEs:

• align (allowed on elements related to tables only, like - col, colgroup, tbody, td, tfoot, th, thead, and tr)


• target


• language


• background


• link


• hspace


• noshade


• nowrap


• bgcolor


• text


• vspace


• vlink


• alink


• height (allowed on img and object)


• border (allowed on table)


• width (allowed on img, object, table, col, and colgroup)


• name (allowed in HTML 4.01 Strict, not allowed on form and img in XHTML 1.0 Strict)

Top 5 Security Checks for your Website

Today just building up a website doesn’t help until you know how you can manage it. So before your website is getting into limelight, just be sure that you know how to fight hackers and spammers.

Here are the top 5 security guidelines for you to make your environment more secure and not letting it in the evil hands.

How to enable cURL support for PHP in Apache on Windows

So you want to enable cURL in your Apache Server? It is really easy and simple. But first you should check whether you have cURL already enabled on your server. Here is a very simple way to check:

Create a phpsetup.php file and put this code within it:

<? phpinfo(); ?>
Now view that phpsetup.php page from your browser and you will get all the details of your PHP setup on your server. Search for the “cURl support”. If you can’t find it then cURL support is not enabled on your system. But if you can find it and it shows “enabled” then you already have cURL enabled on your system.

How to add link and script codes in the Head tag from the body section through JavaScript

Many times we need to add <script> or <link> tags for some selected pages of a website. In many websites we use Content Management Systems or some templates where we can’t add different headers to different pages. But in many pages we need some extra functionality through scripts and other codes which are used differently in different pages within that site. Sometimes we need to insert the scripts within the page body tag which is not at all Web Standards compliant. The scripts and links to css or JavaScript files should always be in the head tag.

How to prevent directory browsing on your Website or Blog

Directory browsing means users can browse the directories of your website or blog. They can see you directory structure can browse that. It means all your directories are open to them and they get a clear idea about your website structure and different folders. This can be a security risk for your site. Suppose users can visit your images directory, your css or js directory on their browser. For wordpress users can see the wp-content directory, the themes, plugins directory. This is not good for your security.

How to make PhpBB Forums Search Engine Optimized (SEO)

Forums are extensively used as a platform of communication and interaction around the globe. PhpBB has been playing a very important role in developing popular boards and forums. This feature rich free software has many salient utilities which attract webmasters. PhpBB is serving the communities very much satisfactorily.

How to add noindex, nofollow in Blogroll for your Blogger/Blogspot Blogs

If you want to add a Blogroll in your Blogger Blog you can add it from your layout tab in your Blog's dashboard. You can add new page element and select the Blogroll element, where you specify the links you want to display on your Blog. You can choose the title of the section. Now if you want that Google don't share your Google Juice(PageRank value) to those sites, you can specify Google not to do that. For this you have to specify all those links to be non-recommended by adding a rel="nofollow" tag to those anchor tags.

Here is how you can do it by editing the html template of your Blog. Open the 'Edit HTML' tab in your Blogger Layout. Check the check box to Expand the widget templates. If your title for your Blogroll section is Blogroll, then find out for the following section in your template.

Simplest way to change images on Mouse Over through JavaScript

Many times we use to give some effects when users mouse overs an element. Sometimes we change the colors, sometimes we change sizes. Many times we also change the images on which users put their mouses on. Many times we use to change the texts in the images which is also done by changing the whole image on mouse over. Many times we see that images remain totally same on mouse over, just the color of the image is changed, which is also done by changing the whole image.

How to display html codes in your blog posts

Many times you need to show up HTML or JavaScript or PHP codes in your posts, but you don't want them to execute. You just trying to show your users how to write the code. Then you need a tip so that the codes don't get executed, but show up as it is as texts. You can do it easily through pre tags. Anything you insert within a pre tag, it is displayed as it is as texts and not executed. Here is an example of using pre tags to show html codes.

How to show a link details in status bar of the browser in JavaScript

Here is another cool trick with JavaScript. Whenever an user mouse overs a linked text or image, you use to show them a tool tip through the title text property of anchor tag. But now you can also show the details of the link in the status bar of the browser. Its very easy and light to show a short description in the browser status bar, whenever an user mouse overs the link text or image. Here is and example of using the onMouseOver and onMouseOut event handlers of JavaScript.

How to get the current time in JavaScript

JavaScript is very amazing scripting language through which you can do many funny things and can also satisfy useful tasks. Here is an very easy and useful use of JavaScript just to show you the use of a JavaScript's inbuilt function. You can easily show the current time in you website through JavaScript. JavaScript has an inbuilt function Date(), from which you can get the desired values. This is a good way to learn the Date() function. Checkout the example.

Benefits of CSS based sites over Table based sites

There are lots of benefits in creating CSS based sites than table based sites. Always you may have heard the terms like tableless designs, CSS based sites etc. But if you have always thought that why you should leave your table based designs and take upon tableless designs, then here are the explanations to your thoughts. The key benefits to CSS based sites on tabled sites are:

How to create stylish text inputs for search, login or comment forms

You may have seen many stylish text inputs and designer forms in many websites. Just putting some text inputs and text areas and buttons, can't attract users to click there or type in some texts for you. If you wish your users grab those forms and fill out important information for you, you have to make those inputs in such a way that users get them accustomed with your site's theme. Users generally find no input forms to be interesting except it is a search box, which he/she have to use without any other option. But still f you make search inputs similar to your theme, it adds to your design and make it comfortable for your uses. After all designing is all about making elements soothing to users' eyes.

Here is a tutorial to make text inputs beautiful and matching to your website's theme. Suppose you have a login input in a bar, where users enter their passwords. Here is a sample how the input has been matched with the bar.

Here I have created a stylish input matching with the dark red colored background bar. Now lets see how you can implement it.

At first just insert normal form and input elements in your page like this.



Login:

View the source to get see the code.
This has inserted a form and a text input in your page. Notice that I have put an id="passText" in the input element. This will help you to stylize it through CSS. Now here is the CSS part.

#loginForm [
background: url(images/passText.jpg) no-repeat;
/* where passText.jpg is the stylish box image */
height: 20px;
width: 100px;
font-weight: normal;
color: #ffffff;
border: 0px;
}

#passText {
width: 80px;
height: 18px;
margin-left: 18px;
background: transparent;
color: #ffffff;
}


Now this will transform your input box just as you wished and seen in the picture. The form has the image for the text input in its background, and the input text's background is transparent. The size of the input text is made smaller than the form, so that the texts typed inside the input don't come out of the designed box.

This is the basis of form designing and in this pattern you can make your forms look beautiful and totally matching your site's theme, which adds beauty to your site. Now make designer forms and inputs and attract users to use them more and more.

CSS Trick - Removing on-click Dotted lines around links

Whenever you visit any website in Firefox, you many times may have noticed that a dotted outline appears around links whenever you click on them. This dotted outlines doesn’t comes in Internet Explorer. This thing happens only with Firefox. You may have thought that this thing doesn’t looks cool on your website. So here is a very easy solution to stop this behavior in Firefox.

You have to configure your a tag and a:visited tag to stop this. Just add this lines of codes in your css file and get reed of this unwanted behavior.


a {
outline: none;
}
a: visited {
outline: none;
}


This is all that does the trick and makes your website more cool.

How to Center Align a Website or Html Element Without Align Tag

To position a website or a div tag or p tag in the center of the screen from Internet Explorer 4 and up including all modern browsers like Firefox, Opera, Netscape etc, we often use the align="center". Though this tag satisfies our aim and centers the element in the screen, but this tag is not recognized by W3 Validator as a valid XHTML content. Thats why if you are cautious enough about your website to be XHTML Validated, you can’t use it .

How to change the User Registration Terms of use in PhpBB3 forums

Forums has been always a great platform for user interaction and group discussion as well as development. It has several striking features which attracts millions of internet users to take part in millions of board communities for many years. PhpBB had always been pioneering these events. Though some of its features may have become irritating to forum owners and moderators, still it is the number 1 forum management software available for free worldwide. One of the irritating thing is that it has no direct option to change the terms and conditions of users’ registration page from its administration panel. So you will need to achieve it in other way.