• Short Name N/A
  • Course code IT 215
  • Semester Third Semester
  • Full Marks 100
  • Pass Marks 45
  • Credit Hrs 3
  • Elective/Compulsary Compulsary

Web Programming I

Chapter wise complete Notes.

Course Description

Course Objective :

This course is designed to serve as an ideal beginners guide to writing web pages using XHTML, using CSS to make pages more appealing and add interactivity to pages using JavaScript.

Course description:

Structuring Documents for the Web, Links and Navigation, Images, Audio, and Video, Tables, Forms, Cascading Style Sheets, More Cascading Style Sheets, Page Layout, Design Issues, Learning JavaScript, Working with JavaScript

Unit Contents

Course Details

Unit 1: HTML                                                                                                             LH16

  • Structuring Documents for the Web

A Web of Structured Documents, Introducing HTML and XHTML, Tags and Elements, Separating Heads from Bodies, Attributes Tell Us About Elements, Learning from Others by Viewing Their Source Code, Elements for Marking Up Text , The <html> Element, The <head> Element, The <title> Element, The <body> Element

·    Basic Text Formatting , Presentational Elements, Phrase Elements

White Space and Flow, Creating Headings Using <hn> Elements, Creating Paragraphs Using the

<p> Element, Creating Line Breaks Using the <br /> Element, Creating Preformatted Text Using the <pre> Element , The <b>Element, The <i>Element, The <tt> Element, The <sup> Element, The <sub> Element, The <big> Element, The <small> Element, The <hr /> Element, The <em> Element Adds Emphasis, The <strong> Element Adds Strong Emphasis, The <address> Element Is for Addresses, The <abbr> Element Is for Abbreviations, The <acronym> Element Is for Acronym Use, The <dfn> Element Is for Special Terms, The <blockquote> Element Is for Quoting Text, Using the cite Attribute with the <blockquote> Element, The <q> Element Is for Short Quotations, The <cite> Element Is for Citations, The <code> Element Is for Code , The

<kbd> Element Is for Text Typed on a Keyboard, The <var> Element Is for Programming Variables, The <samp> Element Is for a Program Output

·    Lists

Using the <ul> Element to Create Unordered Lists,Ordered Lists, Definition Lists, Nesting Lists, Comments, Understanding Block and Inline Elements, Grouping Elements with <div> and

<span>,The XML Declaration, Document Type Declaration

·    Understanding Directories and Directory Structures

Understanding URLs, Absolute and Relative URLs, The <base> Element

·    Creating Links with the <a> Element

Basic Links, Linking to Other Web Pages, Linking to E-mail Addresses, Creating a Source Anchor with the href Attribute, Creating a Destination Anchor Using the name and id Attributes , (Linking to a Specific Part of a Page), The <a> Element’s Other Attributes,

  • Images, Audio, and Video, Using Images as Links, Choosing the Right Image Format Adding Images Using the <img> Element, The src Attribute, The alt Attribute , The height and width Attributes, The ismap and usemap Attributes, The longdesc Attribute, Image Maps, Client- Side Image Maps, Server-Side Image Maps, GIF Images, Animated GIFs, JPEG Images, PNG Images , Keeping File Sizes Small

·    Adding Flash, Video, and Audio to Your Web Pages

Adding Flash Movies to Your Site, Adding Videos to Your Site, Adding Videos, Using Flash

Video

Audio to Your Site, Automatically Playing Audio and Video When a Page Loads, A Closer Look at the <object> and <param> Elements, The <param> Element

·    Tables

Introducing Tables, Basic Table Elements and Attributes, The <table> Element Creates a Table, The <tr> Element Contains Table Rows, The <td> and <th> Elements Represent Table Cells, Adding a <caption> to a Table, Grouping Sections of a Table, Spanning Columns Using the colspan Attribute, Spanning Rows Using the rowspan Attribute, Splitting Up Tables Using a Head, Body, and Foot , Grouping Columns Using the <colgroup> Element , Columns Sharing Styles Using the <col> Element

·    Forms and Form Controls

Introducing Forms, Creating a Form with the <form> Element

The action Attribute , The method Attribute, The id Attribute, The onsubmit Attribute, The onreset Attribute, The enctype Attribute, The accept-charset Attribute, The accept Attribute, The target Attribute, White Space and the <form> Element

Text Inputs, Buttons, Checkboxes, Radio Buttons, Select Boxes, File Select Boxes, Hidden Controls,

·    Creating Labels for Controls and the <label> Element

Structuring Your Forms with <fieldset> and <legend> Elements

Focus, Tabbing Order, Access Keys, Disabled and Read-Only Controls, Sending Form Data to the Server, HT TP get , HT TP post, Cascading Style Sheets 243

After completion of this section following web-pages have to be developed:

  • Web page with list and menus
  • Different look and feel web pages using divisions
  • Photo gallery
  • Page with internal and external links
  • Web page with videos
  • User interface with different controls to take user data should be developed

Unit 2 : Introducing CSS                                            LH16

A Basic Example, Inheritance,, Where You Can Add CSS Rules, The <link> Element, The

<style> Element, Advantages of External CSS Style Sheets, CSS Properties

·    Controlling Text

The font-family Property, The font-size Property, The font-weight Property, The font-style Property,

The font-variant Property, The font-stretch Property, The font-size-adjust Property,

·    Text Formatting

The color Property, The text-align Property, The vertical-align Property, The text-decoration Property,

The text-indent Property, The text-shadow Property, The text-transform Property, The letter- spacing Property, The word-spacing Property, The white-space Property, The direction Property

·    Selectors

Universal Selector, The Type Selector, The Class Selector, The ID Selector, The Child Selector, The Descendant Selector, The Adjacent Sibling Selector

·    The General Sibling Selector

Using Child and Sibling Selectors To Reduce Dependence on Classes in Markup, Attribute Selectors,

·    Lengths

Relative Units, Absolute Units, Percentages

·    Introducing the Box Model

An Example Illustrating the Box Model, The Border Properties, The padding Property, The margin Property, Dimensions of a Box, Internet Explorer Box Model Bug

·    More Cascading Style Sheets

Links, Backgrounds:The background-color Property, The background-image Property, The background-repeat Property, The background-position Property (for Fixing Position of Backgrounds), The background-attachment Property (for Watermarks), The background Property (the Shorthand)

·    Lists

The list-style-type Property, The list-style-position Property, The list-style-image Property, The list-style Property (the Shorthand)

·    Tables

Table-Specific Properties, The border-collapse Property, The border-spacing Property, The empty-cells Property, The caption-side Property, The table-layout Property

·    Outlines

The outline-width Property, The outline-style Property, The outline-color Property, The outline Property (the Shorthand)

·    The :focus and :active Pseudo-Classes

Generated Content

The :before and :after Pseudo-Elements, The content Property, The cursor Property, The display Property, The visibility Property

·    Positioning and Layout with CSS

Normal Flow, The position Property, Box Offset Properties, Relative Positioning, Absolute Positioning,

Fixed Positioning, The z-index Property, Floating Using the float Property, The clear Property

·    Page Layout

Understanding the Site’s Audience

Who Will Visit the Site? Why Have They Visited Your Site? What Does a Visitor Need to Achieve a Goal? How Often Will People Want to Visit? Things You Want the Site to Do, Prioritizing Information, Grouping and Categorization, Creating a Site Map, Identifying Key Elements for Each Page, Page Size (and Screen Resolution), Understanding Screen Sizes, Fixed- Width vs. Liquid Designs

After completing CSS,

Program with different kinds of styles should be developed

Unit 3 : Learning JavaScript                                   LH16

What Is Programming About? How to Add a Script to Your Pages, Comments in JavaScript, The

<noscript> Element, The Document Object Model, Accessing Values Using Dot Notation, The Document Object, The Forms Collection, Form Elements, Images Collection, Different Types of Objects, A Word About Data Types, Keywords,

·    Starting to Program with JavaScript

Variables, Assigning a Value to a Variable, Lifetime of a Variable, Operators, Arithmetic Operators, Assignment Operators, Comparison Operators, Logical or Boolean Operators, String Operator (Using + with Strings)

·    Functions

How to Define a Function, How To Call a Function, The Return Statement

·    Conditional Statements

if Statements, if . . . else Statements, switch Statement

·    Looping

While, do . . . while, for, Infinite Loops and the break Statement

·    Events

Built-in Objects: String, Date, Array, Window

·    Form Validation

When to Validate, What You Can Check For, How to Check a Form, Checking Text Fields, Select Box Options, Radio Buttons, Checkboxes

After completion of JavaScript:

o User interface with form validation capability should be developed, (validation: check for empty fields, specific length string, email validation etc)

After completion of this course, web site with data entry form with form validation functionality and attractive look and feel should be developed

Text and Reference Books

Reference

Beginning HTML, XHTML, CSS, and JavaScript, Jon Duckett, Wiley, ISBN: 978-0-470-54070-1

 

Top