How to make a perfect Malevich using only basic HTML code (2006) - LUNK
By John Michael Boling
sep 11, 2008


LAUNCH

More work by LUNK

Tags

conceptual

Subscribe to receive Rhizome’s
weekly newsletter:

Share

Save this Article →

Comments

marcin ramocki Sept. 11 2008 17:04Reply

check out also http://www.cjny.com/myData-web/

and his Liquid Mondrian project http://www.vertexlist.net/cj.html
or http://www.cjny.com

Dragan Sept. 17 2008 08:53Reply

Error Line 9, Column 14: there is no attribute "HEIGHT".
<TABLE HEIGHT="100%" BORDER=0 ALIGN="center">

Pall Thayer Sept. 18 2008 13:33Reply

I see this is a bit dated. Here's a modern version. Fully valid XHTML 1.0 Tranistional.


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />

<title>Malevich</title>
<style type="text/css">
body {
background-color: #FFF;
}
#outer {
position: absolute;
height: 400px;
width: 400px;
left: 50%;
margin-left: -200px;
border: 1px solid #000;
}
#inner {
position: relative;
top: 50px;
background-color: #000;
height: 300px;
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
</div>
</div>
</body>
</html>

t.whid Sept. 19 2008 10:42Reply



C'mon Pall! Where's the xhtml 1.0 strict version?

LOL

Pall Thayer Sept. 19 2008 11:07Reply

If you replace the instances of Transitional and transitional to Strict and strict in the DOCTYPE, this will validate as XHTML 1.0 strict. So there.

Pall Thayer Sept. 19 2008 13:35Reply

Here's another more modern version. The SVG version. Again, this is fully valid SVG 1.1


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="600px" height="600px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<desc>Malevich in SVG</desc>
<rect x="200px" y="200px" width="400px" height="400px" fill="#FFF" stroke="#000" stroke-width="1px" />
<rect x="250px" y="250px" width="300px" height="300px" fill="#000" />
</svg>

I know that Firefox 3 and the current version of Opera will display this correctly with no need for plugins. Can't promise that other browsers will.