For my first attempt at coding, I chose a favorite barbecue spareribs recipe from Betty Crocker’s 1961 New Picture Cook Book.
First, because this recipe was not originally written in list format, either for ingredients or instructions, I had to type out the recipe introducing these style conventions. Then using codepen.io, I put it into HTML. I began with the heading, putting the title of the recipe between header one tags, as shown in the first steps below in Figure 2.
From there, I added the first ordered list, using the <ol> </ol> tags before and after, and sandwiching each step of the instructions between list item <li></li> tags. This produced a numbered list on the right hand pane.
The next part of the recipe is another recipe unto itself, so I added a lower level of heading, heading 2, to the words “Texas Barbecue Sauce,” just as I had done for the main heading, only now using <h2></h2> in place of <h1></h1>. A screenshot of the step is below in Figure 2.
After this is the unordered ingredients list, which got wrapped in <ul></ul> unordered list tags. For each ingredient, however, the same tags were used as in the ordered list to denote a list item. Because I used unordered list tags on this list, each ingredient was rendered with a bullet point in the right hand pane, as seen in Figure 3.
For the instruction section of this sub-recipe, I returned to using the ordered list <ol> </ol> tags. And thusly, my recipe for barbecue spareribs is now in HTML format.
