Instructions:
You must submit two separate copies (one Word file and one PDF file) using the Assignment Template on Blackboard via the allocated folder. These files must not be in compressed format.
·It is your responsibility to check and make sure that you have uploaded both the correct files.
·Zero mark will be given if you try to bypass the SafeAssign (e.g. misspell words, remove spaces between words, hide characters, use different character sets, convert text into image or languages other than English or any kind of manipulation).
·Email submission will not be accepted.
·You are advised to make your work clear and well-presented. This includes filling your information on the cover page.
·You must use this template, failing which will result in zero mark.
·You MUST show all your work, and text must not be converted into an image, unless specified otherwise by the question.
·Late submission will result in ZERO mark.
·The work should be your own, copying from students or other resources will result in ZERO mark.
·Use Times New Roman font for all your answers.
Student Details:
Name: ###
CRN: ###
ID: ###
Assignment 2
Deadline: Wednesday 27/11/2024 @ 23:59
[Add a quote here from one of your company executives or use this space for a brief summary of the document content.]
Learning Outcome(s):
Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage.
Question One
Create a user registration form for website called online book club. The form should include the following fields:
Full Name
Email Address
Password
Gender
Preferred Genre (Dropdown menu: Fiction, Non-fiction, Mystery, Fantasy, Romance, Biography)
Favorite Book (Text Area)
Newsletter Subscription (Checkbox)
Submit Button
Requirements:
Use HTML to create the form structure.
The form should have appropriate labels for each input.
Ensure that the “Full Name” and “Email Address” fields are required.
Use the correct input types (email for the email address, text for name, etc.).
·You should copy and paste the “HTML script” to answer this question. DON’T take screenshots for your HTML script. It must be an editable script.
·Take a screenshot of your output web page and paste it as a part of your answer.
1 Marks
Learning Outcome(s):
Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage.
Question Two
Style the user registration form from Question 1 using CSS to match the design shown in the screenshot below.
Requirements:
1.Set the background color of the form container to a light gray.
Set the submit button to have a different background color, white text, and some padding.
When the user hovers over the submit button, change its background color to a darker shade.
Use text color styling for the form’s labels to be dark gray and set the font style of the labels to italic.
5.You should copy and paste the “HTML script” and “CSS script” to answer this question. DON’T take screenshots. It must be an editable script.
6.Take a screenshot of your output web page and paste it as a part of your answer.
2 Marks
Learning Outcome(s):
Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage.
Question Three
Given the following HTML and CSS code, determine which styles will be applied to the HTML elements based on the specificity of the selectors:
CSS Code HTML Code
1.Which CSS rule(s) will apply to the paragraph with the class highlight, and what will be the resulting styles?
2.Which CSS rule(s) will apply to the second paragraph (with id=”p1″), and what will be the resulting styles?
3.Which CSS rule(s) will apply to the
element, and what will be the resulting styles?
3 Marks
Learning Outcome(s):
Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage.
Question Four
Create a webpage layout that includes the following:
Header:
·A header with the text “Welcome to TechStore!” in a large, bold font (use font-family: ‘Arial’; or any other font you prefer).
·The header background color should change to a light blue when the user hovers over the header.
·Set the text color of the header to a dark shade and change the text color to white while transforming the text to uppercase when the header is hovered over.
·Add a background image positioned at the bottom left corner of the header.
Main content area with two columns:
·The left column should take up 70% of the page width and contain the main content.
·The right column should take up 30% of the page width and contain a sidebar with additional links.
Footer
·Add a footer at the bottom of the page with some footer text.
Style the layout using CSS to match the design shown in the screenshot below.
