IT3503 Web Development Techniques
(Optional)
INTRODUCTION
This is one of the three optional courses designed for Semester 3 of the Bachelor of Information Technology Degree program. This course on web development techniques is a brief introduction to the most common methods of adding useful, interactive and dynamic elements to a web site.
CREDITS: 04
LEARNING OUTCOMES
After successful completion of this course students will be able to:
• Identify the main concepts in the web development environment • Create web pages using HTML and CSS
• Add interactivity to web pages using JavaScript • Create server scripts using PHP
• Identify alternative web development technologies • Describe legal and ethical issues in web development
OUTLINE OF SYLLABUS
Topic Hours
1- Introduction to the Internet and Web 04
2- Web page design with HTML and CSS 16*
3- Client-side Programming with JavaScript 14*
4- Server-side Programming with PHP 14*
5- More topics in web development 12
Lectures Practical and Tutorials
40 20
* Students are expected to have at least 20 hours of practicals to strengthen their knowledge of these sections.
Note: All these should be lecture-demonstrations preferably conducted in a
laboratory with hands on practice for students.
SYNOPSIS/OVERVIEW
The course is designed to provide the learner with most essential web development skills in designing a simple website by adding dynamic features to web pages with client–side scripting languages, and generating dynamic content with server–side scripting techniques. The course is specifically designed in such a way that even a novice learner will be able to describe and apply programming concepts such as data types and variables, operators, control structures and object oriented concepts in most popular web development languages. This course also aims to provide the learners with the necessary competence and analytical skills to select their web development platforms and to identify risk factors associated with web development. Hence, it provides a foundation for more advanced web development courses.
PEDAGOGICAL FRAMEWORK
The main pedagogical framework of the course focuses on activity based learning. Students are supposed to do all the learning activities to cover the learning content.
EXPECTATIONS/EXAMINATIONS/REQUIREMENTS
The learners are expected to obtain knowledge and master necessary skills to work with languages such as HTML, CSS, JavaScript and PHP. Set of questions are provided to the learner at the end of the content of each chapter and two assignments are provided one at the end of the first half of the syllabus and the other at the end of the full syllabus. Marks for the activities and quizzes are not counted but marks for the assignments are tracked by the LMS and a pass grade is issued. Obtaining pass grades for the two assignments and Final Exam are mandatory for the completion of Semester 3.
REQUIRED MATERIALS Main Reading
Ref 1 : Steven M. Schafer (2005), HTML, CSS, JavaScript® , Perl, Python®, and PHP Web Standards Programmer's Reference, ISBN: 81-265-0620-2, Wiley Publishing Inc., USA (Indian Edition)
Supplementary Reading
Ref 2 : http://en.wikipedia.org/wiki/Internet
Ref 3 : http://en.wikipedia.org/wiki/World_Wide_Web Ref 4 : http://www.w3.org/
Ref 5 : http://www.ietf.org/
Ref 6 : http://en.wikipedia.org/wiki/Web_standards
Ref 7 : http://office.microsoft.com/en-us/training/CR061832701033.aspx Ref 8 : http://en.wikipedia.org/wiki/List_of_HTML_editors
Ref 9 : http://en.wikipedia.org/wiki/Solution_stack Ref 10 :http://en.wikipedia.org/wiki/Multitier_architecture Ref 11 : http://en.wikipedia.org/wiki/Application_server Ref 12 : http://en.wikipedia.org/wiki/Web_servers
Ref 13 : http://en.wikipedia.org/wiki/Apache_HTTP_Server
Ref 14 : http://en.wikipedia.org/wiki/Apache_Tomcat Ref 15 : http://www.w3schools.com/ajax/
Ref 16 : http://en.wikipedia.org/wiki/Web_hosting Ref 17 : http://en.wikipedia.org/wiki/ISP
Ref 18 : http://www.bitlaw.com/internet/webpage.html Ref 19 : http://en.wikipedia.org/wiki/HTTPS
The pages of the web addresses mentioned above were browsed on 24th July 2007. You can access all theses content from LMS.
DETAILED SYLLABUS :
Section 1: Introduction to the Internet and Web (4hrs) Instructional Objectives
• Recognize the Internet as an interconnected network which carries various
information and services
• Describe the World Wide Web (WWW) architecture • Describe the client-server architecture and HTTP protocol • Identify main bodies who control the standards for WWW
Material /Sub Topics
1.1. What is the Internet? [Ref 2]
1.2. What is the World Wide Web? [Ref 3] 1.2.1. Web servers and web browsers
1.2.2. IP address and Domain Name System (DNS) 1.2.3. URI and URL
1.2.4. Client-server model 1.2.5. HTTP protocol
1.3. Standards bodies [Ref 4, Ref 5, Ref 6]
1.3.1. The World Wide Web Consortium (W3C)
1.3.2. Internet Engineering Task Force (IETF) and RFCs
Section 2 : Web page design with HTML and CSS (16 hrs) Instructional Objectives
• Describe the structure of a HTML page using various HTML tags • Modify the presentation of information of a given HTML page by adding
images and various formatting
• Create web pages with inter-page and intra-page links • Add and manage frames
• Describe the use of HTML forms and include them in a HTML page • Describe a style sheet language in contrast to markup language • Describe programming concepts of CSS language
Material /Sub Topics
2.1. Designing HTML documents
2.1.1. Document tags [Ref 1: pg 13 – 21] 2.1.2. Paragraphs and lines [Ref 1: pg 23 – 33] 2.1.3. Ordered and unordered lists [Ref 1: pg 35 – 49] 2.1.4. Inserting images [Ref 1: pg 51 – 67]
2.1.5. Absolute and relative links [Ref 1: pg 69 – 77] 2.1.6. Text and text formatting [Ref 1: pg 79 – 88] 2.1.7. Tables and table formatting [Ref 1: pg 89 – 110] 2.1.8. Using tables for page layout [Ref 1: pg 111 – 120] 2.1.9. Using frames and frame targeting [Ref 1: pg 121 -122] 2.1.10. Designing forms [Ref 1: pg 123 – 142]
2.2. Defining styles using CSS
2.2.1. Styles and HTML [Ref 1: pg 164 – 169]
2.2.2. Selectors, structure and cascade [Ref 1: pg 171 - 172] 2.2.3. Values and units [Ref 1: pg 172 -187]
2.2.4. Text properties [Ref 1: pg 189 - 209] 2.2.5. Fonts [Ref 1: pg 210 - 214]
2.2.6. Colors and backgrounds [Ref 1: pg 227 - 236] 2.2.7. Visual formatting [Ref 1: pg 215 - 225]
2.2.8. Boxes and borders [Ref 1: pg 219 – 225, 238 - 244] 2.2.9. Positioning [Ref 1: pg 245 - 255]
2.2.10. Table layout [Ref 1: pg 244]
2.2.11. User interface styles [Ref 1: pg 255 - 262]
Section 3 : Client-side programming with JavaScript (14 hrs)
Instructional Objectives
• List client-side scripting languages
• Explain the programming concepts and data types in JavaScript language • Identify the object-oriented concepts used by JavaScript
• Use JavaScript to create a simple webpage with dynamic content • Create a webpage including forms and use JavaScript to validate fields
Material /Sub Topics
3.1. Client-side programming languages [Ref 1: pg 263 - 264] 3.2. Uses of JavaScript [Ref 1: pg 265]
3.3. Incorporating JavaScript in a HTML document [Ref 1: pg 266 - 268] 3.4. Basic JavaScript syntax [Ref 1: pg 269]
3.5. Data types and variables [Ref 1: pg 270 - 271] 3.6. Expressions and operators [Ref 1: pg 272 - 274] 3.7. Control structures [Ref 1: pg 274 - 279]
3.8. Functions and procedures [Ref 1: pg 279 - 281] 3.9. Arrays and objects [Ref 1: pg 281 – 284 , 311 - 322] 3.10. Document object model (DOM) [Ref 1: pg 291 - 310] 3.11. Event handling [Ref 1: pg 284 - 290]
3.12. Using JavaScript for form validation [Ref 1: pg 341 - 347]
Section 4 : Server-side programming with PHP (14 hrs) Instructional Objectives
• Explain server-side programming • List server-side programming languages
• Explain the programming concepts and data types in PHP language • Identify the object-oriented concepts in PHP
• Use PHP to process a HTML form • Identify some useful functions in PHP • Create sessions in a PHP-based website • Identify other facilities in PHP
• Connect to a MySQL database using PHP and exchange data
Material /Sub Topics
4.1. Server side programming languages [Ref 1: pg 471 - 473] 4.2. PHP fundamentals [Ref 1: pg 473 - 474]
4.3. Data types and variables [Ref 1: pg 475- 477] 4.4. Expressions and operators [Ref 1: pg 479 - 481]
4.5. Control structures [Ref 1: pg 482 - 486]
4.6. Functions and procedures [Ref 1: pg 486 - 491] 4.7. Arrays and objects [Ref 1: pg 491 - 494] 4.8. Form data handling [Ref 1: pg 514 - 522] 4.9. Handling sessions [Ref 1: pg 523 - 526]
4.10. Accessing a MySQL database [Ref 1: pg 523 - 526] 4.11. Errors and troubleshooting [Ref 1: pg 500 - 506]
Section 5 : More topics in web development (12 hrs) Instructional Objectives
• Identify HTML editors and their features
• List popular solution stacks and explain their advantages and disadvantages • Identify the 3-tier architecture in web application development
• Distinguish between web servers and application servers
• Explain how AJAX can be used to improve the presentation of information • Identify issues involved in publishing a website to a web server
• Describe copyright and privacy issues in web content development • Identify available technologies to make web transactions secure
Material /Sub Topics
5.1. HTML editors for website development: e.g. Microsoft FrontPage and Macromedia Dreamweaver [Ref 7, Ref 8]
5.2. Solution stacks: e.g. LAMP, WAMP [Ref 9]
5.3. Developing web applications applying 3-tier architecture [Ref 10]
5.4. Web servers, application servers and web application servers: e.g. Apache web server and Tomcat web application server [Ref 11-14] 5.5. Developing interactive web applications using AJAX [Ref 15] 5.6. Website hosting and ISPs [Ref 16, Ref 17]
5.7. Website legal issues: copyright, privacy and terms of use [Ref 18] 5.8. Security protocols and secure connections: e.g. SSL and HTTPS [Ref 19]
PLATFORM
• Windows or Linux • Apache 2.x • PHP 5.x • MySQL 5.X
Activities -
Please refer to the activities on the e-learning material in your Learning Management System (LMS).
Assessment -
You will get two online assignments as Assignment Quiz 1 and Assignment Quiz 2. The final exam will be conducted in a face to face environment.
Contact details
