Be the first to write a review
A Semi-Dynamic Sitemap with XML, JavaScript and CSS Part Two
Welcome to part two of the sitemap tutorial. In part one, we created the XML data store that holds information about all of the pages in the site, and we built the main body of JavaScripts that acts as the mechanics behind the page to dynamically write the content of the page. In this article, we will be returning to the JavaScript file in order to improve the HTML output. We will also create an HTML file and a CSS file to control the presentation of the output. Let's get started with the HTML page.
The HTML
The HTML page that holds the generated sitemap need not be very complicated; all we need to worry about is ensuring that the document is valid and making the call to the initial function in the JavaScript file. The following page is all we really need:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01/EN" http://www.w3.org/TR/html4/strict.dtd>
<html lang="en">
<head>
<title>Site Map</title>
<script type="text/javascript" src="sitemap.js">
</script
</head>
<body>
<p></p>
</body>
</html>
The empty <p> element is used to meet validation standards because the <body> tag requires at least one child element, as does the <head> element. Thisis really all that is needed because the rest of the content is generated by the JavaScript. Other than this, I don’t think anything else here requires much explanation. Save the file as sitemap.htm and reopen the JavaScript file to make some additions.
Dan Wellman
Dan Wellman is an author and web developer based in the UK. Dan has written three books so far; the latest, jQuery UI 1.7: The User Interface Library for jQuery, was released at the end of 2009.
Dan has been writing web development tutorials for over 5 years and works by day for a local digital media agency in his home town of Southampton.