CS 347: Lab 1 – HTML
Welcome to the first CS 347 lab. By now you have already watched the videos for lecture 1 on your own. You will complete these lab exercises together in small groups.
Within your breakout room, designate one of your team to be the screen sharer. (Screen sharer, share your screen.) The screen sharer should also claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number. Complete the associated task below. The screen sharer should be careful not to dominate. All members should contribute ideas.
When you are done, the screen sharer submits your group’s solution on Crowdsource. If you finish early, you are free to work on other tasks—but please don’t submit them.
Task 1
Recreate this structure:
Use this raw text:
Kringla Ingredients 1 1/2 cups white sugar 1 egg 2 1/2 cups sour cream 4 cups all-purpose flour 2 teaspoons baking soda 1/4 teaspoon salt Directions Preheat oven to 350 degrees F (175 degrees C). Lightly grease or line baking sheets with parchment paper. Combine the sugar, beaten egg and sour cream together. Mix in the flour, baking soda and salt. Blend thoroughly. Divide dough in half and form each half into a long roll. (Note: If your kitchen is warm, keep the half of dough you're not working with in the refrigerator.) Cut off a narrow slice of dough. Roll lightly with hands on lightly floured board into pencil-like strip about 7 inches long. Form into a figure "8", and pinch ends together. Place on cookie sheet. Repeat with remaining dough. Bake at 350 degrees F (175 degrees C) for 12 to 15 minutes.
Task 2
Recreate this structure:
Use this raw text:
/home/duke cs347 blog project1 project2 node_modules src job_applications facebook nsa memes cats movies squirrels nsfw memoir
Task 3
Recreate this structure, whose screenshot has been truncated because of its length:
The definition list element will come in handy here. I didn’t discuss it in the videos.
Use this raw text:
Cloud Types Definitions courtesy of the National Weather Service (weather.gov). Cirrus Detached clouds in the form of white, delicate filaments, mostly white patches or narrow bands. They may have a fibrous (hair-like) and/or silky sheen appearance. Cirrocumulus Thin, white patch, sheet, or layered of clouds without shading. They are composed of very small elements in the form of more or less regularly arranged grains or ripples. Cirrostratus Transparent, whitish veil clouds with a fibrous (hair-like) or smooth appearance. A sheet of cirrostratus which is very extensive, nearly always ends by covering the whole sky. Altocumulus White and/or gray patch, sheet or layered clouds, generally composed of laminae (plates), rounded masses or rolls. They may be partly fibrous or diffuse and may or may not be merged. Altostratus Gray or bluish cloud sheets or layers of striated or fibrous clouds that totally or partially covers the sky. They are thin enough to regularly reveal the sun as if seen through ground glass. Nimbostratus Resulting from thickening Altostratus, This is a dark gray cloud layer diffused by falling rain or snow. It is thick enough throughout to blot out the sun. Also, low, ragged clouds frequently occur beneath this cloud which sometimes merges with its base. Cumulus Detached, generally dense clouds and with sharp outlines that develop vertically in the form of rising mounds, domes or towers with bulging upper parts often resembling a cauliflower. Cumulonimbus The thunderstorm cloud, this is a heavy and dense cloud in the form of a mountain or huge tower. The upper portion is usually smoothed, fibrous or striated and nearly always flattened in the shape of an anvil or vast plume. Stratocumulus Gray or whitish patch, sheet, or layered clouds which almost always have dark tessellations (honeycomb appearance), rounded masses or rolls. Except for virga they are non-fibrous and may or may not be merged. Stratus A generally gray cloud layer with a uniform base which may, if thick enough, produce drizzle, ice prisms, or snow grains. When the sun is visible through this cloud, its outline is clearly discernible.
Task 4
Recreate this structure, whose screenshot has been truncated because of its length:
Use fragment identifiers to make the links jump to the other sections of the page. See the section Linking to an element on the same page in the anchor documentation on the Mozilla Developer Network for an example.
Use this raw text:
Common Spices A B C D E F G H I J K L M N O P Q R S T U V W X Y Z A allspice B basil bay leaves black peppercorns C cayenne chili powder cinnamon cloves cumin curry powder D dill weed G garlic powder ginger N nutmeg O onion powder oregano P paprika R red pepper flakes rosemary S saffron sage T tarragon thyme V vanilla extract
Reference Solutions
kringla.html
<!DOCTYPE html>
<html>
<body>
<h1>Kringla</h1>
<h2>Ingredients</h2>
<ul>
<li>1 1/2 cups white sugar</li>
<li>1 egg</li>
<li>2 1/2 cups sour cream</li>
<li>4 cups all-purpose flour</li>
<li>2 teaspoons baking soda</li>
<li>1/4 teaspoon salt</li>
</ul>
<h2>Directions</h2>
<ol>
<li>Preheat oven to 350 degrees F (175 degrees C). Lightly grease or line baking sheets with parchment paper.</li>
<li>Combine the sugar, beaten egg and sour cream together. Mix in the flour, baking soda and salt. Blend thoroughly.</li>
<li>Divide dough in half and form each half into a long roll. (Note: If your kitchen is warm, keep the half of dough you're not working with in the refrigerator.)</li>
<li>Cut off a narrow slice of dough. Roll lightly with hands on lightly floured board into pencil-like strip about 7 inches long. Form into a figure "8", and pinch ends together. Place on cookie sheet. Repeat with remaining dough.</li>
<li>Bake at 350 degrees F (175 degrees C) for 12 to 15 minutes.</li>
</ol>
</body>
</html>
directory.html
<!DOCTYPE html>
<html>
<body>
<h1><code>/home/duke</code></h1>
<ul>
<li>
<code>cs347</code>
<ul>
<li><code>blog</code></li>
<li><code>project1</code></li>
<li>
<code>project2</code>
<ul>
<li><code>node_modules</code></li>
<li><code>src</code></li>
</ul>
</li>
</ul>
</li>
<li>
<code>job_applications</code>
<ul>
<li><code>facebook</code></li>
<li><code>nsa</code></li>
</ul>
</li>
<li>
<code>memes</code>
<ul>
<li><code>cats</code></li>
<li><code>movies</code></li>
<li><code>squirrels</code></li>
<li><code>nsfw</code></li>
</ul>
</li>
<li>
<code>memoir</code>
</li>
</ul>
</body>
</html>
clouds.html
<!DOCTYPE html>
<html>
<body>
<h1>Cloud Types</h1>
Definitions courtesy of the National Weather Service (<a href="https://weather.gov">weather.gov</a>).
<dl>
<dt>Cirrus</dt>
<dd>Detached clouds in the form of white, delicate filaments, mostly white patches or narrow bands. They may have a fibrous (hair-like) and/or silky sheen appearance.</dd>
<dt>Cirrocumulus</dt>
<dd>Thin, white patch, sheet, or layered of clouds without shading. They are composed of very small elements in the form of more or less regularly arranged grains or ripples.</dd>
<dt>Cirrostratus</dt>
<dd>Transparent, whitish veil clouds with a fibrous (hair-like) or smooth appearance. A sheet of cirrostratus which is very extensive, nearly always ends by covering the whole sky.</dd>
<dt>Altocumulus</dt>
<dd>White and/or gray patch, sheet or layered clouds, generally composed of laminae (plates), rounded masses or rolls. They may be partly fibrous or diffuse and may or may not be merged.</dd>
<dt>Altostratus</dt>
<dd>Gray or bluish cloud sheets or layers of striated or fibrous clouds that totally or partially covers the sky. They are thin enough to regularly reveal the sun as if seen through ground glass.</dd>
<dt>Nimbostratus</dt>
<dd>Resulting from thickening Altostratus, This is a dark gray cloud layer diffused by falling rain or snow. It is thick enough throughout to blot out the sun. Also, low, ragged clouds frequently occur beneath this cloud which sometimes merges with its base.</dd>
<dt>Cumulus</dt>
<dd>Detached, generally dense clouds and with sharp outlines that develop vertically in the form of rising mounds, domes or towers with bulging upper parts often resembling a cauliflower.</dd>
<dt>Cumulonimbus</dt>
<dd>The thunderstorm cloud, this is a heavy and dense cloud in the form of a mountain or huge tower. The upper portion is usually smoothed, fibrous or striated and nearly always flattened in the shape of an anvil or vast plume.</dd>
<dt>Stratocumulus</dt>
<dd>Gray or whitish patch, sheet, or layered clouds which almost always have dark tessellations (honeycomb appearance), rounded masses or rolls. Except for virga they are non-fibrous and may or may not be merged.</dd>
<dt>Stratus</dt>
<dd>A generally gray cloud layer with a uniform base which may, if thick enough, produce drizzle, ice prisms, or snow grains. When the sun is visible through this cloud, its outline is clearly discernible.</dd>
</dl>
</body>
</html>
hyper.html
<!DOCTYPE html>
<html>
<body>
<h1>Properties of N-dimensional Boxes</h1>
<table border="1" cellspacing="0" cellpadding="3">
<tr>
<th>ndimensions</th>
<th>nvertices</th>
<th>nedges</th>
<th>nfaces</th>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td>0</td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>8</td>
<td>12</td>
<td>6</td>
</tr>
<tr>
<td>4</td>
<td>16</td>
<td>32</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>32</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>6</td>
<td>64</td>
<td>192</td>
<td>240</td>
</tr>
<tr>
<td>…</td>
<td>…</td>
<td>…</td>
<td>…</td>
</tr>
<tr>
<td>n</td>
<td>2<sup>n</sup></td>
<td>nvertices × <sup>n</sup>⁄<sub>2</sub></td>
<td>nedges × (n - 1) ⁄ 4</td>
</tr>
</table>
</body>
</html>
spices.html
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<h1>Common Spices</h1>
<a href="#a">A</a>
<a href="#b">B</a>
<a href="#c">C</a>
<a href="#d">D</a>
E
F
<a href="#g">G</a>
H
I
J
K
L
M
<a href="#n">N</a>
<a href="#o">O</a>
<a href="#p">P</a>
Q
<a href="#r">R</a>
<a href="#s">S</a>
<a href="#t">T</a>
U
<a href="#v">V</a>
W
X
Y
Z
<h3 id="a">A</h3>
allspice
<h3 id="b">B</h3>
basil<br>
bay leaves<br>
black peppercorns
<h3 id="c">C</h3>
cayenne<br>
chili powder<br>
cinnamon<br>
cloves<br>
cumin<br>
curry powder
<h3 id="d">D</h3>
dill weed
<h3 id="g">G</h3>
garlic powder<br>
ginger
<h3 id="n">N</h3>
nutmeg
<h3 id="o">O</h3>
onion powder<br>
oregano
<h3 id="p">P</h3>
paprika
<h3 id="r">R</h3>
red pepper flakes<br>
rosemary
<h3 id="s">S</h3>
saffron<br>
sage
<h3 id="t">T</h3>
tarragon<br>
thyme
<h3 id="v">V</h3>
vanilla extract
</body>
</html>