Validate HMTL & CSS from your page.
Hy! Today we learn how to validate HTML and CSS from your page. This tip is usefull if you have a website about webdesign where you have tools for development! Here is the final result
with a design what i made, you have all files in the archive HERE. Let’s Start.
[1] Open your text editor and type the next HTML code
<html>
<head>
<title>Validate CSS, HTML, XHTML from your page</title>
</head>
<body>
<div>
<form method=”get” action=”http://jigsaw.w3.org/css-validator/validator” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit file for validation”><input type=”submit” value=”Validate CSS” /></label>
<label title=”Clear HTML data”><input type=”reset” value=”Clear” /></label>
</form>
</div>
<br>
<div>
<form method=”get” action=”http://validator.w3.org/check” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit”><input type=”submit” value=”Validate HTML” /></label>
<label title=”Clear”><input type=”reset” value=”Clear” /></label>
</form>
</div>
</body>
</html>
Look at the next picture how ugly is without CSS
[2] Now let’s to create the CSS code. I put a background at the page to be more
beautiful and i create a background image in Adobe Photoshop for the div’s!
You have all files in the archive.
<style type=”text/css”>
body {
background-image: url(”bg.gif”);
}
div {
width: 350px;
height: 150px;
background-image: url(”validate.jpg”);
repeat: no-repeat;
}
div.2 { width: 350px;
height: 150px;
background-image: url(”validate2.jpg”);
repeat: no-repeat;
}
form { padding-top: 70px;
padding-left: 26px;
}
label { padding-left: 12px;
}
</style>
[3] Now we put the HTML and CSS code together
<html>
<head>
<title>Validate CSS, HTML, XHTML from your page</title>
<style type=”text/css”>
body {
background-image: url(”bg.gif”);
}
div {
width: 350px;
height: 150px;
background-image: url(”validate.jpg”);
repeat: no-repeat;
}
div.2 { width: 350px;
height: 150px;
background-image: url(”validate2.jpg”);
repeat: no-repeat;
}
form { padding-top: 70px;
padding-left: 26px;
}
label { padding-left: 12px;
}
</style>
</head>
<body>
<div>
<form method=”get” action=”http://jigsaw.w3.org/css-validator/validator” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit file for validation”><input type=”submit” value=”Validate CSS” /></label>
<label title=”Clear HTML data”><input type=”reset” value=”Clear” /></label>
</form>
</div>
<br>
<div class=”2″>
<form method=”get” action=”http://validator.w3.org/check” target=”_blank”>
<input name=”uri” id=”uri” size=”30″ value=”http://” /></p><br><br>
<label title=”Submit file for validation”><input type=”submit” value=”Validate HTML” /></label>
<label title=”Clear HTML data”><input type=”reset” value=”Clear” /></label>
</form>
</div>
</body>
</html>
That’s it! Here is the final result! If you don’t understand something write a comment. Thank you!
Tags: Design, Download, how to, Internet, links, Programming, Tips & Tricks, tutorial, Validate CSS, Validate HMTL & CSS from your page, Validate HTML, w3c website, webdesign, world wide web consortium
November 7th, 2007 at 8:51 pm
[...] here for more Filed under: html [...]
December 9th, 2007 at 2:23 pm
Muzica…
MIjto blog ai intra si pe al meu :D…
January 2nd, 2008 at 5:54 pm
This is great info you shared here, thanks, best wishes for holidays…