CS 314 –

Web Application Development Lab Script

Date: / /

Department of Forensic Computing and Cyber Security

College of Computer Science and Information Technology

1. Objectives

This lab is designed to achieve the following goals:

Apply the client-side web development languages such as HTML/HTML5, CSS3, and JavaScript
In this lab, you will be working on CSS and CSS3 styles. Upon finishing this lab, you will
be able to get hands on experience on a broad spectrum of CSS programming which will allow
you to create very high-quality website style

2. Introduction

The topic of Week 3 provides an introduction to CSS, we will be introducing you to how
CSS works, teach you how to write CSS rules, show you how CSS apply to HTML pages.
Including creating style sheets, CSS rules, colors, text, and responding to users. Small
examples are used to illustrate many of the CSS elements that are discussed in this
chapter.

3. Equipment / Apparatus / Materials / Environment / Tools and Techniques

The labs for CS-314 provide time to do computer science under the direction of an
instructor who will be serving as a facilitator during the lab session. This means that the
instructor will not solve your problems or show you how to complete the activities. The
instructor may provide helpful hints, ask additional questions, ask you to explain a
solution, ask how you obtained a solution, or facilitate discussions about observations,
experiments, results, discoveries, and other topics that arise.
Some lab activities will ask you to develop solutions to problems, program solutions in
Web Application Development, and test the programs. Other activities will involve using
programs we give you to illustrate important concepts in Computer Science. You will be
required to make observations, form and test hypotheses, and use the results of your
testing to change aspects of your programs.
CS 314 –
Web Application Development Lab Script
Date: / /

4. Procedures / Getting Started / CSS

 PART 1: Working with CSS (adding CSS inside the HTML page, using external CSS, CSS
selector, CSS rule cascading and overriding, and inheritance.)
 PART 2: Working with CSS colors (Foreground color, Background color, Opacity)
 PART 3: Working with TEXT (font size, text alignment, text shadow, styling links,)
 Boxes
 Tables, Lists & Forms

Basic Syntax
CS 314 –
Web Application Development Lab Script
Date: / /

1. TEXT Formatting Example

CS 314 –
Web Application Development Lab Script
Date: / /
CS 314 –
Web Application Development Lab Script
Date: / /

Results / Output
CS 314 –
Web Application Development Lab Script
Date: / /
CS 314 –
Web Application Development Lab Script
Date: / /
2. Foreground color, Background color, Opacity

Results / Output
CS 314 –
Web Application Development Lab Script
Date: / /
3. Borders

Results / Output
CS 314 –
Web Application Development Lab Script
Date: / /
4. Display

Results / Output
CS 314 –
Web Application Development Lab Script
Date: / /
5. Images Aligning

Results / Output
CS 314 –
Web Application Development Lab Script
Date: / /
6. Positions (static, relative, fixed, absolute or sticky)
CS 314 –
Web Application Development Lab Script
Date: / /

7. Lists, Tables and Forms

CS 314 –
Web Application Development Lab Script
Date: / /

Results / Output
CS 314 –
Web Application Development Lab Script
Date: / /
CS 314 –
Web Application Development Lab Script
Date: / /
CS 314 –
Web Application Development Lab Script
Date: / /
Results / Output
CS 314 –
Web Application Development Lab Script
Date: / /

Results / Output
CS 314 –
Web Application Development Lab Script
Date: / /
8. Opacity

Results / Output

 PRACTICE THE Opacity EXAMPLE ABOVE MAKE CHANGES IN THE COLOR AND
SEE EFFECTS
CS 314 –
Web Application Development Lab Script
Date: / /
Your Task:
The Goal of this Task: Demonstrate knowledge of basic CSS programming design and
implementation.
1. Create a new folder within webserver root i.e. htdocs. The name of the folder
should be your student number_t3.
2.Create an html file and CSS that looks like the following figure and run from the
web server folder. (6 pages: Home| Course Notes| Lists of students| Useful Links|
Assignments| Contact_Us|)
CS 314 –
Web Application Development Lab Script
Date: / /
 Home
CS 314 –
Web Application Development Lab Script
Date: / /
 Course Notes

 Lists of students
CS 314 –
Web Application Development Lab Script
Date: / /
 Useful Links

 Assignments
CS 314 –
Web Application Development Lab Script
Date: / /
 Contact_Us

Assessment
1. Each student will show all the above parts running as demo to the Lab Instructor before leaving
the lab. Total marks for the lab is as follows

Part (demo + report) Marks (demo + report)

1 30

2 10

3 60

Total 100

2. Students will prepare a report in which they will submit the snapshots taken while they worked
on each part. They will explain the figures to make sure that they understood what they did.

3. The deadline to submit the report is xx.xx.xxxx at 11:59 pm at [email protected]

Note: Any submission crossing the deadline will be penalized by 10% reduction per day.