[SOLVED] Create a Web page using semantic tags. Upload a Web page to the Web server.
I need an explanation for this Website Design question to help me study.
Purpose
Create a home page for your restaurant site. You will create a template using HTML5 structure and semantic tags. The template will be the starter page for each Assignment. You will edit and save your home page this week and then upload the page to the Web server. Follow the instructions to create and upload your first Web page.
Assignment 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>Joes 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 Joes 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.
PLEASE CONTACT ME IF YOU NEED ANY OF MY INFO TO HELP COMPLETE ASSIGNMENT.
