MEPCO SCHLENK ENGINEERING COLLEGE (Autonomous), SIVAKASI

Department of Computer Science and Engineering

ASSIGNMENT – 1
Class: 3rd Year B.E. CSE

Sub. Code & Name: 19CS694 –Web User Interface Design Total Marks: 100
Date of Announcement: 19-01-2023 Date of Submission: 30-01-2023

CL,
CO, # Question(s) Mark
PI
1. A, 1. Use HTML5 to create a document that contains the following text: (2)
CO1,
2. 4.1.3 Internet and World Wide Web How to Program: Fifth Edition
Welcome to the world of Internet programming. We have provided
Coverage for many Internet-related topics.

Use h1 for the title (the first line of text), p for text (the second and
third lines of text). Insert a horizontal rule between the h1 element
and the p element. Open your new document in a web browser to view
the marked-up document
3. A, 2. An image named deitel.png is 200 pixels wide and 150 pixels high. (2)
CO1, Write an HTML5 statement using the width and height attributes of the
4. 4.3.2 img element to perform each of the following transformations:
a) Increase the size of the image by 100 percent.
b) Increase the size of the image by 50 percent.
c) Change the width-to-height ratio to 2:1, keeping the width attained
in part (a)

5. A, 3. Create an HTML5 document containing an ordered list of three items— (2)

CO1, ice cream, soft serve and frozen yogurt. Each ordered list should
6. 4.1.3 contain a nested, unordered list of your favourite flavors. Provide three
flavors in each unordered list.
7. A, 4. Create an HTML5 document that uses an image as an e-mail link. Use (2)
CO1, attribute alt to provide a description of the image and link.
8. 3.3.1
9. A, 5. Create an HTML5 document that contains links to your five favorite (2)
CO1, daily deals websites (possibly Groupon, Living Social, etc.). Your page
10. 3.3.2 should contain the heading “My Favorite Daily Deals Web Sites.” Click
on each of these links to test your page.
11. A, 6. Create the HTML5 markup that produces the table shown in Fig below. Use (8)
12. CO1, <em> and <strong> tags as necessary.
13. 5.1.2

A, 7. Write an HTML5 document that produces the table shown (8)

CO1,
3.3.2

A, 8. A local university has asked you to create an HTML5 document that allows (8)
CO1, prospective college students to provide feedback about their campus visit.
5.1.1 Your HTML5 document should contain a form with text fields for a name and
e-mail. Provide checkboxes that allow prospective students to indicate what
they liked most about the campus. The checkboxes should include: campus,
students, location, atmosphere, dorm rooms and sports. Also, provide radio
buttons that ask the prospective students how they became interested in the
college. Options should include: friends, television, Internet and other. In
addition, provide a text area for additional comments, a submit button and a
reset button. Use post to sent the information in the form to
http://www.deitel.com.
A, 9. Write an HTML5 element (or elements) to accomplish each of the following (8)
CO1, tasks:
3.3.2 a) Students were asked to rate the food in the cafeteria on a scale of 1 to 10.
Use a meter element with text to its left and right to indicate that the average
rating was 7 out of 10.
b) Create a details element that displays the summary text "Survey Results"
for Part (a). When the user clicks the arrow next to the summary text, an
explanatory paragraph about the survey should be displayed.
c) Create a text input element for a first name. The element should
automatically receive the focus when the form is rendered in a browser. d)
Modify Part (c) to eliminate the label element and use placeholder text in the
input element
e) Use a datalist to provide an autocomplete list for five states.
f) Create a range input element that allows the user to select a number from
1 to 100.
g) Specify that autocomplete should not be allowed for a form. Show only the
form’s opening tag.
h) Use a mark element to highlight the second sentence in the following
paragraph. <p>Students were asked to rate the food in the cafeteria
on a scale of 1 to 10. The average result was 7.</p>.

A, 10. Create a website registration form to obtain a user’s first name, last name (8)
CO1, and e-mail address. In addition, include an optional survey question that asks
5.1.1 the user’s year in college (e.g., Freshman). Place the optional survey question
in a details element that the user can expand to see the question.

A, 11. Create a simple search form using a search input element in which the user (8)
CO1, can enter a search query. Using the Firefox web browser, test the form by
5.2.1 entering January and submitting the form. Then enter a J in the input element
to see previous entries that started with J—January should be displayed below
the input element. Enter June and submit the form again. Now enter a J in
the input element to see previous entries that started with J— January and
June should be displayed below the input element. Try this with your own
search queries as well.

R, 12 Create an autocomplete input element with an associated datalist that (2)

CO1, contains the days of the week.
5.3.1
A, 13 Design the HTML page with the below table display (10)
CO1,
5.3.1 left center right
left center right
left center right

13. b Create Simple website with 5 pages (Home, About, Gallery,

Course, Contact). Gallery and contact page with contact us form is
must.

13.c Create the online shopping webpage

A, 14. Write a CSS rule that makes all text 1.5 times larger than the base font of the (2)
CO2, system and colors the text red.
4.3.1
A, 15. Write a CSS rule that places a background image halfway down the page, (2)
CO2, tiling it horizontally. The image should remain in place when the user scrolls
4.3.2 up or down.

A, 16. Write a CSS rule that gives all h1 and h2 elements a padding of 0.5 ems, a (2)
CO2, dashed border style and a margin of 0.5 ems.
4.3.1
A, 17. Write a CSS rule that changes the color of all elements containing attribute (2)
CO2, class = "green- Move" to green and shifts them down 25 pixels and right 15
5.3.1 pixels.

A, 18. Make a layout template that contains a header and two paragraphs. Use float (2)
CO2, to line up the two paragraphs as columns side by side. Give the header and
5.2.1 two paragraphs a border and/or a background color so you can see where
they are

A, 19. Add an embedded style sheet to the HTML5 document in Fig. below. The style (10)
CO1, sheet should contain a rule that displays h1 elements in blue. In addition,
5.1.2 create a rule that displays all links in blue without underlining them. When the
mouse hovers over a link, change the link’s background color to yellow.
A, 20. Create three div elements of varying colors, each with a width and height (10)
CO1, of200px. On the first box, add a dimgrey box-shadow with a horizontal offset
5.3.2 of 15px, a vertical offset of 15px and a blur radius of 20px. On the second
box, add a dimgrey box-shadow with a horizontal offset of -15px, a vertical
offset of -15px and a blur radius of 30px. On the third box, add a dimgrey
box-shadow with a horizontal offset of 15px, a vertical offset of 15px and a
blur radius of 10px.

Faculty Signature