Lab 5 - Jake's Coffee Shop
1)
HTML Coding:
<!DOCTYPE html>
<html>
<head>
<h1>
Jake's Coffee Shop
</h1>
</head>
<body>
<div>
<a href="#Home">Home</a>
<a href="#Menu">Menu</a>
<a href="#Music">Music</a>
<a href="#Jobs">Jobs </a>
</div>
<div>
<p>Come in and experience...</p>
<img src="coffee.jpg"/>
<br/>
<ul>
<li>Speciality Coffee And Tea </li>
<li>Freshly made sandwiches </li>
<li>Bagels, Muffins and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open mic nights</li>
<li>...</li>
</ul>
<p>23 Pine Road </p>
<p>Nottingham, NGI 5YU </p>
<p>0115 9324567</p>
<br>
</div>
<footer>
<p>Copyright @ 2011 Jake's Coffee House </p>
<a href="jake@jcoffee.com">jake@jcofee.com</a>
</footer>
</body>
</html>
HTML Coding:
<!DOCTYPE html>
<html>
<head>
<h1>
Jake's Coffee Shop
</h1>
</head>
<body>
<div>
<a href="#Home">Home</a>
<a href="#Menu">Menu</a>
<a href="#Music">Music</a>
<a href="#Jobs">Jobs </a>
</div>
<div>
<p>Come in and experience...</p>
<img src="coffee.jpg"/>
<br/>
<ul>
<li>Speciality Coffee And Tea </li>
<li>Freshly made sandwiches </li>
<li>Bagels, Muffins and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open mic nights</li>
<li>...</li>
</ul>
<p>23 Pine Road </p>
<p>Nottingham, NGI 5YU </p>
<p>0115 9324567</p>
<br>
</div>
<footer>
<p>Copyright @ 2011 Jake's Coffee House </p>
<a href="jake@jcoffee.com">jake@jcofee.com</a>
</footer>
</body>
</html>
Pictures used:
2)
HTML Coding:
<head>
<meta charset ="utf-8">
<link rel="stylesheet" type="text/css" href="color.css">
<title>Jake's Coffee Shop</title>
</head>
<body>
<div id="container">
<div id="logo">
<h1> Jake's Coffee Shop </h1>
</div>
<div id="leftcolumn">
<a class="navBar" href="#home">Home</a>
<a class="navBar" href="#menu">Menu</a>
<a class="navBar" href="#music">Music</a>
<a class="navBar" href="#jobs">Jobs</a>
</div>
<div id="rightcolumn">
<p>Come in and experience...</p>
<style>
img{
float: right;
}
</style>
<img class="floatright" src="coffee.jpg" alt="coffee" width="200" height="200">
<ul>
<li>Specialty Coffee and Tea</li>
<li>Freshly made sandwiches</li>
<li>Bagels, Muffins, and Organic Snacks</li>
<li>Music and Poetry Readings</li>
<li>Open mic nights</li>
<li> ... </li>
</ul>
<p>23 Pine Road <br> Nottingham, NG1 5YU <br> 0115 9324567</p>
</div>
<div id="footer">
Copyright © 2011 Jake's Coffee House<br>
<a href="jake@jcoffee.com">jake@jcoffee.com</a>
</div>
</div>
</body>
CSS coding (saved in file named color.css) :
body {
background-color: #ffffcc;
color: #330000;
font-family: Verdana;
}
#container {
margin-top: 20px;
margin-left: 20%;
margin-right: 20%;
height: 480px;
width: 750px;
border-style: solid;
padding: 0px;
}
#logo {
background-color: #ccaa66;
text-align: center;
border-bottom-style: solid;
border-top-style: solid;
height: 80px;
margin: 0px;
}
#leftcolumn {
background-color: #e8d882;
position: relative;
padding-left: 20px;
left: 0px;
width: 130px;
height: 320px;
float: left;
white-space: pre-line;
}
#navBar {
text-align: left;
}
#rightcolumn {
background-color: #f1e8b0;
position: relative;
width: 580px;
height: 300px;
padding: 10px;
float: right;
}
#footer {
background-color: #ccaa66;
border-top-style: solid;
height: 62px;
text-align: center;
font-style: italic;
width: 750px;
margin-top: 320px;
padding-top: 10px;
}
Pictures used:
Comments
Post a Comment