University of Gondar

College:Informatics

Course Title: Web Programming

Course Code: CoSc3081
Credit Hrs.: 4 ECTS: 7 Lecture Hrs.: 3 Lab Hrs.: 3 Tutorial Hrs. 1
Prerequisite: None
Course Category: Compulsory
Year III Semester I

Course Description
Client-server Architecture: Web page Design and development; information Architecture &
visualization; static & dynamic pages, client side programming using scripting languages
(JavaScript), OOP programming using PHP, File manipulation and Management using PHP.
Multimedia web programming, dynamic web content creation; session tracking; Internet
protocols, PHP Web controls, connecting web page to data base, loading and manipulating XML
documents, web security; cryptography theory.
Objectives
The objective of this module is to familiarize students:
 The concepts, principles and methods in programming for web and Internet environment
and the services and technologies available and used on Internet. Specifically, at the
completion of this module the student is able to
 Provide fundamental concepts and skills for the understanding and development of web-
based applications.
 Construct Web sites using HTML and Server Side scripting Languages.
 Implement client-side interactivity
 Use CSS to manage Web site presentation and maintenance
 Select and customize existing technologies to set up and maintain web servers
 Specify, build and manage form and content of information-rich web sites
 Design, implement and evaluate client-server systems following specific protocol
specifications, taking into account concurrency issue.
Course outline
Chapter 1: The world Wide Web (4hr)
1.1. Course overview

1.2. The Internet and World Wide Web

1.3. Web Hosting and Domain Name Registration

Chapter 2: Hyper Text Markup Language (HTML) (10hr)

2.1. Introduction to HTML

2.2. HTML tags

2.2.1. Basic HTML tags (HTML, HEAD, BODY,TITLE)

2.2.2. Meta tag

2.2.3. HTML Comments

2.2.4. HTML Link

2.2.4. HTML Text Formatting tags

2.2.5. HTML image inserting tag

2.2.5.1. IMG tag and its attribute

2.2.5.2. 2.2.5.2. Inserting Image Map
2.2.6. HTML Table
2.2.7. Ordered and Unordered List in HTML
2.2.8. HTML Frames
2.2.8.1. Frame Set
2.2.8.2. Internal Frame
2.2.9. HTML Form and Form Controls
2.2.9. Inserting Multimedia in HTML

2.2.9.1. Embed vs Video and Audio tags

2.2.10. HTML Graphics
2.2.10.1. HTML Canvas
2.2.10.2. HTML SVG
Chapter 3: Cascading Style Sheet (CSS) (10hr)
 3.1. CSS Basics
3.1.1. Introduction to CSS
3.1.2. CSS Syntax (CSS Selectors and Declarations)
3.1.3. Attaching CSS with HTML (External , Embedded and Inline)
3.2. Style Sheet Rules
3.2.1. Style Inheritance
3.2.2. Style Rules Precedence
3.3. Style Properties
3.3.1. Foreground and Background Properties
3.3.2. Font and Text Properties
3.3.3. CSS Box Model
3.3.4. Table Styling Properties
3.3.5. More On Styling List (Creating Navigation bars)
3.3.6. Layout and Positioning Properties
3.4. CSS Measuring Units
Chapter 4: Client Side Scripting (JavaScript) (8hr)
4.1. Introduction to JavaScript
4.2. JavaScript Basic
4.2.1. JavaScript Syntax
4.2.2. Attaching JavaScript to HTML (External, Embedded, Inline)
4.3. JavaScript Comments
4.4. Basic JavaScript Input Output
4.5. JavaScript Data Types and Variables
4.5.1. JavaScript Data types
4.5.2. Variable declaration in JavaScript
4.5.3. Data Type Conversion
4.6. Arithmetic and Logical Operators in JavaScript
4.7. Control Structures (Conditional and Looping Statements)
4.8. Array in JavaScript
 4.9. JavaScript Functions
4.10. JavaScript DOM (Document object Model)
4.10.1. Accessing HTML elements in JavaScript
4.10.2. CSS in JavaScript
4.10.3. Events in JavaScript
4.10.4. Handling Exception in JavaScript
4.11. Form Processing using JavaScript
4.12. JavaScript BOM (Browser Object Model)
4.12.1. JavaScript Window
4.12.2. JavaScript Location
4.12.3. JavaScript Location
4.12.4. JavaScript Cookies
Chapter 5: Server-Side Scripting (PHP) (8hr)
5.1. Introduction to PHP
5.2. Basic PHP Syntax
5.2.1. PHP Comments
5.2.2. Predefined and User Variables in PHP
5.3. PHP Output Statements
5.4. Data Types and Variables in PHP
5.5. Arithmetic and Logical Operators
5.6. Conditional Statements
5.7. Loop Statements in PHP
5.8. Arrays in PHP
5.9. PHP Functions
5.10. Form Processing using PHP
5.11. PHP File Upload
5.12. PHP Cookies and Session
5.13. Database Programming using PHP
5.13.1. Overview on MySQL database
 5.13.2. Creating Database Connection in PHP
5.13.3. Sending Query to MySQL Database using
PHP
5.13.4. Processing Query Result.
5.14. PHP File Input-Output
5.15. PHP Date and Time
5.16. PHP Mathematical Functions
5.17. PHP OOP
Chapter 6: Advanced JavaScript and XML (AJAX) (4hr)
6.1. Introduction to AJAX
6.2. XMLHttpRequest Object
6.3. Sending Request to PHP server
6.4. Handling Response from Server
Chapter 7: Introduction to web development frameworks (4hr)
a. Bootstrap & jQuery
b. Node.js
c. Angular.js
d. React.js
Teaching - Learning methods
Three contact hours of lectures, three hours of lab and 1 hours of tutorials per week. Students do
home assignments.
Assessment method
Quizzes | Assignments | Project 30%
Mid Exam 20%
Final Exam 50%
Total 100%

Teaching materials
Reference books:
 Fundamental Concepts for Web Development: HTML5, CSS3, JavaScript and much
more!, by Roxane Anquetil
 Web Design with HTML, CSS, JavaScript and jQuery Set 1st Edition by Jon Duckett
(Author) W3Schools, https://www.w3schools.com
Web programming Laboratory outline

Week 1 Lab environment set up (installing text editor software, web browser,
server software)
Introduction to HTML
Basic HTML tags and their attribute

HTML, HEAD, TITLE, BODY

HTML comment
Meta tag
Creating link
Text formatting tags
Headings, Paragraphs
Font
Text styling tags
Week 2 Image in HTML
Inserting Image
Using Image as a link
Image map
Week 3 HTML Table
Table row, Table header and Table data
Attributes of table
Attributes of table row and cell
Using header, body and footer in HTML table
HTML Lists
Unordered list
Ordered List
Week 4 Frames in HTML
Frameset , Nested frame ,Internal frame
HTML form
Form attributes
Input elements
Inserting multimedia in HTML
Inserting video
Inserting audio
Week 5 CSS
Linking CSS with HTML (embedded, inline and external CSS)
Styling background, text, font, Styling Link, Table
CSS class and ID
Week 6 CSS box model (margin, padding and boarder)
CSS display, visibility, position and z-index
Week 7 JavaScript syntax
Linking JavaScript with HTML (embedded, inline, external)
The first code in JavaScript “Hello, World”
JavaScript comments
Basic Input output in JavaScript
JavaScript variables
Arithmetic and assignment operators in JavaScript
Comparison and logical operators in JavaScript
Data type conversion in JavaScript
Week 8 Conditional Statements
If, if..else,if...elseif..else ad switch statement
Looping statements
For, while and do..while
Break and continue statements
Week 9 Array in JavaScript
Manipulating elements of an array
Function in JavaScript
Week JavaScript DOM
10 Accessing Document elements
CSS in JavaScript
Event Handling
JavaScript BOM (Window, Location, History, Cookies)
Form processing and validation in JavaScript
Week11 PHP Syntax
Output statements
Comments
PHP Variable and Data type conversion
Control structures (Conditional and Looping statements)
Week12 Array
Function
Form Processing
File uploading
Week13 Session and Cookie
Database programming
Week14 File management in PHP
Date and Time
Math functions
Week15 Ajax programming
Week16 Introduction to Web development frameworks
Bootstrap, node.js, angular.js, react js