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>

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 &copy; 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

Popular posts from this blog

Lab 4 - CSS

Lee Xhi Qing AI160225 Wong Xiao Feng AI160247 embedded.html <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="color.css"> <title>Trillium Media Design</title> <style> body { background-color: #e6e6fa; color: #191970; text-align: center; } h1 { background color: #191970; color: #0000CD; } h2 { background color: #aeaed4; color: #191970; } </style>     <meta charset="utf-8"> </head> <body> <h1>Trillium Media Design</h1> <div><a href="index.html">Home</a> <a href="services.html">Services</a> <a href="contact.html">Contact</a></div> <h2>New Media and Web Design</h2> <article>Trillium Media Design will bring your company's Web presence to the next level.<br>  We offer a comprehensive range of services:<...
Read more
Image
HTML code: <!DOCTYPE html> <html> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <body> <div class="container"> <img src="bg.jpg" alt="background picture"> <div id="main" class="centered"> <h1><span class="highlight">Wikipedia - Geneva</span></h1> <p>Geneva is the second-most populous city in Switzerland (after Zurich) and is the most populous city of Romany(the France-speaking part of Switzerland). Situated where the Rhone River exits Lake Geneva (French Lac Leman), it is the capital of the Republic and Canton of Geneva.</p> <img src="switzerland.png" alt="Switzerland"> <p>Geneva is widely regarded as a global city, mainly because of the presence of numerous international organizations, including the headquarters of many of th...
Read more