IT 117 UP Computer Science Creating a Restaurant Site Project

Description

Instructions

Part 1: Create a Template

Create a folder on your computer to store all of your website files for this course. The folder can be anywhere on your computer or portable drive.
Open Notepad (or TextEdit if you are working on a Mac).
Refer to the given code below and type it into a new blank page in Notepad.

Code the Structural Elements

Each Web page should contain a set of structural elements. These elements, commonly called “tags”, set up a Web page as a container of content to be displayed. These structural tags also divide a webpage into sections that the browser reads. You will code the main structural tags in the order shown.

Type this into a blank page in Notepad:

<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

The next step is to create a logical layout within your Web page using semantic tags. Browsers, screen readers, and search engine robots easily read semantic tags because the name of the tag describes what the tag is or does. For example: <footer> </footer> tags designate the page footer section. You can format these tags using CSS formatting. However, you will use them strictly for organization at this point.

Place your cursor between <body> and </body> and type the code below:

<header></header>
<nav></nav>
<main></main>
<footer></footer>

Once the correct code for your layout is typed into Notepad, you will save your template using the following steps:
- Click the File tab in the top left corner of Notepad.
- Select Save As from the drop menu.
- Type template.html into the text field.
- Select “All Files” from the drop menu below the text field.
Save and Close template.html.

Part 2: Create Your Home Page:

Open template.html (created in Part 1) to edit in Notepad.
Place your cursor after <title> and before </title> in your code. Type the name of your restaurant and the words, Home Page.
- For example: <title>Joe’s Grill – Home Page</title>
Place your cursor between <header> and </header>. Add a level 1 (h1) page heading using <h1> and </h1> and type heading text for the page.
- For example: <h1>Welcome to Joe’s Grill</h1>
Place your cursor between <main> and </main> and type at least two paragraphs of welcome text for the home page of the restaurant.
- Use <p></p> around each paragraph of text.
- Paragraphs should be 3-4 sentences each.
- Total word count is 100-200 words.
Select the File tab in the top left corner of Notepad.
Select Save As from the drop menu.
Type index.html into the text field.
Select “All Files” from the drop menu.
Save and close document.

Part 3: Upload Your Home Page:

Access the email you received from the Web admin. The email was sent to your email account. Select the following link for access to a PowerPoint presentation regarding the WebServer.
Using the username and password given in the email, log in to the server.
Click the IT117 folder on the left side of the File Manager to open it.
Once the IT117 folder is open, select the Upload button from the top menu bar.
Click the browse button to browse your computer for a file.
Select index.html from the folder you created on your computer.
Upload.
Refer back to the email from the Web server to retrieve your URL.
Copy and paste your URL into your Web browser address bar at the top of your browser to test your page.