Scribd
Upload
7 views

Lab 3

Uploaded by

lovemysilf2017
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

Lab 3

Uploaded by

lovemysilf2017
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

University of Jeddah

College of Computer Science and Engineering


Department of Software Engineering

CCSW321 – WEB DEVELOPMENT

------------------------------------------------ ]CLO 2.1[ --------------------------------------------------

LAB ACTIVITY #3 : Form input types, Page-Structure Elements

Total Marks: 1
Objectives
The objectives of this lab is to learn about:
 Form input types
 Page-Structure Elements

By completion of the lab the students should be able


To create forms with:
 Radio buttons
 Text inputs
 Drop-down menu
 Textarea
 Submit button
To create web page with:
 header Element
 section Element
 nav Element
 footer Element

Lab Requirements
 Notepad++
 Textpad
 Directory: You must create a folder called "Lab03" and store your work in that
directory.
Note:
Make sure that you save your file as plain text and that you give it a .html extension.

Deliverables
Two web pages: Feedback.html and CoffeeShop.html

1
University of Jeddah
College of Computer Science and Engineering
Department of Software Engineering

CCSW321 – WEB DEVELOPMENT

------------------------------------------------ ]CLO 2.1[ --------------------------------------------------

Lab Assessment

Task 1:
In this exercise you will create an HTML feedback Form that takes the user’s title
(Mr., Mrs., Ms.), name, email address, response, and comment. You will need to
create the necessary fields with this in mind.

Figure. FeedbackForm.htm Web page

Steps to create Feedback Form:

Step 1: To begin, create an HTML document with the title Feedback Form

Step 2: Add the opening and closing <form> tags:

Step 3: Complete the page with the closing body and HTML tags.

Step 4: create form elements:

1. Add three radio buttons for the user’s title


2. Add text inputs for the user’s name and email address:
3. Add a select menu for a response:

The Response is a drop-down menu (figure below).

2
University of Jeddah
College of Computer Science and Engineering
Department of Software Engineering

CCSW321 – WEB DEVELOPMENT

------------------------------------------------ ]CLO 2.1[ --------------------------------------------------

4. Add a textarea to record the end user's comments:


5. Add the submit button:

Task 2:
In this exercise you will create an HTML5 web page which represent a Cofee Shop
(as shown in figure below).

Steps to create the body of the web page CoffeeShop.html:

3
University of Jeddah
College of Computer Science and Engineering
Department of Software Engineering

CCSW321 – WEB DEVELOPMENT

------------------------------------------------ ]CLO 2.1[ --------------------------------------------------


Step 1: The header of this page contains level 1 heading (Jake's Cofee Shop) and time
element (2021-09-17).

Step 2: Create first section of this page that contains four links:

Home Menu Music Jobs

Define to this section an id and a <nav> element which groups navigation links as
written below:

<section id = "leftcolumn"> <!-- Begin section 1 -->

<nav> <!-- nav element groups navigation links -->

Step 3: Create a second section of this page that contains

 a paragraph (Come in and experience...)


 an image of the Coffee Shop
 an unordered list which describes the offered services:
o Specialty Coffee and Tea
o Freshly made sandwiches
o Bagels, Muffins, and Organic Snacks
o Music and Poetry Readings
o Open mic nights
 a paragraph (23 Prine Road Nottingham, NG1 5YU 0115 9324567)

Define to this section an id as written below:

<section id = "rightcolumn"> <!-- Begin section 2 -->

Step 4: Create a footer of this page that contains level 6 heading (Copyright © 2011
Jake's Coffee House.) and an address element that indicates the email address.

You might also like