IT350 Lab One

Your First Unit ? Your First Web Page





Upon arrival at your first fleet unit, your CO welcomes you aboard and tasks you with creating a homepage for the unit?s website.  Now it is time to show your talent and flair.  You get to pick the unit (or ECA ? see online ?Lab Guidance?).


General Web Page Guidance:


All labs (that are web pages) should conform to basic standards and propriety.  See the Lab Guidance document for specific guidance and for reminders that you may not use editors such as FrontPage, DreamWeaver, etc. for any assignment in this course.


For this particular lab, you must include all of the requirements listed below (for full credit).  But keep in mind that merely doing these requirements is not enough.  Carefully consider the web site?s programming accuracy, functionality, artistic quality, and creativity (again, see the guidance).


You are encouraged to do some research.  Browse the web for similar units, pictures, and links.  Discover webpage designs and functionality you would like to include in your site.




  1. Read this whole lab through before you start ? will save you time in the end.
  2. Remember that your pages must be valid HTML 5, and using XHTML syntax is recommended whether possible.
  3. If you want to use more advanced formatting/centering/styling, see Chapter 4 (we?ll cover this in a few weeks).
  4. For images, you may want to use ?Google Images.?




  1. Follow naming conventions very carefully in this course. Lab1 is not the same as Lab01.  Lab01.htm is not the same as Lab01.html.  Failure to do this may cause the web server and/or your instructor to not find your files.
  2. If you do not have your ?Unix drive? mapped, follow the steps below to map your W: drive to your personal web space (We will often call this your ?web drive.?).  If you already have the ?Unix drive? mapped to your Unix account, you do not need to map it again. Just every time we refer to your W: drive or ?web drive?, use your Unix drive.
    1. NOTE: It is ideal if you are not logged in anywhere else (e.g. back in your room while doing this in the lab).  If you are logged in elsewhere, it?s safe to proceed, but your profile may not remember the drive and you will have to repeat these steps later.
    2. Go to the Start menu and click Computer, then select ?Map Network Drive? from the top bar.
    3. For Drive, pick W.  For Folder, enter \\\mXXXXXX (Substitute your alpha for XXXXXX)
    4. Check the ?Reconnect at login box.?
    5. Click OK, then click Finish. 
    6. Verify that you can access (read, and modify files) your W drive.


  1. Setting up the web server
    1. ?ssh? into (you can use 01 to 20 for YY)  You can use putty or some other tool.  Use your normal credentials.
    2. Create a new directory public_html  (mkdir public_html)
    3. Change the permissions to allow web access as below:
      1. setfacl -dm u:www-data:rx public_html
      2. setfacl ?m u:www-data:rx public_html
    4. Make a mental note of what you just did.  For later labs you may need to log in via ssh again to make modifications to file permissions or how things are encoded.
  2. Important ? the following will save much pain later.  You should also do this on your PC in your room: Open up the File Explorer (one way is to go to the Start menu and click Computer).  Click on the W: drive. Then select ?Organize -> Folder and Search Options.? Select the View tab.  Look for an option titled ?Hide extensions for known file types.?  Make sure this option is NOT checked, then click on the button at top that says ?Apply to All Folders.?
  3. Everything that you create for this course should be inside the public_html folder ? we?ll try to mention that, but it is always implicit in lab directions if not specified.
  4. Go to this starter page: .  Choose File-> SavePageAs (or Ctrl+S), Select ?Save as type? Web Page, HTML only and save it as W:/public_html/default.htm
    1. This must be default.htm, not default.html
    2. Save all your work under your W: drive.  Files saved on your X: drive are not visible to the web server.  Files saved on the local hard drive may be erased when you log out!
  5. Try to view your page at (substitute your alpha number for XXXXXX).  Observe that your file is stored inside ?public_html?, but this is not part of the URL. For viewing, you can use Internet Explorer, Firefox, or Chrome ? Firefox is generally recommended, but you should verify that pages you create work in all.
  6. Now modify default.htm (see Editor Help below).  This page is your main page for the course ? each week you will modify it slightly to add a link to the new lab that you have created. Modify this page to have:
    1. your name
    2. a welcome message/banner of some kind
    3. a link to Lab01/index.html (which you will create below).  Since this is to another page on your same site, it should be a relative link, not an absolute link.
    4. a legal disclaimer (see below). The disclaimer should be only on default,htm. Other pages you will create for this course do not have to have the disclaimer.
    5. You may add other creative enhancements if you like.

9.      Validate your default.htm page (you can click on the provided button) and correct any errors. Practice validating as you go ? do not leave it to the last minute!  You are very likely to encounter validation errors, and at first they may be somewhat confusing.  Allow enough time to work through these and get help as needed.

  1. Create a folder on your web drive under W:\public_html. Name it ?Lab01? (not lab01, or lab1, or any other variant). The overall structure should look like this:


















11.  In Lab01 create a file ?index.html? (not index.htm).  Use the starter.html page to begin. This page should look reasonably like the home page for your unit/ECA. In other words, the general message might be ?Welcome to the Blue Angels flight page!? not ?Welcome to Lab #1?. Your ?index.html? has to contain the following: (you can also create other HTML pages if desired, but the elements below should be in index.html)

1.      Proper head element with title and meta element with character set defined (this must be in every html file and after this lab it will not be mentioned again, just expected)

2.      An appropriate title of the page (heading).  This is not the <title> in the head element, but the title or heading one sees upon opening your web site.

3.      Text of two different sizes (i.e., different heading sizes)

4.      2+ hyperlinks to another page (locally or external).  Avoid links that say ?click here? ? use a descriptive term instead.

5.      1+ image(s), using appropriate attributes. For any image you get from the web, please include the original URL as a comment in your file.

6.      1+ ordered or unordered list(s)

7.   A hyperlink to your own email address

8.      A few reasonable comments in the source of your HTML files, explaining major sections or what is being accomplished.  This may seem artificial for a simple page now, but is good practice.  See examples in the main IT350 web page.


12.  Ensure your page works with all Firefox, Chrome and IE.

13.  Ensure all your pages validate and that you have met all requirements.


NOTE: all HTML files must validate as HTML 5 without errors for full credit.  The penalty for a file that does not validate is 10%.  See the course home page for the validator links.


Some of the requirements above you may not normally wish to be present in your particular web site.  However, part of the lab process is to learn to use differing tags and attributes.  Therefore incorporate them into this web site using your creativity and skills.



Editor Help:


For this course you are encouraged to use Notepad++.  You can also use Notepad, but Notepad++ will make your life easier.  It is already installed on the lab PCs ? see the IT350 page for free download info for your Bancroft PC.


When saving a file from Notepad or Notepad++, be sure to select ?All Files? from ?Save as Type?.  Otherwise you may end up with a filename like index.html.txt.


Browser Help:


There are two ways to view your files:

  1. (recommended) Open up your browser, and enter a URL like
  2. (sometimes useful).
    Use the File menus in the browsers. If you can?t see them, right click the top bar, and Check the Menu Bar option, or just use Ctrl+O to open a page.

Internet Explorer: File -> Open -> Browse (go W drive, then appropriate file).
Firefox: File -> Open File (go to W drive, then appropriate file).


The second method fetches your pages directly from your W drive.   The first method fetches your pages from the web server and displays them, so using this method provides more assurance that your files are configured as they need to be.  The validator button also only works when using the first method.


If you change your page, but it doesn?t seem to change what is in the web browser, use the View -> Source (or Page Source) command from your browser.  This will show you the raw HTML that your browser is displaying.  You can also right click on a web page, and select View Source.

Extra Credit

Throughout this course, expect extra credit to be worth a nominal number of points ? the main purpose is for your additional practice and challenge.  Multiple parts may be given; you can attempt all, some, or none of these.


  1. For this assignment, add another image to your page, and make this image a hyperlink to some logical target, given the image.  Can you find an image and a layout that makes clicking on the image natural, without needing explanation? (This may be difficult given the amount of HTML covered so far.)
  2. Explore the web or your textbook to discover how to add an internal hyperlink (a link to a section on the same page).  Modify your page to make some logical use of this feature.


1)      Your main web page should be called "default.htm" (without the quotes) and it should contain your name, welcome message, a link to Lab01/index.html, and the disclaimer.

2)      All of your files for Lab01 should be in a folder called "Lab01" (without the quotes) on the Web drive.

3)      Your web page for Lab01 should be called "index.html" (without the quotes) and placed inside the folder Lab01.

4)      Your instructor will assume that your web pages are viewable at and where XXXXXX is your alpha number.

5)      You should check that these URLs are viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!

6)      All files must be complete and saved to your Web drive before you submit the hardcopy of your assignment. Do NOT modify your files after you have submitted your assignment. For next week you will modify default.htm and create Lab02/, but nothing in Lab01/ should change.

7)      Turn in the following hardcopy on or before the due date, stapled together in the following order (coversheet on top):

a)      A completed assignment coversheet.  Your comments will help us improve the course.

b)      The first page of the output of the W3C validator, as run on the final version of your Lab01/index.html.  This should show that your document correctly validated, but turn it in anyway if you can?t get your page to validate. 

c)      A printout of the source to your Lab01/index.html file (not the rendered page that you normally see with Internet Explorer/Firefox/Chrome).   Truncated lines are not acceptable ? use Notepad++ vice Notepad if needed for printing.  You could also paste into Microsoft Word etc. if needed.

d)     A printout of the source of your default.htm file (not the rendered page that you normally see with Internet Explorer/Firefox/Chrome).   Truncated lines are not acceptable


Your default.htm should contain the following disclaimer (other pages don?t have to).  Feel free to cut and paste from the assignment page.

Legal Disclaimer

None of the content within this web site or the web sites of the members of this course are intended for distribution in any way, shape, or form. Nor is any attempt being made to disrupt the profiting capability of the copyright holders. The contents of this web site and the web sites of the members of this course are solely intended for educational use of the students and the instructor. All content herein is included strictly for the demonstration of implemented course objectives.