3/21/2019 Course: Web Systems and Technologies

QALAM You are currently using guest access (Log in)

WEB SYSTEMS AND TECHNOLOGIES

Home ► Courses ► BSIT ► 6th Regular ► WS&T R

Course Outline

HTML CSS Text Book [Textbook 1]

Dear Students, Kindly follow given book to grab the basic knowledge of HTML and CSS.

A little book on JavaScript

Students, It is no doubt the shortest book for javascript. Javascript has numerous applications
and require that level of skill and knowledge for playing impossibles with javascripts. Hope we
will take a good amount o applied skills from here.

Case Studies Resourses

You can solve the case studies given in book to grasp taught skills. only nd the resources of
given chapter and follow the instruction given at the end of that chapter.

jQuery Book

May be the smallest book on jQuery which is understandable. Leave the basics for now and
focus on event binding, element selection and changing its properties.

Week 1

In Week 1 we take a look at

1. What is web
2. What is HTML
3. HTML Structural Tags
Chapter # 1 from [Text Book 1]

Week 2
In week 2 take a look at nicely formated HTML pages
1. Textual tags
http://121.52.153.204/qalam/course/view.php?id=467#section-1 1/6
3/21/2019 2. Lists [Textbook 1, Chapter #1] Course: Web Systems and Technologies

3. Tables [Textbook 1, Chapter #5]

4. Forms [Textbook 1, Chapter #6]

Assignment #1

Describe the di erences between web 1.0, 2.0 and 3.0.

How these are di erent from each other and what type of technologies they use.

Week 3

In this 3rd week of our semester, styles are introduced. CSS

1. We Covered
2. What is CSS
3. Types of CSS embedding
4. Priorities of each type
5. Syntax of CSS
6. Structural Selectors in CSS, and selection by attributes
7. Pseudo Selectors in CSS (class, structural, textual)
8. Styles on text
9. Colors in CSS
[Textbook1: Chapter 3]

Color and Text Styles

Students nd attached le and extract and play with it to clearly understand and focus on
types of colors in CSS and how di erent type of styles can be applied on text.

Week 4
At the 2nd week of CSS we cover most important sections of CSS

1. The BOX Model

2. Background Styles
3. Progressive Enhancement
4. Default Styles
5. Positioning and layouts in CSS
[Textbook 1: Chapter 4]

Positioning Demo

Students nd attached le and experiment with available position options.

http://121.52.153.204/qalam/course/view.php?id=467#section-1 2/6
3/21/2019 Course: Web Systems and Technologies
Assignment #2

Students design a page resembles in layout with one given in attached picture.
Page may have extra content but main focus should be on layout.

Week 5
It would be our rst and week of Javascript and lays ground to the web programming. Now for the rst
time we can change the contents of web dynamically.

In this week we are going to explore.

Properties of JS
Syntax of JS
Ways to embed JS
Types of prompt boxes
Element Selection in JS (by id, name, tag name and class)
Displaying message using 'document.write()'
Functions in JS
Events in JS
Event binding with already declared functions
Dynamic content changing with JS using 'innerText and innerHTML'
Form Validation using JS
window object and its properties (sub objects) screen, navigator, history, location and document.

Pop Up boxes

This le show di erent type of pop up boxes and how we can bind them 'onclick' with buttons.
(or any event)

Selection and Styling Elements

This exercise show how to select di erent elements by name, class, id  or tagname.

JS Objects and its values

This piece of script show di erent properties of browser.

Assignment #3

Bring your laptops in class and show the following tasks

1. navigator properties
2. validation of email using RegEx.
in your rst class of 6th week.

Form Validation using JS

This le show you how can you write JS code to validate a form.
http://121.52.153.204/qalam/course/view.php?id=467#section-1 3/6
3/21/2019 Course: Web Systems and Technologies

Week 6
In this week we will get introduce with a framework build on the top of JS, 'JQuery
JQuery'.

And We done a lot of JQuery.

How to Insert JQ
What is .ready() an .load()
How we can select an element.
Wow all CSS selector work here perfectly.
what about further traversal using lter(), children() and nd()
.each() is useful when want to apply on every element in list.
.css() to change CSS an .attr()/.prop() to change html attributes and properties.
Visibility could be controlled by .show(), .hide(), .fadeIn(), .fadeOut(), .toggle()
Every event on list can be bind by a simple function .on('event', callbackFunction(){});
Animation is easy with .animate() function to change properties slowly on a time frame.

Kindly explore JQuery it has alot of functionality...

JQuery Examples

This le contain nearly all examples of JQuery as we discussed in class.

Assignment #4

Make and understand slider in JQuery.

Week 7
Modern web is useless without the use of AJAX.

Ajax stand for Asynchronous Javascript and XML. Although it don't use XML at least now a days. It make
use of JSON for data transfer. But it can also send and receive text and html data asynchronously. It is a
beautiful technology make web as beautiful as a desktop. In this week we will take an overlook of

Rich Internet Applications RIA

Thin Client vs Thick Client Applications.
Role of AJAX.
XMLHttpRequest Object in Javascript.
Its status and readyState.
onreadystatechange
Changing the content with .responseText or .responseXML
The open() and send() methods.
For further information consider this worthy tutorial on W3School. It is although in core js but libraries
like Jquery also made these process easiest in history for changing the contents dynamically as well as
Asynchronously.
http://121.52.153.204/qalam/course/view.php?id=467#section-1 4/6