Lab One

Your First Unit – Your First Web Page

 

 

Introduction

 

This is your beginning 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.

 

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.

 

Notepad Help:

 

Open up Notepad.  Write your web page.

 

To save your Notepad document:

                        -Save as

                        -Save as Type:

                                    All Files

                        -File name:

                                    your_picked_name.htm

                        -Save your file on your W drive (web drive) – not your X drive or the local computer.  Only files saved to this location are accessible by others with a browser.

 

To open up your Notepad document using a browser:

                        -Open Internet Explorer

                        -File -> Open -> Browse (go to W drive, then appropriate file)

                        -Click Open

                        -Click OK

            This should open up your web page with what you typed in.

 

Specific Requirements:

 

This lab must include the following items:

 

1.      First create your main page for this course, called default.htm.  It should consist of a welcome banner, course disclaimer (see postscript below), and a link to your Lab01 page described below.  You may add other creative enhancements if you like.  This page will contain links to each lab as the course marches on.

2.      Next create a folder on your web drive. Name it Lab01.

3.      In Lab01 a file index.html that contains the following: (you also create other HTML pages if desired)

1.      Proper head element with title (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)

5.      Two images, using appropriate attributes

6.      1+ horizontal lines

7.      1+ ordered or unordered list(s)

8.      A hyperlink to your own email address

 

 

NOTE: all HTML files must validate as XHTML 1.1 without errors for full credit.  The penalty for a file that does not validate is 10%. 

The validation service is located at:

 

            http://validator.w3.org/

 

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.

 

Important note: the XHTML preamble given by text will result in validation warning about the character encoding not being specified.  To fix this, change the first line of your files to:

<?xml version = "1.0" encoding="utf-8" ?>

 

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.

 

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 XHTML covered so far).
  2. Explore the web or your textbook to discover how to add an internal hyperlink (a link to within the current page).  Modify your page to make some logical use of this feature.

Deliverables

1)      Your main web page should be called "default.htm" (without the quotes).

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 http://www.mXXXXXX.it.cs.usna.edu/Lab01/index.html where XXXXXX is your alpha number.

5)      You should check that this URL is 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.

7)      Turn in the following hardcopy at the beginning of class on 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.  If the W3C validator is not working when you need it, you may substitute results from http://www.validome.org/ instead.

c)      A printout of the source to your Lab01/index.html file (not the rendered page that you normally see with Internet Explorer).

Postscript

Your default.htm should contain the following disclaimer.  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.