In order to create a blog in XML, we need a basic XML template. Here's a possible template inspired by Wordpress:
<?xml version="1.0" encoding="utf-8" ?>
<document>
<page>
<headerimg>
<h1>XML blog</h1>
<description>a Wordpress blog</description>
</headerimg>
<content>
<post>
<h2>Story Heading</h2>
<date>April 3, 2009</date>
<entry>
<p>
</p>
<postmetadata>Posted in <link url="#">Category</link> | <link url="#">Comment »</link></postmetadata>
</entry>
</post>
</content>
<sidebar>
<h2>Archives</h2>
<ulist>
<item><link url="#">April 2009</link></item>
<item><link url="#">March 2009</link></item>
</ulist>
<h2>Categories</h2>
<ulist>
<item><link url="#">category 1</link> (3)</item>
<item><link url="#">category 2</link> (7)</item>
<item><link url="#">category 3</link> (5)</item>
</ulist>
<h2>Meta</h2>
<ulist>
<item><link url="#">XML</link></item>
<item><link url="#">Wordpress</link></item>
</ulist>
</sidebar>
<footer>
Gabriele Romanato
</footer>
</page>
</document>
As you can see here, our document is without any style information attached to it. The first thing we're going to do is to use XSLT to transform the XML structure into an HTML one. To accomplish this task, first we need to link an XSLT stylesheet to our document:
<?xml version="1.0" encoding="utf-8" ?> <?xml-stylesheet href="../xsl/style-1.xsl" type="text/xsl"?>
Then we need to define our stylesheet:
<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"
doctype-public="-//W3C//DTD HTML 4.01//EN"
doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:template match="/">
<html>
<head>
<title>XML Blog</title>
</head>
<body>
<xsl:apply-templates />
</body>
</html>
</xsl:template>
<xsl:template match="page">
<div id="page">
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="headerimg">
<div id="headerimg">
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="h1">
<h1>
<xsl:value-of select="."/>
</h1>
</xsl:template>
<xsl:template match="description">
<div class="description">
<xsl:value-of select="."/>
</div>
</xsl:template>
<xsl:template match="content">
<div id="content">
<xsl:apply-templates />
</div>
</xsl:template>
<xsl:template match="post">
<div class="post">
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="h2">
<h2>
<xsl:value-of select="."/>
</h2>
</xsl:template>
<xsl:template match="date">
<small>
<xsl:value-of select="."/>
</small>
</xsl:template>
<xsl:template match="entry">
<div class="entry">
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="p">
<p>
<xsl:value-of select="."/>
</p>
</xsl:template>
<xsl:template match="postmetadata">
<p class="postmetadata">
<xsl:apply-templates />
</p>
</xsl:template>
<xsl:template match="link">
<a href="{@url}">
<xsl:value-of select="."/>
</a>
</xsl:template>
<xsl:template match="sidebar">
<div id="sidebar">
<form action="#" method="get" id="searchform">
<div>
<input type="text" name="s" id="s" />
<input type="submit" name="searchsubmit" id="searchsubmit" value="Search" />
</div>
</form>
<xsl:apply-templates/>
</div>
</xsl:template>
<xsl:template match="ulist">
<ul>
<xsl:for-each select="item">
<li>
<xsl:apply-templates/>
</li>
</xsl:for-each>
</ul>
</xsl:template>
<xsl:template match="footer">
<div id="footer">
<xsl:apply-templates />
</div>
</xsl:template>
</xsl:stylesheet>
As you can see here, our blog begins to take shape. By turning the XML structure into an HTML one, we can now add some CSS styles to our document. Our CSS file would look like this:
/* General styles */
body {
margin: 0;
padding: 0;
background: #fff;
color: #333;
font: 76% Verdana, sans-serif;
}
a:link, a:visited {
color: #0a0;
}
a:hover {
color: #393;
}
p, li {
line-height: 1.5;
}
h1, h2 {
font-family: "Trebuchet MS", Trebuchet, sans-serif;
color: #0a0;
}
/* Structure */
#page {
width: 85%;
margin: 0 auto;
padding: 2em 0;
}
#headerimg {
width: 100%;
height: 8.3em;
min-height: 100px;
background: transparent url("../img/header.png") repeat-x 0 0;
}
#headerimg h1 {
margin: 0;
padding: 8px 5px 5px 0;
text-align: center;
font-size: 3.5em;
}
#headerimg .description {
padding: 0 5px 5px 0;
text-align: center;
font-style: italic;
color: #393;
}
#content {
width: 70%;
float: right;
}
#sidebar {
width: 29%;
float: left;
padding-bottom: 120px;
background: transparent url("../img/sidebar.png") no-repeat 0 100%;
}
.post {
width: 90%;
margin: 0 auto;
}
.post h2 {
margin: 0 0 0.2em 0;
font-size: 1.6em;
padding-bottom: 2px;
padding-top: 6px;
border-bottom: 1px dashed;
background: transparent url("../img/h2.png") no-repeat 100% 50%;
}
.post small {
display: block;
padding: 0.2em;
background: #efc;
}
.entry {
width: 100%;
}
.entry .postmetadata {
border-top: 1px dashed #393;
border-bottom: 1px dashed #393;
padding: 0.2em 0;
}
#searchform {
margin: 0;
padding-top: 9px;
width: 100%;
}
#searchform #s {
width: 100px;
border: 1px solid #393;
background: #fff;
margin-right: 0.3em;
}
#searchform #searchsubmit {
background: #393;
font-weight: bold;
color: #fff;
}
#sidebar h2 {
margin: 7px 0;
padding: 3px;
background: #393;
color: #fff;
}
#sidebar ul {
margin: 5px 0;
padding: 0 0 0 3px;
list-style: none;
}
#sidebar li {
padding-bottom: 3px;
padding-left: 1.3em;
margin-bottom: 0.3em;
border-bottom: 1px dashed #393;
background: transparent url("../img/li.png") no-repeat 0 0.3em;
}
#sidebar li:hover {
background-image: url("../img/lihover.png");
}
#footer {
clear: both;
width: 100%;
background: #efc;
padding: 2em 0;
text-align: center;
color: #393;
}
In order to attach our CSS file to the XML document, we need to modify our XSLT stylesheet like so:
<xsl:template match="/">
<html>
<head>
<title>XML Blog</title>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
</head>
<body>
<xsl:apply-templates />
</body>
</html>
</xsl:template>
In the code above, we've inserted a link element in the main xsl:template element. Now our
XML document will be stylized according to the CSS rules specified earlier in the post. You can see the final result
here.