Can you do this?

profileArmyM3d1c
ilab.docx

iLab

iLab 1 of 7: Introduction to HTML

12:30 PM MT 04/30/2017

· Print

· Contrast

· Text Only

· Reset Page

· iLab Overview

· Scenario/Summary

· Deliverables

· Required Software

· Lab Steps

· STEP 1: Review Web Design Principles

· STEP 2: Draft Website Evaluation Criteria

· STEP 3: Enter Criteria in Notepad With HTML Formatting

· STEP 4: Save HTML file

· STEP 5: Test Your Web Page in a Browser

· STEP 6: Edit and Retest

· 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

  Transcript

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

<!DOCTYPE html>

<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.

This is a screenshot of Notepad’s Save As dialog with File name set to YourNameLab1.htm and Save as type set to All Files.

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.

https://devry.equella.ecollege.com/file/fa1d06e2-214e-435c-ac18-9f671da04327/3/images--w1_ilab_02.jpg

Transcript

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.