HTML, Stephanie Falkowski

To get more practice at using HTML, I chose to put Carl Sandburg’s poem “Nocturne in a Deserted Brickyard” into this language.

I set the entire poem up as a block quote, by using block quote tags before and after the text, inclusive of title and citation. For the title, I decided on a heading level 2, judging that since I set this up as a block quote, there would be at least one higher level of heading on this hypothetical webpage.

Image showing the HTML for a block quote and header level 2. — Figure 1 Showing the HTML for a block quote and header level 2.

The first line of the poem begins with an indent, and so to include this indent, I used the <pre> element to tell the computer that this indent is not for the purposes of keeping my place in the lines of code, but that it is part of the text and belongs in the displayed version. This is shown in step 3 of Figure 2.

Indent of first line using <pre srcset= — Figure 2 Indent of first line using <pre> tag.

After entering in each line, I added the break <br> element so that the next line would appear on the next line. Without these line breaks, the lines run together as though they were a prose paragraph and not verse.

Figure 3 Using line break tags to separate lines of poetry.

After the final line break, I used the <cite></cite> citation tags to properly attribute this poem to Carl Sandburg. This is shown in step 10 of Figure 4.

The final HTML form of Carl Sandburg's "Nocturne in a Deserted Brickyard," including the citation. — Figure 4 The final HTML form of Carl Sandburg’s “Nocturne in a Deserted Brickyard,” including the citation.

original form of barbecue spareribs recipie — Recipe for Barbecue Spareribs as printed in the 1961 Betty Crocker’s New Picture Cook Book. Note the lack of formatting.

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.

Image showing the HTML entries behind the main header and first ordered list. — Figure 1 Showing the HTML entries behind the main header and first ordered list.

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.

Figure 2 Step 11 shows the new subheading after the ordered list.

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.

Image showing the input for unordered lists in HTML — Figure 3 Showing the input for unordered lists in HTML

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.

Figure 4 The complete recipe for Barbecue Spareribs with Texas Barbecue Sauce in HTML.