How to Update a Menu on Every Page
- 1). Open a text editor and create a new file named includeme.html. Add a select (<select>) HTML element to the file and insert three HTML option tags (<option></option>). The <option> tags should enclose the three items that make up the menu. Close the select tag and save and close includeme.html.
<select>
<option>Shrimp Cocktail</option>
<option>Filet Mignon</option>
<option>Chocolate Mousse</option>
</select> - 2). Use a text editor to create two files named include1.shtml and include2.shtml. Add HTML code to the files that displays the header text "Today's Menu." Place the header inside each file's <body> tags and use a #include command to include includeme.html.
<html>
<head>
<title></title>
</head>
<body>
<h3>Today's Menu</h3>
<!--#include file="includeme.html" -->
</body>
</html> - 3). Use a Web browser to open include1.shtml from the Web server. Verify that the menu items in includeme.html display in an HTML <select> menu. Open include2.shtml from the Web server and verify that it displays the same HTML <select> menu.
- 4). Return to the text editor and reopen includeme.html. Add one additional option (<option></option>) and a fourth item to the <select> menu. Save includeme.html.
<select>
<option>Shrimp Cocktail</option>
<option>Filet Mignon</option>
<option>Chocolate Mousse</option>
<option>Choice of Beverage</option>
</select> - 5). Reload include1.shtml in a Web browser and verify that the new item is included in the <select> menu. Reload include2.shtml and verify that the new item is included in the <select> menu. Although only the menu in includeme.html has changed, both include1.shtml and include2.shtml display the update.
- 1). Open a text editor and create a new file named includeme.html. Add a select (<select>) HTML element to the file and insert three HTML option tags (<option></option>). The <option> tags should enclose the three items that make up the menu. Close the select tag and save and close includeme.html.
<select>
<option>Shrimp Cocktail</option>
<option>Filet Mignon</option>
<option>Chocolate Mousse</option>
</select> - 2). Use a text editor to create two files named include1.php and include2.php. Add HTML code that displays the header text "Today's Menu." Place the header inside each file's <body> tags and use a PHP include() command to include includeme.html.
<html>
<head>
<title></title>
</head>
<body>
<h3>Today's Menu</h3>
<?php include("includeme.html"); ?>
</body>
</html> - 3). Use a Web browser to open include1.php from the Web server. Verify that the items in includeme.html display in an HTML <select> menu. Open include2.php from the Web server and verify that it displays the same HTML <select> menu.
- 4). Return to the text editor and reopen includeme.html. Add one additional option (<option></option>) and a fourth item to the <select> menu. Save includeme.html.
<select>
<option>Shrimp Cocktail</option>
<option>Filet Mignon</option>
<option>Chocolate Mousse</option>
<option>Choice of Beverage</option>
</select> - 5). Reload include1.php in a Web browser and verify that the new item is included in the <select> menu. Reload include2.php and verify that the new item is included in the <select> menu. Although only the menu in includeme.html has changed, both include1.php and include2.php display the update.
- 1). Open a text editor and create a new file named includeme.js. Add a select (<select>) HTML element to the file using the JavaScript document.write() command. Insert three HTML option tags (<option></option>) using the document.write() command. The <option> tags should enclose the three items that make up the menu. Close the <select> tag and save and close includeme.js.
document.write("<select>");
document.write("<option>Shrimp Cocktail</option>");
document.write("<option>Filet Mignon</option>");
document.write("<option>Chocolate Mousse</option>");
document.write("</select>"); - 2). Use a text editor to create two files named include1.html and include2.html. Add HTML code to each file that displays the header text "Today's Menu." Place the header inside each file's <body> tags and use an HTML <script> tag to include includeme.js.
<html>
<head>
<title></title>
</head>
<body>
<h3>Today's Menu</h3>
<script src="includeme.js"></script>
</body>
</html> - 3). Use a Web browser to open include1.html from the Web server. Verify that the items in includeme.html display in an HTML <select> menu. Open include2.html from the Web server and verify that it displays the same HTML <select> menu.
- 4). Return to the text editor and reopen includeme.js. Add one additional option (<option></option>) and a fourth item to the <select> menu using the document.write() JavaScript command. Save includeme.js.
document.write("<select>");
document.write("<option>Shrimp Cocktail</option>");
document.write("<option>Filet Mignon</option>");
document.write("<option>Chocolate Mousse</option>");
document.write("<option>Choice of Beverage</option>");
document.write("</select>"); - 5). Reload include1.html in a Web browser and verify that the new item is included in the <select> menu. Reload include2.html and verify that the new item is included in the <select> menu. Although only the single menu in includeme.js has changed, both include1.html and include2.html display the update.
Server Side Include (SSI)
PHP (Server Side Script)
JavaScript (Client Side Script)
Source...