Lovely Professional University, Punjab

Course Code INT3020P Course Category Course Title WEB PROGRAMMING Practical Course Course Planner 16479::Parminder Singh Lectures 0.0 Tutorials Practicals Credits 0.0 3.0 2.0

TextBooks Sr No T-1 Title Author Edition 1st Year 2012 Publisher Name Wiley HTML5 BLACK BOOK:COVERS KOGENT LEARNING CSS3,JAVASCRIPT,XML,XHTML, SOLUTIONS INC AJAX,PHP AND JQUERY Reference Books Sr No R-1 Title Author Edition 4th Year 2009 Publisher Name BPB Web Enabled Commercial Ivan Bayross Application Development Using Html, Dhtml,javascript, DHTML and PHP

Relevant Websites Sr No RW-1 RW-2 RW-3 RW-4 RW-5 RW-6 RW-7 RW-8 RW-9 RW-10 RW-11 RW-12 RW-13 (Web address) (only if relevant to the course) http://msdn.microsoft.com/library/aa218647.aspx http://www.w3schools.com/html5/html5_new_elements.asp http://www.w3schools.com/html5/html5_new_elements.asp http://www.htmlportal.net/html-tutorial/font-styles.htm http://docstore.mik.ua/orelly/web2/xhtml/ch04_01.htm http://www.w3schools.com/html/html_links.asp http://www.w3schools.com/html/html_intro.asp http://www.w3schools.com/html/html_images.asp http://www.w3schools.com/html/html_forms.asp http://www.w3schools.com/html5/html5_form_input_types.asp http://www.w3schools.com/html/html_sounds.asp http://www.w3schools.com/html/html_videos.asp http://www.w3schools.com/html5/tag_embed.asp Salient Features Introduction to Web Technologies New Elements and Attributes New HTML5 Elements Physical and Logical style elements Text Basics HTML Links HTML Page Structure Working with Images HTML Form Attributes HTML5 New Input Types AUDIO Element VIDEO Element EMBED Tag

RW-14 RW-15 RW-16 RW-17 RW-18 RW-19 RW-20 RW-21 RW-22 RW-23 RW-24 RW-25 RW-26 RW-27 RW-28 RW-29 RW-30

http://www.w3schools.com/html/html_object.asp http://wally.cs.iupui.edu/n341_05/ http://www.tizag.com/javascriptT/javascriptheadnbody.php http://www.tizag.com/javascriptT/javascriptsyntax.php http://www.w3schools.com/js/js_popup.asp http://dev.opera.com/articles/view/javascript-functions/ http://www.webmonkey.com/2010/02/javascript_events/ http://msdn.microsoft.com/en-us/library/ie/ff974169%28v=vs.85%29.aspx http://www.w3schools.com/js/js_obj_intro.asp http://www.javacommerce.com/displaypage.jsp?name=ch5.sql&id=18220 http://www.hunlock.com/blogs/Mastering_Javascript_Arrays http://www.howtocreate.co.uk/tutorials/javascript/domstructure http://htmlhelp.com/reference/css/ http://www.w3schools.com/xml/default.asp http://www.w3schools.com/js/js_form_validation.asp http://www.w3schools.com/css3/css3_transitions.asp http://freevideolectures.com/Course/2308/Internet-Technology/25

OBJECT Element JavaScript Basics How to insert JavaScript into HTML page How to write JavaScript Popup Boxes JavaScript Functions JavaScript Events Media Elements Object Introduction String, Math and Date object Mastering JavaScript Arrays DOM Objects and Methods Cascading Style Sheets XML Basics and XML Parser JavaScript For Validation CSS3 Transitions JavaScript

Audio Visual Aids Sr No AV-1 AV-2 AV-3 AV-4 (AV aids) (only if relevant to the course) http://www.learnerstv.com/video/Free-video-Lecture-19517-Computers.htm http://freevideolectures.com/Course/2308/Internet-Technology http://www.learnerstv.com/video/Free-video-Lecture-19541-Computers.htm http://freevideolectures.com/Course/2308/Internet-Technology/25 JavaScript Salient Features

*Each experiment of the lab will be evaluated using following relative scheme:

Component J/E WR VIVA

% of Marks 50 20 30

Detailed Plan For Practicals

Practical No Practical 1 Broad topic (Subtopic) Practical Description Learning Outcomes Equipment Used Exposure to HTML5(Working with Root Elements and attributes of HTML5 and Metadata, Script and NonScript, Header and Footer elements) Exposure to HTML5(Working with Elements and attribution used to format Section and Headings, Character Entities, the web page. Horizontal Rules and Line Breaks and Paragraph) Exposure to HTML5(Working with Citation, Quotation, Definitions and Comments) Practical 2 Quoting text in HTML Working on elements and attributes that Web Browser and Text Editor make website more interactive Working on the tags used to format the Web Browser and Text Editor web page

Working on quoting text in HTML

Web Browser and Text Editor

Working with Text, Links, Images and Formatting the text Tables in HTML(Displaying Plain, Bold, Italic, Small, SubScripted, SuperScripted text) Working with Text, Links, Images and Tables in HTML(Displaying Program Code, Program Output, Keyboard text, Emphasizing text) Working with Text, Links, Images and Tables in HTML(Defining New Terms, Short and long Quotations) Working with Text, Links, Images and Tables in HTML(Displaying Inserted Text, Variables and Arguments) Working with Text, Links, Images and Tables in HTML(Overriding Text Direction, MARK Element and Creating Keyboard Shortcuts) Working with Text, Links, Images and Tables in HTML(Using Word Breaks, Displaying Preformatted Text) Working with Text, Links, Images and Tables in HTML(DIV and SPAN Element) Working with Text, Links, Images and Tables in HTML(Creating Ruby Text, Creating Lists) Working with Text

To understand various ways to format the text.

Web Browser and Text Editor

To display various type of text on web page.

Web Browser and Text Editor

Working with Text

To learn methods to display long and short quotations. Working on displaying variables and arguments.

Web Browser and Text Editor

Working with variables and arguments

Web Browser and Text Editor

Working with Text

To learn the use of MARK element and Web Browser and Text Editor creating keyboard shortcuts

Organizing Text in HTML

To learn breaking of word or paragraph Web Browser and Text Editor and displaying preformatted text Working on positioning the Text and change the format of specific part. To learn creating captioned text Web Browser and Text Editor

Organizing Text in HTML

Formatting Text using Tables

Web Browser and Text Editor

Practical 2

Working with Text, Links, Images and Tables in HTML(Creating Hyperlink, Linking to a Mail System) Working with Text, Links, Images and Tables in HTML(Implementing Link Relations) Working with Text, Links, Images and Tables in HTML(Creating Tables using Rowspan and Colspan, Using Images in Tables) Working with Text, Links, Images and Tables in HTML(Creating Advanced Tables, Nesting Tables) Working with Text, Links, Images and Tables in HTML(Working with Images, Using Image as an Hyperlink, Creating Image Map)

Working with Links and URLs

Use of Hyperlinks and its properties.

Web Browser and Text Editor

Working with Links and URLs

To learn use of LINK tag with CSS

Web Browser and Text Editor

Spanning Rows and Columns

Working on tables spanning and use image in Tables

Web Browser and Text Editor

Advanced and Nesting Tables

Introducing advanced table structure and Nesting tables. To learn insertion of Image in a web page, image as hyperlink and creation of Image map.

Web Browser and Text Editor

Working with Images and Colors

Web Browser and Text Editor

Practical 3

Working with Forms and Interactive Working with Forms elements(Creating a Form, Working with Input, Button, DataList, KeyGen and Output Element) Working with Forms and Interactive elements(Working with Progress, Meter element) Working with Forms and Interactive elements(Using the enctype, action, and method attribute) Working with Forms

Creation of form and display the Web Browser and Text Editor textbox, button, checkbox, radio button. Working on KEYGEN and OUTPUT elements. To view the progress of our current task Web Browser and Text Editor and display a range of scalable measurement. Various method associate with Form Web Browser and Text Editor

Form attributes

Working with Forms and Interactive Interactive Elements elements(Using the Detail and Summary, Command and Menu element) Working with Forms and Interactive elements(Using the KBD and TIME Element) Practical 4 Working with Multimedia(Setting the Background sound using the AUDIO element) Working with Multimedia(Using the VIDEO Element) Interactive Elements

Providing additional information regarding your document, executing command and displaying menu in web page. To display the keyboard text and time on web page. To play the audio sound in web page.

Web Browser and Text Editor

Web Browser and Text Editor

Working with Multimedia

Web Browser and Text Editor

Working with Multimedia

To play the video file in web page.

Web Browser and Text Editor

Working with Multimedia(Embedding the Working with Multimedia AUDIO and VIDEO file using EMBED element) Working with Multimedia(Adding Working with Multimedia multimedia files using OBJECT element) Working with Multimedia(Initializing an Initializing the Object OBJECT using PARAM element)

To add multimedia files using EMBED Web Browser and Text Editor element Playing Background music using the OBJECT element Use of PARAM element to pass the parameters to object Web Browser and Text Editor Web Browser and Text Editor

Practical 5

JavaScript Application Development (Incorporating JavaScript in the HEAD and BODY element, Using an External JavaScript file) JavaScript Application Development (Using variables and operators)

Overview of JavaScript

To learn placing SCRIPT element in HEAD and BODY elements.

Web Browser and Text Editor

Variables in JavaScript

Declaration of variables and use it in the script with operators Use of conditional statement for business logic Working on loop statement in JavaScript To displaying various messages.

Web Browser and Text Editor Web Browser and Text Editor

JavaScript Application Development Control Statements in JavaScript (Using control statements such as if...else, switch, break and continue) JavaScript Application Development Control Statements in JavaScript (Using looping statements such as while, do...while, for) JavaScript Application Development (Using Popup boxes such as Alert, Confirm, and Prompt) Practical 6 Working with Messages

Web Browser and Text Editor

Web Browser and Text Editor

JavaScript Functions and Events(Working Working with Functions with functions with parameters, Using function Arguments, Return statement) JavaScript Functions and Events(Working JavaScript Methods with setTimeout(), setInterval() methods) JavaScript Functions and Events(Working Working with Events with onclick, onload,onreset, onsubmit, ondblclick, onmouseover, onmouseout, onmousemove, onmouseup, onmousedown) JavaScript Functions and Events(Events for media elements of HTML such as onended, onratechange, onwaiting) JavaScript Functions and Events (Validating Forms using JavaScript) Working with Events

Working on functions in JavaScript.

Web Browser and Text Editor

To specify the time interval for coding execution. Various events associate with mouse

Web Browser and Text Editor Web Browser and Text Editor

Various events for media elements

Web Browser and Text Editor

Form Validation Objects in JavaScript

Client side validation

Web Browser and Text Editor

Practical 7

JavaScript Objects(Working with the Templates of an Object, String Object, Boolean Object, Number Object) JavaScript Objects(Working with an Array Object) JavaScript Objects(Working with Math and Date Object)

Working on objects used to implement Web Browser and Text Editor business logic Working on Array Object To learn how to perform basic mathematical functions and showing date. Working on document object collections, methods and properties Identifying the nodes and child nodes used in web page To learn automatically change the text on web page Create the CSS code and use it as internal, external and inline CSS file Web Browser and Text Editor Web Browser and Text Editor

Working on Array Object Date and Math Object

Practical 8

Document Object Model(Working with Document Object Collection, Document Object Methods) Document Object Model(Verifying the Type of Node, ChildNodes of a Node) Document Object Model(Changing the text of an element)

Document Object

Web Browser and Text Editor

Document Object Model Document Object Model CSS

Web Browser and Text Editor Web Browser and Text Editor Web Browser and Text Editor

Practical 9

CSS(Using External, Internal, and Inline CSS file)

Practical 9

CSS(CSS selectors: The universal, The type, The class, The ID) CSS(Working with Background Colors and Images, Font and Text styles) CSS(Working with Borders, Displaying, Positioning and Floating of an element)

CSS CSS CSS XML Document XML Parser

Define the type, ID and class Implement the styles on various elements Working on outlining and positioning of elements Create XML document using usedefined elements Create XML document and display in web page using XML parser

Web Browser and Text Editor Web Browser and Text Editor Web Browser and Text Editor Web Browser and Text Editor Web Browser and Text Editor

Practical 10

XML(Creating an XML document, Defining XML attributes) XML(Creating an XML Tree, Working with XML Comments)

SPILL OVER
Practical 11 JavaScript Form Validation and Different To validate the data before sending off types of Effects in CSS the server and adding the effects into HTML web pages with CSS Web Browser and Text Editor