Assignment 3: My Journal Page

Assignment 3: My Journal Page
Objectives
• Write and validate an HTML file for a web browser.
• Create a form that asks the person how they are feeling today.
• Use web-safe fonts and colors in properly written CSS.
Instructions
Everything should go in a directory called “firstname_lastname_assignmentNo”. No points
are associated with this requirement, but if you don’t do this properly, we will deduct 10
points.
The purpose of this website is to pretend that we are making a web form for someone
submitting a blog entry to a website. The form shouldn’t do any processing of any data
entered into any form element, but it should look good on the page.
Part 1. 15 points.
In this part, you will design a logo for your journal website. Unlike the last assignment, you
will code the logo in HTML. You need to come up with the following:
• 5 points. Create an original name for your journal blog. I named mine “Happy Trails
with James Church”.
• 10 points. Make a logo for your journal blog.
– Even though there is minimal need for image editing, you may still need an
image editor.
– 5 points. Find an image that you might use for your blog’s header. Scale and
crop this image to be 960 pixels in width and 250 pixels in height. If you get a
large photo, you can crop it to this size.
– 5 points. You must save the image in PNG or JPEG format. It’s best to use JPEG
format since most images on Unsplash are photographs.
– Store your image in a subfolder named “images”.
Part 2
In this part, you will design your home page. Make this file “index.html”.
• 5 points. Make the body background color to be something other than white.
Part 2a. 20 points.
All of these parts will go in the “header” tag.
• 5 points. Make the background image of your header tag the image you found on
Unsplash in step 1. This step will require CSS.
– You’ll notice that only the top part of your image appears. Using CSS, set the
“height” property of your header to be the height of your image using pixels (or
“px”).
• 3 points. Write the title of your Journal website using the H1 tag.
• 5 points. Change the color of your H1 tag to something that contrasts nicely with your
image. Use your judgment in picking the right color.
• 5 points. Add a 2px right and 2px bottom text shadow to your H1 tag. Use a black drop
shadow if your H1 text is a light color. Likewise, if your H1 text is dark, use a white
drop shadow. If you need help deciding which to use, test both and pick the one you
like best. I completed this step using the CSS “text-shadow” property that you can
research on w3schools.com.
• 2 points. Add an “hr” tag under your logo.
Part 50.
All of these parts will go in the “main” tag. All input elements must have a “name” attribute
(even though it won’t impact the website’s visual representation.) You must clearly label all
input elements with text describing what is requested.
• 5 points. Create a form using the “form” tag.
• 45 points. Create a form that will ask the user the following:
– 5 points. Create an input text field that asks where this journal story takes
place.
– 5 points. Create a textarea field asking the user to describe the event they wish
to journal.
– 10 points. Create a checkbox that asks them what emotions they experienced.
(Instead of using words, use four different face emojis that convey different
feelings, such as the laughing face or the sad face.)
– 10 points. Create a radio button group that asks the user if this event happened
during the daytime or the nighttime.
– 10 points. Create a range input element that asks the user to rate their event on
a scale of 1 to 10, where ten means that it was terrific and one means that it
was a dull event. We never discussed “range”, so I encourage you to find the
input range element on the w3schools website. I purposely did not discuss this,
and I want to see if you can add this correctly.
– Add a submit button that says “Add this event!”
Part 2c. 15 points.
All of these parts will go in the “footer” tag.
• 5 points. Add an “hr” tag before the copyright notice.
• 10 points. Add “Copyright”, the copyright symbol, the current year, and your name.
Turn it in
• I will deduct 20 points for every error and 2 points for every warning when validating
your files. Validating your content before submitting it is critical. Each of your files
should show no warnings and no errors. Here’s the validator link:
https://validator.w3.org/
• Important: Part of web design is that your websites must be readable. Therefore, I
will deduct points if anything on your page is less than 100% readable. For example, if
there is text on a background and the background makes the text unreadable, I will
deduct points. If an image obstructs text flow, I will deduct points. Finally, I will deduct
points if anything about your page makes it difficult to read the content.
• There are several critical parts of this assignment that (if missing) will automatically
fail the project:
– The page content isn’t as specified in this assignment.
– Using images that aren’t taken by you or in the public domain.
– You fail to put your name in the assignment.
• You need to upload one file in the same upload:
– Zip up your folder containing your HTML and image files into a single ZIP file
and upload it.