Can you do this?
iLab
iLab 1 of 7: Introduction to HTML
12:30 PM MT 04/30/2017
· Contrast
· STEP 1: Review Web Design Principles
· STEP 2: Draft Website Evaluation Criteria
· STEP 3: Enter Criteria in Notepad With HTML Formatting
· STEP 5: Test Your Web Page in a Browser
· STEP 7: Submit Your Deliverables
iLab Overview
Scenario/Summary
This first iLab assignment will get you started working with HTML.
In the Week 1 iLab, you will be describing criteria used when evaluating websites, as explained in Step 2 below. After you are satisfied with the content, you are then going to use Notepad to write HTML code and construct an HTML file. This HTML file will be your first web page. It will allow you to present your evaluation criteria in a format that can be posted to a website.
Deliverables
NOTE
Submit your assignment to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions .
(See the Syllabus section "Due Dates for Assignments & Exams" for due dates.)
After completing the steps below, submit one HTML file named YourNameLab1.htm, containing your evaluation criteria for a website.
|
Section |
Deliverable |
Points |
|
2 |
At least four valid website evaluation criteria identified |
4 |
|
2 |
Each evaluation criterion described in a paragraph of at least five sentences, with details and examples demonstrating understanding of web design principles |
12 |
|
3 |
File contains correct HTML structure with doctype, html, head, title, and body |
4 |
|
3 |
HTML formatting tags, including h1, p, strong, and em, applied correctly in body |
8 |
|
4 |
Submitted file saved with correct filename and .htm extension |
2 |
|
|
Total |
30 |
Required Software
MS Word
Access the software at https://lab.devry.edu . Step 2
Notepad
Access the software at https://lab.devry.edu . Steps 3, 4, and 6
Windows Explorer
Access the software at https://lab.devry.edu . Steps 5 and 6
Internet Explorer
Access the software at https://lab.devry.edu . Steps 5 and 6
Lab Steps
STEP 1: Review Web Design Principles
Review the website design principles you learned about in your assigned readings this week, and view the following tutorial.
Tutorial
This video will show you how to create and view a web page using the Windows Notepad text editor, the Internet Explorer web browser, and HTML.
00:00
STEP 2: Draft Website Evaluation Criteria
1. Create criteria that can be used to evaluate websites based on how effective they are, how easy they are to use, and whether or not they are suitable for their intended purpose and audience.
2. Write your evaluative criteria (in your own words) using Microsoft Word or some other word processing software with which you are familiar. Describe each of your criteria in a paragraph of at least five sentences, using details and examples to demonstrate your understanding of the basic principles of website design as covered in your assigned reading. This information will become the content of your web page.
3. Save your document so that you don't lose your work. Use the built-in features in your word processing software to check your spelling, grammar, and punctuation. (Be aware, however, that word processing software doesn't catch errors regarding proper word usage; always proofread your work, read it aloud, or better still, have someone proofread it for you).
4. You will not need to submit your notes, only your finished HTML file.
STEP 3: Enter Criteria in Notepad With HTML Formatting
Important
· Do not use Save As HTML in MS Word or use WordPad (WordPad and Notepad are not the same thing).
· Do not use any web page creation product or any other MS Office product.
· For this iLab, you must type in the HTML yourself, and you may only use a plain text editor. If you see that the software you have opened allows you to insert images or other objects, you are in WordPad or some other software by mistake. In a true text editor like Notepad, you can only use plain ASCII text in your document. On a Windows computer, Notepad is the only product you should use to type or edit the code for this web page assignment.
If You Are Not Using a Windows Computer
If you are using an Apple computer, the built-in TextEdit application is not suitable for this assignment using its default settings. Please switch to Windows, or use Notepad through the Citrix iLab to complete this assignment. You may also contact your professor for specifics of how to complete this assignment using a Mac.
If you are using a Linux computer, you can use the vi text editor instead of Notepad to complete this assignment, or you can use Notepad through the Citrix iLab. Please contact your professor if you need assistance completing this assignment using Linux.
1. Open Notepad from the Windows Start menu or from the main menu of the Citrix iLab.
2. Type the following code, beginning at the top of the blank page in Notepad, substituting your first and last name as well as the evaluation criteria that you established in Step 2. (Nelson Ramos) use this for my name
<html>
<head>
<title>A First HTML Exercise by First Name, Last Name</title>
</head>
<body>
<h1>Website Evaluation Criteria</h1>
<p><strong>Criterion 1</strong>. In this first paragraph, describe your first criterion for evaluating a website.
Be sure to include markup using <em> for emphasis</em>. You may also use <strong>strong</strong> text.</p>
<p><strong>Criterion 2</strong>. In this second paragraph, describe your second criterion for evaluating a website.
Be sure to include markup using <em> for emphasis</em>. You may also use <strong>strong</strong> text.</p>
<p><strong>Criterion 3</strong>. In this third paragraph, describe your third criterion for evaluating a website.
Be sure to include markup using <em> for emphasis</em>. You may also use <strong>strong</strong> text.</p>
<p><strong>Criterion 4</strong>. In this fourth paragraph, describe your third criterion for evaluating a website.
Be sure to include markup using <em> for emphasis</em>. You may also use <strong>strong</strong> text.</p>
</body>
</html>
Hints
1. Do not apply formatting tags to the text within the <title> tags because that part of the page is not located in the <body> section, so it is not content that can be formatted.
2. Before applying a format to your heading, make sure you are not duplicating the default formatting that all headings will automatically apply to the text.
3. Indenting your code as shown above is not required; however, it is a useful technique for keeping the HTML container structure straight, particularly for pages that have a lot of nested tags. A common practice is to use two spaces per level, so <html> has no spaces, <head> and <body> have two spaces, deeper tags have four spaces, and so on.
STEP 4: Save HTML file
1. From the File menu in Notepad, select Save As. The Save As dialog will open.
2. Enter YourNameLab1.htm in the File name box (replacing YourName with your own name). Be sure to delete the .txt extension that may already be in the box.
3. IMPORTANT: Change the Save As type setting from Text Documents (*.txt) to All Files. You must do this so that Notepad will save your file with the .htm extension rather than .txt. If the file is saved with the wrong extension, you may not be able to open it in your web browser in the next step.
Please be sure to remember where you saved your file so that you can upload it to the iLab Dropbox in Step 7.
STEP 5: Test Your Web Page in a Browser
Follow these steps to test your HTML file in a browser.
Using Windows Explorer (not Internet Explorer), browse to the folder where you saved your HTML file in the previous step. If you are using the Citrix iLab, you can launch Windows Explorer from the main Citrix menu. If you are using your own computer, you can find Windows Explorer under Start > All Programs > Accessories, or you can click Start > Documents or Start > Computer.
Verify that the icon for your default web browser appears beside the file. If a Notepad icon appears instead, the file was not saved properly from Notepad. In this case, repeat Step 4 above, making sure to add the .htm extension to the file name and to select All Files.
Double-click the file to open it in your browser. It should look similar to this.
Note: You can also open an HTML file by dragging and dropping its icon into an open web browser.
STEP 6: Edit and Retest
1. Go back to where your file is still open in Notepad, or reopen the file in Notepad if you've closed it already. To reopen the file in Notepad, right-click on the file, select Open with, and then select Notepad.
2. Correct any mistakes that you find, or add more HTML markup tags, and save your work again. You can resave the file in Notepad by pressing Ctrl + S.
3. Repeat Step 5 to review your changes. Hint: If your HTML page is still open in the browser window, all you have to do now is refresh (F5) it, and your changes will appear. To speed up your work, keep the file open in both Notepad and the browser. Make changes in Notepad, press Ctrl + S to save, and then switch to the browser and click Refresh or press F5 to view the results of your changes.
4. Repeat the Notepad edit, Notepad save, browser refresh sequence until you are satisfied with your results.
STEP 7: Submit Your Deliverables
Submit your HTML file to the Week 1 iLab Dropbox. Your web page will be evaluated on your correct use of the basic HTML page structure tags and HTML formatting tags, as well as on the evaluative criteria for websites that you described and included as the content in your web page. Make sure to ask questions if you get stuck at any point or if you would like feedback on what you've completed so far. Don't be afraid to experiment with adding other tags; this is a great time to become familiar with as much HTML as you can.
Submit your lab to the Dropbox, located at the top of this page. For instructions on how to use the Dropbox, read these step-by-step instructions .
See the Syllabus section "Due Dates for Assignments & Exams" for due date information.