Please help. Julio Perez is the owner of the JavaJam Coffee House, a gour-met co
ID: 3835211 • Letter: P
Question
Please help.
Julio Perez is the owner of the JavaJam Coffee House, a gour-met coffee shop that serves snacks, coffee, tea, and soft drinks. Local folk music performances and poetry readings are held a few nights during the week. The customers of JavaJam are mainly college students and young professionals. Julio would like a web presence for his shop that will display his ser-vices and provide information about performances. He would like a home page, menu page, music performance schedule page, and job opportunities page. A site map for the JavaJam Coffee House website is shown in Figure 2.31. The site map describes the architecture of the website, which consists of a Home page with three main content pages: Menu, Music, and Jobs.Figure 2.32 displays a wireframe sketch of the page layout for the website. It contains a site logo, a navigation area, a main content area, and a footer area for copyright information. You have three tasks in this case study: FIGURE 2.31 JavaJam site map. FIGURE 2.32 JavaJam wireframe. FIGURE 2.33 JavaJam index.html. 1. Create a folder for the JavaJam website. 2. Create the Home page: index.html. 3. Create the Menu page: menu.html.
I did create the folder. I also did the codes but they are not working. I am new to web design. Please help!
index.html
<!DOCTYPE html>
<html lang=“en”>
<head>
<title>JavaJam Coffee House</title>
<meta charset =“utf-8”>
</head>
<body>
<h1>JavaJam Coffee House</h1>
<div>
<a href="index.html">Home</a>
<a href="menu.html"> Menu</a>
<a href="music.html">Music</a>
<a href="jobs.html">Jobs</a>
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poety Readings</li>
<li>Open Mic Night Every Friday Night</li>
</ul>
<div>54321 Route 42<br>
Ellison Bay, WI 54210<br>
1-888-555-5555
<br><br>
</div>
<div>
<small><i>Copyright © 2016 JavaJam Coffee House <br>
<a href="mailto:name@email.saintleo.edu”>name@email.saintleo.edu</a></p> <p></i></small></p> <p></div></p> <p></body></p> <p></html></p> <p><strong>menu.html</strong></p> <p><!DOCTYPE html></p> <p><html lang=“en”></p> <p><head></p> <p><title>JavaJam Coffee House</title></p> <p><meta charset =“utf-8”></p> <p></head></p> <p><body></p> <p><h1>JavaJam Coffee House</h1></p> <p><div></p> <p><a href="index.html">Home</a>
<a href="menu.html"> Menu</a>
<a href="music.html">Music</a>
<a href="jobs.html">Jobs</a>
</div>
<dt><strong>Just Java
</strong></dt>
<dd>Regular house blend, decaffeinated coffee, or flavor of the day.</dd>
<dd>Endless Cup $2.00</dd>
<dt><strong>Cafe au Lait
</strong></dt>
<dd>House blended coffee infused into a smooth, steamed milk.</dd>
<dd>Single $2.00 Double $4.00</dd>
<dt><strong>Ice Cappuccino
</strong></dt>
<dd>Sweetened espresso blended with icy-cold milk and served in a chilled glass.</dd>
<dd>$4.75</dd>
</dl>
<div>54321 Route 42<br>
Ellison Bay, WI 54210<br>
1-888-555-5555
<br><br>
</div>
<div>
<small><i>Copyright © 2016 JavaJam Coffee House <br>
<a href="mailto:name@email.saintleo.edu”>name@email.saintleo.edu</a>
</i></small>
</div>
</body>
</html>
javajam.css
body
{
background:#F5F5DC;
color:#2E0000;
}
header
{
background:#D2B48C;
}
footer
{
background:# D2B48C;
color:#000000;
}
Explanation / Answer
PLease find the code below:
Please keep all the html and css files in the same folder.
1. home.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>JavaJam Coffee House</h1>
<div>
<a href="home.html">Home</a> <a
href="menu.html"> Menu</a> <a
href="musicschedule.html">Music</a> <a
href="careers.html">Jobs</a>
</div>
<ul>
<li>Specialty Coffee and Tea</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poety Readings</li>
<li>Open Mic Night Every Friday Night</li>
</ul>
<div>
54321 Route 42<br> Ellison Bay, WI 54210<br> 1-888-555-5555
<br>
<br>
</div>
<div>
<small><i>Copyright © 2016 JavaJam Coffee House <br>
<a href="mailto:name@email.saintleo.edu">name@email.saintleo.edu</a>
</i></small>
<div class="col-md-3">
<h4>Sitemap</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
</html>
2. menu.html
<!DOCTYPE html>
<html>
<head>
<title>JavaJam Coffee House</title>
<meta charset='utf-8'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>JavaJam Coffee House</h1>
<div>
<a href="home.html">Home</a> <a
href="menu.html"> Menu</a> <a
href="musicschedule.html">Music</a> <a
href="careers.html">Jobs</a>
</div>
<dt>
<strong>Just Java </strong>
</dt>
<dd>Regular house blend, decaffeinated coffee, or flavor of the
day.</dd>
<dd>Endless Cup $2.00</dd>
<dt>
<strong>Cafe au Lait </strong>
</dt>
<dd>House blended coffee infused into a smooth, steamed milk.</dd>
<dd>Single $2.00 Double $4.00</dd>
<dt>
<strong>Ice Cappuccino </strong>
</dt>
<dd>Sweetened espresso blended with icy-cold milk and served in a
chilled glass.</dd>
<dd>$4.75</dd>
</dl>
<div>
54321 Route 42<br> Ellison Bay, WI 54210<br> 1-888-555-5555
<br>
<br>
</div>
<div>
<small><i>Copyright © 2016 JavaJam Coffee House <br>
<a href="mailto:name@email.saintleo.edu”>name@email.saintleo.edu</a><br/> </i></small><br/> <br/> <div class="col-md-3">
<h4>Sitemap</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
3. musicschedule.html:
<!DOCTYPE html>
<html>
<head>
<title>JavaJam Coffee House</title>
<meta charset='utf-8'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>JavaJam Coffee House</h1>
<div>
<a href="home.html">Home</a> <a
href="menu.html"> Menu</a> <a
href="musicschedule.html">Music</a> <a
href="careers.html">Jobs</a>
</div>
<br>
<style type="text/css">
body
{
font-family: arial;
}
th,td
{
margin: 0;
text-align: center;
border-collapse: collapse;
outline: 1px solid #e3e3e3;
}
td
{
padding: 5px 10px;
}
th
{
background: #666;
color: white;
padding: 5px 10px;
}
td:hover
{
cursor: pointer;
background: #666;
color: white;
}
</style>
</head>
<body>
<table width="80%" align="center" >
<div id="head_nav">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thrusday</th>
<th>Friday</th>
</tr>
</div>
<tr>
<th>10:00 - 11:00</th>
<td>Rcok</td>
<td>Code Jazz</td>
<td title="No Class" class="Holiday"></td>
<td>Soft music</td>
<td>Hard rock</td>
</div>
</tr>
<tr>
<th>11:00 - 12:00</td>
<td>Rcok</td>
<td>Code Jazz</td>
<td title="No Class" class="Holiday"></td>
<td>Soft music</td>
<td>Hard rock</td>
</div>
</tr>
<tr>
<th>12:00 - 01:00</td>
<td>Rcok</td>
<td>Code Jazz</td>
<td>Melody</td>
<td>Soft music</td>
<td>Hard rock</td>
</div>
</tr>
<tr>
<th>01:00 - 02:00</td>
<td>Rcok</td>
<td>Code Jazz</td>
<td title="No Class" class="Holiday"></td>
<td>Soft music</td>
<td>Hard rock</td>
</div>
</tr>
<tr>
<th>02:00 - 03:00</td>
<td>Rcok</td>
<td>Code Jazz</td>
<td>No music</td>
<td>Soft music</td>
<td>Hard rock</td>
</div>
</tr>
</table>
<br>
<div>
<small><i>Copyright © 2016 JavaJam Coffee House <br>
<a href="mailto:name@email.saintleo.edu”>name@email.saintleo.edu</a><br/> </i></small><br/> <br/> <div class="row">
<div class="col-md-3">
<h4>Sitemap</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
4. careers.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>JavaJam Coffee House</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>JavaJam Coffee House</h1>
<div>
<a href="home.html">Home</a> <a
href="menu.html"> Menu</a> <a
href="musicschedule.html">Music</a> <a
href="careers.html">Jobs</a>
</div>
<h4>We are currently hiring for below positions:</h4>
<ul>
<li>Counter Guy</li>
<li>Delivery guy</li>
<li>Billing partner</li>
</ul>
<h4>Please contact below address:</h4>
<div>
54321 Route 42<br> Ellison Bay, WI 54210<br> 1-888-555-5555
<br>
<br>
</div>
<div>
<small><i>Copyright © 2016 JavaJam Coffee House <br>
<a href="mailto:name@email.saintleo.edu">name@email.saintleo.edu</a>
</i></small>
<div class="col-md-3">
<h4>Sitemap</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
</html>
5. style.css:
@CHARSET "ISO-8859-1";
body
{
background:#F5F5DC;
color:#2E0000;
}
header
{
background:#D2B48C;
}
footer
{
background:# D2B48C;
color:#000000;
}