Categories
CSS & HTML Tips HTTP Tips & Tutorials PHP Tips & Tutorials WordPress How To

Redirect 404 Error to Home Page

Other than making your 404 error page user friendly, you can redirect it to your index pages such as the homepage, sitemap, or search page, to make it useful for the users. Instead of relying on them to correct the error themselves, you offer the new orientation.

How to redirect a 404 error page to the home page?

There are essentially 3 ways to do this depending on the technology your site is built on.

The .htaccess and HTML solution

This works across all sites that are served by the Apache web server with .htaccess enabled. Add this line in the .htaccess file in the root directory of your domain:

ErrorDocument 404 /404.html

And in 404.html, add a meta tag in the HTML head section:

<meta http-equiv="Refresh" content="1; URL=http://www.example.com/">

So when there’s an 404 Not Found error the user would be first redirected to /404.html and in turn, he or she would be redirected to the homepage http://www.example.com/ (or whatever you change it to) by the meta Refresh actions.

The PHP solution

If you are using PHP to code your site, chances are you know this solution. You can always use the previous solution (The .htaccess and HTML solution) to redirect 404 error page to your home page on a PHP site, but you can also try the pure PHP approach instead.

Whenever a user types in a URL request that you do not recognize, render this:

header("HTTP/1.1 404 Not Found");
header("Location: /");
exit();

Which would redirect the user who has hit a 404 error to the homepage / or any other page URL you specify there.

The WordPress solution

If you are using WordPress for your site, make a 404.php file in your theme directory with the following content:

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();

WordPress would automatically use 404.php as the default 404 Not Found error page and when a user hits that page, he or she would then be taken to the home page your WordPress blog.

Categories
CSS & HTML Tips

CSS: Make <pre> Text to Wrap

I deal with quite some code examples across some of my blogs and sometimes they contain too long lines to fit in nicely, which makes it hard to read the latter part of a long line. But you still need to maintain the pre-formatted text with the <pre> tag.

The solution is to use CSS to prescribe the <pre> tag to wrap the lines. Just add this in your stylesheet:

pre.wrap {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

And add the “wrap” class to the <pre></pre> blocks that you want lines to wrap naturally:

<pre class="wrap">I will be wrapping at the end of the line width.</pre>
Categories
CSS & HTML Tips HTTP Tips & Tutorials

HTML: Make a Page Refresh Every xx Seconds

A quick tip for those who just started learning HTML. It’s possible to add a line of code in your HTML page so that it’s automatically refreshed every few seconds when loaded in the user’s browser.

To make the page automatically refresh itself every 60 seconds, just insert the following code in the <head></head> section of your HTML source code:

<meta http-equiv="refresh" content="60">

This would be very useful to display information that is constantly changing.

This can also be used to redirect the user from the current page to another, just specify the destination URL:

<meta http-equiv="refresh" content="30; url=http://example.com/">

Which would redirect the browser to http://example.com/ 30 seconds after finishing loading the current page.

Categories
CSS & HTML Tips

Pure CSS Rounded Corner, No Images

Though it does look great, I haven’t given it a try until the other day when I was developing smartbabynames.com. Notice the previous and next link immediately below the boy image at here:

http://www.smartbabynames.com/meaning/boy/Langleigh/

They look and feel great.

So here’s what I’ve done to achieve the rounded corner box in pure CSS – no images nor whatever. Just CSS:

.rounded {
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	border-radius: 2px;
}

Tested across major modern browsers other than IE. Sure it doesn’t work in IE6, but not sure if it works in IE7, IE8, IE9, etc. But let me know if you know.

Categories
Client Side Coding Books CSS & HTML Tips Rich Internet Application

Best and Newest HTML5 Books (and Some CSS3 Books)

HTML5 and CSS3 are becoming a reality. To be better prepared and armed with the latest technologies of the web so that we stay on the cutting edge when creating stuff, I have found some of the best book titles at Amazon about HTML 5 and CSS 3. Note that several of these books have not been released yet. You can pre-order and receive them when they are out.

Web Developers / Designers’ Books:

  1. Best HTML Books
  2. Best CSS Books
  3. Best JavaScript Books
  4. Best PHP Books
  5. Best MySQL Books
  6. Best Linux Books
  7. Best Apache Books (mod_rewrite Books)
  8. Best Web Hosting Books

HTML5: Up and Running

html 5 up and running

Here’s a godsend online book for learning HTML5 written by Mark Pilgrim as well.

HTML5: Designing Rich Internet Applications (Visualizing the Web)

HTML5 Designing Rich Internet Applications (Visualizing the Web)

Beginning HTML5 and CSS3: Next Generation Web Standards

Beginning HTML5 and CSS3 Next Generation Web Standards

Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development

Pro HTML5 Programming Powerful APIs for Richer Internet Application Development

Introducing HTML5 (Voices That Matter)

Introducing HTML5 (Voices That Matter)

Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKit

Beginning iPhone Web Apps HTML5, CSS3, and JavaScript for WebKit

HTML5 Now: A Step-by-Step Video Tutorial for Getting Started Today (Voices That Matter)

HTML5 Now A Step-by-Step Video Tutorial for Getting Started Today (Voices That Matter)

HTML5 Straight to the Point: Using HTML5 with CSS3 and JavaScript

HTML5 Straight to the Point Using HTML5 with CSS3 and JavaScript

CSS3: Visual QuickStart Guide (5th Edition)

CSS3 Visual QuickStart Guide (5th Edition)

Categories
CSS & HTML Tips

The Ultimate Way to Cloak and Hide any Website Address or URL (Stealth Forwarding)

Most of the existing URL cloaking services are only a redirection by a randomly generated short URL. The real URL of the target website or web page will eventually be revealed when the visitor arrives at it after the obscure redirection. So how to ACTUALLY hide and cloak the destination URL of any website or web page so the address bar of the browser stays unchanged? In other words, how to create a stealth forwarding?

With a simple HTML web page, you can do that very easily. Copy and paste the following HTML code into a file named google.html and save it at example.com/google.html:

<!doctype html>
<html>

<head>
<title>Google</title>
<style type="text/css">
body {margin:0;}
iframe {padding:0;border:0;position:absolute;width:100%;height:100%;}
</style>
</head>

<body>
<iframe src="http://www.google.com/"></iframe>
</body>

</html>

Now navigate to your website http://www.example.com/google.html. It’s Google’s home page no problem. Better yet, the URL in the browser address bar doesn’t change to http://www.google.com/.

Categories
CSS & HTML Tips PHP Tips & Tutorials

CSS: How to write CSS rules to detect or target Chrome, Safari or Opera browsers only?

It’s easy to target firefox, just write as expected by the standards, at least most of the time. It’s also easy to target IE and any specific versions of them by a few of the famous hacks or the IE conditional comments to selectively include style sheets by version numbers. But how does one write CSS rules and make the browsers to recognize that they are particularly for Chrome, Safari or Opera?

Use PHP to distinguish the browsers.

echo $_SERVER['HTTP_USER_AGENT'];

Put this line in a .php file, upload the file to your server and browse to it by all the different browsers you have. From the server side, $_SERVER['HTTP_USER_AGENT'] contains all the information PHP knows about the source of the request, namely your browser. Now that the server is able to recognize the client browser, you can serve up different versions of a web page by PHP and include different CSS classes according to the browser type:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') !== false) {
	// Chrome user agent string contains both 'Chrome' and 'Safari'
	if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false) {
		echo '<body class="chrome">';
	} else {
		echo '<body class="safari">';
	}
} elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') !== false) {
	echo '<body class="opera">';
} else {
	echo '<body>';
}

The rest is very simple. Just cascade your styles by additional classes to adapt your design to Safari, Chrome or Opera specifically. You can do a lot more than this by the server side variable $_SERVER['HTTP_USER_AGENT'], such as detecting browser versions and operating systems or writing your own web traffic statistics software.

Categories
CSS & HTML Tips

Use Relative Protocol URL Address to Automatically Determine Web Address Protocol (HTTP or HTTPS)

http or httpsHere’s a really interesting bit about how you can omit the protocol part of a web address in your web pages. The predominant belief is that an HTTP:// or an HTTPS:// has got to be prefixed to a URL or it won’t work, truth is, it will. Try the following link:

Click Me!

View the source of this entry and you’ll see the link code:

<p><a href="//www.kavoir.com/"></a>Click Me!</p>

There is no HTTP nor HTTPS protocol at the beginning of the URL. Yet, it’s working properly. Browsers will automatically use the same protocol as that of the current URL. It’s also working for other URL sources in HTML such as images or JavaScript scripts. Wherever you need to specify a URL.

This is very useful when your site is using SSL thus all the URLs start with HTTPS://. Because this approach lets the browser to automatically use the current protocol, you will not be blamed for using HTTP:// URLs on an HTTPS page and causing the notorious unsafe content warning to the users. It will also be a breeze to switch between the HTTP version and HTTPS version of your site. It’s totally automatic.

However, I don’t know what this would do in terms of SEO and how Google sees any URLs without the protocol part. Learn more about what the hell HTTP is.

Categories
CSS & HTML Tips

HTML: Make Content Editable in Element / Tags without JavaScript

It’s not well known but this feature was invented by Microsoft and has been implemented across all major modern browsers ever since IE 5.5. Adding an attribute of contenteditable and assign a value of “true” to it makes the content value / inner text of that element editable by a single click:

<blockquote contenteditable="true">Click to edit me!</blockquote>

Try it live:

Click to edit me!

When you are done editing, just hit Enter (if it’s an inline element) or blur the cursor focus from the editing region (if it’s a block element). Theoretically, this attribute can be added to any HTML tags to make them immediately editable without the help of any JavaScript at all. You can add it to a div, a span or a td.

Now what can we do with this new trick?

Categories
CSS & HTML Tips

You can actually use percentage values for padding and margin

Which seems quite new to me as I have never used any percentage values on them before. Took some tests and I found out that all major modern browsers supported percentage values for padding and margin very well, even IE6.

This should come very handy in positioning things up according to the parent width. See how I did with the title of this site: http://www.rackspacepromocode.com

rackspace cloud sites promo code

You can resize the browser window to see how there’s always a 8% left padding to the <h1> title.