A simple web page format that works with windows and ASP

• Download source code - 0.4 Kb
• Download GRML file/web viewer - 273.4 Kb

Introduction

The purpose of this article is to introduce you to a new way of loading and viewing content from your filesystem (and in subsequent articles, downloading and viewing web pages in a web browser). This article discusses an approach for creating and viewing file content that uses web-based content for saving, viewing, and retrieving.

Background

This tutorial will show you how to use a new file type with your filesystem and web pages (if you have a webserver). You should have a basic understanding of the way web pages work and have some experience with a markup language (HTML or XML).

Creating a file.

Let's get started by creating a simple file to display data. The file will contain a markup language called GordonRhodes Markup Language or GRML. This example will be used to define content that describes data for a movie that I saw this year, The Matrix.

First, open up notepad (or your favorite text editor) and type the following (or just cut and paste it).

<a class=rslt_13 type=item>Matrix Image 1</>

This line is called a tag pair and is the way GRML file viewers and web browsers read and display content from the file or web page. All tag pairs consist of an open tag and a close tag, with the content sitting between the two tags. The first tag describes the content, with class determining the location of the content, name associating the content into groups, and type providing the attribute of the content.

For the purposes of this article, the name attribute will not be used.

The rslt_13 command tells the GRML file viewer or web browser that the content in the tag pair should be displayed in the control or window that uses rslt_13 data. The GRML file viewer and web browser that is shown in the screenshot is called Pioneer. It displays GRML file and web pages and will demonstrate all the capabilities that will be covered in this tutorial.

The item attribute of type tells the GRML file viewer that this content is an item of the rslt_13 control (or window). However, to display the content, it needs to be attached to a descriptive column. So, let's add one.

<a class=column_13 type=item>Title</>

This tag pair describes a column used to display items for rslt_13. In this case, the tag pair has defined one column, called "Title". So, now we have a column and result. Before it can be viewed, document tags must be added. These are the same as HTML except they say GRML. Once you add a document open and document close tag, the code should like this:

<grml>
<a class=column_13 type=item>Title</>
<a class=rslt_13 type=item>Matrix Image 1</>
</grml>

You have just created your first GRML file. This is the way all GRML files should look. Some have more tag pairs, others fewer. However, they all have a document open tag, a series of tag pairs, and a document close tag.

Save the file and open it in Pioneer. To open a file in Pioneer, just hit Ctrl+O or right-click in the Workspace window and select Open. Find the file you just saved and open it. This is what you should see:

Adding Content

Let's add some more content. Add the following tag pairs between the document tags and save the file.

<grml>
<a class=rslt_13 type=item>Matrix Image 2</>
<a class=rslt_13 type=item>Matrix Image 3</>
<a class=rslt_13 type=item>Matrix Image 4</>
<a class=rslt_13 type=item>Matrix Image 5</>
<a class=rslt_13 type=item>Matrix Image 6</>
<a class=rslt_13 type=item>Matrix Image 7</>
<a class=rslt_13 type=item>Matrix Image 8</>
<a class=rslt_13 type=item>Matrix Image 9</>
</grml>

Once you have saved the file, click the 'Refresh' button or press 'F5'. You should now see the following:

Adding Hyperlinks

Okay, this a basic way to add content. What about web items such as hyperlinks. Well, to add a hyperlink to one of your results, add the following tag pairs.

<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_58.jpg</>
<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_59.jpg</>
<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_60.jpg</>
<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_61.jpg</>
<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_62.jpg</>
<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_63.jpg</>
<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_64.jpg</>
<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_65.jpg</>
<a class=rslt_13 type=link>http://whatisthematrix.warnerbros.com/rl_img/onset_reloaded_66.jpg</>

Once again, save the file and hit the 'Refresh' button or press 'F5'. The window should now look like this:

Try clicking on one of the items in the window. If you are connected to the internet, it will launch a web browser and take you to that link. That is because the content attribute is a 'link'. Link items are used to describe hyperlinks in a GRML file or web page.

Adding Images

Now, let's add a non-text item to the window. Since The Matrix has a lot of great visual scenes, we will add some images to this file. Add the following lines to your file and save it.

<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_58.gif</>
<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_59.gif</>
<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_60.gif</>
<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_61.gif</>
<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_62.gif</>
<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_63.gif</>
<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_64.gif</>
<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_65.gif</>
<a class=rslt_13 type=image>http://whatisthematrix.warnerbros.com/rl_img/bts_66.gif</>

The type for these tag pairs describe the content as an image. When you have the above tag pairs included in your file, save it and reload the file. You should see this:

Now, to see the images, you need to right-click in the window where the content (results) are displayed and select the Picture menu item (in the context menu). Or, you could just press Ctrl+J or Ctrl+K until you see the images. It should look as follows:

The images are kind of small and hard to see. The way to fix that is by setting the height and width of the images so that they are easier on the eyes. Add the following lines to your file.

<a class=rslt_13 type=imageheight>60</>
<a class=rslt_13 type=imagewidth>90</>

Once you have saved the file, refresh it. The images are much larger and easier to see. Guess what, it looks the same as in the screenshot above.

Conclusion

Congratulations! You have completed your first GRML file. If you want, you can save this file as a web page and download it from a URL if you are so inclined. However, one step at a time, and in this article you have learned the tags of a GRML file, what they do, and how to access the hyperlinks and view the images. In the next article, you will learn how to create more advanced GRML files and learn how to download GRML files over the web.

Until then, have fun experimenting with GRML and Pioneer.

Related Articles

An alternative to HTML and current web browsers
Code Project/ASP.NET - HTML, XML, RML -- making a better markup language for the web