Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
Like this article? We recommend Rendering the Results as HTML

Rendering the Results as HTML

To render the results on a web page, we’ll need to create an HTML file that embeds the GoogleAPI.js file we just created. Because the GoogleAPI object is self-contained, there are no other files that need to be included, but we do need to create a div element with an id of gnews in order to write the widget to the HTML file (Listing 3).

Listing 3: The GoogleAPI Object Renders the Widget in the HTML File (index.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Creating a Custom News Search Widget using the Google Search API</title> <script type="text/javascript" src="assets/js/GoogleAPI.js"></script> <link type="text/css" rel="stylesheet" href="assets/css/googleapi.css" /> </head> <body> <div id="gnews">Loading news posts...</div> </body> </html>

We’ve also included a CSS file called googleapi.css. The CSS offers a lot of flexibility, allowing us to control the design of the results in any way we choose.

  • + Share This
  • 🔖 Save To Your Account