RecipeML - Examples

This examples page assumes you have some familiarity with creating web pages with HTML.

Example 1.

Our first example recipe has already made its way around the Internet a few times -- you've probably gotten this one as an e-mail at least once. The name of a certain department store has been changed to protect the innocent.

The Needless-Markman Hoax Chocolate-Chip Cookie

INGREDIENTS

2 cups butter
4 cups flour
2 tsp. soda
2 cups sugar
5 cups blended oatmeal
24 oz. chocolate chips
2 cups brown sugar
1 tsp. salt
1 Hershey Bar, grated
4 eggs
2 tsp. baking powder
3 cups chopped nuts (your choice)
2 tsp. vanilla

DIRECTIONS

Measure oatmeal and blend in a blender to a fine powder
Cream the butter and both sugars
Add eggs and vanilla; mix together with flour, oatmeal, salt, baking powder, and soda
Add chocolate chips, Hershey Bar and nuts
Roll into balls and place two inches apart on a cookie sheet
Bake for 10 minutes at 375 degrees

The example in the box above is coded in plain HTML. This is an image of the file "hoax.xml" displayed in Microsoft Internet Explorer 5.0.

You may have noticed some differences between the browser rendition of the RecipeML file and the HTML version. For instance, where are the labels "INGREDIENTS" and "DIRECTIONS"? Where are the numbers on the directions? Labels such as these are not included in the RecipeML recipe file itself; they are part of the style which is applied to the recipe as it is displayed. This is known as generated content. As you can see in the listing below, there is a tag which looks like this:

This is how an XML file is associated with a stylesheet. It is similar to the <LINK> tag in the head of an HTML file. This example uses a CSS1 stylesheet. Generated content is supported in CSS2 which is not yet supported in Microsoft Internet Explorer 5.0.

If you are running one of these browsers, click the link below to view the RecipeML version in your browser.

Use your browser's View Source feature to see the actual RecipeML code. It should match the listing below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE recipeml PUBLIC "-//FormatData//DTD RecipeML 0.5//EN"
  "http://www.formatdata.com/recipeml/recipeml.dtd">
<?xml-stylesheet href="dessert1.css" type="text/css"?>
<recipeml version="0.5">
  <recipe>
    <head>
      <title>The Needless-Markman Hoax Chocolate-Chip Cookie</title>
    </head>
    <ingredients>
      <ing>
        <amt><qty>2</qty><unit>cups</unit></amt>
        <item>butter</item>
      </ing>
      <ing>
        <amt><qty>4</qty><unit>cups</unit></amt>
        <item>flour</item>
      </ing>
      <ing>
        <amt><qty>2</qty><unit>tsp.</unit></amt>
        <item>soda</item>
      </ing>
      <ing>
        <amt><qty>2</qty><unit>cups</unit></amt>
        <item>sugar</item>
      </ing>
      <ing>
        <amt><qty>5</qty><unit>cups</unit></amt>
        <item>blended oatmeal</item>
      </ing>
      <ing>
        <amt><qty>24</qty><unit>oz.</unit></amt>
        <item>chocolate chips</item>
      </ing>
      <ing>
        <amt><qty>2</qty><unit>cups</unit></amt>
        <item>brown sugar</item>
      </ing>
      <ing>
        <amt><qty>1</qty><unit>tsp.</unit></amt>
        <item>salt</item>
      </ing>
      <ing>
        <amt><qty>1</qty></amt>
        <item>Hershey Bar, grated</item>
      </ing>
      <ing>
        <amt><qty>4</qty></amt>
        <item>eggs</item>
      </ing>
      <ing>
        <amt><qty>2</qty><unit>tsp.</unit></amt>
        <item>baking powder</item>
      </ing>
      <ing>
        <amt><qty>3</qty><unit>cups</unit></amt>
        <item>chopped nuts (your choice)</item>
      </ing>
      <ing>
        <amt><qty>2</qty><unit>tsp.</unit></amt>
        <item>vanilla</item>
      </ing>
    </ingredients>
    <directions>
      <step>Measure oatmeal and blend in a blender to a fine
            powder</step>
      <step>Cream the butter and both sugars</step>
      <step>Add eggs and vanilla; mix together with
            flour, oatmeal, salt, baking powder, and soda</step>
      <step>Add chocolate chips, Hershey Bar and nuts</step>
      <step>Roll into balls and place two inches apart
            on a cookie sheet</step>
      <step>Bake for 10 minutes at 375 degrees</step>
    </directions>
  </recipe>
</recipeml>

This is the listing of the "dessert1.css" stylesheet. It's very simple; you'll see a more interesting style later.

title {
  font-size : large;
  font-weight : bold;
  text-align : center;
  display : block;
}

ingredients {
  display : block;
  margin-top : 18px;
}

ing {
  display : block;
}

directions  {
  display : block;
  margin-top : 18px;
}

step {
  display : block;
}

You can download the "hoax.xml" and "dessert1.css" files to your computer to experiment with them. (Internet Explorer users: right-click the links and select "Save Target As...")