Module 1- first HTML pages,

Module 1 Assignment
 Purpose
Students will create their first HTML pages, which will prepare them for success throughout the remainder of
the course.
 Related Module Objecves
This assignment satisfies Module Objectives 1, 2, 3, 4, 5, 6, 7 and 8.
 Possible Points
This assignment is worth a maximum of 100 points. 
 Important Notes
Although this assignment may be the first web pages students create in this course, it is critical that students
develop a strong understanding of how to perform each of the following tasks:
Access the Course Web Server
Viewing your ePortfolio in a web browser
Create and edit files
Create folders
Upload files such as images to the Course Web Server
Create a web page using HTML and CSS
View a web page on the Course Web Server
12/8/2018 Module 1 Assignment
https://canvas.unf.edu/courses/36836/assignments/291343 2/7
Preliminary Tasks
 Required Tools
Students will be required to use one or more of the following tools to earn a passing grade on the module
assignment. Each of the tools listed below can be downloaded for free or already exist in the indicated
operating system.
Web browser (Chrome or Firefox recommended)
Basic text editor
Notepad++ (Windows)
TextEdit in plain­text mode (Mac OS)
pico or vi (Linux)
Secure Shell (SSH) client
PuTTy (Windows)
ssh (Mac OS and Linux)
File transfer tool (must support SFTP via SSH ­ DO NOT USE FTP)
WinSCP (Windows)
CyberDuck (Mac OS)
sftp (Linux)
 Warnings
Students must complete this assignment without the assistance of third­party development tools or
frameworks such as jQuery or Bootstrap. Assignments that appear to be the product of third­party
development tools or frameworks (professor's discretion) will receive 0 points.
 Direcons
 Review the requirements listed in the Assignment Requirements section
 Create a web page that meets all of the stated requirements
 Complete the assignment before the due date (refer to the Course Schedule)
Note: Students will not submit anything to Canvas.
 Assignment Requirements
12/8/2018 Module 1 Assignment
https://canvas.unf.edu/courses/36836/assignments/291343 3/7
Log onto the Course Web Server
Create a folder called images in the module1 folder
Store all of the pictures used in your web pages for this assignment in the images folder
Use relative URLs to access the pictures
For all the web pages created for this assignment
Hyperlinks to pages outside the web server (i.e., Wikipedia.org) should open the linked pages in
a new browser tab or window
All other hyperlinks should open the linked pages in the same browser tab or window
An automatic 10­point (10%) penalty will be assessed for any disorganized pages.
Personal Web Page (20 points)
Create a Personal web page using the filename index.html in the module1 folder.
Give the page a title such as Welcome to My Webpage
Display your name along the top of the page using an <h1 tag
Include an appropriate picture of yourself
Select a picture that you would not mind posting on Facebook
Select an appropriate size for the picture
Create three (3) sections using <h2 tags
In each section, include at least two (2) paragraphs
About Me
Introduce yourself to the reader, and provide some interesting facts about yourself
Hobbies & Interests
Tell the reader about your favorite hobbies and other interests you have
Feel free to include pictures related to your hobbies and interests
Limit to two (2) additional pictures
Education
Describe your education goals and the institutions you have attended
Create an unordered list of all the diplomas, degrees and/or certificates you have earned or
are working towards
Include at least three (3) hyperlinks throughout the page to articles found on Wikipedia.org
Refer to Wikipedia.com for hyperlink examples
At the bottom of the page, include three (3) additional hyperlinks to the Class Schedule and Create
Account web pages (described below) and your ePortfolio
Use relative URLs for the Class Schedule, Create Account, and ePortfolio links
Class Schedule Web Page (20 points)
Create a Class Schedule web page using the filename schedule.html in the module1 folder.
Give the page a title such as My Class Schedule
Create a My [Term] [Year] Class Schedule section at the top of the page using an <h2 tag
Replace [Term] with the current term (Spring, Summer or Fall)
Replace [Year] with the current year (2017, 2018, etc.)
12/8/2018 Module 1 Assignment
https://canvas.unf.edu/courses/36836/assignments/291343 4/7
Create a table to display each class and/or lab you are taking this term
Use the following headers for the table
Course
Example entry: COP4813
Name
Example entry: Internet Programming
Days
Example entry: Monday and Wednesday
Time
Example entry: 3pm to 4:15pm
In separate rows, list the data for each class and/or lab
Display the class data in the appropriate cells
For online classes,
Merge the Days and Time cells into a single cell
Enter Online in the merged cell
Include a hyperlink to the course description on the UNF website for each class in the Course
column
For example, click the following link to view the course description for COP4813
(https://www.unf.edu/catalog/link/UGCOP4813C/)
Create an Important Events section below the table using an <h2 tag
Create a multi­level ordered list
Primary level
List each of the months of the term
Secondary level
List each important event occurring during that month
Do not include the date of the event
You can refer to the Important Dates section of the Course Syllabus
Do not forget other holidays such as Valentine's Day, Independence Day or Veterans Day
For each holiday, include a hyperlink to the appropriate article on Wikipedia.org
At the bottom of the page, include two (2) additional hyperlinks to the Personal web page and your
ePortfolio
Use relative URLs for the Personal web page and ePortfolio links
Create Account Web Page (20 points)
Create a Create Account web page using the filename account.html in the module1 folder.
Give the page a title such as Create an Account
Create a form that includes the following controls (at a minimum):
Note 1: When the form is submitted, send the data to your UNF email address.
Refer to the following w3schools.com example (https://www.w3schools.com/htmL/tryit.asp?
filename=tryhtml_form_mail)
Note 2: Include labels for the controls (as necessary).
12/8/2018 Module 1 Assignment
https://canvas.unf.edu/courses/36836/assignments/291343 5/7
Three (3) text fields
First Name
Last Name
Email Address
Two (2) password fields
Password
Confirm Password
One (1) date field
Birth Date
Restrict the date range to January 1, 1970 and December 31, 2020
Set the default value to October 21, 2015
Four (4) radio buttons
Degree Track
Computer Science
Information Science
Information Systems
Information Technology
For each degree track, include a hyperlink to the appropriate page on the School of Computing
(https://www.unf.edu/ccec/computing/) website
Note: Do not pre­select one of the options.
Eight (8) checkboxes
Programming Language Experience
C
C#
Java
JavaScript
PHP
Python
Visual Basic
Other
For each language, except Other, include a hyperlink to the appropriate article on Wikipedia.org
Note 1: Organize into two (2) columns of four (4) languages each.
Vertically align the checkboxes
Note 2: Do not pre­select any of the options.
Two (2) buttons
Reset
Submit
At the bottom of the page, include two (2) additional hyperlinks to the Personal web page and your
ePortfolio
Use relative URLs for the Personal web page and ePortfolio links
External CSS File (20 points)
12/8/2018 Module 1 Assignment
https://canvas.unf.edu/courses/36836/assignments/291343 6/7
Modify the site.css file located in the public_html folder to control the presentation of the Personal, Class
Schedule, and Create Account pages.
Personal
Make the text of each section header (About Me, Hobbies & Interests, and Education) a different
color
Change the text of the unordered list in the Education section depending on the education type
College Degree
High School Diploma
Certificate
Increase the text size of a hyperlink by 150% when the mouse hovers over the link
The text size should return to normal (100%) when the mouse moves off of the link
Class Schedule
Do not modify the text size of hyperlinks on this page
For the table,
Center the text horizontally
Stripe everyother data row
Start with the data row immediately after the header row
Set the color of the header row to a primary color other than black or white
For the multi­level ordered list,
For the primary level, use Arabic numbers (i.e., 1, 2, 3, etc.)
For the secondary level, use uppercase letters (i.e., A, B, C, etc.)
Create Account
Do not modify the text size of hyperlinks on this page
Use custom radio buttons for the Degree Track,
Set the background of the selected radio button to green
Set the background of the unselected radio buttons to grey
Use custom checkboxes for the Programming Language Experience,
Set the background of the selected checkbox to blue
Set the background of the unselected checkboxes to grey
ePortfolio Page (10 points)
Update your ePortfolio web page (index.html) in the public_html folder.
Replace the text [student name] with your first name
Create a hyperlink using the existing text Module 1 to open your Personal web page
Use a relative URL for the Personal web page link
Reply to the Form Submission (10 points)
Note: You will complete this portion of the assignment after the assignment due date.
While grading your assignment, I or one of my graders will complete and submit the Create Account
form
12/8/2018 Module 1 Assignment
https://canvas.unf.edu/courses/36836/assignments/291343 7/7
If you configured the form properly, you will receive an email containing the values submitted by me or
my grader
Simply reply to the email within 24 hours