Web Page Design with XHTML and CSS

Shifting all my web content to a new platform

2010-05-31T00:16:00.000-07:00

Hey Guys,
I'm closing this Blog. Hence forward if you want to follow my stuff, Please.....

Join at here : ViewsBoard

How to make CSS Speech Bubbles

2010-03-09T09:28:00.000-08:00

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. Here is an article which i got recently explain very nicely how to make this. Hope guys , it'll also help you equally in your projects/works.

More info : Click here

Useful CSS Buttons

2010-02-22T09:26:00.000-08:00

Buttons are always a integrate part of web sites. It help users always to interact with web sites easily & effectively. There are a lot of ways to create buttons. But, My fev. are CSS based buttons. Because, it's decrease the utilization of band width of web site & also help to load the web pages faster than image based buttons.

Recently , i made some search & got some beautiful CSS based buttons for my web projects. Here are some of them. Hope guys i'll also help you in u'r web works.

Scalable CSS Buttons using PNG and Background Colors

More info

Simple Round CSS Buttons (Wii Buttons)

More info

Beautiful CSS Buttons with icon sets

More info

CSS Sliding Door Buttons using only one image

More info

Rediscovering the Button Elements

More info

Web designing tricks , tutorials & tools

2010-02-20T10:18:00.000-08:00

Multiple Upload Using Single Upload File With jQuery

Want to learn how to do multiple upload by using JQuery by using a single uploading form ? Here is an article from Clay Lua which has explain the same thing.....

Check it

Best jQuery Gallery(Slideshow) Technique

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Here are some best JQuery gallery which are avilable over the web. You can try this in u'r sites & any project.

Check it

Popular JQuery Cheatsheets

Here are some very JQuery cheat sheets which will definitly help you a lot in u'r web work. You can keep it in your code first-add box for faster memorising & utilizing JQuery programming.

Check it

Web Pages With HTML 5

HTML5 introduces a number of new elements and attributes that reflect typical usage on modern Web sites. Some of them are semantic replacements for common uses of generic block and inline elements. Other elements provide new functionality through a standardized interface, such as the

Here is a rapid learning tutorial which will definitly give u some idea about HTML 5 web page designing

Check it

How to keep footers at the bottom of the page

When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Here are some tricks by "Matthew James Taylor" which teach you how you can keep your design away from this.

check it

Some cool and useful JQuery

2010-02-19T09:39:00.000-08:00

Want to build a chat room by using only PHP & JQuery without using any database Here is great tutorial to help you.

More info: Click here

Twitter is always popular for it's simplicity. Now it's new login page. The new twitter login page really very slick & smart too. Here is a useful tutorial BY LAM NGUYEN which will help you to build u'r own one

More info: Click here

Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.

More info: Click here

If your website allow user registration, it should definitely a good idea to implement this very nice sliding login form. Of course, it can be used for many other things, as such as a contact form.

More info: Click here

Want to know how to design a product slider like Apple is using one in their site.......

More info : Click here

5 most popular CSS Frameworks

2009-07-04T22:40:00.000-07:00

CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love.
Main features of good CSS Framework is to
1) rapidly speed up our development time,
2) should have a very small size,
3) have good documentation and tutorials and
4) have clean grid structure. You will need a basic understanding of the CSS framework you are going to use to understand why and how things get solved.

Here are some 5 most popular CSS Frameworks whihc you'll definitely find useful and time-saving.

1.960 CSS Framework
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.

2.Blueprint CSS Framework
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

3.The jQuery UI CSS Framework
jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

4.YAML
Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.
YAML comes with a a very nice Ajax builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.

5.Yahoo YUI Grids CSS
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

Rounded Corners Using CSS and No Images

2009-07-03T19:02:00.000-07:00

To create the rounded corners, you need an inline element that acts as the actual pixel for your corner. This could be any inline element, but I prefer either the span element or the b element. Span because it's probably the most "correct" element to use, and b because it's shorter to type and you should be using strong for your bolded text.

You also need a container element, such as a div. You could also use an unordered list as your container, or any other block-level element, but the div seems to be the easiest to understand, and you can include other block elements inside a div, which you can't inside, say, a paragraph.

The XHTML Required for Rounded Corners

In order for your corners to show up, you need to have your container div be a different color than the background color of the page. So, the first thing your style sheet should have is a style indicating what color your rounded elements will be:

.container {
background:#ccc;
color:#fff;
margin:0 15px;
}

As you can see, I also set the left and right margins a little off the edges so that they would be easier to see the rounded corners.

Each corner is written as a b element classed either rtop or rbottom. Then inside of this element are 4 more b elements, classed r1 through r4. To get the correct colors, you need to set the rtop and rbottom elements the same as the page background color. Then you set the r1 through r4 elements the same background color as the container.

.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
Setting the overflow to hidden ensures that the elements inside rtop and rbottom won't extend past their allotted space.

The last thing you do is set the right and left margins of the r1 through r4 elements so that they get progressively smaller and create the curve you're looking for.

.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
The height on the r4 element helps insure that the entire section doesn't take up too much space.

Where The Rounded Corners Work
Rounded corners done in this style will work on the following types of elements:
floated elements
absolutely positioned elements
fixed width elements
percentage width elements

Where The Rounded Corners Don't Work
You can't use this exact style with a fixed height or with padding on the container element. But you can solve that problem by creating a second container element that assigns your height or padding.
This technique doesn't work on IE 5.x for Windows.
There are also some problems with text-indent in Internet Explorer.

The Full CSS for Rounded Corners
.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Converting PSDs to HTML/CSS

2009-07-01T21:29:00.000-07:00

Many web designers start a new project by designing a mockup in Photoshop before actually coding the website. For a designer who is comfortable with Photoshop and with this process, less time can be used to create the end result.

For those designers who have not mastered the process of converting a design into a fully coded website, here are 3 which we hope help you a lot.

From PSD to HTML, Building a Set of Web Designs Step by Step

Collis Ta’eed published a post about five months ago at NETTUTS that takes a very detailed look at the process of coding a site with a PSD file as a starting point. This is a site that Collis designed in Photoshop and the post goes through every step of getting it to the point of being a working site, with all the CSS and HTML coding provided.

Build a Sleek Portfolio Site from Scratch

A few months prior to the previous post, Collis also published this exceptional tutorial. This post was the 2nd part of a series that included a tutorial on PSDTUTS for creating the design in Photoshop. The two posts form one of the most useful sets of tutorials for any aspiring web designer, or other designers who could use some pointers for the process of starting with a design in Photoshop.

Encoding a Photoshop Mockup into XHTML and CSS

Chris Spooner also did a similar two-part series of posts for creating a design in Photoshop and then coding the site with XHTML and CSS. While Collis showed us how to code a portfolio site, Chris focuses his tutorial on blog design.

Image floats, without the text wrap!

2009-06-29T20:02:00.000-07:00

How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image?

You’ve tried to accomplish this before, but what you really need is something that plays nicely with any HTML & any amount of content you, or more realistically, your database can throw at it.

The example below can easily fall apart without the proper CSS in place:

Click here for full tutorials......

Search engine optimization (SEO)

2008-06-22T08:25:00.000-07:00

Search engine optimization (SEO) is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results for targeted keywords.Which directly help you to improve you're web site rank and spread the contain to large number of audience in web.

For this I'm going to share some technique which will help you a lot to achieve a better SEO(Search engine optimization) for your sites.This can we do in 2 way .

Things to do
Things not to do

Things to do:
Keywords in URL: Try to use whole words-keywords to best describe you're site. ex: http://www.aboutdoghealth.org/

Keywords in Title tag: Placing of key words in title is a important things.Because according to this search engine index you're site in it's database.

Keywords in anchor texts: Also very important, especially for the anchor text, because if you have the keyword in the anchor text in a link from another site, this is regarded as getting a vote from this site not only about your site in general, but about the keyword in particular.

Keywords in headings (H1, H2, etc. tags): These are again some places at where key words counts a lot.But beware that your page has actual text about the particular keyword.

Keywords in the beginning of a document: While coding your page put your main content before side bar. Because this also counts, though not as much as anchor text, title tag or headings

Keywords in tags: Spiders don't read images but they do read their textual descriptions in the tag, so if you have images on your page, fill in the tag with some keywords about them.

Anchor text of inbound links: This is one of the most important factors for good rankings. It is best if you have a keyword in the anchor text but even if you don't, it is still OK.

Origin of inbound links: It is important if the site that links to you is a reputable one or not. Generally sites with greater Google PR are considered reputable and the .edu and .gov sites are the most reputable

Links from similar sites: Having links from similar sites is very, very useful. It indicates that the competition is voting for you and you are popular within your topical community.

Metatags: Metatags are becoming less and less important but if there are metatags that still matter, these are the and ones.

Unique content: Having more content (relevant content, which is different from the content on other sites both in wording and topics) is a real boost for your site's rankings.

Frequency of content change: Frequent changes are favored. It is great when you constantly add new content but it is not so great when you only make small updates to existing content.

Site Accessibility: Another fundamental issue, which that is often neglected. If the site (or separate pages) is unaccessible because of broken links, 404 errors, password-protected areas and other similar reasons, then the site simply can't be indexed.

Sitemap: It is great to have a complete and up-to-date sitemap, spiders love it, no matter if it is a plain old HTML sitemap or the special Google sitemap format.

Things not to do:
Keyword stuffing: Any artificially inflated keyword density (10% and over) is keyword stuffing and you risk getting banned from search engines.

Keyword dilution: When you are optimizing for an excessive amount of keywords, especially unrelated ones, this will affect the performance of all your keywords and even the major ones will be lost (diluted) in the text.

Single pixel links: when you have a link that is a pixel or so wide it is invisible for humans, so nobody will click on it and it is obvious that this link is an attempt to manipulate search engines.

Cross-linking: Cross linking occurs when site A links to site B, site B links to site C and site C links back to site A

Duplicate content: When you have the same content on several pages on the site, this will not make your site look larger because the duplicate content penalty kicks in. To a lesser degree duplicate content applies to pages that reside on other sites but obviously these cases are not always banned

Doorway pages: Creating pages that aim to trick spiders that your site is a highly-relevant one when it is not, is another way to get the kick from search engines

Cloaking: Cloaking is another illegal technique, which partially involves content separation because spiders see one page (highly-optimized, of course), and everybody else is presented with another version of the same page.

Invisible text: This is a black hat SEO practice and when spiders discover that you have text specially for them but not for humans, don't be surprised by the penalty.

Illegal Content: Using other people's copyrighted content without their permission or using content that promotes legal violations can get you kicked out of search engines.

Flash: Spiders don't index the content of Flash movies, so if you use Flash on your site, don't forget to give it an alternative textual description. And also don’t have just flash home page without HTML one.

Frames: Frames are very bad for SEO. Avoid using them unless really necessary.

Redirects (301 and 302): When not applied properly, redirects can hurt a lot – the target page might not open, or worse – a redirect can be regarded as a black hat technique, when the visitor is immediately taken to a different page.

Bans in robots.txt: If indexing of a considerable portion of the site is banned, this is likely to affect the non banned part as well because spiders will come less frequently to a "noindex" site.

Session IDs: This is even worse than dynamic URLs. Don't use session IDs for information that you'd like to be indexed by spiders.

Cross Browser Testing

2008-06-16T07:28:00.000-07:00

We all know how much cross browsing testing is importance in web development.But it is not always really not that much of easy because for that you've to test you're codes with so many of browsers which is really not a easy task at all.But, when such things comes in web business it's really very much necessary to check you're codes with all type of Browsing environments else you all know how clients can be difficult when it comes to project review and the final result isn't what they asked for (usually because most of them still use IE6) so you just have to test your code and design in all major browsers, operating systems, screen resolutions etc.

But, here is a one cool & beautiful service ( Browser Shot ) by which you can generate screen shots of your web design on a wide number of Windows, Mac, and Linux browsers. Enter your address and press submit and after 10-45 minutes (depending on current loads) you'll get screen shots of your site as displayed on a variety of different Windows/Mac/Linux browsers. The interface can be confusing at first, but it is a great free service. It's available on other languages too and the one of the best things here is that you can enable Java, Flash and JavaScript.

Browser Shot : http://browsershots.org/

Site Vista
it's a commercial web page testing service starting at $9 a day. Besides wide range of platforms for design testing you can also test Over 90% of email clients to ensure your email displays correctly for all your readers. It has clean, friendly, and fas user interface and also offerers some interesting services like one-click publishing, with just one click you can show your client a copy of the compatibility results.

Site Vista: http://litmusapp.com/

Browser Cam
It costs more then the rest starting at $39.95/month but provides testing on the largest variety of different OS and browser combinations. It offerers free 24 hour trial with 200 captures. And two features really stand out the first is a special VNC remote access service that allows you to test interactive design elements such as pop-down menus, rollovers, or flash animations. The second is inclusion of several mobile browsers such as BlackBerry, and Windows Mobile.

Browser Cam: http://www.browsercam.com/Default2.aspx

Cross Browser Testing
This one is a new service, but it offers a lot of bang for your buck. First, it offers private VNC access to a multitude of operating systems and browser configurations that allows you to fully test for html, ajax, css, javascript, flash and other dynamic feature compatibilities on a website. Second, they allow you to run any configuration for 5 minutes for free. Not just once, but as many times as you like. They also have screenshot capabilities and there is no limit to how many you can take.

Cross Browser Testing: http://crossbrowsertesting.com/

30 Best Firefox Add-ons

2008-06-14T10:56:00.000-07:00

Add-ons extend Firefox, letting you personalize your browsing experience.These are also helps a lot to developers & web programmers.Here are some 30 best & coolest Firefox add-ons which will really help a lot in you're web Programming .

1. CSSMate - online CSS editor extension, similar with EditCSS.
2. ViewSourceWith - let you view page source with external applications.
3. PicLens - transforms your browser into a full-screen 3D experience for viewing web images.
4. FireShot -creates screenshots of web pages which you can modify.
5. SeoQuake - helps with search engine optimization and internet promotion of web sites.
6. Font Finder - simply highlight a single element and right click to view all CSS style.
7. Live HTTP Headers - view HTTP headers of a page and while browsing.
8. Modify Headers - allows you to add, modify and filter http request headers.
9. CSSViewer - simple and useful extension for view any part of CSS property at current pages.
10. EditCSS - it is easy way to view or modifier any stylesheets in the Sidebar just right click.
11. Firebug - view, edit, and monitor CSS, HTML and Javascript live at any web pages.
12. View Formatted Source - Displays formatted and color-coded source for each element.
13. Professor X - let's you see inside a pages head without viewing the source code.
14. CSS validator - one click to valid a page using the W3C CSS validator.
15. Validaty - provides you a button to validate a page using a validator like validator.w3.org.
16. Html Validator - adds HTML validation inside Firefox and Mozilla.
17. Copy as HTML Link - creates an HTML link to the current page using the selected text.
18. TableTools - sorts, filters or copies any HTML table.
19. CHM Reader - make firefox support Compiled HTML file reading.
20. PageDiff - Helps web developers and designers to see HTML code differences between web pages.
21. Clipmarks - let you save any parts of current web pages.
22. SourceEditor - view and edit source of HTML element.
23. Total Validator - provides true HTML validation using the official DTDs.
24. LinkChecker - check the validity of links on any web page.
25. Web Developer - adds a menu and a toolbar with various web developer tools.
26. Style Sheet Chooser II - allows you to choose author-provided alternate styles for a web site.
27. View Dependencies - lists all files which were loaded to show the page at a tab of info window.
28. Accessibar - enabling easy manipulation of web page display and text-to-speech output.
29. Aardvark - used for cleaning up a page prior to printing it for making the page more readable.
30. JSview - Adds ability to view the source code of external files.

Hope friends these will really help you a lot in you're web programming & coding area.

Introduction to CSS

2008-06-12T20:36:00.000-07:00

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).

In Short:
* CSS stands for Cascading Style Sheets
* Styles define how to display HTML elements
* Styles are normally stored in Style Sheets
* Styles were added to HTML 4.0 to solve a problem
* External Style Sheets can save you a lot of work
* External Style Sheets are stored in CSS files
* Multiple style definitions will cascade into one

Variations:
CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS1, CSS2, and CSS3. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types which were added in CSS2.

Introduction to XHTML

2008-05-05T10:04:00.001-07:00

The Extensible Hypertext Markup Language, or XHTML, is a markup language that has the same depth of expression as HTML, but also conforms to XML syntax.

While HTML is an application of Standard Generalized Markup Language (SGML), a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Because they need to be well-formed, true XHTML documents allow for automated processing to be performed using standard XML tools—unlike HTML, which requires a relatively complex, lenient, and generally custom parser. XHTML can be thought of as the intersection of HTML and XML in many respects, since it is a reformulation of HTML in XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000. XHTML 1.1 became a W3C Recommendation on May 31, 2001.

What Is XHTML?
------------------------
* XHTML stands for EXtensible HyperText Markup Language
* XHTML is aimed to replace HTML
* XHTML is almost identical to HTML 4.01
* XHTML is a stricter and cleaner version of HTML
* XHTML is HTML defined as an XML application
* XHTML is a W3C Recommendation

Versions of XHTML
---------------------------------
The original XHTML W3C Recommendation, XHTML 1.0, was simply a reformulation of HTML 4.01 in XML. There are three different "DTDs" of XHTML 1.0, each equal in scope to their respective HTML 4.01 versions.

* XHTML 1.0 Strict is the same as HTML 4.01 Strict, but it follows XML syntax rules.
* XHTML 1.0 Transitional is the same as HTML 4.01 Transitional, but it follows XML syntax rules. It supports everything found in XHTML 1.0 Strict, but also permits the use of a number of elements and attributes that are judged presentational, in order to ease the transition from HTML 3.2 and earlier.
* XHTML 1.0 Frameset: is the same as HTML 4.01 Frameset, but it follows XML syntax rules. It allows the definition of an HTML frameset—a common practice early in the timeline of the mainstream Web.

Why the need for XHTML?
------------------------------------
The benefits of migrating to XHTML 1.0 are described above. Some of the benefits of migrating to XHTML in general are:

* Document developers and user agent designers are constantly discovering new ways to express their ideas through new markup. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules and techniques for developing new XHTML-conforming modules (described in the XHTML Modularization specification). These modules will permit the combination of existing and new feature sets when developing content and when designing new user agents.
* Alternate ways of accessing the Internet are constantly being introduced. The XHTML family is designed with general user agent interoperability in mind. Through a new user agent and document profiling mechanism, servers, proxies, and user agents will be able to perform best effort content transformation. Ultimately, it will be possible to develop XHTML-conforming content that is usable by any XHTML-conforming user agent.