AIST2220 TechPrac06 Specs

1. 25 pts - A basic web form

   Ref: HTML Bible Chapter 11 Forms

   Ref: Five W3Schools HTML Forms tutorials HTML Forms thru HTML Input Attributes

   Ref: (Video) A first look at web forms

   Note: For this exercise it is sufficient to reproduce the effect demonstrated in the walkthru video. Feel free to use the HTML observed in the video and, for this task, there are no 'tricky' extra requirements not shown in the video.

   In an HTML file named FormDemo.htm that gets deployed in the root folder of your course website, develop a web form with the following features:

   1. The basic layout can look like this example (i.e., no need to worry too much about format, concentrate on getting form elements and attributes right)
   2. The form should include at least one text input element, (single) select element, checkbox, multiple select element, radio buttons element, textarea element, and datalist element
   3. The form should include submit and reset as last elements in the form
   4. Use

      <form action="https://techcats.solutions/applets/showparms.ashx" target="_blank">

      as the form element start (this sends the form content to a server app that simply shows the parameters received in a new tab)
   5. All text, select, radio button, textarea and datalist element values entered on the form should appear by name and value in the resulting call to the showparms.ashx request handler.

   The completed HTML should validate and is something I can check by inspecting the server, so nothing to upload in D2L.

2. 25 pts - Applying form elements

   Ref: See references in previous task

   In an HTML file named EntryForm.htm that gets deployed in the root folder of your course website, develop a 'personal questionnaire' (e.g., you are gathering personal information from someone but don't worry if in meeting the requirements the form as a whole doesn't really hang together) web form with the following features:

   1. Use of Input Tye Color (e.g., favorite color), Input Type Date (e.g., birth date), Input Type Email, Input Type File (e.g., resume upload), Input Type Number (e.g., years of experience) and Input Type Tel.
   2. The form should include submit and reset as last elements in the form
   3. Use

      <form action="https://techcats.solutions/applets/showparms.ashx" target="_blank">

      as the element start (this sends the form content to a server app that simply shows the parameters received in a new tab)
   4. All form element values entered on the form should appear by name and value in the resulting call to the showparms.ashx request handler.
   5. The form's layout should be clear enough that the user clearly understands what gets entered where.

   The completed HTML should validate and is something I can check by inspecting the server, so nothing to upload in D2L.

3. 25 pts - A top navigation exercise

   Ref:  W3Schools How TO - Top Navigation

   Ref:  W3Schools HTML <iframe> tag

   Ref: W3Schools JavaScript Introduction tutorial

   Ref: Starter HTML and CSS recommended for completing this task.

   Ref: (Video) An approach to web site navigation

   Using (strongly recommended) the starter HTML and CSS supplied with this assignment, continue the development of TopNav.htm from the walkthru video which gets deployed to the root of your website folder so that your DataTable.htm and SynopsesIndex.htm are part of the top menu and navigation structure for the web page.

   The completed HTML should validate and is something I can check by inspecting the server, so nothing to upload in D2L.

4. 25 pts - Extending the top navigation example

   Ref: W3Schools How T0 - Split Navigation plus references from previous task.

   After completing item III above (strongly recommended) create a 'Split Navigation' version which adds a link to a help page to the TopNav.htm created earlier, naming the new version TopNavSplit.htm deployed in the root folder of your course website. Create a page SiteHelp.htm (also stored in your web site root) which has a little guidance for using your web site (nothing dramatic needed content-wise; we are focused on navigation issues) and which appears as page content when the user clicks the Help anchor. Since the W3Schools example uses embedded CSS, you are welcome to use it as well for this task.

   The completed HTML should validate and is something I can check by inspecting the server, so nothing to upload in D2L.

5. 25 pts - A side navigation exercise

   Ref: W3Schools How TO - Fixed Sidebar plus references from previous two tasks.

   Create an HTML file SideNav.htm that gets deployed in the root folder of your course website which implements a fixed, full-height sidebar navigation for your web site akin to that from Task III above (i.e., you can access your four pages AboutMe.htm, CodeDemo.htm, DataTable.htm and SynopsesIndex.htm but no need for the help link added in Task IV). A few hints and working notes:

   1. Since the W3Schools example uses embedded CSS, you are welcome to us it as well for this task.
   2. Overall adjustments to the HTML proceed as with Task III with the iframe element replacing the entire <div class="main"> element in the W3Schools example.
   3. The .main selector in the example CSS needs width: 80%; height: 600px; to get the iframe to display appropriately.

   The completed HTML should validate and is something I can check by inspecting the server, so nothing to upload in D2L.