Creating a slide show of all your images on your website is a difficult task because it needs a lot of experience and tools like best Jquery sliders. You can also find the best Jquery sliders on the World Wide Web and take help from there. Basically all the Jquery sliders have java codes to perform a particular task. One image can be made into multiple foundations in a gallery design with the help of these codes. The codes are written very carefully and the tasks are performed individually prior to making the code visible to the people. Transition of any image in a slide show is very important. Transitions are not easy because it needs a lot of java codes. The best Jquery sliders can help you create your own and unique transition of images.

Dimensions, Size, area, image type all these things should be taken care of while using Jquery sliders. There are many websites which put captions for their images. Putting caption to any image box is a difficult task but with the help few java scripts you can do it. You can as well add graphical effects with one of the best Jquery sliders. These sliders work in a form of coding. These sliders help in providing a slide show to the image gallery. There are several types of best & beauty jQuery sliders available in the market. In this piece of writing when you go further down we will talk about different jQuery sliders which help in creating image gallery and many other fields.

1. Avia Jquery slider
Avia Jquery slider is a unique slider which is also used to give unique effects with transition of images. The main features which make this slider unique from other sliders is that it consists of image preloader and also auto play option which works according to the user interaction. It also consists of HTML 5 which is valid and CSS 3 markup. This slider is very light in weight and has a weight about 8kb.
http://aviathemes.com/aviaslider/

2. SlideDeck JQuery slider
For the sake of good ranking of your website through search engine optimization you need to have a good grip of all the java based sliders so that you can use them in the modification of the website. Slide deck sliders can do this job for your website. They help you boost your ranking among all the top search engines. No content is indexed automatically unless it has a proper safe code. Slide deck sliders index the content directly and give it an animation effect.
http://www.slidedeck.com/

3. Nivo JQuery slider
For any slider the number of transitions is less and less affects are created by them. In this type of slider you have almost 9 transition effects. With the help of this slider you can transit any image or content of your website and give them unique effects. Any other slider would only transit your element but this slider does a lot more things like effecting it or animation. These sliders are tested on many internet servers like Google chrome, Mozilla, internet explorer and many more.
http://nivo.dev7studios.com/

4. Fancy Moves sliders
To move any content on your website is difficult unless and until you have the idea of graphics. The most important thing in these sliders is the queries which are used to move the content. In this slider you can show up all things you want to through the sliding of the content. The main services and products are also kept in mind and projected through motion.
http://webdesignandsuch.com/

5. JCover Flip slider
Generally the customization of any content is slow and requires many processes for the outcome. This slider helps you customize your features at a faster rate and sets them in one direction. Not all the sliders have the option of automated update but this slider automatically updates the feature and sets them in time.
http://www.elated.com/res/File/articles/development/javascript/jquery/cover-flow-remade-with-css-and-jquery/cover-flow/

6. Jquery Fancy Transition slider
All the images on your website may be constant or it may have fixed position. If you have to make them look differently then you can use slideshows to execute them, these sliders are especially for the use of slideshows of the images o a website. Before executing any slider its tested and the results are taken separately.

Any java script professional can help you create java codes which can be used as queries which will give outstanding effects. Make sure that the sliders which you are using should have a simple configuration which any naïve user can understand. All the sliders should be XML driven so that it has a particular coding language which everyone can understand. There are different layouts for every image and every image has a texture which makes it different from other images. You should use the sliders for appropriate layout so that all the images with same layout can be resized. Resizing any image might be easy but when you make use of sliders you should be very careful because they might affect your slideshow. You can take the help of a professional for using slideshow for your website. Nowadays most of the website owners have taken help from web designers who are expert at java codes and queries. The most important thing that you should keep in mind is that it should support all the languages and not only English. There are many sliders which you can be downloaded from the World Wide Web which come along with a tutorial on how to make use of them.
http://workshop.rs/projects/jqfancytransitions/

7. Image Slider
Let us talk about the best Jquery sliders which help in providing you a good image slideshow. The first type of sliders among all the sliders is image slider. This type is generally used to create unique effects to an image and create a good slideshow of the image gallery. Every JavaScript before using has to have a MIT license. This sliders is used under MIT license and it has features like auto slide, navigation box, lightweight, flexible configuration and also linking images.
http://www.sohtanaka.com/web-design/examples/image-slider/

8. Chop Sliders
There are many applications in which you make use of touch screen and slide the images. In this case they make use of chop sliders. Chop sliders can give your images unique and stunning effects. When you open any folder in any application the thumbs are very important for the transition of images. You need to have scrollable thumbs to transit any image. Chop sliders are also image sliders but they are used for scrolling the images and provide scrolling effects to the thumbs.
http://www.idangero.us/cs/

9. Rotating Image Slider
The next general category of sliders is a rotating image slider. These in fact can be the best Jquery image sliders because they can rotate a slideshow in any way. These contain of the Jquery codes which are written very carefully and made only for the use of images. Most of the applications have rotating image sliders and especially application with touch screen and all the iphones. Sliding of each element with the help of Jquery codes is possible in this type. They rotate very slightly.
http://tympanus.net/Tutorials/RotatingImageSlider/

If you wish that your web page looks good across various platforms always make sure that you make use of standard Web fonts across all the web browsers on various platforms. Web font standardization gives your web page an elegant look. You should also keep in mind that you restrict the focus on the web font you use depending upon the target system because the web font will be displayed correctly only if it is installed on the target system & if it is not installed then your selected web font will replace the default font. This problem can be more often found in the Windows designers system as they have several types of fonts installed on their system. Few of the websites mainly the Halloween websites which make use of some weird gothic web fonts provide a solution to this problem by allowing the users to download & install the web fonts which they use to display on their web pages.

The main drawback of this solution is that to install the web fonts specific to a website, the users have to install some added plug-ins so that they can view the website & its content. When the users are required to install some new special plug-ins for navigating to the website they would prefer leaving the website as fast as possible. A general solution has been provided to this problem by Microsoft. Microsoft has crafted few series of web fonts which are usually by default installed on any computer system that has the web browser Internet Explorer installed on it. This goes well with both Mac & Windows operating systems. The most commonly used web fonts consist of “Times New Roman”, “Bookman Old Style”, “Verdana”, “Comic Sans MS”, ”Arial” & many more.

One more important thing which you need to remember when specifying web fonts using the font face attribute of HTML is that you should always make use of 2 web fonts one is the primary & the other is secondary font. The major advantage of using both primary & secondary fonts in the font face attribute is that it will provide the target system with an alternative font in case the primary font is not installed on the system.

For example, consider the below font face tag styled with both the primary & secondary web fonts: <font face=”Verdana”,”Times New Roman”>

The above listed tag stated that make use of the Times New Roman web font in case if Verdana font is not installed on the target system. This will make sure that all your web pages appear properly even if few of the right web fonts are not installed on the target system.
What if you would like to make use of various customized fonts on your webpage?
It is an extremely hard & complicated task to add customized web fonts to your web page. Most of the web designers make use of custom fonts & see that their website looks so pretty but once they upload it to the web server & see it from others system they find it appears to be horrible, this is because there are only few basic fonts which might have been installed on the other systems & the designers might have used some unusual fonts which are not present on the user’s PC.

Cufon

With the advent of technology, Cufon has made the usage of customized fonts much easier. Cufon is a simple JavaScript that will substitute all the default web fonts with the fonts that are mentioned in the JavaScript file & it consists of a theme so that all the visitors of the website can view them. Cufon has made the usage of customized fonts pretty simple. Cufon uses a combination of VML & Canvas to present you with various font styles. As every coin has 2 faces, Cufon also comes with few merits & demerits which are listed below:

Demerits:

• For converted elements you cannot apply the hover state.
• Cufon is JavaScript based & in case if your web browser does not support JavaScript or if it is disabled then the default web fonts will appear on the web page.
• The content on the web page cannot be selected with the use of Cufon & hence many visitors might not prefer to revisit your website.

Merits:

• Cufon is not based upon any server side language.
• Cufon is comparatively easy to use.
• It is extremely lightning fast..

In the earlier days web designers usually used to have very few choices of web fonts. They used to make use of the basic web fonts such as Arial, Verdana, Times New Roman & so on. This is for the reason that the web designers did not want to take any risk in the situations where the font is not installed on the users system & he is not able to read the content thereby making him leave the website with the intention of never visiting it again. So, it is always better to go with a safe bet when it comes to web fonts. This resulted in a major limitation on the various web fonts being used on any website especially with the older versions of the web browsers.

As an alternative many web designers started to embed videos, pictures & flash content instead of text on their web pages because by making use of various images & videos they could make use of any web font they wanted devoid of having to be concerned whether the font is installed on the target system or not. Even after so many alternatives, the limitation to the usage of various web fonts still existed. Now with the use of images & videos in place of text, the website couldn’t be recognized by majority of search engines thereby resulting in a poor search engine index ranking.

Google Fonts

Google has endowed all the web designers & owners with an amazing official innovation few days ago with the launch of Google Fonts. Usage of Google fonts is really easy to learn whether it be theoretically or practically. In order to make use of Google fonts you can merely select the web font you would like to use put in some CSS or HTML code to it & there you go with multiple fonts without having to worry whether the web font you used is installed on the user’s system or not.

Google Font API has endowed all its web designers with a simple to use custom web font solution with several stylish & tasteful fonts to choose from. Google fonts add charm to your web browser. Google fonts have made the usage of numerous web fonts easy because previously the web fonts driven by the fonts installed on your computer system but now with invention of Google fonts they are driven by the web browser from the mid of Google Fonts Database. This takes away all the restrictions & limitations that come your way to the usage of different web fonts. With the innovation of Google fonts you can make use of whichever font you like even if your taste is somewhat whacky or weird. The advance of Google font API has made the life of web designers much simple & easy as they can now make use of all fonts without having to be bothered about the font being installed on the visitor’s system.

Google Font API has overcome few of the drawbacks of Cufon such as dependency on JavaScript. Google font API does not depend upon JavaScript & hence the Google web fonts will be displayed as is on the web browser even if JavaScript is disabled. Text on the web page that makes use of Google fonts is selectable that overcomes a major drawback with Cufon in which the text is not selectable.

Though Google fonts have several advantages it does have a few drawbacks but still it is preferred option among various web designers because of its wide ranging advantages when compared to its drawbacks. To start with, font directory of Google Fonts API is somewhat limited. Nevertheless you can bind the Google Font API by means of Typekit by means of JavaScript & the Web Font loader to bring in additional font selections. Google fonts are not compatible with various mobile browsers for example iPod, iPad, Android, iPhone & so on.

Apart from Cufon, Typekit, Google fonts, SiFR and many other technologies, there is one more innovation of the CSS feature i.e. @font-face. Nevertheless, the @font-face Cascading Style Sheet method is among one of the easiest, powerful& most flexible contender in this fixture of Web fonts. It looks as if it is the modern rock star among the gang of web fonts because it is gaining complete attention & causing several websites to turn up with amazing offers on both free & premium web fonts in favor of it.

To conclude with one can say that the world of web typography has advanced with several leaps & bounds. Days have changed with the emerging technologies in the market. We have various alternatives such as innovation of the @Font-Face, Typekit, Cufon, and Google font API have paved the way for web designers.

Read more about web fonts and compare technologes.

For this reason you have to take care that your HTML email has an excellent appearance in various web based email services & web mail clients. It is a good practice to have email account on the most famous web mail services such as Yahoo, AOL, Gmail, Hotmail and so forth. Once you have email accounts created on these websites you can send a test copy of your HTML Email. If you come across any errors or face any problems which require your consideration, you can at all times solve them prior to sending the email message to the complete contact list.

Even if one likes it or not, HTML Email marketing campaigns form the heart of every booming email marketing curriculum. An email campaign will boost up the revenue of any organization by millions of dollars. Web mail marketing is a very economical & flourishing online marketing technique. Cheap in relation to posting out printed flyers to every recipient.HTML emails that are designed flawlessly present an enhanced exchange rate & individuals often tend to opt for HTML when compared to plain text email layout.
This piece of writing will be useful for all the designers & email marketers as it lists out the most important tips which are required for HTML Email development. If you follow the below mentioned tips you will be able to create a perfect email which will appear as your customers want it to be.

Design & development of HTML Email is completely a minefield task, no mistakes are permitted. There are some common guidelines mentioned below on which one can depend upon across all the web mail clients:

1. Design of the Email is one major feature that needs to be kept in mind. In order to see the total width of the email in the view ports in the preview form always ensure that the width of your email design doesn’t exceed six hundred pixels.
2. Email templates are a major concern during HTML Email development. If you do not have wide-ranging individual experience to draw on, it is more likely expected that you will want to begin with an email design template that has most of the basic fundamental rights. If you have enough time then you can search for some free templates & acquire inspiration to design your own the same way.
3. When designing HTML Email, always bear in mind that you provide absolute dimensions. It is a best practice to give all the measurements in PIXELS. If the pixel dimensions of the tables and images you specify are correct & exact it will be easier for the web browser to display the images at exact positions. One needs to be very cautious when specifying the dimensions because the Email Clients are not as magnanimous as the web browsers.
4. Make sure that the Email is readable enough and makes sense even if the images are turned off. In most of the Email clients, images will not be displayed by default which does not give a good impression of your company. Such email clients will require that you explicitly add the address to your contacts in order to display the images. Few things that you need to keep in mind if your email client does not display the images by default:
   • Make use of the anchor link so that it will help the users in navigating to significant subheadings in your mail.
   • Make use of the alt attribute with the image tag in you HTML code so that in case if the image is not available it will display some alternate text. The advantage of having the alternate text is that if your web mail client does not load the images in that case based upon the alternate text message the user will be able to decide whether he should load the image or not. Therefore, make sure that the text in your alt attribute notifies perfectly what the readers will see on the image if loaded.
   • Last remedy out here is to have a popular well-known link to your web version of the equivalent mail..
5. Most of the Email clients ignore majority of internal & external cascading style sheets. So to get the best out of it one should make use of Inline CSS along with tables.
6. Users are usually more interested in mesmerizing headlines and once they come across mesmerizing headlines they will always want to read more & more. When developing HTML Email template always make sure that the mesmerizing headlines are noticeable in the view port region whenever the mail loads into the browser. People generally don’t tent to scroll down the web page if the information is not attention grabbing.There are few email clients that have a very simple design that is effective & easy to read. For example let us consider the Thunderbird web-mail client though the images are turned off in the email, the headline of the mails attracts you to read through the complete content of the mail.
7. Always code your HTML Email manually instead of using various HTML editors for example Home Site, Microsoft FrontPage and so forth. It is suggested that you avoid using these editors because these editors will put in some additional HTML code to your message source hence resulting in different appearance with different web mail clients. Even if you have used an HTML editor tool make sure that you clean the HTML code.
   When copying the email text it is always suggested that you copy paste it from Notepad instead of Microsoft word so as to get rid of definite Microsoft Office tags.
8. Instead of uploading the images from your local disk try uploading them from the server. It is a good practice to upload the images on to your website & then provide link to them from your email. The advantages of uploading the images to the site & then linking are it will display the images correctly as soon as the reader opens the mail instead if you are uploading them from your local disk the images would be appearing as attachments instead of being displayed inside the mail message because most of the email clients do not support this.One more added advantage of having the images uploaded to your website is that this will reduce your email message size. There are chances that your email might be blocked by some servers due to huge size of the email message because they have few sensitive filters embedded within in them which filter out emails based upon the message size. Ensure that you message size does not exceed 100KB.If your email loads at a faster pace in that case the chances of users reading it are more.
9. If you would like to mail a video to your users educating them on how to make use of a plan or service or any other thing, upload the video on to your own site, capture a small picture (screenshot) of the video clip having a PLAY button on it. Now embed this screenshot in your HTML email & hyperlink it to the web page where you have upload the relevant video for the screenshot. When the receiver of the Email just clicks on the PLAY button in the email he will be redirected to the web page where the video has been uploaded & hence this will reduce the message size of your HTML Email thus making it faster to load.
10. It is always advised not to make use of any background colors or images in the HTML Email because most of the web mail clients do not display them.
11. If you are making use of <p> tag in your HTML Email try not to use the <p> tag instead make use of the <div> tag because in most of the email applications the <p> tag does not function as it is expected to. For example if you consider the Yahoo’s Email application, one or more paragraphs are usually combined when the <p> tag is used in the HTML code whereas if the <div>… </div><br /> tag is used it always works as expected.
12. Templates put in an immense deal of straightforwardness to the method of designing HTML email. Make use of the templates, HTML layouts are here to hang about so try to keep it as easy as feasible & do the analysis at the earliest & over and over again.

The tag of the Hypertext Markup Language allows you to make use of various video streams for example movie clips, ads, and so forth sin your web page so that the users who visit your website can listen to music & as well as watch the video clips.

As we know that the tags used in HTML will consist of one or more attributes. The web designers generally make use of attributes along with the tag so that they can provide the web browser with more specific information as to how a particular tag should behave or appear on the web page. Each & every tag of HTML can be associated with 3 different types of attributes namely Event Handler Content Attributes, Element Specific Attributes & Global Attributes.

tag of the HTML language uses various attributes that indicate how any particular video on the web page should appear. Few of the most commonly used attributes with the tag are Loop, Preload, AutoLoad and so forth. If any particular web browser displays the text which is enclosed between the start & end of video tag then it means that the web browser you are using does not support the tag and such text which is displayed is referred to as Fallback Content.

One can include text between the beginning & closing of the tag. The intention of having content enclosed between the tags is to make sure that the users of old web browsers which do not support tag can try their hand on various video plugins and as well help the users by providing information how they can access videos with their old browsers.
Above all, this content is not anticipated to address ease of access. The motto of most of the web designers is to help the deaf, dumb, blind people & all other people who have some kind of physical disability by providing them a substitute for these video streams or by incorporating various user-friendliness options for example imposing sign language, providing subtitle tracks for the videos or giving captions and so forth.

The below example demonstrates the usage of tag on an HTML page and as well gives an overview on what is Fallback Content:

If the video VideoTest.mp4 plays successfully that means that your web browser is compatible with the tag but if the result of opening this Web Page is the text enclosed between the paragraph tag i.e.then it means that your web browser does not support the tag.

Lets us have a look at the different types of attributes which can be used with the tag:

Element Specific Attributes:

• Loop: The Loop attribute when used along with the tag will play the video over & over again as soon as it finishes.
• Preload: This attribute indicates whether the video embedded within the webpage should be loaded along with the web page or not. There are 3 different vales this attribute can hold:
  • None: If the Preload attribute value is set to none then it denotes that the video should not be loaded when the webpage loads.
  • Auto: If the Preload attribute value is set to auto then it denotes that the complete video should be loaded when the webpage loads.
  • Metadata: If the Preload attribute value is set to metadata then it denotes that only the Meta data associated with the video should be loaded & not the complete video.
• Auto play: This attribute will play the video as soon the web page is loaded & the video has loaded & is ready to be played.

Event Handler Attributes:
As the name indicates that this attribute comes into action only when a particular event occurs. These attributes trigger a script which is embedded in the HTML page whenever an event takes place. Few of the most commonly used Event Handler Attributes along with the tag are:

• onClick: The script embedded within the HTML page will be triggered when the user clicks on an object.
• ondbClick: The script embedded within the HTML page will be triggered when the user clicks two times on the same object.
• onPause: The script embedded within the HTML page will be triggered when the user stops any media resource.
• onPlay: The script embedded within the HTML page will be triggered when the user starts playing media resource.

Global Attributes:
As the name indicates Global which means that these kinds of attributes are a standard for all the HTML 5 tags & not only the tag. The most commonly used Global Attributes are spell check, dir, access key, tab index, title, id and so forth. Let us discuss about few of the Global Attributes & their usage:

• Spellcheck: This attribute indicates if spelling & grammar check should be included for a particular element. The values which this attribute can hold are true, false or just an empty string.
• Dir: This attribute defines in which direction your text should be aligned. The possible values this attribute can take are rtl or ltr.
• Title: This attributes gives additional information about any particular element on the web page.
• Accesskey: This attribute will create the specified key as a shortcut for accessing the element.
• Contenteditable: This attribute indicates that the content is editable or not. When used with video tag it signifies if the video can be edited or not.

Learn more here: HTML5 Video
Example: HTML5 Video Demo

It’s coming and you want to know everything you can before its old news and your competition had already changed the way their web design is being done on their websites. This new design trend on the web is HTML5.

HTML 5 is the latest version which is being developed for the enhancing the features of the foundation language of the World Wide Web i.e. HTML. HTML 5 will let the designers of the web make use of new attributes, various new structural components which will substitute a few of the ordinary HTML components. This latest versions incorporates video & audio functionality for few of the elements. With the latest version you can very easily organize your web page. This version comes with many Application Programming Interfaces (API’s) that allow you to create mind-blowing web applications. One can make us of these API’s along with the new elements introduced by HTML 5 to make the Web applications more stylish.

The basic difference between XHTML1 &the latest version of HTML is that with the use of HTML 5, the code of the web page will shorten down & coding becomes comparatively easier for the web designer as there is no need to bind links through the block level elements or enclose self closing tags. HTML 5 makes the web pages of your website easier to build & stylish to appear. In the earlier days CSS3 was just an alternative but nowadays it has become a mandatory requirement because it serves as the strength of character for any HTML 5 compatible website to make sure it processed flawlessly whilst letting multimedia to squeeze in with the appearance & style of the website. This possibly will make life harder for part-time web designers; in particular for individuals who concentrate more on presentation of the site & the multimedia content on the website instead of coding, nevertheless it is an area of expertise which is worth learning.

At present all the web browsers have not incorporated the latest CSS3 variations nevertheless CSS3 variations are coming & it is always better to be ahead of the twist than wait. There are few web browsers which have already incorporated the latest design changes such as Google Chrome 2, Opera version 10, Safari 5, Mozilla Firefox version 3, and so forth.

Hypertext Markup Language is the foundation for almost all the websites on the World Wide Web from the time when websites first came into sight. HTML has changed with the addition of PHP & ASP that manage the process on the server side but however the version 4 of HTML has not been modified since quite some time. The development of the latest version of HTML i.e. HTML 5 has been slowed down because of the competition in the web browser market such as Internet Explorer, Mozilla Firefox, Safari & Google Chrome. On the other hand, version HTML 5 shows potential & guarantees to take away the requirement for lots of multimedia accompaniments which we presently make use of with today’s web browsers.

The most important enhancement in version 5 of HTML is the way in which it affects the Multimedia presentations on the World Wide Web. Most remarkably, the maladroit, overloaded, ‘Object’ tag is now substituted by definite, orientated tags, for example ‘audio’ & ‘video’. Though one might feel that these modifications are minor but howsoever these changes help the web developers in adding definite features for multimedia processing based upon the web browser.

The greater part of the advantages to HTML 5 is because of its graphical features. Whereas most of the present web browsers merely load a picture, HTML 5 is likely to take account of a built in dominant vector engine, which has the capability to producing animations & vector graphics & user friendly applications, without making use of various plugins that are basically vector image processors for example Silver light or Adobe Flash Player . By making use of the HTML tag ‘canvas’ via vector processing the web developers can design a web page which sections off games, images, charts, animations & interactive components without the need of added plug ins.

Google Chrome along with Google gears is the best example of HTML 5 compatible web browsers. Nevertheless HTML 5 compatible web browsers will not appear different from the regular web browsers, but, they offer local offline application usage along with local DB storage to make sure that application processing & browsing becomes much faster.

The latest version of HTML 5 incorporates lot many added features to Multimedia of which the best & most preferred feature is geo location. Not much information is known as to how the geo location functionality is implemented but this feature will automatically tag your images & videos on Face book, Twitter, YouTube, and so forth. HTML 5 will provide gigantic functionality to Geo-dependant apps, which people possibly will use to track the progress. This has on the other hand heaved up several privacy issues of which some issues are well known.

The supremacy of HTML 5 in the era of multimedia is merely being appreciated. The major feature is the capability to incorporate web based apps with improved user-friendliness & effectiveness. This feature not merely ensures that user is able to see what he wants but also ensures that the users are able to interact with the apps on an extraordinary scale. There is lot more to come with HTML 5 as few features are still under development.

1. Hypertext Markup language is the simplest web based languages known till date for creating web pages.
2. HTML pages when embedded with CSS are extremely search engine friendly and that is the reason they are being popularly used by several service providers all over the world.
3. HTML pages when embedded with CSS shorten the code and as well ensure that your web page gets loaded comparatively faster.
4. HTML when used along with CSS is much more flexible both in terms of designing & effects.

You can experience the most excellent features by using the fifth version of HTML along with CSS 3:

• By making use of the fifth version of HTML along with CSS 3 the graphical effects on your webpage can be made more appealing. By means of HTML 5 & CSS 3 it is very easy to code your web pages so as to encompass circular corners & drop shadows.
• You can personalize the font on your webpage by making use of HTML along with CSS.
• The tables on your web page can get a better look with the use of CSS.
• One important feature provided by HTML 5 is the use of Web Sockets. By making use of the sockets feature provided by HTML data transfer & communication over the web becomes much faster. The server response is also comparatively much faster.
• Latest versions of HTML provide the facility of Geo Location.
• With the use of HTML you can have better accessibility to your Emails as they can be saved and later you can view them whenever you want even though you are offline.

HTML & CSS are anticipated to bring about a diverse change in the near future. It is alleged that the potential of this diligence depends on it. CSS 3 is already time-honored by most of the web service providers and so is the fifth version of HTML.

In the modern era everybody has a dream of building a Website. Nowadays building a website has become an easy process even for starters. If you are aware of few simple steps like creating a database and know how to install the most popular Web content management software’s such as WordPress, Joomla, etc. If you know these few simple steps then there is no need for you to learn the basic web languages such as Javascript, PHP, Hypertext Markup Language (HTML), and Cascading Style Sheets (CSS). On the whole you will not have to strive hard so as to get the knowledge of web programming because a common user of the site merely needs to be familiar on terms such as how to attach different pictures, how to publish articles and few other basic tasks. Most of the booming authors put up the shutters of their mind when it comes to learning HTML and the use of CSS along with HTML because they think it is not necessary for them to know

In contrast if you have the knowledge of the various web programming languages then you can appreciably perk up the eminence of your site. By means of only some easy tweaks you will be able to transform any cut-out, you will be able to amend colors to go with your write up, you can adjust locations of various elements on the page, and so forth. So to sum up with you have full edge on your site.

Many users of the web assume that gaining knowledge on Hypertext Markup Language (HTML) & few new web based languages is very complicated. However their assumption on this is incorrect because it is very easy to grasp the basic of the web based languages like HTML. An operational site on a home web server is the perfect podium for experimentation because this is the place where you can try out different things and observe what effects they have on your site. In this manner you can gain knowledge of lot many things on improving the look and feel of your website.

The foremost step must be to go through various e-tutorials or preparatory content on the subject of HTML & CSS. This is the primary level of web encoding. The subsequent step is almost certainly PHP & JavaScript. You merely have to be on familiar terms with what is the functionality of these web based languages, how PHP & JS can help you in creating web pages together with CSS & HTML, what is the general syntax for using these languages and so forth.

The next step to be followed is to analyze the file organization structure e of your website. Make an attempt to find out what kind of files make up the cut-out of your website. You will more often than not come across a main HTML file together with few CSS styles. Try to examine & explore the syntax & structure of these files and after that make few modifications and observe what effects they have on the web page content or on the entire layout of the page.

Minute modifications will afterwards turn out to be better modifications & you will be capable of transforming the general template in accordance with your requirements & wishes. The only thing required is you have to find how things work so that it will be very easy for you to know in which file you have to make modifications, how you have to modify the code so that you can achieve the expected changes in the web page whatever you wish for. It really sounds incredible when you get to know that just merely by knowing the general syntax of the languages like HTML you can make wonders with it. If you know these languages you can comprehend easily the functioning of the web & how to get the best out of it.
.

We have listed following critical and the most important features needed in a WordPress theme. Please have a look on the same before designing or launching a theme.

1. Introduce & Test Right-To-Left Support

It is quite necessary to provide the right-to-left support in your WordPress theme. You can add rtl.css to override the language variables and functions mentioned in style.css only when WP_LANG variable of settings.php is set to any right-to-left language like Hebrew or Arabic.

define (‘WP_LANG’, ‘ar’); //ar for Arabic

Following is an illustration of the necessary change in rtl.css: -

body {
direction: rtl;
Unicode-bidi: embed;
}

Please remember not to reiterate each style from style.css to rtl.css. You just need to change required styles needed while reading from right to left. We suggest you to get familiar with the bidirectional algorithm and Unicode to get expertise in R-to-L implementation. You can also visit Wikipedia, Twitter, and Facebook in Arabic or Hebrew. Also give a peek at Al Jazeera – the famous Arabic News Website.

2. Hide Comments On Protected Posts

WordPress users can apply password protection on selected posts. The visitors are supposed to enter registration details like username and password to read protected posts. As a Theme Designer, you are required not to display comments on such posts. Make sure whether you have included following coding lines in comments.php.

<?php if ( post_password_required() ): ?>
<p><?php _e( ‘This post is password protected. Enter the password to view and post comments.’ , ‘mytheme’ ); ?></p>
</div>
<?php
return;
endif;
?>

3. Include and Style Default Widgets

Few theme designers do not include the default widgets of WordPress like Calendar, Category etc. and the users really miss them in their blog. Therefore, we will recommend you including the default widgets as well as to style them according to your theme.

4. Attachment.php – To Show Attachments Properly

The bloggers add attachment using following toolbar while composing a post in WordPress.

The attachment.php is used when visitors click on attached file like image, audio, video, or any other file.

If there is no attachment.php or any other template then browser displays file using any plug-in. So, what is the advantage of attachment.php? You can use this php file to show an attached image at full size in a new or same window/tab.

For example, TwentyTen theme include following lines in attachment.php.

1. if ( wp_attachment_is_image() ) {
2. echo ‘ <span>|</span>  ‘;
3. $metadata = wp_get_attachment_metadata();
4. printf( __( ‘Full size is %s pixels’, ‘twentyten’),
5. sprintf( ‘<a href=”%1$s” title=”%2$s”>%3$s × %4$s</a>’,
6. wp_get_attachment_url(),
7. esc_attr( __(‘Link to full-size image’, ‘twentyten’) ),
8. $metadata['width'],
9. $metadata['height']
10. )
11. );
12. }

5. Post Pagination

The WordPress bloggers often need pagination in their posts to enhance the readability and provide better visitors’ experience. Noteworthy that post pagination is not included in WordPress by default. Therefore, you should include Post Pagination in your theme. You can include wp_link_pages with following code in loop.php

wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ => ‘</p>’, ‘next_or_number’ => ‘number’));

The users can include following code:

to include pagination
<!–nextpage–>

to display pagination
<strong>Pages:</strong> 1 2 3

Visitors can click the page numbers to visit subsequent pages.

6. Make sure to include wp_head() and wp_footer()

Cross check whether you have included wp_head() before closing <head> tag and wp_footer() before closing body tag. Most of the plug-ins and features will not work if you miss to include both of these functions.

7. Custom Fields

Customization plays an important role in the success of any software or WordPress theme. You can provide the option to include custom fields on each post. Call “the_meta()” function in loop.php to display all the attached custom fields on each post in an unordered list.

8.    Enable Custom Backgrounds

The WordPress 3.0 allows theme designers to provide custom background options. Prefer this option by including “add_custom_background()” function.

9. Custom Menus

Another exciting feature of WordPress is support for Custom Menus. You can include custom menu support with following code:
register_nav_menu( ‘main_nav’, __( ‘Main navigation menu’, ‘mytheme’ ) );

Now, use following code to display custom menus:
wp_nav_menu( array( ‘theme_location’ => ‘main_nav’ ) );

We advise you to make a plan before including the main and sub menus. In addition, you should limit the drop-down menu levels. You can use following code to set menus’ depth level to 4 -

wp_nav_menu(array (‘depth’ => 2));

10. Stylize Inbuilt Editor

Give a new look and feel to the inbuilt default WordPress editor. You can include editor-style.css to modify the outlook of TinyMCE editor. This step is an easy one as you just have to match the typography mentioned in main style.css. If you are using rtl.css to support right-to-left languages then create editor-style-rtl.css with code for typography features like paddings, margins, lists, tabs, etc.

11. Threaded Comments

The proper arrangement of comments is quite essential for a WordPress theme designer. We advise you to include threaded comments as these consumes less space, and have options to distinct replies from comments, display reply buttons, comment body, comment names, avatars, commenter’s name etc. Noteworthy that you do not know how much level of replies it will handle. You also have to make sure that

•    Replies are clearly distinguished with comments,
•    ‘Cancel Reply’ link or button is properly positioned,
•    Comments render appropriately without mashing,
•    Avatar’s layout is enabled for commenter, and
•    Threaded Comments do not overflow their container’s boundaries.

12. Thumbnails

Most of the themes rely on plug-ins to support thumbnails. You can include following code in functions.php to support thumbnails: -

add_theme_support( ‘post-thumbnails’ );
set_post_thumbnail_size( 70, 70 );

The thumbnails of different sizes can break the post layout. You can modify second code line as following to crop the images as per selected size

set_post_thumbnail_size (70, 70, TRUE);

Use following code to create additional thumbnails of different sizes,
add_image_size(‘big-thumb’, 500, 500)

Please note we have applied a name to the thumbnail in above code. Use following code to display name-attached and latter for default thumbnail (without any name)
the_post_thumbnail(‘big-thumb’);
the_post_thumbnail();

13. Custom Headers

You can also allow the users to customize the headers as well. However, you have to modify few constraints to enable custom headers in your theme. You can use following code for the same after mentioned constraints with proper measurements like stylesheet_directory, path/to/image, designerwidth, and designerheight.

define( ‘HEADER_TEXTCOLOR’, ’000′ );
define( ‘HEADER_IMAGE’, get_bloginfo( ‘stylesheet_directory’ ) . ‘path/to/ image’ );
define( ‘HEADER_IMAGE_WIDTH’, ‘designerwidth’ );
define( ‘HEADER_IMAGE_HEIGHT’, ‘designerheight’ );

We recommend you inserting following code in header.php to inform about the CSS being used to enable custom headers.

<?php
function mytheme_header_image() {
?>
<style type=”css”>
#header { background: url(<?php header_image(); ?>) no-repeat; }
</style>
<?php
}
?>

In addition, you have to create a function having following lines to style preview pane in admin console for matching the results. We suggest you to experiment the preview until you finalize the design.

add_custom_image_header( ‘mytheme_header_image’, ‘mytheme_admin_preview_header’ );

14. Enable Translation

The translation service is quite necessary if a blogger wants to address the visitors from different countries and states. You can wrap user readable strings with _e() to echo/print it and _() to translate it.

_(‘Sample String’, ‘designertheme’) // to enable translation
_e(‘Sample String’, ‘designertheme’) // to print translation

After wrapping of each string, create makepot.php. You can download and install Subversion to get this script using following command:

Svn co http://svn.automattic.com/WordPress-i18n/tools/trunk

Now, you will need a directory ‘trunk’ containing makepot.php and others. You can use following script line
php makepot.php wp-theme <themename>

You can replace <themename> with the name of your theme. The next step is to provide a pot file to have translations like <themename>.pot. You can Poedit like program to create a pot file.

Use following code to inform WordPress where to live the translations in theme directory.
load_theme_textdomain( ‘themename’, TEMPLATEPATH . ‘/languages’);

15. Use WordPress.org Theme Unit Test

You can use the sample content file of WordPress.org to test your theme. Import WordPress installation to this file and then apply your designed theme. Test each and every aspect of your theme to make it further amendments.

Resource Box:

In nutshell, the Theme Designer must focus on the customization options to provide additional functions to theme users. Not only the designer has to test the designed theme properly but he/she also has to be ready for future changes.

Technology keeps changing rapidly, therefore we advise you to launch updates for your themes after fixing bugs, and modifying it address users’ latest requirements.

A good text editor is the heart of the hand-coding toolbox. You could use notepad or whatever plain text editor is bundled with your operating system, but there’s really no reason to settle. There are plenty of free alternatives with features to make hand-coding faster and easier.

Windows – Notepad++
Hands-down the best editor for Windows. With syntax highlighting, auto tag completion, code folding, and much more, Notepad++ is a lightweight program with everything you need to code XHTML and CSS. Make sure you grab the TextFX plugin (built into newer versions) and the Explorer plugin (a nice file browser) from the plugin repository. While you’re there, check out the 60 or so other plugins available for even more flexibility and features.

Mac OS X – Textwrangler
Textwrangler is one of the best free text editors for Mac OS X. However, if you’re willing to shell out a little money, I’d recommend either TextMate ($60) or Coda ($99) for more robust features and support. They all have their pros and cons, so give each a try to see what works best for you.

Browser

If a text editor is the heart of the hand-coding toolbox, then a browser is the soul. It’s the reason developers build tableless websites. And for web design and development, there’s no better browser than Firefox. Not only does it adhere to accepted web standards, there’s a ridiculous number of add-ons available to streamline the hand-coding process. Just remember to limit the number of extensions you have enabled so the browser stays quick and stable.

Here’s a list of my favorite add-ons:

• Firebug – I couldn’t live without Firebug. You can tweak CSS properties right in the browser and see the results live, inspect XHTML elements to sort out layout problems, monitor network requests, and more. This is a must-have add-on for Firefox.

• Web Developer Extension – Another add-on with indispensable features. View the generated source code from pages with javascript, disable and enable style sheets and javascript, analyze XHTML elements, validate local and remote markup and CSS, and much more. Plus, it includes some nice features from stand-alone plugins like MeasureIt (a ruler to measure elements in the browser window) and Window Resizer (resize the browser window to test different screen resolutions).

• Live HTTP Headers – It shows the HTTP header calls made with each page load in real time, which can help you sort out issues with caching and redirects.

• Yahoo! YSlow – This is actually an extension to Firebug that works with its network monitoring features. YSlow tests the performance of your web pages and offers suggestions to tweak the underlying code and server settings. Shoot for an ‘A’ grade to push your web development skills to the next level.

• Pixel Perfect – This is also an extension to Firebug. It lets you overlay a copy of your mockup in the browser window, which can save a lot of time flipping between Photoshop and Firefox.

• GridFox – This creates a grid overlay in the browser window. Combine it with Firebug and you can nudge elements into perfect alignment.

• FireFTP – I prefer a stand-alone FTP program, but this comes in handy on occasion. It has all the features you need to upload files, including directory comparison and the ability to transfer through SFTP (extremely important for security).

I know Internet Explorer is the browser everyone loves to hate, but it is used by the majority of people outside of the tech and design communities. Plus, there’s a little-known Internet Explorer developer toolbar that mimics the functionality of the developer toolbar for Firefox. Just food for thought.

Cross-browser compatibility

A website may look great in Firefox, but that doesn’t mean the layout is ready to be released into the wild. Cross-browser compatibility testing is critical and ensures visitors have a consistent experience regardless of the browser they use.

IETester provides Windows users with easy access to Internet Explorer 6, 7, and 8 in one place. It suffers from random crashes, but that’s a small price to pay for the convenience of three browsers in one. (I’ve found that you can avoid a lot of glitches if you open an IE8 tab first.)

If you’re on a Mac, you can to try the spoon plugin, which lets you run your websites through different browsers in an online “sandbox”. There’s also the Adobe BrowserLab. It’s free now, but expect Abode to charge for it in the near future.

In addition to those tools, you can always download the full versions of other browsers. Sometimes there’s just no substitute for the real thing. I have these installed in a separate folder and check finished websites in each one before I wrap up.

• Firefox (Windows, Mac)
• Safari (Windows, Mac)
• Opera (Windows)
• Chrome (Windows)

FTP

FTP, or File Transfer Protocol, is how you upload your shiny new, hand-coded web pages to the internet. FileZilla is one of the best stand-alone FTP clients and it’s available for both Windows and Mac OS X. If you’re using Notepad++ there’s an easy way to integrate Notepad++ and FileZilla so you can edit files directly on the remote server.

Remember to always transfer files through SFTP where possible. Otherwise you send your username and password over the network in plain text.

Local server

If you plan to do more than deliver static HTML pages, you’ll need a local server. A WAMP or MAMP stack (short for Windows or Mac + Apache-MySQL-PHP) allows you to run server-side languages and even database driven packages like WordPress from your desktop. I install Apache, PHP, and MySQL from scratch on my Windows boxes, and there are plenty of online tutorials to walk you through the process. But if you’d prefer a simpler solution…

Windows – XAMPP
XAMPP will have you up and running in a few minutes with everything you could need from a local server.

Mac OS X – Built-in or MAMP
Mac OS X has a built-in Apache server and there are lots of online tutorials that explain how to access it. Or you can go with MAMP, which is a one-click solution that installs Apache, PHP, and MySQL.

Five Finger Coding

To create a group of options, wrap them in an optgroup element. To give the group a label, use the label attribute. Here is a simple example:

<label for="phones">Select a phone:</label>
<select id="phones" name="phones">
	<option selected="selected">None</option>
	<optgroup label="Apple">
		<option value="iphone">iPhone</option>
	</optgroup>
	<optgroup label="Nokia">
		<option value="n91">N91</option>
		<option value="e60">E60</option>
		<option value="6300">6300</option>
	</optgroup>
</select>

And here is how the browser you are currently using will render the above example:

Select a phone:

One caveat is that assistive technology support for the optgroup element and the label attribute is inconsistent, as noted in Creating Accessible Forms at WebAIM and the WCAG 2 technique H85: Using OPTGROUP to group OPTION elements inside a SELECT.

To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites below:

Browsershots	Browsershots
Spoon	CrossBrowserTesting
NetRenderer	Litmus
BrowserCam