10 Best Tutorials on Converting PSD to XHTML/CSS

IT is a good habit to start a new project by designing a mockup in photoshop before starting coding for a website. There are lot of people who can design a web page in photoshop but not have good skill to convert this photoshop design into html/css.
I search over the web for best article on psd to html/css. Here i share 10 best link from where you can learn psd to html building step by step.If someone follow this link and study those articles carefully i am sure anybody can success on this job.

1. 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.


2. 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.



3. 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.


4. Tutorial: Coding a Layout

This tutorial from Eratic Wisdom is not nearly as detailed as some of the others on this list, but it does a good job of looking at the process quickly. If you’re interested in going through a shorter tutorial on the subject rather than spending a large chuck of time on all the details, try this one.



5. From PSD to HTML – How to turn your designs into usable web interfaces

Part Digital Design gives us another detailed tutorial for coding a site from a Photoshop file. This tutorial is very detailed, from slicing the interface to the coding.


6. From PSD to CSS/HTML in Easy Steps

These are the first in a series of tutorials in which they build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and they encourage you to download and play with what is provided.



7. Converting a Design From PSD to HTML

8. BLOOpress CSS Template

9. PSD HTML Slicing Tutorial

10. Design and Code a Slick Website From Scratch – Part II 

HTML & XHTML Character Entities List

Using character entities is very helpful when the encoding set doesn’t express all the characters that you might want to use in your document. For example, if you were authoring a document in English and wanted to use an inverted exclamation mark for a Spanish quotation, In this situation you must use an entity to create that character. Other character entity references help control space, symbols, and so on.

There are three types of character entities available in HTML and XHTML. Follow the links to the complete chart listings for that entity type.

• ISO 8859-1 characters. This set includes the Latin set of character entities.
• Symbols, Mathematical Characters, Greek and Latin Letters. This set includes entities for various symbols (such as copyright symbols and so on), math characters, and Greek and Latin letters.
• Markup-significant Characters. This set includes internationalization characters such as those required for bi-directional text.

Named Entities in HTML & XHTML

Example	Named Entity	Numeric	Entity Description
	 	 	non-breaking space
¢	¢	¢	cent sign
£	£	£	pound sign
¤	¤	¤	currency sign
¥	¥	¥	yen sign
¦	¦	¦	broken vertical bar
§	§	§	section sign
¨	¨	¨	diaeresis
©	©	©	copyright sign
ª	ª	ª	feminine ordinal indicator
«	«	«	left-pointing double angle quotation mark
¬	¬	¬	not sign
­	­	­	soft hyphen
®	®	®	registered sign
¯	¯	¯	macron
°	°	°	degree sign
±	±	±	plus-minus sign
²	²	²	superscript two
³	³	³	superscript three
´	´	´	acute accent
µ	µ	µ	micro signB5
¶	¶	¶	pilcrow sign
·	·	·	middle dot
¸	¸	¸	cedilla
¹	¹	¹	superscript one
º	º	º	masculine ordinal indicator
»	»	»	right-pointing double angle quotation mark
¼	¼	¼	vulgar fraction one- quarter
½	½	½	vulgar fraction one- half
¾	¾	¾	vulgar fraction three- quarters
¿	¿	¿	inverted question mark
À	À	À	Latin capital letter A with grave
Á	Á	Á	Latin capital letter A with acute
Â	Â	Â	Latin capital letter A with circumflex
Ã	Ã	Ã	Latin capital letter A with tilde
Ä	Ä	Ä	Latin capital letter A with diaeresis
Å	Å	Å	Latin capital letter A with ring above
Æ	Æ	Æ	Latin capital letter AE
Ç	Ç	Ç	Latin capital letter C with cedilla
È	È	È	Latin capital letter E with grave
É	É	É	Latin capital letter E with acute
Ê	Ê	Ê	Latin capital letter E with circumflex
Ë	Ë	Ë	Latin capital letter E with diaeresis
Ì	Ì	Ì	Latin capital letter I with grave
Í	Í	Í	Latin capital letter I with acute
Î	Î	Î	Latin capital letter I with circumflex
Ï	Ï	Ï	Latin capital letter I with diaeresis
ð	ð	Ð	Latin capital letter eth
Ñ	Ñ	Ñ	Latin capital letter N with tilde
Ò	Ò	Ò	Latin capital letter O with grave
Ó	Ó	Ó	Latin capital letter O with acute
Ô	Ô	Ô	Latin capital letter O with circumflex
Õ	Õ	Õ	Latin capital letter O with tilde
Ö	Ö	Ö	Latin capital letter O with diaeresis
×	×	×	multiplication sign
Ø	Ø	Ø	Latin capital letter O with stroke
Ù	Ù	Ù	Latin capital letter U with grave
Ú	Ú	Ú	Latin capital letter U with acute
Û	Û	Û	Latin capital letter U with circumflex
Ü	Ü	Ü	Latin capital letter U with diaeresis
Ý	Ý	Ý	Latin capital letter Y with acute
þ	þ	Þ	Latin capital letter thorn
ß	ß	ß	Latin small letter sharp
à	à	à	Latin small letter a with grave
á	á	á	Latin small letter a with acute
â	â	â	Latin small letter a with circumflex
ã	ã	ã	Latin small letter a with tilde
ä	ä	ä	Latin small letter a with diaeresis
å	å	å	Latin small letter a with ring above
æ	æ	æ	Latin small letter ae
ç	ç	ç	Latin small letter c with cedilla
è	è	è	Latin small letter e with grave
é	é	é	Latin small letter e with acute
ê	ê	ê	Latin small letter e with circumflex
ë	ë	ë	Latin small letter e with diaeresis
ì	ì	ì	Latin small letter i with grave
í	í	í	Latin small letter i with acute
î	î	î	Latin small letter i with circumflex
ï	ï	ï	Latin small letter i with diaeresis
ð	ð	ð	Latin small letter eth
ñ	ñ	ñ	Latin small letter n with tilde
ò	ò	ò	Latin small letter o with grave
ó	ó	ó	Latin small letter o with acute
ô	ô	ô	Latin small letter o with circumflex
õ	õ	õ	Latin small letter o with tilde
ö	ö	ö	Latin small letter o with diaeresis
÷	÷	÷	division sign
ø	ø	ø	Latin small letter o with stroke
ù	ù	ù	Latin small letter u with grave
ú	ú	ú	Latin small letter u with acute
û	û	û	Latin small letter u with circumflex
ü	ü	ü	Latin small letter u with diaeresis
ý	ý	ý	Latin small letter y with acute
þ	þ	þ	Latin small letter thorn
ÿ	ÿ	ÿ	Latin small letter y with diaeresis

Symbol Entities in HTML & XHTML

Example	Named Entity	Numeric Entity	Description
ƒ	ƒ	ƒ	Latin small f with hook
Α	Α	Α	Greek capital letter alpha
Β	Β	Β	Greek capital letter beta
Γ	Γ	Γ	Greek capital letter gamma
Δ	Δ	Δ	Greek capital letter delta
Ε	Ε	Ε	Greek capital letter epsilon
Ζ	Ζ	Ζ	Greek capital letter zeta
Η	Η	Η	Greek capital letter eta
Θ	Θ	Θ	Greek capital letter theta
Ι	Ι	Ι	Greek capital letter iota
Κ	Κ	Κ	Greek capital letter kappa
Λ	Λ	Λ	Greek capital letter lambda
Μ	Μ	Μ	Greek capital letter mu
Ν	Ν	Ν	Greek capital letter nu
Ξ	Ξ	Ξ	Greek capital letter xi
Ο	Ο	Ο	Greek capital letter omicron
Π	Π	Π	Greek capital letter pi
Ρ	Ρ	Ρ	Greek capital letter rho
Note: There’s no Sigmaf, ” final sigma”, ΢ defined in iso-grk
Σ	Σ	Σ	Greek capital letter sigma
Τ	Τ	Τ	Greek capital letter tau
Υ	Υ	Υ	Greek capital letter upsilon
Φ	Φ	Φ	Greek capital letter phi
Χ	Χ	Χ	Greek capital letter chi
Ψ	Ψ	Ψ	Greek capital letter psi
Ω	Ω	Ω	Greek capital letter omega
α	α	α	Greek small letter alpha
β	β	β	Greek small letter beta
γ	γ	γ	Greek small letter gamma
δ	δ	δ	Greek small letter delta
ε	ε	ε	Greek small letter epsilon
ζ	ζ	ζ	Greek small letter zeta
η	η	η	Greek small letter eta
θ	θ	θ	Greek small letter theta
ι	ι	ι	Greek small letter iota
κ	κ	κ	Greek small letter kappa
λ	λ	λ	Greek small letter lambda
μ	μ	μ	Greek small letter mu
ν	ν	ν	Greek small letter nu
ξ	ξ	ξ	Greek small letter xi
ο	ο	ο	Greek small letter omicron
π	π	π	Greek small letter pi
ρ	ρ	ρ	Greek small letter rho
ς	ς	ς	Greek small letter final sigma
σ	σ	σ	Greek small letter sigma
τ	τ	τ	Greek small letter tau
υ	υ	υ	Greek small letter upsilon
φ	φ	φ	Greek small letter phi
χ	χ	χ	Greek small letter chi
ψ	ψ	ψ	Greek small letter psi
ω	ω	ω	Greek small letter omega
ϑ	ϑ	ϑ	Greek small letter theta symbol
ϒ	ϒ	ϒ	Greek upsilon with hook symbol
ϖ	ϖ	ϖ	pi symbol
•	•	•	bullet
…	…	…	horizontal ellipsis
′	′	′	prime
″	″	″	double prime
‾	‾	‾	overline
⁄	⁄	⁄	fraction slash
℘	℘	℘	script capital
ℑ	ℑ	ℑ	blackletter capital I
ℜ	ℜ	ℜ	blackletter capital R
™	™	™	trade mark sign
ℵ	ℵ	ℵ	alef symbol
←	←	←	leftward arrow
↑	↑	↑	upward arrow
→	→	→	rightward arrow
↓	↓	↓	downward arrow
↔	↔	↔	left right arrow
↵	↵	↵	downward arrow with corner leftward
⇐	⇐	⇐	leftward double arrow
⇑	⇑	⇑	upward double arrow
⇒	⇒	⇒	rightward double arrow
⇓	⇓	⇓	downward double arrow
⇔	⇔	⇔	left-right double arrow
∀	∀	∀	for all
∂	∂	∂	partial differential
∃	∃	∃	there exists
∅	∅	∅	empty set
∇	∇	∇	nabla
∈	∈	∈	element of
∉	∉	∉	not an element of
∋	∋	∋	contains as member
∏	∏	∏	n-ary product
∑	∑	∑	n-ary summation
−	−	−	minus sign
∗	∗	∗	asterisk operator
√	√	√	square root
∝	∝	∝	proportional to
∞	∞	∞	infinity
∠	∠	∠	angle
∧	∧	∧	logical and
∨	∨	∨	logical or
∩	∩	∩	intersection
∪	∪	∪	union
∫	∫	∫	integral
∴	∴	∴	therefore
∼	∼	∼	tilde operator
≅	≅	≅	approximately equal to
≈	≈	≈	almost equal to
≠	≠	≠	not equal to
≡	≡	≡	identical to
≤	≤	≤	less-than or equal to
≥	≥	≥	greater-than or equal to
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	⊄	not a subset of
Note: ⊅ , ⊅ “not a superset of” is not defined.
⊆	⊆	⊆	subset of or equal to
⊇	⊇	⊇	superset of or equal to
⊕	⊕	⊕	circled plus
⊗	⊗	⊗	circled times
⊥	⊥	⊥	up tack
⋅	⋅	⋅	dot operator
⌈	⌈	⌈	left ceiling
⌉	⌉	⌉	right ceiling
⌊	⌊	⌊	left floor
⌋	⌋	⌋	right floor
〈	⟨	〈	left-pointing angle bracket
〉	⟩	〉	right-pointing angle bracket
◊	◊	◊	lozenge
♠	♠	♠	black (solid) spade suit
♣	♣	♣	black (solid) club suit
♥	♥	♥	black (solid) heart suit
♦	♦	♦	black (solid) diamond suit

Markup-Specific Entities in HTML & XHTML

Example	Named Entity	Numeric Entity	Description
"	"	"	quotation mark
&	&	&	ampersand
<	&lt;	&#60;	less-than sign
>	&gt;	&#62;	greater-than sign
Œ	&OElig;	&#338;	Latin capital ligature OE
œ	&oelig;	&#339;	Latin small ligature oe
Š	&Scaron;	&#352;	Latin capital letter S with caron
š	&scaron;	&#353;	Latin small letter s with caron
Ÿ	&Yuml;	&#376;	Latin capital letter Y with diaeresis
ˆ	&circ;	&#710;	modifier letter circumflex accent
˜	&tilde;	&#732;	small tilde
	&ensp;	&#8194;	en space
	&emsp;	&#8195;	em space
	&thinsp;	&#8201;	thin space
‌	&zwnj;	&#8204;	zero width non-joiner
‍	&zwj;	&#8205;	zero width joiner
‎	&lrm;	&#8206;	left-to-right mark
‏	&rlm;	&#8207;	right-to-left mark
–	&ndash;	&#8211;	en dash
—	&mdash;	&#8212;	em dash
‘	&lsquo;	&#8216;	left single quotation mark
’	&rsquo;	&#8217;	right single quotation mark
‚	&sbquo;	&#8218;	single low-9 quotation mark
“	&ldquo;	&#8220;	left double quotation mark
”	&rdquo;	&#8221;	right double quotation mark
„	&bdquo;	&#8222;	double low-9 quotation mark
†	&dagger;	&#8224;	dagger
‡	&Dagger;	&#8225;	double dagger
‰	&permil;	&#8240;	per mille sign
‹	&lsaquo;	&#8249;	single left-pointing angle quotation
›	&rsaquo;	&#8250;	single right-pointing angle quotation
€	&euro;	&#8364;	euro sign

Create Rounded corners by CSS without image which supports in all Browsers

In this tutorial i will show you how to Create rounded corners by css without image which supports in all Browsers. I use this technique in my professional work and the output is outstanding. Just you need to edit the css file to make different color rounded box. No image editing sofware needed to create curve image. All you just need to do is understanding the css code. Analyze whole css carefully and see which class use for when and where.

If you are beginner level in css and html i suggest you just copy and paste my css and html code and study the code. Its not too hard.
Hope you will enjoy it. If you like this technique just let me know i will show more excellent tricks in my next post.

Basic idea :
The basic idea of this rounded corners without image is that we style the corners using four or five pixel high strips before and after the main content div. These strips are created using styled <b></b> tags. <b> tags have been used because they are faster to type than <span></span> and take up less file space (as good a reason as any).

Each strip is created using a background color, a left and right border color and a left and right margin.

Heare is a diagram to show how each strip was organized.

The basic curved corner is comprised of four strips labelled b1 to b4 and in the example above the background color is a Orchid , the border color is white and the outer background color is light grey.

The XHTML is below:

<div class="inset">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="boxcontent">
<h1>Create rounded corners by css without image which support in all Browsers.</h1>
<p>Rounded corners with inset borders</p>
</div>
<b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
</div>

The css style is below:

.inset {
background:transparent;
width:40%;
}
.inset h1, .inset p {
margin:0 10px;
}
.inset h1 {
font-size:2em; color:#fff;
}
.inset p {
padding-bottom:0.5em;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {
display:block;
overflow:hidden;
font-size:1px;
}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {
height:1px;
}
.inset .b2 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #aaa;
}
.inset .b3 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #ddd;
}
.inset .b4 {
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #eee;
}
.inset .b4b {
background:#ccc;
border-left:1px solid #aaa;
border-right:1px solid #fff;
}
.inset .b3b {
background:#ccc;
border-left:1px solid #ddd;
border-right:1px solid #fff;
}
.inset .b2b {
background:#ccc;
border-left:1px solid #eee;
border-right:1px solid #fff;
}
.inset .b1 {
margin:0 5px;
background:#999;
}
.inset .b2, .inset .b2b {
margin:0 3px;
border-width:0 2px;
}
.inset .b3, .inset .b3b {
margin:0 2px;
}
.inset .b4, .inset .b4b {
height:2px; margin:0 1px;
}
.inset .b1b {
margin:0 5px;
background:#fff;
}
.inset .boxcontent {
display:block;
background:#ccc;
border-left:1px solid #999;
border-right:1px solid #fff;
}

After applying above code the box will be shows like following image

Thats it. Take the code and customize as you want. If you have any question just ask. I will try to give you a better solution. Enjoy making rounded corners by css without image.

Lists of standard Doctype Declarations. must know every web designer.

In every web page we must need to add a Doctype Declarations at the top of the html file. Doctype Declarations(DTD) is not only use for validate the page it also use to activate the standards compliant rendering mode in Internet Explorer 6, Mozilla/Firefox and Opera browsers. The Doctype Declaration(DTD) must be exactly spelling and it is case sensitive. So you must type it as it is shown in W3C recommended Doctype Declaration to have the perfect effect.Here Is a list of W3C recommended list of Doctype Declarations.

You can use it in your web document. I suggest you to copy and paste this declarion code into your web document to ease the work. Otherwise if you make any mistake when you type, it will be difficult to have output from it.

Where to use doctype declarations ?
Use the following markup as a template to create a new XHTML 1.0 document using a proper Doctype Declaration. See the list below if you wish to use another DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>An XHTML 1.0 Strict standard template</title>

<meta http-equiv="content-type"

content="text/html;charset=utf-8" />

</head>

<body>

Your HTML content here

</body>

</html>

 (X)HTML Doctype Declarations List

HTML 4.01
* Strict:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

* Transitional1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

* Frameset1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 2

* Strict:

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

* Transitional1:

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

* Frameset1:

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

Redirect visitors to a new site or page by using HTML code.

Some times we need to change our web url for various reason. When we change our page or site url visitors don’t know new location. They already linked to this location. Another factor is search engine. Because search ingine is already indexed the page To solve this problem we need to redirect visitors to new location.
From my view to do this its a good habit to replace the page with a new page and put the following html code into new page header section I mean between head Tags of html code.

<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.yourdomain.com/index.html">

The content="0; means delay time of the redirecting the page. I prefer to show some message text for the visitors so that he will understand the reason of the redirecting the page. To show the message first you need to see how many second you need to read the message. If it needs 5 seconds the code will be look like this one :

<meta HTTP-EQUIV="REFRESH" content="5; url=http://www.yourdomain.com/index.html">

Hope it will helps those who are new to web design. At last I want to say one thing that it is not the only way to redirect the page. If you want to know more about this go to www.google.com and search for the details.

Example html code :

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta HTTP-EQUIV="REFRESH" content="2; url=http://www.yourdomain.com/index.html">

<title>Your website title</title>

</head>

<body>

Your message text here

</body>

</html>