XHTML PROS

PSD2HTML, W3-Markup, and Slice ‘n Dice, are Great XHTML/CSS Coders, but are They Right for Your Project?

Kyle — Thu, 15 Apr 2010 20:19:41 +0000

Designers and companies both want to have their website coded professionally. If they are a big company they will definitely hit up PSD2HTML or another well known coding service. Designers do not always have the budget for that though. Here is a price comparison.

Company	Starting Price	Turnaround
PSD2HTML	$159	1 Day
W3-Markup	$192	5 Days
Slice ‘n Dice	$249	6 Days
XHTML Pros	$50	2 Days

XHTML Pros is up to 1/5 the price of the competitors and still maintains a quick turnaround. Our past clientèle have almost been exclusively Web Designers needing their work coded for a client, gaming clans, or start up websites.

Our mission has always been to provide high quality coding for a very affordable price.

If your budget is bigger, then I would recommend PSD2HTML, W3-Markup, and Slice ‘n Dice, but if you have a lower budget and want more bang for your buck, then hire XHTML Pros. We have a 100% Satisfaction Guarantee.

Satisfied Customer Testimonies

Great coder, not only was I extremely happy with the coding quality, but the price was unbeatable. On top of that he had an extremely fast turn around time. He knew I was on a tight time frame, and he was able to get my project done quicker with no lack of quality.
Highly recommended! Will be using Kyle for a lot of my work.
- Brad

Kyle was extremely pleasant. He immediately got started and kept me updated daily. He worked quickly and the code came out great. I am completely satisfied with XHTMLPros and will do business with them again.
- Justin Drago

Web Browser Usage Trends

Kyle — Mon, 13 Jul 2009 20:17:13 +0000

Firefox seems to be the browser of choice these days. This is great news for the internet. Check out these interesting tables.

Browser Statistics Month by Month

2009	IE7	IE6	IE8	Firefox	Chrome	Safari	Opera
June	18.7%	14.9%	7.1%	47.3%	6.0%	3.1%	2.1%
May	21.3%	14.5%	5.2%	47.7%	5.5%	3.0%	2.2%
April	23.2%	15.4%	3.5%	47.1%	4.9%	3.0%	2.2%
March	24.9%	17.0%	1.4%	46.5%	4.2%	3.1%	2.3%
February	25.4%	17.4%	0.8%	46.4%	4.0%	3.0%	2.2%
January	25.7%	18.5%	0.6%	45.5%	3.9%	3.0%	2.3%

2008	IE7	IE6	IE5	Firefox	Chrome	Safari	Opera
December	26.1%	19.6%		44.4%	3.6%	2.7%	2.4%
November	26.6%	20.0%		44.2%	3.1%	2.7%	2.3%
October	26.9%	20.2%		44.0%	3.0%	2.8%	2.2%
September	26.3%	22.3%		42.6%	3.1%	2.7%	2.0%
August	26.0%	24.5%		43.7%		2.6%	2.1%
July	26.4%	25.3%		42.6%		2.5%	1.9%
June	27.0%	26.5%	0.5%	41.0%		2.6%	1.7%
May	26.5%	27.3%	0.7%	39.8%		2.4%	1.5%
April	24.9%	28.9%	1.0%	39.1%		2.2%	1.4%
March	23.3%	29.5%	1.1%	37.0%		2.1%	1.4%
February	22.7%	30.7%	1.3%	36.5%		2.0%	1.4%
January	21.2%	32.0%	1.5%	36.4%		1.9%	1.4%

2007	IE7	IE6	IE5	Firefox	Mozilla	Safari	Opera
November	20.8%	33.6%	1.6%	36.3%	1.2%	1.8%	1.6%
September	20.8%	34.9%	1.5%	35.4%	1.2%	1.6%	1.5%
July	20.1%	36.9%	1.5%	34.5%	1.4%	1.5%	1.9%
May	19.2%	38.1%	1.6%	33.7%	1.3%	1.5%	1.7%
March	18.0%	38.7%	2.0%	31.8%	1.3%	1.6%	1.6%
January	13.3%	42.3%	3.0%	31.0%	1.5%	1.7%	1.5%

2006	IE7	IE6	IE5	Firefox	Mozilla	N7/8	Opera
November	7.1%	49.9%	3.6%	29.9%	2.5%	0.2%	1.5%
September	2.5%	55.6%	4.0%	27.3%	2.3%	0.4%	1.6%
July	1.9%	56.3%	4.2%	25.5%	2.3%	0.4%	1.4%
May	1.1%	57.4%	4.5%	25.7%	2.3%	0.3%	1.5%
March	0.6%	58.8%	5.3%	24.5%	2.4%	0.5%	1.5%
January	0.2%	60.3%	5.5%	25.0%	3.1%	0.5%	1.6%

2005	IE6	IE5	Firefox	Mozilla	N7	O8	O7
November	62.7%	6.2%	23.6%	2.8%	0.4%	1.3%	0.2%
September	69.8%	5.7%	18.0%	2.5%	0.4%	1.0%	0.2%
July	67.9%	5.9%	19.8%	2.6%	0.5%	0.8%	0.4%
May	64.8%	6.8%	21.0%	3.1%	0.7%	0.7%	0.6%
March	63.6%	8.9%	18.9%	3.3%	1.0%	0.3%	1.6%
January	64.8%	9.7%	16.6%	3.4%	1.1%		1.9%

2004	IE6	IE5	Mozilla	N3	N7	N4	O7
November	66.0%	10.2%	16.5%	0.2%	1.2%	0.3%	1.6%
September	67.8%	11.2%	13.7%	0.3%	1.4%	0.3%	1.7%
July	67.2%	13.2%	12.6%	0.4%	1.4%	0.4%	1.6%
May	68.1%	13.8%	9.5%	0.6%	1.4%	0.4%	1.6%
March	68.2%	14.6%	7.9%	0.8%	1.4%	0.6%	1.4%
January	68.9%	15.8%	5.5%	0.4%	1.5%	0.5%	1.5%

2003	IE6	IE5	Mozilla	N3	N7	N4	O7
November	71.2%	13.7%	7.2%	0.5%	1.6%	0.5%	1.9%
September	69.7%	16.9%	6.2%	0.6%	1.5%	0.6%	1.8%
July	66.9%	20.3%	5.7%	0.6%	1.5%	0.6%	1.7%
May	65.0%	22.7%	4.6%	1.0%	1.4%	0.9%	1.4%
March	63.4%	24.6%	4.2%	0.9%	1.4%	1.1%	1.2%
January	55.3%	29.3%	4.0%	1.2%	1.1%	1.7%

2002	IE6	IE5	AOL	N3	N5	N4	IE4
November	53.5%	29.9%	5.2%	1.1%	4.9%	2.0%
September	49.1%	34.4%	4.5%	1.3%	4.5%	2.2%
July	44.4%	40.1%	3.5%	1.2%	3.5%	2.6%	0.5%
May	40.7%	46.0%	2.8%	1.2%	2.7%	3.4%	0.7%
March	36.7%	49.4%	3.0%	1.2%	2.4%	4.1%	0.7%
January	30.1%	55.7%	2.8%	1.3%	2.2%	4.4%	1.0%

IE	Internet Explorer
Firefox	Firefox (identified as Mozilla before 2005)
Chrome	Google Chrome
Mozilla	The Mozilla Suite (Gecko, Netscape)
Safari	Safari (and Konqueror. Both identified as Mozilla before 2007)
Opera / O	Opera
N	Netscape (identified as Mozilla after 2006)
AOL	America Online (based on both Internet Explorer and Mozilla)

Source

XHTML DocTypes

Jordan — Mon, 23 Jul 2007 14:50:41 +0000

Here I will explain you how to set the Document Type Definition (DTD) of an XHTML web-page. The DTD tag goes at the start of your coding before the starting html tag. There is no end tag or self-closing for the DTD tag.

There are 3 Doctypes usable by an XHTML document. Strict, Transitional, and Frameset. The doctype is used when validating an XHTML document’s content against a DTD to find markup errors.

When you want very clean and clutterless code, use the strict DTD. It’s best to use this with external CSS as well.

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

Use Transitional when you want to use HTML’s more presentational features, because CSS isn’t supported in all browsers currently. This is a little more loose on the validity of a web-page and is the most commonly used.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Use the Frameset when you want to split your web-page up into multiple frames.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

The Head Tag

Jordan — Mon, 23 Jul 2007 14:32:45 +0000

The tags can contain many different tags in it. Today I will talk about three of them: title, link, and meta.

The title tag contains the title of the page that is displayed in the top-most bar of the browser.
Example:

Valid Coding

It would be best to put clear words and keywords to do with your site in this tag. It is very helpful when it comes to search engine optimization, or SEO.

The link tag defines the relationship between two linked documents. The most commonly used attributes used in the tag are rel(relation), type, and href. It is mainly used to link an external cascading style sheet(CSS) to your web-page, but can also link other pages as well.
Example:

If you notice, the link tag is an empty element tag, and has no end tag. Therefore it must be self-closed with /> at the end.

The meta tag is used mainly for SEO. The tag provides information about your web-page, such as descriptions and keywords for search engines and refresh rates. There are many meta tags you can have in your head tag. You can have keywords for search engines, description of your web-page, the latest revision of your page, and use the tag to refresh your web-page at a set interval.
Example:

***Keywords used for search engines***

***Gives the description of the web-page***

***Shows when the web-page was last revised***

***Refreshes the web-page every 10 seconds***

The meta tag is also an empty element tag, and has no end tag. Therefore it must be self-closed with /> at the end.

All of these tags are exclusive head tags, and will only work in between

Heading Tags

Kyle — Mon, 23 Jul 2007 01:50:50 +0000

Yes the

-

tags. You need to know them and they are so easy to use! Of course you could use CSS to do the same thing these XHTML tags do but this is so much simpler.

XHTML Code

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Navigation Part II: Rollovers

Jordan — Fri, 20 Jul 2007 10:14:12 +0000

Rollovers help the user see that they are about to click the link and also are appealing to the eye. In this tutorial you will learn how to make the rollovers for the navigation.

First you will need to download the rollover background found at the following link. Rollover Background. Put this image in the image folder from Part I.

Now you need to add in this block of CSS to the current style sheet you have in the Part I of the tutorial.

li:hover {
background: url(i/roll.jpg);
}

And there you have it. The rollover should look similar to this.

Coding Your Navigation

Kyle — Wed, 18 Jul 2007 11:30:26 +0000

In this tutorial I will explain how to code a navigation in XHTML and CSS.

Finished product: Navigation Preview

Navigation Files: Background Image (save as nav_bg.jpg and put it in a new folder named “i”)

First thing is to tell the CSS what type of font you are using and what size it is. Below is an example of how.

body {

font: 12px Arial, Helvetica, sans-serif;

}

Next you need to define the

ul {

background: url(i/nav_bg.jpg) repeat-x;

width: 829px;

height: 28px;

padding: 0;

}

Background: url(i/nav_bg.jpg) repeat-x; – the background of the nav and the image repeats horizontally.
Width: 829px; – navigation is 829px wide.
Height: 28px; – navigation is 28px;
Padding: 0; – navigation is not padded in at all.

Next we define the

or list item in the CSS. Look below for an example of this.

li {

display: inline;

font-weight: bold;

width: 91px;

height: 21px;

padding: 7px 0 0 0;

float: left;

text-align: center;

}
- Display: inline; – the navigation links will display in a horizontal line.
- Font-weight: bold; – the text is bold.
- Width: 91px; – each link is 91px wide.
- Height: 21px; – each link is 21px high.
- Padding: 7px 0 0 0; – the links are padded down 7px.
- Float: left; – each link floats to the left.
- Text-align: center; – the text is centered in the button.
The last step of the CSS is defining the tag or the link. View below for the code.
li a {

color: #fff;

text-decoration: none;

}
- Color: #fff; – the color of the link is white.
- Text-decoration: none; – no underline.
Now for the XHTML part. Just add this simple code into the of your XHTML document.
- Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link
- Link
Now your navigation should look like http://valid.xhtmlpros.com/tuts/navigation/. I hope you all found this tutorial helpful!

IDs and Classes

Kyle — Wed, 18 Jul 2007 10:33:05 +0000

IDs and Classes can be mixed up a lot if you do not know what you are doing. You cannot use an ID more than once in an XHTML document or it renders the page invalid. A perfect use for this would be for a banner. Classes on the other hand were designed for to be used multiple times on a page. An ideal class would be for a content heading used numerous times.

To make an ID in the CSS you must start it off with the pound sign (#). Classes begin with a period (.)

CSS Code

#id {

}

.class {

}

XHTML Code

Floats

Kyle — Wed, 18 Jul 2007 05:59:03 +0000

Floats are basically the same as the align attribute. They are super easy to use!

CSS Code

#left {

float: left;

}

#right {

float: right;

}

XHTML Code

This text will appear on the left hand side of the page.

This text will appear on the right hand side of the page.

CSS Explanation

#left – # is the symbol used to name an ID. Left is the name of the ID.
float: left; – Basically says which way the content will move or float. In this case left.

XHTML Explanation

– Telling the div what id it will use.
– End tag for the div.

Links

Kyle — Thu, 05 Jul 2007 16:09:32 +0000

A link is what guides you though the web. You could, of course, manually type in URLs but this facilitates the whole process. Say for example you want to return to the homepage. What would you do? You would click the home button near the top of the page.

XHTML Code

Valid Coding

Live Preview
Valid Coding

Explanation

The “href” attribute defines the path of the link. Just change that to the target of your link.

XHTML PROS

PSD2HTML, W3-Markup, and Slice ‘n Dice, are Great XHTML/CSS Coders, but are They Right for Your Project?

Web Browser Usage Trends

Browser Statistics Month by Month

XHTML DocTypes

The Head Tag

Heading Tags

-

tags. You need to know them and they are so easy to use! Of course you could use CSS to do the same thing these XHTML tags do but this is so much simpler. XHTML Code Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Navigation Part II: Rollovers

Coding Your Navigation

IDs and Classes

Floats

Links

tags. You need to know them and they are so easy to use! Of course you could use CSS to do the same thing these XHTML tags do but this is so much simpler.

XHTML Code

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6