Easy SEO(Search engine optimization) by Meta element

The simple way of optimizing a website to make it visible in the first page of search result of a search engine is to use a meta tag. Meta contents metadata of the web page. Google doesn’t rely fully on meta elements but it shows “description” of the meta element in its search result. Meta elements always goes inside head element, so it wont be displayed in the web page. Meta elements are typically used to specify page description, keywords, author of the document, last modified, etc. All meta element has name or http-equiv attribute and content attribute.


<head>
 <meta name="description" content="Into Future Web" />
 <meta name="keywords" content="HTML5,CSS3,JavaScript" />
 <meta name="author" content="Jeyanth Kumar" />
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 </head>

Keywords and description will make the search engine to recognize your webpage for the search queries. For more information about meta element visit w3schools.

 

Conditional comments for flexibility

Conditional comments will help the web developers to design a web page compatible with other browsers. We usually design web pages that works in almost all latest browsers. But, what about the older ones. The older ones that comes along with windows xp,  When we see the browsers market share on the whole the internet explorer wins, but older version of internet explorer doesn’t understand all the  css rule in the way we wanted to. So conditional comments will help us to use separate style sheet for specific browsers.


<link href="styles\home.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="styles\ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

All the browsers except IE6 will treat the third line as a comment. If IE6 reads the third line then it gets new style rules which gives the opportunity to give different visual style for internet explorer. Well that’s not the end of the use of conditional comments. It can also be used to insert a div tag only for a specific browser.

<!--[if IE 6]>
<div id="ie6">
<p> This is div tag which appears only on IE6. </p>
</div>
<![endif]-->

That div tag is only valid on IE7 versions that came before. Why? Because of the “lt” which is used after the if statement. Here two specifiers can be used, which are “lt” and “gt”, “lt” is used to specify version below the specified IE and “gt” is used to specify the version after the specified IE. To specify generally for all versions of  internet explorer just specify it as <!–[if IE]>

Note that conditional comments can be used only in HTML files not in any CSS files. Conditional comments are used to specify only internet explorer not any other browser.

CSS3 Speech Module

The css3 text to speech will make the visually impaired users to get the advantage to listen to the web page contents. Well, not just reading, it can be customized by various speech synthesizing voices like male, female etc. also the speed of speech, where to pause. All these in css. No other special script or code to do this trick. I haven’t tried this myself but here is an example css code.

h1, h2, h3, h4, h5, h6 {
    voice-family: paul;
    voice-stress: moderate;
    cue-before: url(ping.au)
}
p.heidi { voice-balance: left; voice-family: female }
p.peter { voice-balance: right; voice-family: male }
p.goat  { voice-volume: soft }

As you can see the css rules like voice-family and voice-stress are the attributes to the voice synthesizing. Well this is not the end, there are voice pitch, voice range, duration, cue property which enables to play other sounds after or before reading, voice volume (voice mix), pause, etc.

To know further about speech module visit http://www.w3.org/TR/css3-speech. This article is based on the working draft dated 19th April 2011.

HTML and CSS – The Basics

So, one of my friend said me to post an article for basics so the beginners can understand. But its not easy to learn in one day and you have to read and try lots of experiment on your own to know about CSS and HTML combination. CSS stands for cascading style sheets, for styling the web page. HTML is a markup language which stands for Hyper Text Markup Language, In simple words HTML creates a skeleton for the web document, where CSS defines the HTML object’s appearance like its size, color, position on the screen etc. If you don’t define a CSS for your HTML document the web browser will automatically use the default CSS that’s build inside the browser. For instance its predefined that text color should be black in the HTML document by browsers default CSS.

CSS gives lots of flexibility for web page layout design. A single HTML page can be made to look in different ways by changing the CSS alone. A best example to see this is to visit CSS Zen Garden. You can see how the entire site appearance changes just by changing the style sheets. Read the rest of this entry »

Perspective in CSS3

Perspective view in a web page are often created by java script by reducing the size of the objects in the background. Apple’s webkit engine enables the developers to create objects in much perspective way. A box model can be rotated in 3D. Its not only box model any thing can be rotated in 3d, Text, Image etc. But its not the end apple’s webkit can render that in a a 3d perspective. And it doesn’t work on Firefox 4 and Google Chrome 10. As for today IE9 is not even considered for this. Because IE9 cant even rotates an object. Firefox 4 and Chrome 10 can rotate objects only in z axis. Even though chrome uses webkit engine its working in chrome(May work in future release). And the only browser that can do the magic is Apple’s Safari. This is how its going to work, the HTML structure needs two div’s nested. The inner div will be rotated and the outer div will gives the perspective appearance.


<div class="outer">
 <div class="inner">
 Some Text
 </div>
</div>

Read the rest of this entry »