Click here to Skip to main content
14,089,609 members
Click here to Skip to main content
Add your own
alternative version


17 bookmarked
Posted 6 Jun 2003

A simple web page format that works with windows and ASP

, 6 Jun 2003
Rate this:
Please Sign up or sign in to vote.
Introduction to using a markup language that displays file and web page content



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.


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:

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

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.

<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</>

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

More Results

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></>
<a class=rslt_13 type=link></>
<a class=rslt_13 type=link></>
<a class=rslt_13 type=link></>
<a class=rslt_13 type=link></>
<a class=rslt_13 type=link></>
<a class=rslt_13 type=link></>
<a class=rslt_13 type=link></>
<a class=rslt_13 type=link></>

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></>
<a class=rslt_13 type=image></>
<a class=rslt_13 type=image></>
<a class=rslt_13 type=image></>
<a class=rslt_13 type=image></>
<a class=rslt_13 type=image></>
<a class=rslt_13 type=image></>
<a class=rslt_13 type=image></>
<a class=rslt_13 type=image></>

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:

Image Results

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:

Image View

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.


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


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Toby Jacob Rhodes
Web Developer
United States United States
Developing with MFC for a couple of years now. Working at getting my new web browsers just right.

My website is at GRML web browsers.

Pioneer Report MDI (GRML/CSV/delimited web browsers)

Other stuff:
free myspace backgrounds | Free Images Graphics | Myspace profile editor

I enjoy Memphis, TN and it is great coz there are absolutely no major sports teams (well, except for the Grizzlies).

You may also be interested in...

Comments and Discussions

GeneralQuestion about your website. Pin
DaveThorn21-Jan-04 5:20
memberDaveThorn21-Jan-04 5:20 
GeneralXML compliance Pin
Arjan Einbu14-Jun-03 1:04
memberArjan Einbu14-Jun-03 1:04 
GeneralHe will ignore you Pin
dog_spawn9-Nov-03 7:32
memberdog_spawn9-Nov-03 7:32 
GeneralRe: He will ignore you Pin
Arjan Einbu9-Nov-03 21:43
memberArjan Einbu9-Nov-03 21:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190518.1 | Last Updated 7 Jun 2003
Article Copyright 2003 by Toby Jacob Rhodes
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid