For our first assignment, the instructor asked us to create a web page with a recipe, and to use various HTML tags to structure the page. You can see my code below, or click here to see the code as it would be viewed in your web browser. This assignment specifically requested us not to use any CSS styling elements.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Immuno Pasta</title>
</head>

<body>
	<header>
    	<h1>Immuno Pasta</h1>
        <figure> 
        	<img src="immunopasta.jpg">
            <figcaption>A picture of Immuno Pasta</figcaption>
        </figure>
        <nav>
        	<ul>
            	<li><a href="#intro">Introduction</a></li>
                <li><a href="#ingred">Ingredients</a></li>
                <li><a href="#dir">Directions</a></li>
                <li><a href="#info">Nutrition Information</a></li>
            </ul>
        </nav>
    </header>
    
    <h2><a name="intro">Introduction</a></h2>

	<p>Long, long ago when I was a tiny undergraduate wandering around the <a href="http://www.emory.edu/home/index.html">Emory</a> campus, I met some very enthusiastic people giving away cookies in front of the dining hall at orientation. I'd just arrived on campus, didn't know anyone, and truth be told was feeling a bit lost. I needed a community, and so I started hanging out with these people.</p>

	<p>Chip was the leader. He was the pastor at <a href="http://breadcoffeehouse.org/">Bread Coffehouse</a>, a small yellow house conveniently located across the street from my dorm. Chip was always cheerful - at times so much so that you wondered if he was really alright. Beth was quieter, but funny, with long blonde curls and an addiction to coffee. Will was a Classics major who had switched to Astronomy - or from Astronomy to Classics, I can't quite remember which. At any rate, they made me feel welcome at a time when I felt rather lonely, and I spent many nights at Bread, drinking iced coffee and listening to local musicians. Beth and I chatted, discussing our different religious backgrounds while she taught me to make cinnamon rolls from scratch. Bread had a lot of recipes that had been shared by many people, but the one that stuck with me was Immuno Pasta.</p>

	<p>Immuno Pasta is a bright orange sauce made with carrots, tomatoes, and celery, served over penne (or some other large noodle). It gets its name from the fact that it is packed with enough vegetables to supposedly cure cancer - or at least a cold. I've made it many times since college - it's great for making in large batches and freezing, and it makes your kitchen smell <i>wonderful</i>.</p> 
    
    <h2><a name="ingred">Ingredients</a></h2>
    <ul>
    	<li>1.5 cups olive oil</li>
        <li>2 cups red onion</li>
        <li>1/2 cup celery</li>
        <li>3 garlic cloves</li>
        <li>1/2 teaspoon salt</li>
        <li>1/8 teaspoon pepper</li>
        <li>1 14-ounce can diced tomatoes (you can also use fresh tomatoes)</li>
        <li>1 teaspoon red pepper flakes</li>
        <li>10 fresh basil leaves</li>
        <li>1/2 cup carrot</li>
        <li>1 pound penne noodles, cooked and drained.</li>
    </ul>
    
    <h2><a name="dir">Directions</a></h2>
    <ol>
    	<li>Chop celery, onion, and carrot. Heat them in a large skillet with the olive oil, garlic, salt and pepper on high for 15-17 minutes.</li>
        <li>Chop and add tomatoes and red pepper flakes.  Cover and simmer for 30 minutes, stirring occasionally. (The vegetables should be soft by this point.)</li>
        <li>Add basil.</li>
        <li>Pour the mixture into a blender or food processer and blend.  You will probably need to do this in batches.  Note: Since the sauce is still hot, you will not be able to put the lid on the blender without it exploding off due to the heat.  Instead, hold a towel tightly over the mouth of the blender, being careful not to touch the steam.</li>
        <li>Serve over penne noodles. Feeds 6-8</li>
    </ol>
      
	<h2><a name="info">Nutrition Information</a></h2>
    
    	<table>
        	<thead>
        		<tr>
        			<th>Nutritional Information</th>
            		<th>grams per serving</th>
            	</tr>
        	</thead>
            <tbody>
            	<tr>
                	<td>Calories</td>
                    <td>300kcal</td>
                </tr>
                <tr>
                	<td>Fat</td>
                    <td>20g</td>
               </tr>
               <tr>
               		<td>Protein</td>
                    <td>0g</td>
               </tr>
               <tr>
               		<td>Sodium</td>
                    <td>2g</td>
               </tr>     
            </tbody>    
        </table>  
 <br />            
<footer>Recipe by Siobhain Rivera. Original photo from <a href="https://store.mott50.com/blog/boost-your-immune-system-with-these-pumpkin-recipes/">Boost your immune system with these pumpkin recipes/Mott50 Blog</a></footer>
</body>
</html>
  • Date: Spring 2014
  • Class: Information Architecture for the Web