Description
IT 270 Module Four Practicing HTML Table and Form Concepts
You have just finished the “HTML Tables” section of the “HTML Fundamentals” module on
Pluralsight.com—and hopefully followed along. These tutorials demonstrated how changes made to the
index and CSS files affect the website content that is rendered in a browser window.
In this two part exercise, you will begin with the index.html file in the Mod4-Act1 folder and the
index.html file in the Mod4-Act2 folder and add several additional pieces of content and styles, based on
your watching and understanding of the first seven videos of the “Styling Your HTML” section of the
“Front-End Web Development Quick Start with HTML5, CSS and JavaScript” module on Pluralsight.com.
Activity I
Step 1.
Download the IT-270 Exercise
Files Students zip file if you have
not already done so.
Step 2. For Part I of this activity,
open the index.html file in the
Mod4-Act1 folder in Sublime Text
by either using the File menu
Open File command in the program
or by dragging the file from the
folder window into the blank
Sublime Text window.
Step 3. Construct a table that is
seven cells across and six cells tall
and that displays a CBS primetime TV listing from several years ago (as seen at right). This table should
appear just after the second headline on the page.
Alt Text table information
8:00 8:30 9:00 9:30 10:00 10:30
Mon Big Bang
Theory
How I Met
Your
Mother
Two and A
Half Men
Rules of
Engagement
CSI: Miami
Tue NCIS The Mentalist Without a Trace
Wed New
Adventures
of Old
Christine
Gary
Unmarried
Criminal Minds CSI: New York
Thu Survivor CSI: Crime Scene
Investigation
Eleventh Hour
Fri Ghost Whisperer Flashpoint Numbe3rs
Step 4. Proof
your work as you
progress in a
blank browser tab
or window, and
then again a final
time before
submitting your
assignment. Your
finished work
should look like
the figure at
right. Ensure you
save your work to
the folder before
continuing.
This image presents a formatted web page with the SNHU jpg image on the left and the following
table information embedded in the page as follows.
8:00 8:30 9:00 9:30 10:00 10:30
Mon Big Bang
Theory
How I Met
Your
Mother
Two and A
Half Men
Rules of
Engagement
CSI: Miami
Tue NCIS The Mentalist Without a Trace
Wed New
Adventures
of Old
Christine
Gary
Unmarried
Criminal Minds CSI: New York
Thu Survivor CSI: Crime Scene
Investigation
Eleventh Hour
Fri Ghost Whisperer Flashpoint Numbe3rs
Activity II
Step 1. Next, you will add a form to this webpage file.
Step 2. For Part II of this Activity, open the index.html file in the Mod-4-Act2 folder in Sublime Text by
either using the File menu Open File command in the program or by dragging the file from the folder
window into the blank Sublime Text window.
Step 3. Construct a form entitled “Keeping In Touch” that has three text fields to start—Full name, Email
address, and Phone number—and a set of three radio buttons under the heading “How Often Do You
Want to Hear from Us?” whose three radio button options are Daily Email, Weekly Email, and Monthly
Email. Finally, include a Submit button for this form. This form should appear just after the second
headline on the page.
Step 4. Proof your work as you progress in a blank browser tab or window, and then again a final time
before submitting your assignment. Ensure you save your work to the folder before continuing.Your
finished work should look like this:
This image presents a formatted web page with the SNHU jpg image on the left and the following
table information embedded in the page as follows.
Keeping in
Touch
Full Name [Blank Field Space]
Email
Address
[Blank Field Space]
Phone
Number
[Blank Field Space]
How Often Do you Want to Hear From Us?
Check field
Selected
Daily Email
Check field
not selected
Weekly Email
Check field
not selected
Monthly Email
Submit Button
Step 5. When you have completed the assignment according to the requirements outlined above, please
zip up the complete “Mod4” subfolder in which you have been working this exercise, and submit it using
the assignment link in Blackboard.
