CPIS 358 Lab Activity 1 | Complete Solution

CPIS 358 Lab Activity 1

In this lab activity , using HTML & HTML5, you are required to create 2
webpages that are linked together and change the style of them using CSS and
CSS3 style as the followings:
Save the new files in a folder “Lab activity1 your name”
Create the first webpage and apply the styles as follows: (Make sure you do the
bold questions)
1. In the header part of the webpage:
- Insert an image logo at the top-left of the webpage and then use external style sheet
to set some of its properties like: the absolute position, width & height. - Insert a text
“Welcome To Our IS Department” then use embedded style to set some of its properties
like: the absolute position, (size & color) and make its appearance over the image
-Insert an image at the center of the webpage and use inline style sheet to set its
properties: width & height. and make its appearance at the back
2. In the body part of the page do the followings:
- Create a table as shown:
- In the first row do the followings:
- In the left cell: write some information about the faculty of computing and
information technology in king Abdulaziz University.
- In the right cell: Add an ordered list A, B, C of the names of the departments of
the college as shown
-In the second row do the followings :
Add a link to the second page “click here to fill the registration form”
3. Change the background color of the table to “light blue”
4. In the page footer: write the copyright tag : your name
5. Use any CSS style you want to define a style for the menu list in the table row-one that
shows the departments of the college “it has 3 departments” to have it expand when the
mouse hover over it only as shown in the next page:
In the second webpage do the followings:
1. Add a heading2 “Registration Form" above the form
2. Use any CSS style you want to change the style of the heading2 element with color & text stoke
3. Create a form to enter some information about you as shown:
a) You should define an appropriate type and define the focus for the first element (Full Name)
b) You should define an appropriate type for Gender and make sure only one could be chosen
c) Country: a datalist: the list contains: Saudi Arabia, Palestine, Egypt and other as shown:
d) The Submit and Clear buttons : to submit the form and to reset the form
Change the style of the webpage “Student Registration form” as follows:
4. Add a division “div” around the form then Use any CSS style you want to add dotted border
as shown and specify the width to show all the form
5. Change the background-color of the div around the form to gradient_color as shown
6. Insert an image and a paragraph at the bottom of the webpage and then Use inline style to
make the image float to the left of the paragraph.