Full Browser Width Bars (Inside a fixed width wrapper) using box-shadow

HTML:

<section>
  <h2 class="fullbg">TITLE</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus dolor odit sint nesciunt deleniti dolorem commodi itaque quidem error! Sit officiis repudiandae quae voluptates natus aliquam reprehenderit explicabo dolorem obcaecati.</p>
</section>

CSS:

body {
  background: #ccc;
}
section {
  margin: 0 auto;
  width: 25rem;
  background: white;
  padding: 20px;
}
.fullbg {
  background: black;
  box-shadow: -25rem 0 0 black, 25rem 0 0 black;   /* x offset == element width */
  color: white;
}

Encrypt and Decrypt the data such as credit card detials

Here is the function to encrypt and decrypt the secrured data such as credit card information

<?php
function encrypt($decrypted, $password, $salt='Your Salt Key') {
 $key = hash('SHA256', $salt . $password, true);
 srand();
 $iv = mcrypt_create_iv(mcrypt_get_iv_size(MCRYPT_RIJNDAEL_128, MCRYPT_MODE_CBC), MCRYPT_RAND);
 if (strlen($iv_base64 = rtrim(base64_encode($iv), '=')) != 22) return false;
 $encrypted = base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_128, $key, $decrypted . md5($decrypted), MCRYPT_MODE_CBC, $iv));
 return $iv_base64 . $encrypted;
 }

function decrypt($encrypted, $password, $salt='Your Salt Key') {
 $key = hash('SHA256', $salt . $password, true);
 $iv = base64_decode(substr($encrypted, 0, 22) . '==');
 $encrypted = substr($encrypted, 22);
 $decrypted = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_128, $key, base64_decode($encrypted), MCRYPT_MODE_CBC, $iv), "\0\4");
 $hash = substr($decrypted, -32);
 $decrypted = substr($decrypted, 0, -32);
 if (md5($decrypted) != $hash) return false;
 return $decrypted;
 }

echo encrypt('7645985623564879');echo "<br />";
echo decrypt('2PVPlNvDCD/bVAHt/AdtCAIkvnQVYfjPaMX+tIsrXky3IaNrg0yQf4GF8S66TYHDsMPSQJFdrjYsJQlGrylkVV');
?>

What is SSL and what are Certificates?

The Secure Socket Layer protocol was created by Netscape to ensure secure transactions between web servers and browsers. The protocol uses a third party, a Certificate Authority (CA), to identify one end or both end of the transactions. This is in short how it works.

1. A browser requests a secure page (usually https://).
2. The web server sends its public key with its certificate.
3. The browser checks that the certificate was issued by a trusted party (usually a trusted root CA), that the certificate is still valid and that the certificate is related to the site contacted.
4. The browser then uses the public key, to encrypt a random symmetric encryption key and sends it to the server with the encrypted URL required as well as other encrypted http data.
5. The web server decrypts the symmetric encryption key using its private key and uses the symmetric key to decrypt the URL and http data.
6. The web server sends back the requested html document and http data encrypted with the symmetric key.
7. The browser decrypts the http data and html document using the symmetric key and displays the information.

Several concepts have to be understood here.

Private Key/Public Key:

The encryption using a private key/public key pair ensures that the data can be encrypted by one key but can only be decrypted by the other key pair. This is sometime hard to understand, but believe me it works. The keys are similar in nature and can be used alternatively: what one key encrypts, the other key pair can decrypt. The key pair is based on prime numbers and their length in terms of bits ensures the difficulty of being able to decrypt the message without the key pairs. The trick in a key pair is to keep one key secret (the private key) and to distribute the other key (the public key) to everybody. Anybody can send you an encrypted message, that only you will be able to decrypt. You are the only one to have the other key pair, right? In the opposite , you can certify that a message is only coming from you, because you have encrypted it with you private key, and only the associated public key will decrypt it correctly. Beware, in this case the message is not secured you have only signed it. Everybody has the public key, remember!
One of the problem left is to know the public key of your correspondent. Usually you will ask him to send you a non confidential signed message that will contains his publick key as well as a certificate.

Message-->[Public Key]-->Encrypted Message-->[Private Key]-->Message

The Certificate:

How do you know that you are dealing with the right person or rather the right web site. Well, someone has taken great length (if they are serious) to ensure that the web site owners are who they claim to be. This someone, you have to implicitly trust: you have his/her certificate loaded in your browser (a root Certificate). A certificate, contains information about the owner of the certificate, like e-mail address, owner's name, certificate usage, duration of validity, resource location or Distinguished Name (DN) which includes the Common Name (CN) (web site address or e-mail address depending of the usage) and the certificate ID of the person who certifies (signs) this information. It contains also the public key and finally a hash to ensure that the certificate has not been tampered with. As you made the choice to trust the person who signs this certificate, therefore you also trust this certificate. This is a certificate trust tree or certificate path. Usually your browser or application has already loaded the root certificate of well known Certification Authorities (CA) or root CA Certificates. The CA maintains a list of all signed certificates as well as a list of revoked certificates. A certificate is insecure until it is signed, as only a signed certificate cannot be modified. You can sign a certificate using itself, it is called a self signed certificate. All root CA certificates are self signed.

Certificate: Data: Version: 3 (0x2) Serial Number: 1 (0x1) Signature Algorithm: md5WithRSAEncryption Issuer: C=FJ, ST=Fiji, L=Suva, O=SOPAC, OU=ICT, CN=SOPAC Root CA/Email=administrator@sopac.org Validity Not Before: Nov 20 05:47:44 2001 GMT Not After : Nov 20 05:47:44 2002 GMT Subject: C=FJ, ST=Fiji, L=Suva, O=SOPAC, OU=ICT, CN=www.sopac.org/Email=administrator@sopac.org Subject Public Key Info: Public Key Algorithm: rsaEncryption RSA Public Key: (1024 bit) Modulus (1024 bit): 00:ba:54:2c:ab:88:74:aa:6b:35:a5:a9:c1:d0:5a: 9b:fb:6b:b5:71:bc:ef:d3:ab:15:cc:5b:75:73:36: b8:01:d1:59:3f:c1:88:c0:33:91:04:f1:bf:1a:b4: 7a:c8:39:c2:89:1f:87:0f:91:19:81:09:46:0c:86: 08:d8:75:c4:6f:5a:98:4a:f9:f8:f7:38:24:fc:bd: 94:24:37:ab:f1:1c:d8:91:ee:fb:1b:9f:88:ba:25: da:f6:21:7f:04:32:35:17:3d:36:1c:fb:b7:32:9e: 42:af:77:b6:25:1c:59:69:af:be:00:a1:f8:b0:1a: 6c:14:e2:ae:62:e7:6b:30:e9 Exponent: 65537 (0x10001) X509v3 extensions: X509v3 Basic Constraints: CA:FALSE Netscape Comment: OpenSSL Generated Certificate X509v3 Subject Key Identifier: FE:04:46:ED:A0:15:BE:C1:4B:59:03:F8:2D:0D:ED:2A:E0:ED:F9:2F X509v3 Authority Key Identifier: keyid:E6:12:7C:3D:A1:02:E5:BA:1F:DA:9E:37:BE:E3:45:3E:9B:AE:E5:A6 DirName:/C=FJ/ST=Fiji/L=Suva/O=SOPAC/OU=ICT/CN=SOPAC Root CA/Email=administrator@sopac.org serial:00 Signature Algorithm: md5WithRSAEncryption 34:8d:fb:65:0b:85:5b:e2:44:09:f0:55:31:3b:29:2b:f4:fd: aa:5f:db:b8:11:1a:c6:ab:33:67:59:c1:04:de:34:df:08:57: 2e:c6:60:dc:f7:d4:e2:f1:73:97:57:23:50:02:63:fc:78:96: 34:b3:ca:c4:1b:c5:4c:c8:16:69:bb:9c:4a:7e:00:19:48:62: e2:51:ab:3a:fa:fd:88:cd:e0:9d:ef:67:50:da:fe:4b:13:c5: 0c:8c:fc:ad:6e:b5:ee:40:e3:fd:34:10:9f:ad:34:bd:db:06: ed:09:3d:f2:a6:81:22:63:16:dc:ae:33:0c:70:fd:0a:6c:af: bc:5a -----BEGIN CERTIFICATE----- MIIDoTCCAwqgAwIBAgIBATANBgkqhkiG9w0BAQQFADCBiTELMAkGA1UEBhMCRkox DTALBgNVBAgTBEZpamkxDTALBgNVBAcTBFN1dmExDjAMBgNVBAoTBVNPUEFDMQww CgYDVQQLEwNJQ1QxFjAUBgNVBAMTDVNPUEFDIFJvb3QgQ0ExJjAkBgkqhkiG9w0B CQEWF2FkbWluaXN0cmF0b3JAc29wYWMub3JnMB4XDTAxMTEyMDA1NDc0NFoXDTAy MTEyMDA1NDc0NFowgYkxCzAJBgNVBAYTAkZKMQ0wCwYDVQQIEwRGaWppMQ0wCwYD VQQHEwRTdXZhMQ4wDAYDVQQKEwVTT1BBQzEMMAoGA1UECxMDSUNUMRYwFAYDVQQD Ew13d3cuc29wYWMub3JnMSYwJAYJKoZIhvcNAQkBFhdhZG1pbmlzdHJhdG9yQHNv cGFjLm9yZzCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEAulQsq4h0qms1panB 0Fqb+2u1cbzv06sVzFt1cza4AdFZP8GIwDORBPG/GrR6yDnCiR+HD5EZgQlGDIYI 2HXEb1qYSvn49zgk/L2UJDer8RzYke77G5+IuiXa9iF/BDI1Fz02HPu3Mp5Cr3e2 JRxZaa++AKH4sBpsFOKuYudrMOkCAwEAAaOCARUwggERMAkGA1UdEwQCMAAwLAYJ YIZIAYb4QgENBB8WHU9wZW5TU0wgR2VuZXJhdGVkIENlcnRpZmljYXRlMB0GA1Ud DgQWBBT+BEbtoBW+wUtZA/gtDe0q4O35LzCBtgYDVR0jBIGuMIGrgBTmEnw9oQLl uh/anje+40U+m67lpqGBj6SBjDCBiTELMAkGA1UEBhMCRkoxDTALBgNVBAgTBEZp amkxDTALBgNVBAcTBFN1dmExDjAMBgNVBAoTBVNPUEFDMQwwCgYDVQQLEwNJQ1Qx FjAUBgNVBAMTDVNPUEFDIFJvb3QgQ0ExJjAkBgkqhkiG9w0BCQEWF2FkbWluaXN0 cmF0b3JAc29wYWMub3JnggEAMA0GCSqGSIb3DQEBBAUAA4GBADSN+2ULhVviRAnw VTE7KSv0/apf27gRGsarM2dZwQTeNN8IVy7GYNz31OLxc5dXI1ACY/x4ljSzysQb xUzIFmm7nEp+ABlIYuJRqzr6/YjN4J3vZ1Da/ksTxQyM/K1ute5A4/00EJ+tNL3b Bu0JPfKmgSJjFtyuMwxw/Qpsr7xa -----END CERTIFICATE-----

As You may have noticed, the certificate contains the reference to the issuer, the public key of the owner of this certificate, the dates of validity of this certificate and the signature of the certificate to ensure this certificate hasen't been tampered with. The certificate does not contain the private key as it should never be transmitted in any form whatsoever. This certificate has all the elements to send an encrypted message to the owner (using the public key) or to verify a message signed by the author of this certificate.

The Symmetric key:

Well, Private Key/Public Key encryption algorithms are great, but they are not usually practical. It is asymmetric because you need the other key pair to decrypt. You can't use the same key to encrypt and decrypt. An algorithm using the same key to decrypt and encrypt is deemed to have a symmetric key. A symmetric algorithm is much faster in doing its job than an asymmetric algorithm. But a symmetric key is potentially highly insecure. If the enemy gets hold of the key then you have no more secret information. You must therefore transmit the key to the other party without the enemy getting its hands on it. As you know, nothing is secure on the Internet. The solution is to encapsulate the symmetric key inside a message encrypted with an asymmetric algorithm. You have never transmitted your private key to anybody, then the message encrypted with the public key is secure (relatively secure, nothing is certain except death and taxes). The symmetric key is also chosen randomly, so that if the symmetric secret key is discovered then the next transaction will be totally different.

Symetric Key-->[Public Key]-->Encrypted Symetric Key-->[Private Key]-->Symetric Key

Encryption algorithm:

There are several encryption algorithms available, using symmetric or asymmetric methods, with keys of various lengths. Usually, algorithms cannot be patented, if Henri Poincare had patented his algorithms, then he would have been able to sue Albert Einstein... So algorithms cannot be patented except mainly in USA. OpenSSL is developed in a country where algorithms cannot be patented and where encryption technology is not reserved to state agencies like military and secret services. During the negotiation between browser and web server, the applications will indicate to each other a list of algorithms that can be understood ranked by order of preference. The common preferred algorithm is then chosen. OpenSSL can be compiled with or without certain algorithms, so that it can be used in many countries where restrictions apply.

The Hash:

A hash is a number given by a hash function from a message. This is a one way function, it means that it is impossible to get the original message knowing the hash. However the hash will drastically change even for the slightest modification in the message. It is therefore extremely difficult to modify a message while keeping its original hash. It is also called a message digest. Hash functions are used in password mechanisms, in certifying that applications are original (MD5 sum), and in general in ensuring that any message has not been tampered with. It seems that the Internet Enginering Task Force (IETF) prefers SHA1 over MD5 for a number of technical reasons (Cf RFC2459 7.1.2 and 7.1.3).

Signing:

Signing a message, means authentifying that you have yourself assured the authenticity of the message (most of the time it means you are the author, but not neccesarily). The message can be a text message, or someone else's certificate. To sign a message, you create its hash, and then encrypt the hash with your private key, you then add the encrypted hash and your signed certificate with the message. The recipient will recreate the message hash, decrypts the encrypted hash using your well known public key stored in your signed certificate, check that both hash are equals and finally check the certificate.
The other advantage of signing your messages is that you transmit your public key and certificate automatically to all your recipients.
There are usually 2 ways to sign, encapsulating the text message inside the signature (with delimiters), or encoding the message altogether with the signature. This later form is a very simple encryption form as any software can decrypt it if it can read the embedded public key. The advantage of the first form is that the message is human readable allowing any non complaint client to pass the message as is for the user to read, while the second form does not even allow to read part of the message if it has been tampered with.

PassPhrase:

“A passprase is like a password except it is longer”. In the early days passwords on Unix system were limited to 8 characters, so the term passphrase for longer passwords. Longer is the password harder it is to guess. Nowadays Unix systems use MD5 hashes which have no limitation in length of the password.

Public Key Infrastructure

The Public Key Infrastructure (PKI) is the software management system and database system that allows to sign certifcate, keep a list of revoked certificates, distribute public key,... You can usually access it via a website and/or ldap server. There will be also some people checking that you are who you are... For securing individual applications, you can use any well known commercial PKI as their root CA certificate is most likely to be inside your browser/application. The problem is for securing e-mail, either you get a generic type certificate for your e-mail or you must pay about USD100 a year per certificate/e-mail address. There is also no way to find someone's public key if you have never received a prior e-mail with his certificate (including his public key).

Hearty Thanks to : http://www.tldp.org

Ten ways to become a better Developer

Placeholders on IE

Many developers face problem with HTML5 attribute "placehoder" on IE. HTML5 Placehoders are not visible on the Internet explorer. Get the placeholder attribute working on IE by just adding the below script.

Add the below code to your common or custom javascript page

jQuery(function() {
if(!jQuery.support.placeholder) { 
var active = document.activeElement;
jQuery(':text').focus(function () {
if (jQuery(this).attr('placeholder') != '' && jQuery(this).val() == jQuery(this).attr('placeholder')) {
jQuery(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if (jQuery(this).attr('placeholder') != '' && (jQuery(this).val() == '' || jQuery(this).val() == jQuery(this).attr('placeholder'))) {
jQuery(this).val(jQuery(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
jQuery(':text').blur();
jQuery(active).focus();
jQuery('form').submit(function () {
jQuery(this).find('.hasPlaceholder').each(function() { jQuery(this).val(''); });
});
}

});

That's it !

Enjoy !!!

Menu on Drop down for Responsive

How to get the menus inside the drop down for Responsive?

Here is the script for you. Jquery makes our work very simple and more efficient. The steps below will automatically create a drop down of menus instead of creating drop down manually to mange the menus simply. Thanks Jquery !!!

Step 1 : Add the Jquery latest min.js in the header

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Step 2 : Add the below code in your Main CSS page to hide the navigation on load by default.

nav select { display: none; } 

Step 3 : Add the below code in your Media CSS page

@media only screen and (max-width: 1000px){
nav ul { display: none; }
nav select { display: inline-block; margin-bottom: 30px; width: 98%; }
}
@media only screen and (max-width: 750px){
nav ul { display: none; }
nav select { display: inline-block; margin-bottom: 30px; width: 98%; }
}

Step 4 : Add the below code in your Common .js page or custom js page

jQuery(document).ready(function(){
jQuery('<select />').appendTo('#mobile-menu');
jQuery('<option />', {
'selected': 'selected',
'value'   : '',
'text'    : 'Go to...'
}).appendTo('#mobile-menu select');
jQuery('nav a').each(function() {
var el = jQuery(this);
if(el.parents('.subNav').length) {
jQuery('<option />', {
'value': el.attr('href'),
'text':  '— ' + el.text()
}).appendTo('nav select');
} else {
jQuery('<option />', {
'value': el.attr('href'),
'text': el.text()
}).appendTo('nav select');
}
});
jQuery('#mobile-menu select').change(function() {
window.location = jQuery(this).find('option:selected').val();
});

});

Step 5 : Add the below code inside your <body> tag. The drop down will create automatically inside the #mobile-menu identification.

<nav id="mobile-menu" role="navigation"></nav>
<nav class="topNav">
<ul>
    <li class="first"><a href="index.html" class="active">Home</a></li>
     <li>
      <a href="product.html">Product</a>
      <ul class="subNav">
        <li><a href="#">FaQs</a></li>
        <li><a href="#">Customer Testimonials</a></li>
      </ul>  
    </li>
    <li><a href="#">Pricing</a></li>
    <li class="last"><a href="#">Company</a></li>
</ul>          

</nav>

Last step : Save as .html page and run in the browser and set the browser as responsive.

Enjoy !!!

How to make your design as "Responsive Design"

1. Adding Meta tags:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">


2.Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE. 

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

3. Write compatible CSS code for the below ( may be in seperate file called media.css or responsive.css)

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Your Styles */
}

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Your Styles */
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Your Styles */
}

/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Your Styles */
}

/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Your Styles */
}

/* Large screens */
@media only screen and (min-width : 1824px) {
/* Your Styles */
}

Will update more soon.......

Problem with "WWW."

Sometimes your website does not RUN if you add "www" in front of your domain name with especially hosted with Godaddy.

The solution is here.
1. Open your hosting control panel
2. Find and Go to "Domain Manger"
3. Please check your "A record" '@' is pointed to your site IP or domain.
4. Please add a "C Name" record for "www" which points to "@"
5. It will take minimum 24-48 hours to get update.

How to Compress CSS and Javascript files

1.Create minify.php, paste this below code and save.

<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {

  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
  /* remove tabs, spaces, newlines, etc. */
  $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
  return $buffer;
}
/* your css files : add one by one */
include("stylesheet.css");
include("common.js");
ob_end_flush();
?>

2. In index.php or header file inclusions call the minify.php like below


<!doctype html>
<html>
<head>
<link rel="stylesheet" href="minify.php" type="text/css" media="all" />
</head>
<body>
<div>Hello</div>
</body>
</html>

Optimization - PHP, Mysql, Session

Optimize your PHP to Improve Performance

1. Use echo rather than print
2. Reduce variable declaration
3. Don't copy variables for no reason

4. register_globals should be disabled

5. Make sure all inputs are escaped
6. Avoid doing SQL queries within a loop
7. use regular expressions only where it is mandatory

8. Avoid using PHP function inside for()
9. Error Handling
10. Increase the memory size //@ini_set("memory_limit","16M");
11. Use MVC Architecture
12. Use Template System (smarty)
13. Use Caching [ob_start(), ob_get_clean()]
14. Use Output buffering

15. HTML optimize using ob_gzhander
16. Enable compression in php ini
                zlib.output_compression = On
                zlib.output_compression_level = (level) (where level is 1-9)

---

Session Optimizations

   • Don't use session.auto_start.

   • Do not enable session.use_trans_sid

   • Whenever possible set session.cache_limiter to private_no_expire

   • Assign each user (vhost) its own session’s directory.

   • For large sites consider using session.save_path = "N;/path"

   • If possible avoid automatic garbage collection.

---

Query Optimization:

              Don’t use “SELECT *”

              Better to use Joins rather than sub-queries
             Unoptimized joins can be VERY slow
             Use LIMIT
             use index meaningful
             confirm you escaped the string correctly

             Use EXPLAIN to find query fast

            Avoid queries in loop

PHP Securities

Security

1.Register Globals should be Off

2. Error Reporting & Exceptions

  a. display_errors to Off
b. log_errors to On
c. ini_set('error_reporting', E_ALL | E_STRICT);
d. ini_set('display_errors', 'Off');
e. ini_set('log_errors', 'On');
f. ini_set('error_log', '/usr/local/apache/logs/error_log');

3. Filter Input Data – validate the data

a. htmlentities( ) for escaping data to be sent to the client.
b. mysql_real_escape_string()

4. Escape Output

5. URL Attacks - Use POST method for dangerous action in form, use GET method if necessary

6. File upload attacks - is_uploaded_file( ) & move_uploaded_file( ).

7. Cross-Site Scripting(XSS) – use htmlentities( )

8. Protect database connection & .inc file access(db.inc) – Permission to confidential pages.

<Files ~ "\.inc$">
Order allow,deny
Deny from all
</Files>

9. SQL injection - mysql_real_escape_string( )

10. session_set_save_handler('_open', '_close', '_read', '_write', '_destroy', '_clean' ) is the best way to prevent session hijacking

11. Remote file inclusion(RFI).

12. Store passwords in an encrypted format in database or files.

13. Avoid taking confidential value in cookies

INI FILE SECURITIES

a. register_globals - should be Off
b. allow_url_fopen – should be Off
c. disable_functions - should be Off
d. display_errors - should be Off in only production server
e. error_reporting – set to E_ALL
f. enabling log_errors
g. memory_limit – 8M in most cases

HTML To XHTML conversion steps

HTML To XHTML conversion steps

To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules of the previous chapters. The following steps were executed (in the order listed below):

---

A DOCTYPE Definition Was Added

The following DOCTYPE declaration was added as the first line of every page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little too "strict", and a little too hard to conform to.

---

A Note About The DOCTYPE

Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML.

Be aware however, that newer browsers (like Internet Explorer 6) might treat your document differently depending on the <!DOCTYPE> declaration. If the browser reads a document with a DOCTYPE, it might treat the document as "correct". Malformed XHTML might fall over and display differently than without a DOCTYPE.

---

Lower Case Tag And Attribute Names

Since XHTML is case sensitive, and since XHTML only accepts lower case HTML tags and attribute names, a general search and replace function was executed to replace all upper case tags with lowercase tags. The same was done for attribute names. We have always tried to use lower case names in our Web, so the replace function did not produce many real substitutions.

---

All Attributes Were Quoted

Since the W3C XHTML 1.0 Recommendation states that all attribute values must be quoted, every page in the web was checked to see that attributes values were properly quoted. This was a time-consuming job, and we will surely never again forget to put quotes around our attribute values.

---

Empty Tags: <hr> , <br> and <img>

Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />.

This produced a problem with Netscape that misinterpreted the <br/> tag. We don't know why, but changing it to <br /> worked fine. After that discovery, a general search and replace function was executed to swap the tags.

A few other tags (like the <img> tag) were suffering from the same problem as above. We decided not to close the <img> tags with </img>, but with  /> at the end of the tag. This was done manually.

New tags added in HTML5

New tags introduced in HTML 5

section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure. 
article represents an independent piece of content of a document, such as a blog entry or newspaper article. 
aside represents a piece of content that is only slightly related to the rest of the page.
hgroup represents the header of a section. 
header represents a group of introductory or navigational aids. 
footer represents a footer for a section and can contain information about the author, copyright information, et cetera. 
nav represents a section of the document intended for navigation. 
figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.
<figure>
<video src="ogg"></video>
<figcaption>Example</figcaption>
</figure>
figcaption can be used as caption (it is optional).
video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. 
source elements are used together with these elements if there are multiple streams available of different types. 
embed is used for plugin content. 
mark represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. 
progress represents a completion of a task, such as downloading or when performing a series of expensive operations. 
meter represents a measurement, such as disk usage. 
time represents a date and/or time. 
bdi represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. 
wbr represents a line break opportunity. 
canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games. 
command represents a command the user can invoke. 
details represents additional information or controls which the user can obtain on demand. The 
summary element provides its summary, legend, or caption. 
datalist together with the a new list attribute for input can be used to make combo boxes

New input elements’ type

tel , search , url , email , datetime , date , month , week , time , datetime-local , number , range , color

Below represents the HTML5 Block level and Inline Elements

HTML5 block level elements

article*,header*,aside*,hgroup*,blockquote,hr,body,li,br,map,button,Button,object,canvas*,ol,caption,
output*,col,p,colgroup,pre,dd,progress*,div,section*,dl,table,dt,tbody,embed,textarea,
fieldset,tfoot,figcaption*,th,figure*,thead,footer*,tr,form,ul,h1–h6,video*

HTML5 Inline elements
a,label,abbr,legend,address,link,area,mark*,audio*,meter*,bm,nav*,cite,optgroup,code,option,del,q,details*,
small,dfn,select,command*,source*,datalist*,span,em,strong,font,sub,i,summary*,
iframe,sup,img,tbody,input,td,ins,time*,kbd,var

Do you know the difference?

This tutorial will let you know the difference of HTML, XHML and DHTML , also HTML4 and HTML5

HTML	XHTML	DHTML
HTML (Hypertext Markup Language) is the primary technology used in the development of simple web sites.	XHTML (Extensible Hypertext Markup Language) is almost identical HTML with the exception of a stricter set of syntactic rules based on the XML standard.	technologies used to move beyond the static presentation of information to create more interactive web pages
HTML you can use an opening tag in many instances without a matching closing tag	- XHTML each opening tag must have a matching closing tag. -Attributes must be in lowercase as XML. -Special characters between tags need to be replaced with its code equivalent.	DHTML means a combination of XHTML , CSS and JavaScript, DOM

HTML4	HTML5
DOCTYPE is much longer as <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">	DOCTYPE is required to enable standards mode for HTML documents. <!DOCTYPE html>
Audio and Video are not part of HTML4 specification	Audio and Videos are integral part of HTML5 specifications e.g. <audio> and <video> tags
Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc.	Vector graphics is integral part of HTML5 e.g. SVG and canvas
Browser cache can be used as temporary storage.	Application Cache and Web storage is available as client side storage. Accessible using JavaScript interface in HTML5 compliant browsers.
Works with all old browsers	Most of modern browser have started supporting HTML5 specification e.g. Firefox, Mozilla, Opera, Chrome, Safari  etc.
Does not allow JavaScript to run in browser	Allows JavaScript to run in background.
Frames are allowed	No more frames
	article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, ruby, section, source, summary, time and video.
Type specification for css & scripts is must.	No More Types for Scripts and Links
	Make your Content Editable Email Inputs
	Placeholders has been introduced
	Header and Footer tags
	Required Attribute
	Autofocus Attribute
	Regular Expressions

CSS Optimization Rules

The rules should follow to increase the performance in CSS

1. Decide whether you are using HTML4 or HTML5. Determine the DOCTYPE and CSS3 (border-radius) according to that. Dont use CSS3 in HTML4. CSS3 is especially developed for HTML5.
2. Try to write the all class property in single line instead indent code.
3. Use always lower case for both HTML and CSS
4. Use shorthand properties-each rule on a single line.
5. Use h1 to h6 for site SEO.
6. Change 0px to just ‘0’.
7. Change color code "#000000" to "#000".
8. Change font-weight from “normal" to "400".
9. Change font-weight from “bold" to "700".
10. Use CSS Sprits.
11. Use single CSS file, if more than one, combine all CSS file into single file.
12. Avoid writing inline / internal CSS.
13. Use Link instead of @import the CSS file.
14. Group the similar styles with comma separator.
15. Minimize the number of iframes.
16. Use PNG image.
17. Dont use Hack in the code, instead write separate CSS for IE.
18. Margin / Padding change from "38px 52px 59px 52px" to "38px 52px 59px".
19. Margin / Padding change from "0px 0px 0px 0px !important" to "0 !important".
20. Background (set url, color, repeat and all property in single line).
21. Font (set font family, size/line height and all property in single line).
22. Remove empty selectors.
23. Avoid using duplicates.
24. Remove unnecessary white spacing.
25. Use margin/padding instead of m/ p right, m/p left separately.
26. Font, background, margin, padding, border properties should be merged.
27. Last semicolon should be removed in every block.
28. Don’t need those extra zeros in opacity (0.5), margin (10.0em) , padding(5.3em).
29. Remove comments from production file.
30. Validate your CSS file.
31. Follow the plug-in such as Yslow, Google page speed for more optimization.
32. Always write re-usable styles in separate class, dont refer to any parent element. Eg(.button{color:#aeaeae}, dont specify .leftPan button{color:#aeaeae}

How to set Preview DNS on godaddy?

To Enable Preview DNS or Preview Your Site

1. Log in to your Account Manager.
2. Click Web Hosting.
3. Next to the hosting account you want to use, click Launch.
4. In the Server Details section, click Show details
5. Click Preview to display your primary domain's DNS information.
6. If Preview DNS is not already enabled for your account, click Enable. If it has expired, click Renew.
7. If Preview DNS is enabled, click Preview.

NOTE: Preview DNS expires after 14 days but may be reactivated at any time by repeating these steps.