Creating the Front End of a Headlines System with AJAX - Creating the (X)HTML markup and CSS rules of the headlines application
(Page 3 of 5 )
As I said in the last few lines you read, in this section I'll provide you with some concrete code to achieve specifically the look and feel that I want to apply to the headlines application. Based upon this concept, I'm going to start by listing the complete (X)HTML markup, along with the set of CSS declarations that render the user interface that you saw before.
That being said, here is how the full presentational layer that corresponds to the AJAX-driven application looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>AJAX-BASED NEWS SYSTEM</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background: #fff;
}
p{
text-align: center;
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: bold 18px Arial, Helvetica, sans-serif;
color: #009;
text-decoration: none;
}
#headlinescontainer{
text-align: center;
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
background: #eee url(bg1.jpg) top center repeat-x;
border: 1px solid #000;
}
#headlinescontainer img{
border: 1px solid #666;
}
#controlpanel{
text-align: center;
width: 400px;
height: 30px;
padding: 5px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p>AJAX-BASED NEWS SYSTEM</p>
<div id="headlinescontainer"></div>
<div id="controlpanel">
<img src="backbtn.gif" width="50" height="20" />
<img src="forwardbtn.gif" width="50" height="20" />
</div>
</body>
</html>
As illustrated above, the structural (X)HTML markup of the application is made up of two main DIVs. The first one will hold the text that belongs to each headline, as well as its corresponding image. The second one, identified as "controlpanel," will be used for placing the navigational buttons that I showed in the previous section. Definitely this isn't rocket science at all!
In addition, you'll notice that I included some images for building the mentioned control buttons, as well as a background image, handy for styling the corresponding main container of the headlines application. However, fear not, since at the beginning of this article you'll find a ZIP file containing all the supporting material that accompanies this tutorial, therefore you can start quickly using this application.
Once the whole presentational layer that comprises the AJAX-based headlines system has been properly defined, it's time to jump to the next level. Now we're going to begin creating the group of JavaScript functions tasked with retrieving the corresponding headlines in the background, as well as with displaying them to the browser.
To see how all these tasks will be performed, keep on reading.
Next: Defining the behavioral layer of the headlines application >>
More JavaScript Articles
More By Alejandro Gervasio
