How to create a Website for a Restaurant [Rucker’s]

Posted on August 18, 2022August 19, 2022 by thetqweb

How to create a Website for a Restaurant [Rucker’s]

This is a from-scratch build up of a restaurant’s website. If you are new to website application development, you are also good to go as the full site code, both Markup and Styling, are included. In other words, you just need to open a blank text file in your text editor of choice; paste the code under each number; and save the files with names similar to those in numbered titles.

Don’t forget the extension as it dictates how the file will be interpreted. Saving the files as “xyz.htm” or “xyz.html” will result in similar output. After saving, close the file and open it using your Browser instead this time. This should give you a website. If you started with “Rucker’s-Main.htm“, you should now have the landing page for the restaurant’s website.

Repeat the above steps for each numbered title and you will end up with the full inter-linked website.

This site is made up of six “.htm” files including;

1. Rucker's-Main.htm
2. Rucker's-Specials.htm
3. Rucker's-Menu-Beer+Wine.htm
4. Rucker's-Menu-Desserts.htm
5. Rucker's-Online-Order.htm
6. Rucker's-About.htm

To get the correct results, save the files and assign them the exact names as they appear here. If the names are not exact, this could be a problem due to the referencing done. As for the images, I have referenced them as they are named. For them to appear in the websites, download them to the root of the directory you will save the .htm files, that is, save the images (without renaming them) in the same directory as the .htm files.

NOTE:// The code for each HTML file is pasted below each number, sequentially till the last one. Images are pasted as the last items in this site creation process. Download and save them as instructed above, with the exact names as those in the code. If you are unfamiliar with HTML code, find “<img src=’IMAGE.jpg’>” or “<style>background-image: url(“IMAGEjpg”);</style>” tags

1. Rucker’s-Main.htm

<!DOCTYPE html>
<html>


<head>
<title> Rucker's </title>
</head>

<style>
body {
background-image: url("restaurant-interior.jpg");
background-attachment: fixed;
background-position: center;
font-weight: bold;
color:white;
}
</style>

<body>
<header>
<h3 align="right">(602) 789-5672</h3>
</header>

<h1 align="center"><font color="red" face="Arial, Helvetica, Sans Serif"> Rucker's </font></h1>
<h2 align="center"> <i> The best steak in Scottsdale! </i> </h2>

<p align="center"> 
555 Mountainview Ave. <br> Scottsdale, AZ 85260 <br> (602) 789-5672 
</p>

<p align="center">
Welcome to Rucker's, which has been voted Best Steakhouse in Scottsdale four years running! At Rucker's you can enjoy a quality steak, amazing wine, and a quiet atmosphere in a mountain-themed restaurant. Rucker's has been a tradition in Scottsdale since 1975 and is an amazing place to dine.
</p>

<br><br>
<h4> Make Reservation: </h4>

<form >
First Name: 
<br><br>
<input type = "text" name = "Customer First Name" size="20"/>

<br><br>
Last Name: 
<br><br>
<input type = "text" name = "Customer Last Name" size="20"/>

<br><br>
<label><b> Date: </b></label>
<br><br>
<input type="date" id="booking-date" name="date" value="2021-06-01" min="2021-06-01">

<br><br>
<select name = "day">
<option value="Day" selected>Monday</option>
<option value="Day">Tuesday</option>
<option value="Day">Wednesday</option>
<option value="Day">Thursday</option>
<option value="Day">Friday</option>
<option value="Day">Saturday</option>
<option value="Day">Sunday</option>
</select>

<br><br>
<label for="active-hours"> We are open from 11:00 a.m. to 10:00 p.m. on Mondays through to Saturdays, and from 12:00 p.m. to 8:00 p.m. on Sundays</label>

<br><br>
<input type="time" id="active-hours" name="active-hours" min="11:00" max="10:00" required>
<input type="radio" name="time-division" value="A.M." checked> A.M.
<input type="radio" name="time-division" value="P.M."> P.M.
</form>

<br><br>
<footer>
<p align="center">
<a href="Rucker's-Specials.htm"> Rucker's Specials </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Beer+Wine.htm"> Rucker's Beer and Wine Collection </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Desserts.htm"> Rucker's Dessert Treats </a>
</p>
<p align="center">
<a href = "mailto: mail@rucker">Contact Us</a>
</p>
<p align="center">
<a href="Rucker's-About.htm"> About Rucker's </a>
</p>
</footer>
</footer>

</body>


</html>

2. Rucker’s-Specials.htm

<!DOCTYPE html>
<html>
<head>
<title>Rucker's Specials</title>
</head>
<style>
body {
background-image: url("restaurant-interior.jpg");
background-attachment: fixed;
background-position: center;
font-weight: bold;
color: white;
}
</style>
<body>
<h1 align="center"><font color="red" face="Arial, Helvetica, Sans Serif"> Rucker's Specials </font></h1>
<header>
<h3 align="right">(602) 789-5672</h3>
</header>

<table style="width:100%">
<tr>
<th style="width:50%"></th>
<th style="width:50%"></th>
</tr>
<tr>
<td><img src="caramel-mousse-cake.jpg" alt="caramel-mousse-cake"></td>
<td><img src="ice-cream.jpg" alt="ice-cream"</td>
</tr>
<tr align="center">
<td>$5.99</td>
<td>$2.50</td>
</tr>
<tr>
<td><img src="chicken-dinner.jpg" alt="chicken-dinner"></td>
<td><img src="beer-with-steak-dinner.jpg" alt="beer-with-steak-dinner"</td>
</tr>
<tr align="center">
<td>$1.34</td>
<td>$15.55</td>
</tr>
<tr>
<td><img src="fish-dinner.jpg" alt="fish-dinner"></td>
<td><img src="steak-dinner.jpg" alt="steak-dinner"</td>
</tr>
<tr align="center">
<td>$9.09</td>
<td>$6.37</td>
</tr>
</table>

<footer>
<p align="center">
<a href="Rucker's-Main.htm"> Go to Rucker's main site </a>
</p>
<p align="center">
<a href="Rucker's-Specials.htm"> Rucker's Specials </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Beer+Wine.htm"> Rucker's Beer and Wine Collection </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Desserts.htm"> Rucker's Dessert Treats </a>
</p>
<p align="center">
<a href = "mailto: mail@rucker">Contact Us</a>
</p>
<p align="center">
<a href="Rucker's-About.htm"> About Rucker's </a>
</p>
</footer>
</body>
</html>

3. Rucker’s-Menu-Beer+Wine.htm

<!DOCTYPE html>
<html>
<head>
<title>Rucker's Beer and Wine Collection</title>
</head>
<style>
body {
background-image: url("menu.jpg");
background-attachment: fixed;
background-position: center;
font-weight: bold;
color: white;
}
</style>
<body>
<h1 align="center"><font color="red" face="Arial, Helvetica, Sans Serif"> Rucker's Beer and Wine Collection </font></h1>
<header>
<h3 align="right">(602) 789-5672</h3>
</header>

<span align="center"><p>
At Rucker's, we offer;
<ul type="square">
<li>Arizona Stronghold's Merlot</li>
<li>Four Peak's Hop Knot</li>
</ul>

</p></span>

<table style="width:100%">
<tr>
<th style="width:50%"></th>
<th style="width:50%"></th>
</tr>
<tr>
<td><img src="beer-with-steak-dinner.jpg" alt="caramel-mousse-cake"></td>
<td align="center">Arizona Stronghold's Merlot <br> $15.55</td>
</tr>
<tr>
<td align="center">Four Peak's Hop Knot <br> $15.55</td>
<td><img src="beer-with-steak-dinner.jpg" alt="caramel-mousse-cake"></td>
</tr>
</table>


<footer>
<p align="center">
<a href="Rucker's-Main.htm"> Go to Rucker's main site </a>
</p>
<p align="center">
<a href="Rucker's-Specials.htm"> Rucker's Specials </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Beer+Wine.htm"> Rucker's Beer and Wine Collection </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Desserts.htm"> Rucker's Dessert Treats </a>
</p>
<p align="center">
<a href = "mailto: mail@rucker">Contact Us</a>
</p>
<p align="center">
<a href="Rucker's-About.htm"> About Rucker's </a>
</p>
</footer>
</body>
</html>

4. Rucker’s-Menu-Desserts.htm

<!DOCTYPE html>
<html>
<head>
<title>Rucker's Dessert Treats</title>
</head>
<style>
body {
background-image: url("menu.jpg");
background-attachment: fixed;
background-position: center;
font-weight: bold;
color: white;
}
</style>
<body>
<h1 align="center"><font color="red" face="Arial, Helvetica, Sans Serif"> Rucker's Dessert Treats </font></h1>
<header>
<h3 align="right">(602) 789-5672</h3>
</header>

<span align="center"><p>
At Rucker's, you can select one of four sweet dessert treats;
<ol type="1">
<li>Chocolate Treat (Lava Cake)</li>
<li>Regionally Inspired Treat (Prickly Pear Sundae)</li>
<li>Seasonal Pie</li>
<li>Special Monthly Dessert (The Chef's Creation)</li>
</ol>

</p></span>

<table style="width:100%">
<tr>
<th style="width:50%"></th>
<th style="width:50%"></th>
</tr>
<tr>
<td><img src="caramel-mousse-cake.jpg" alt="caramel-mousse-cake"></td>
<td align="center">Chocolate Treat <br> (Lava Cake)</td>
</tr>
<tr>
<td align="center">Special Monthly Dessert <br> (The Chef's Creation)</td>
<td><img src="steak-dinner.jpg" alt="caramel-mousse-cake"></td>
</tr>
</table>


<footer>
<p align="center">
<a href="Rucker's-Main.htm"> Go to Rucker's main site </a>
</p>
<p align="center">
<a href="Rucker's-Specials.htm"> Rucker's Specials </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Beer+Wine.htm"> Rucker's Beer and Wine Collection </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Desserts.htm"> Rucker's Dessert Treats </a>
</p>
<p align="center">
<a href = "mailto: mail@rucker">Contact Us</a>
</p>
<p align="center">
<a href="Rucker's-About.htm"> About Rucker's </a>
</p>
</footer>
</body>
</html>

5. Rucker’s-Online-Order.htm

<!DOCTYPE html>
<html>

<head>
<title> Rucker's Online Orders </title>
</head>
<style>
body {
background-image: url("restaurant-interior.jpg");
background-attachment: fixed;
background-position: center;
font-weight: bold;
color:white;
}
</style>
<body>
<header>
<h3 align="right">(602) 789-5672</h3>
</header>
<h1 align="center"><font color="red" face="Arial, Helvetica, Sans Serif"> Rucker's Online Orders </font></h1>

<br><br>
<h4> To make an Online Order, fill in the following information; </h4>

<form >
First Name: 
<br><br>
<input type = "text" name = "Customer First Name" size="20"/>

<br><br>
Last Name: 
<br><br>
<input type = "text" name = "Customer Last Name" size="20"/>

<br><br>
Email Address: 
<br><br>
<input type = "text" name = "Email Address" size="50"/>

<br><br>
Confirm Email Address: 
<br><br>
<input type = "text" name = "Confirm Email Address" size="50"/>

<br><br>
Credit Card No.: 
<br><br>
<input type = "number" name = "Credit Card No." size="17"/>

<br><br>
Credit Card Expiration Date: 
<br><br>
<select name = "month">
<option value = "Month" selected>January</option>
<option value = "Month" selected>February</option>
<option value = "Month" selected>March</option>
<option value = "Month" selected>April</option>
<option value = "Month" selected>May</option>
<option value = "Month" selected>June</option>
<option value = "Month" selected>July</option>
<option value = "Month" selected>August</option>
<option value = "Month" selected>September</option>
<option value = "Month" selected>October</option>
<option value = "Month" selected>November</option>
<option value = "Month" selected>December</option>
</select>
<select name = "year">
<option value = "Year" selected>2021</option>
<option value = "Year" selected>2022</option>
<option value = "Year" selected>2023</option>
<option value = "Year" selected>2024</option>
<option value = "Year" selected>2025</option>
<option value = "Year" selected>2026</option>
<option value = "Year" selected>2027</option>
</select>

<br><br>
CSV Number: 

<br><br>
<input type = "number" name = "CSV Number" size="4"/>

<br><br>
Order Pickup Time: 

<br><br> 
<select name="time" id="time">
<option value="5:00 AM">11:00 AM</option>
<option value="5:15 AM">11:30 AM</option>
<option value="5:30 AM">12:00 PM</option>
<option value="5:45 AM">12:30 PM</option> 
<option value="6:00 AM">01:00 PM</option>
<option value="6:15 AM">01:30 PM</option>
<option value="6:30 AM">02:00 AM</option>
<option value="6:45 AM">02:30 PM</option> 
<option value="7:00 AM">03:00 PM</option>
<option value="7:15 AM">03:30 PM</option>
<option value="7:30 AM">04:00 PM</option>
<option value="7:45 AM">04:30 PM</option>
<option value="5:00 AM">05:00 PM</option>
<option value="5:15 AM">05:30 PM</option>
<option value="5:30 AM">06:00 PM</option>
<option value="5:45 AM">06:30 PM</option> 
<option value="6:00 AM">07:00 PM</option>
<option value="6:15 AM">07:30 PM</option>
<option value="6:30 AM">08:00 AM</option>
<option value="6:45 AM">08:30 PM</option> 
<option value="7:00 AM">09:00 PM</option>
<option value="7:15 AM">09:30 PM</option>
<option value="7:30 AM">10:00 PM</option>
</select>

</form>

<br><br>
<footer>
<p align="center">
<a href="Rucker's-Main.htm"> Go to Rucker's main site </a>
</p>
<p align="center">
<a href="Rucker's-Specials.htm"> Rucker's Specials </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Beer+Wine.htm"> Rucker's Beer and Wine Collection </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Desserts.htm"> Rucker's Dessert Treats </a>
</p>
<p align="center">
<a href = "mailto: mail@rucker">Contact Us</a>
</p>
<p align="center">
<a href="Rucker's-About.htm"> About Rucker's </a>
</p>
</footer>
</body>

</html>

6. Rucker’s-About.htm

<!DOCTYPE html>
<html>

<head>
<title> About Rucker's </title>
</head>
<style>
body {
background-image: url("menu.jpg");
background-attachment: fixed;
background-position: center;
font-weight: bold;
color:white;
}
</style>
<body>
<header>
<h3 align="right">(602) 789-5672</h3>
</header>
<h1 align="center"><font color="red" face="Arial, Helvetica, Sans Serif"> About Rucker's </font></h1>

<br><br>

<p align="center">
Ruckers's was established in 1975 bu John Rucker. Rucker is the best Restaurant for you if you need peace and tranquility while enjoying your meal, dessert, beer or wine. We offer the tastiest meals, including treats like the monthly Chef's Creation and you get to enjoy Arizona-crafted beer and wine collection afterwards. The professional staff working at Rucker's will make you r family make it their favourite restaurant.
</p>

<br><br>
<footer>
<p align="center">
<a href="Rucker's-Main.htm"> Go to Rucker's main site </a>
</p>
<p align="center">
<a href="Rucker's-Specials.htm"> Rucker's Specials </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Beer+Wine.htm"> Rucker's Beer and Wine Collection </a>
</p>
<p align="center">
<a href="Rucker's-Menu-Desserts.htm"> Rucker's Dessert Treats </a>
</p>
<p align="center">
<a href = "mailto: mail@rucker">Contact Us</a>
</p>
</footer>
</body>

</html>