Question 1 The Task A startup company wishes to build a web site for their online dating business. They have employed a designer who has produced the following design using desktop publishing software. The software used by the designer only produces an image, and does not produce HTML. The company has now contracted you to implement the design i.e. build the web page. This includes a working form component. The company thinks the designer has done a great job and wants you to implement the design without altering the style. Technical Overview From a technical point of view, the web page is constructed using HTML and CSS. Most of the HTML content are form elements. All the style parameters are handled in a style section, at the top of the same page. Interactive Features The company requires you to have two interactive features in the web page. When the mouse is moved over any labelor inputor select element, the text in that element is shown larger. When the mouse moves away from the element, the text returns to its normal size. Immediately after the user selects the image of his/her face, the image is shown in the web page. A small piece of JavaScript will be made available to you to help with this functionality. However, you are not expected to understand the JavaScript code at this stage in the course and should not create any further JavaScript for this assessment task. Discussion Video Please watch the accompanying video, which shows and discusses the completed task. What to Submit There are 3 parts of this assessment. You will need to submit 3 files in total, one for each part. Each subsequent part builds upon the previous part. For Part 1, you need to create the web page content without style. Make sure you save a copy of this as, for example, part1.html, before you move on to the next part. For Part 2, take your part 1 file and extend it by applying style. Make sure you save a copy of this as, for example, part2.html, before you move on to the next part. For Part 3, take your part 2 file and extend it to include the interactive features. Save this as part3.html. For Parts 2 and 3, please note that all style rules are to be included in the style section, and there should be no use of inline style. Here are the requirements and further information for each of the 3 parts. Further Notes You can only submit one single HTML file. Note that all style rules are to be included in the style section, and there is no use of inline style for this assessment. Part 1: Web page content without style  For part 1 of this assessment task, you need to assemble the components together in a web page (without style).  The result of part 1 will look like this when viewed in a browser. The result of this stage is a web page which contains a form. That is, after the various form elements are selected/data is entered, the submit button can be pressed. Although it is not an absolute requirement of this assessment task, it would be good if your form is sent to an appropriate server program after the submit button is selected. For this to work the data needs to be sent to a server using the post method with enctype="multipart/form-data". The destination program used is http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php . Here is a summary of the elements needed inside the web page. At the top An appropriate large heading e.g. h1 or h2 or h3 The HTML elements to be contained within the form are listed by the company as follows. First fieldset, with legend ‘Your face’ input type="file" [required] An img element with id="preview" Second fieldset, with legend ‘Your general details’ input type= "text" ... [required] input type="radio" ... (two of these) [required] input type="number" ... [required] input type="date" ... input type="color" ... select , with 6 option , to handle ‘no selection’ plus 5 different countries Third fieldset, with legend ‘Your indicators’ input type="range" min="0" max="100" ... input type="range" min="0" max="100" ...  Fourth fieldset, with legend ‘Your Contact Information’ input type="email" ... [required] input type="tel" ... textarea ... input type="checkbox" ... , three of these are needed for the three types of contact method  At the end (not in any fieldset): input type="submit" Important notes Each of the four fieldset must have a legend, as indicated above. [required] shown in the list above means that the input must be entered by the user before the form can be successfully submitted, so you must indicate this by adding the appropriate text in the HTML i.e. required For everything in the form except the submit button, there must be an appropriate label which has an appropriate for e.g.

Question 1 The Task A startup company wishes to build a web site for their online dating business. They have employed a designer who has produced the following design using desktop publishing software. The software used by the designer only produces an image, and does not produce HTML. The company has now contracted you to implement the design i.e. build the web page. This includes a working form component. The company thinks the designer has done a great job and wants you to implement the design without altering the style. Technical Overview From a technical point of view, the web page is constructed using HTML and CSS. Most of the HTML content are form elements. All the style parameters are handled in a style section, at the top of the same page. Interactive Features The company requires you to have two interactive features in the web page. When the mouse is moved over any labelor inputor select element, the text in that element is shown larger. When the mouse moves away from the element, the text returns to its normal size. Immediately after the user selects the image of his/her face, the image is shown in the web page. A small piece of JavaScript will be made available to you to help with this functionality. However, you are not expected to understand the JavaScript code at this stage in the course and should not create any further JavaScript for this assessment task. Discussion Video Please watch the accompanying video, which shows and discusses the completed task. What to Submit There are 3 parts of this assessment. You will need to submit 3 files in total, one for each part. Each subsequent part builds upon the previous part. For Part 1, you need to create the web page content without style. Make sure you save a copy of this as, for example, part1.html, before you move on to the next part. For Part 2, take your part 1 file and extend it by applying style. Make sure you save a copy of this as, for example, part2.html, before you move on to the next part. For Part 3, take your part 2 file and extend it to include the interactive features. Save this as part3.html. For Parts 2 and 3, please note that all style rules are to be included in the style section, and there should be no use of inline style. Here are the requirements and further information for each of the 3 parts. Further Notes You can only submit one single HTML file. Note that all style rules are to be included in the style section, and there is no use of inline style for this assessment. Part 1: Web page content without style  For part 1 of this assessment task, you need to assemble the components together in a web page (without style).  The result of part 1 will look like this when viewed in a browser. The result of this stage is a web page which contains a form. That is, after the various form elements are selected/data is entered, the submit button can be pressed. Although it is not an absolute requirement of this assessment task, it would be good if your form is sent to an appropriate server program after the submit button is selected. For this to work the data needs to be sent to a server using the post method with enctype="multipart/form-data". The destination program used is http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php . Here is a summary of the elements needed inside the web page. At the top An appropriate large heading e.g. h1 or h2 or h3 The HTML elements to be contained within the form are listed by the company as follows. First fieldset, with legend ‘Your face’ input type="file" [required] An img element with id="preview" Second fieldset, with legend ‘Your general details’ input type= "text" ... [required] input type="radio" ... (two of these) [required] input type="number" ... [required] input type="date" ... input type="color" ... select , with 6 option , to handle ‘no selection’ plus 5 different countries Third fieldset, with legend ‘Your indicators’ input type="range" min="0" max="100" ... input type="range" min="0" max="100" ...  Fourth fieldset, with legend ‘Your Contact Information’ input type="email" ... [required] input type="tel" ... textarea ... input type="checkbox" ... , three of these are needed for the three types of contact method  At the end (not in any fieldset): input type="submit" Important notes Each of the four fieldset must have a legend, as indicated above. [required] shown in the list above means that the input must be entered by the user before the form can be successfully submitted, so you must indicate this by adding the appropriate text in the HTML i.e. required For everything in the form except the submit button, there must be an appropriate label which has an appropriate for e.g.

Np Ms Office 365/Excel 2016 I Ntermed

1st Edition

ISBN:9781337508841

Author:Carey

Publisher:Carey

Chapter6: Managing Multiple Worksheets And Workbooks

Section: Chapter Questions

Problem 2.14CP

See similar textbooks

Related questions

Concept explainers

Question

Question 1

The Task

A startup company wishes to build a web site for their online dating business. They have employed a designer who has produced the following design using desktop publishing software. The software used by the designer only produces an image, and does not produce HTML.

The company has now contracted you to implement the design i.e. build the web page. This includes a working form component. The company thinks the designer has done a great job and wants you to implement the design without altering the style.

Technical Overview

From a technical point of view, the web page is constructed using HTML and CSS. Most of the HTML content are form elements. All the style parameters are handled in a style section, at the top of the same page.

Interactive Features

The company requires you to have two interactive features in the web page.

When the mouse is moved over any labelor inputor select element, the text in that element is shown larger. When the mouse moves away from the element, the text returns to its normal size.
Immediately after the user selects the image of his/her face, the image is shown in the web page. A small piece of JavaScript will be made available to you to help with this functionality. However, you are not expected to understand the JavaScript code at this stage in the course and should not create any further JavaScript for this assessment task.

Discussion Video

Please watch the accompanying video, which shows and discusses the completed task.

What to Submit

There are 3 parts of this assessment. You will need to submit 3 files in total, one for each part. Each subsequent part builds upon the previous part.

For Part 1, you need to create the web page content without style. Make sure you save a copy of this as, for example, part1.html, before you move on to the next part.

For Part 2, take your part 1 file and extend it by applying style. Make sure you save a copy of this as, for example, part2.html, before you move on to the next part.

For Part 3, take your part 2 file and extend it to include the interactive features. Save this as part3.html.

For Parts 2 and 3, please note that all style rules are to be included in the style section, and there should be no use of inline style.

Here are the requirements and further information for each of the 3 parts.

Further Notes

You can only submit one single HTML file. Note that all style rules are to be included in the style section, and there is no use of inline style for this assessment.

Part 1: Web page content without style 

For part 1 of this assessment task, you need to assemble the components together in a web page (without style).  The result of part 1 will look like this when viewed in a browser.

The result of this stage is a web page which contains a form. That is, after the various form elements are selected/data is entered, the submit button can be pressed. Although it is not an absolute requirement of this assessment task, it would be good if your form is sent to an appropriate server program after the submit button is selected. For this to work the data needs to be sent to a server using the post method with enctype="multipart/form-data". The destination program used is http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php .

Here is a summary of the elements needed inside the web page.

At the top

An appropriate large heading e.g. h1 or h2 or h3

The HTML elements to be contained within the form are listed by the company as follows.

First fieldset, with legend ‘Your face’

input type="file" [required]
An img element with id="preview"

Second fieldset, with legend ‘Your general details’

input type= "text" ... [required]
input type="radio" ... (two of these) [required]
input type="number" ... [required]
input type="date" ...
input type="color" ...
select , with 6 option , to handle ‘no selection’ plus 5 different countries

Third fieldset, with legend ‘Your indicators’

input type="range" min="0" max="100" ...
input type="range" min="0" max="100" ...

Fourth fieldset, with legend ‘Your Contact Information’

input type="email" ... [required]
input type="tel" ...
textarea ...
input type="checkbox" ... , three of these are needed for the three types of contact method

At the end (not in any fieldset):

input type="submit"

Important notes

Each of the four fieldset must have a legend, as indicated above.
[required] shown in the list above means that the input must be entered by the user before the form can be successfully submitted, so you must indicate this by adding the appropriate text in the HTML i.e. required
For everything in the form except the submit button, there must be an appropriate label which has an appropriate for e.g.

Expert Solution

Trending now

This is a popular solution!

Step by step

Solved in 2 steps with 1 images

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.