HTML Intro

Lab 1 - HTML Intro

Introduction

The goal of this lab is to work with HTML, creating a web page for your choice of topics: your favorite ECA, or your potential unit in the fleet. Take a few minutes to Google for your ECA or unit to find information about it's history and to find pictures. The goal is for this page is to provide a viewer with a basic understanding of what the ECA/unit is.

General Tips

Read each lab throughly before you start. It will save you time in the end.
Remember that your pages must consist of valid HTML5

Part 0 - A few notes and tasks before we start (15%)

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. Expect a significant loss of points (a finders fee) if the instructor has to hunt for your work...

Setting up your directory on the web server → Do this from midn.cs.usna.edu :

SSH into midn.cs.usna.edu. Use your normal Academy credentials.
Change the permissions to allow web access as below:

# Note: You are running these actions on midn.cs.usna.edu
#       Ensure that you have logged into that server before continuing.
mkdir -p ~/public_html
chmod 711 ~/
chmod 700 ~/public_html
setfacl -R -m u:www-data:rwx ~/public_html
setfacl -d -R -m u:www-data:rwx ~/public_html
setfacl -R -m u:adina:rwx ~/public_html
setfacl -d -R -m u:adina:rwx ~/public_html
setfacl -R -m u:mXXXXXX:rwx ~/public_html
setfacl -d -R -m u:mXXXXXX:rwx ~/public_html
mkdir ~/public_html/IT350
find ~/public_html/IT350 -type d -exec chmod 775 {} \;
find ~/public_html/IT350 -type f -exec chmod 664 {} \;

You may now continue to work on the server or work locally on your computer and then copy the files to the server, in your public_html/IT350 folder.

Go to the starter page, right-click and "View page source", copy the source and paste into your IT350.html in your public_html/IT350 folder. All pages for this class should start with the starter page, as that page contains the code for a button that will make your life easier!
This file must be named IT350.html

Try to view your page at http://midn.cs.usna.edu/~mXXXXXX/IT350/IT350.html Observe that your file is stored inside public_html/IT350. For viewing, you can use any browser you'd like (although the instructor grades via Chrome -- hint hint). Note that you must be on the Intranet to view these pages!!
Now modify IT350.html (see Editor Help below). This page is your main page for the course. Each week you will modify it slightly to add some links to the new lab that you have created. Modify this page to have:

a meaningful title element such as "MIDN X IT350 home"
your first and last name
a welcome message/banner of some kind - ex. "Welcome to MIDN X Y IT350's page"
a link to Lab01/ (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.

a legal disclaimer (see below). The disclaimer should only be on the IT350.html page. Other pages that you will create for this course do not have to have the disclaimer.

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.

You may add other creative enhancements if you'd like.

Validate your IT350.html page (you can click on the provided button if you access your page through the URL http://midn.cs.usna.edu/~mXXXXXX/IT350/IT350.html or you can use the official W3C HTML validator at validator.w3.org and copy-paste the source code there)
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.

Part 1 - An Initial Web Page (95%)

in /home/mids/mXXXXXX/public_html/IT350 create an "images" folder; this folder should contain all the images you will use for your webpages in this course
in /home/mids/mXXXXXX/public_html/IT350 create a "Lab01" folder (case matters, so make sure it is Lab01 and not lab01 or lab1 or anything else)
In /home/mids/mXXXXXX/public_html/IT350/Lab01 create a file 'index.html' (not index.htm). Start with the code from the starter.html page and then modify. This page should look reasonably like the home page for the ECA/unit you selected. In other words, the general message might be 'Welcome to the YP Squadron Webiste!' not 'Welcome to Lab #1'. You will be graded on ensuring that you meet the requirements of the page below, as well as the perceived effort that went into the product. With web pages, appearance and the user experience are important. Your 'index.html' must contain the following:
1. 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.
2. 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)
3. 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.
4. Text of two different heading sizes
5. 2+ hyper-links to another page (locally or external). Avoid links that say 'click here'. Use a descriptive term instead.
6. 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. Any locally stored images must be stored in the "images" folder you created inside your main IT350 folder.
7. 1+ ordered or unordered list(s)
8. A hyper-link to your own email address such that when the user clicks on the hyperlink, the mail client opens up (if one is set up) (Hint: see "mailto" URIs)
9. A meta element to describe your page (Hint: Read Chapter 2.13 in the recommended textbook or http://www.w3schools.com/tags/tag_meta.asp)
Ensure your page works with both Chrome and Firefox.
Ensure your page has the validation button from the starter page
Spend time to make sure there is a reasonable amount of content on your page, and that you described the ECA/unit in such a way that it would be useful to anyone who visited
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.

Challenge Problem - Just a bit more (100%)

Every lab will have a final problem, worth that last 5%, that should push you a bit further, there are a few caveats:

Instructors do not answer questions specific to the challenge problems - these are here for you.

Update http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab01/index.html and use the following:

a <section> element
a <header> element
a <footer> element
a <details> element with a nested <summary> element

General Requirements and Deliverables

All labs (that are web pages) should conform to basic standards and propriety. See the Lab Guidance for specific guidance.
Remember that you may not use editors that build web pages for you, such as Word, FrontPage, DreamWeaver, etc. for any assignment in this course.
If not already done, modify your main course page, named IT350.html within your public_html/IT350 folder, to add a link that points to the root directory of the new lab (Lab01). In the future, when adding links to this file, make sure the links to all previous labs still exist. Do not point to a specific HTML or PHP file in the directory (unless asked specifically to do so in the lab.)
Ensure your page works with Chrome and Firefox.
Ensure your HTML file is valid HTML5 and all your html pages have the HTML5 validation button from the starter page.
All of your files for Lab01 should be in a folder called ~/public_html/IT350/Lab01 on the web server.
All of the images used for all your labs should be in a folder called ~/public_html/IT350/images on the web server.
Always put a README.txt file in the lab directory, at a minimum this file should have:
- *Lab number
- *Your name and alpha
- *Collaborations (people, online sources used outside the course website)
- *How far you got (through which part did you finish)? If you tried any additional parts beyond the one you completed, what did you do?
- *How long this lab took you
- Any suggestions to improve the Lab
- Any comments needed for the instructor to review the lab (usernames, passwords, etc.)
Note that * items are required for every lab submitted.
Your instructor will assume that your web pages are viewable at:
- http://midn.cs.usna.edu/~mXXXXXX/IT350/IT350.html , and
- http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab01/
All labs must be complete and saved to the midn.cs.usna.edu drive before you submit your assignment. Do NOT modify your web files after you have submitted your assignment (unless you resubmit, which you can do as often as you like up until the deadline.)
Submit all files to the online submissions system (https://submit.moboard.com/) on or before the due date. This is Lab01 project. You can use the browser to upload files, or use the command line submit script and capture the entire contents of the directory. The easiest way to do this in a command line in Unix would be to cut and paste the following while logged onto the server or a workstation:
```
cd ~/public_html/IT350
~/bin/submit -c=IT350 -p=Lab01 Lab01
```
This assumes that the submit script is located in ~/bin/ and is executable.