. blog —

How to make a perfect Malevich using only basic HTML code (2006) - LUNK

By John Michael Boling

— Share this Article —


marcin ramocki 7 years, 2 months agoReply

Dragan 7 years, 2 months agoReply

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

Pall Thayer 7 years, 2 months agoReply

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"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />

<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;
<div id="outer">
<div id="inner">

t.whid 7 years, 2 months agoReply

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


Pall Thayer 7 years, 2 months agoReply

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 7 years, 2 months agoReply

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" />

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.