web lab.pdf

Lovely Professional University, Punjab

Course Code Course Title Course Planner Lectures Tutorials Practicals Credits

INT3020P WEB PROGRAMMING 16479::Parminder Singh 0.0 0.0 3.0 2.0

Course Category Practical Course

TextBooks

Sr No Title Author Edition Year Publisher Name

T-1 HTML5 BLACK BOOK:COVERS CSS3,JAVASCRIPT,XML,XHTML,AJAX,PHP AND JQUERY

KOGENT LEARNING SOLUTIONS INC

1st 2012 Wiley

Reference Books

Sr No Title Author Edition Year Publisher Name

R-1 Web Enabled Commercial Application Development Using Html, Dhtml,javascript, DHTML and PHP

Ivan Bayross 4th 2009 BPB

Relevant Websites

Sr No (Web address) (only if relevant to the course) Salient Features

RW-1 http://msdn.microsoft.com/library/aa218647.aspx Introduction to Web Technologies

RW-2 http://www.w3schools.com/html5/html5_new_elements.asp New Elements and Attributes

RW-3 http://www.w3schools.com/html5/html5_new_elements.asp New HTML5 Elements

RW-4 http://www.htmlportal.net/html-tutorial/font-styles.htm Physical and Logical style elements

RW-5 http://docstore.mik.ua/orelly/web2/xhtml/ch04_01.htm Text Basics

RW-6 http://www.w3schools.com/html/html_links.asp HTML Links

RW-7 http://www.w3schools.com/html/html_intro.asp HTML Page Structure

RW-8 http://www.w3schools.com/html/html_images.asp Working with Images

RW-9 http://www.w3schools.com/html/html_forms.asp HTML Form Attributes

RW-10 http://www.w3schools.com/html5/html5_form_input_types.asp HTML5 New Input Types

RW-11 http://www.w3schools.com/html/html_sounds.asp AUDIO Element

RW-12 http://www.w3schools.com/html/html_videos.asp VIDEO Element

RW-13 http://www.w3schools.com/html5/tag_embed.asp EMBED Tag

RW-14 http://www.w3schools.com/html/html_object.asp OBJECT Element

RW-15 http://wally.cs.iupui.edu/n341_05/ JavaScript Basics

RW-16 http://www.tizag.com/javascriptT/javascriptheadnbody.php How to insert JavaScript into HTML page

RW-17 http://www.tizag.com/javascriptT/javascriptsyntax.php How to write JavaScript

RW-18 http://www.w3schools.com/js/js_popup.asp Popup Boxes

RW-19 http://dev.opera.com/articles/view/javascript-functions/ JavaScript Functions

RW-20 http://www.webmonkey.com/2010/02/javascript_events/ JavaScript Events

RW-21 http://msdn.microsoft.com/en-us/library/ie/ff974169%28v=vs.85%29.aspx Media Elements

RW-22 http://www.w3schools.com/js/js_obj_intro.asp Object Introduction

RW-23 http://www.javacommerce.com/displaypage.jsp?name=ch5.sql&id=18220 String, Math and Date object

RW-24 http://www.hunlock.com/blogs/Mastering_Javascript_Arrays Mastering JavaScript Arrays

RW-25 http://www.howtocreate.co.uk/tutorials/javascript/domstructure DOM Objects and Methods

RW-26 http://htmlhelp.com/reference/css/ Cascading Style Sheets

RW-27 http://www.w3schools.com/xml/default.asp XML Basics and XML Parser

RW-28 http://www.w3schools.com/js/js_form_validation.asp JavaScript For Validation

RW-29 http://www.w3schools.com/css3/css3_transitions.asp CSS3 Transitions

RW-30 http://freevideolectures.com/Course/2308/Internet-Technology/25 JavaScript

Audio Visual Aids

Sr No (AV aids) (only if relevant to the course) Salient Features

AV-1 http://www.learnerstv.com/video/Free-video-Lecture-19517-Computers.htm

AV-2 http://freevideolectures.com/Course/2308/Internet-Technology

AV-3 http://www.learnerstv.com/video/Free-video-Lecture-19541-Computers.htm

AV-4 http://freevideolectures.com/Course/2308/Internet-Technology/25 JavaScript

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

Detailed Plan For Practicals

Practical No Broad topic (Subtopic) Practical Description Learning Outcomes Equipment Used

Practical 1 Exposure to HTML5(Working with Root and Metadata, Script and NonScript, Header and Footer elements)

Elements and attributes of HTML5 Working on elements and attributes that make website more interactive

Web Browser and Text Editor

Exposure to HTML5(Working with Section and Headings, Character Entities, Horizontal Rules and Line Breaks and Paragraph)

Elements and attribution used to format the web page.

Working on the tags used to format the web page


Exposure to HTML5(Working with Citation, Quotation, Definitions and Comments)

Quoting text in HTML Working on quoting text in HTML Web Browser and Text Editor

Practical 2 Working with Text, Links, Images and Tables in HTML(Displaying Plain, Bold, Italic, Small, SubScripted, SuperScripted text)

Formatting the text To understand various ways to format the text.


Working with Text, Links, Images and Tables in HTML(Displaying Program Code, Program Output, Keyboard text, Emphasizing text)

Working with Text To display various type of text on web page.


Working with Text, Links, Images and Tables in HTML(Defining New Terms, Short and long Quotations)

Working with Text To learn methods to display long and short quotations.


Working with Text, Links, Images and Tables in HTML(Displaying Inserted Text, Variables and Arguments)

Working with variables and arguments Working on displaying variables and arguments.


Working with Text, Links, Images and Tables in HTML(Overriding Text Direction, MARK Element and Creating Keyboard Shortcuts)

Working with Text To learn the use of MARK element and creating keyboard shortcuts


Working with Text, Links, Images and Tables in HTML(Using Word Breaks, Displaying Preformatted Text)

Organizing Text in HTML To learn breaking of word or paragraph and displaying preformatted text


Working with Text, Links, Images and Tables in HTML(DIV and SPAN Element)

Organizing Text in HTML Working on positioning the Text and change the format of specific part.


Working with Text, Links, Images and Tables in HTML(Creating Ruby Text, Creating Lists)

Formatting Text using Tables To learn creating captioned text Web Browser and Text Editor

Component % of Marks

J/E 50

WR 20

VIVA 30

Practical 2 Working with Text, Links, Images and Tables in HTML(Creating Hyperlink, Linking to a Mail System)

Working with Links and URLs Use of Hyperlinks and its properties. Web Browser and Text Editor

Working with Text, Links, Images and Tables in HTML(Implementing Link Relations)

Working with Links and URLs To learn use of LINK tag with CSS Web Browser and Text Editor

Working with Text, Links, Images and Tables in HTML(Creating Tables using Rowspan and Colspan, Using Images in Tables)

Spanning Rows and Columns Working on tables spanning and use image in Tables


Working with Text, Links, Images and Tables in HTML(Creating Advanced Tables, Nesting Tables)

Advanced and Nesting Tables Introducing advanced table structure and Nesting tables.


Working with Text, Links, Images and Tables in HTML(Working with Images, Using Image as an Hyperlink, Creating Image Map)

Working with Images and Colors To learn insertion of Image in a web page, image as hyperlink and creation of Image map.


Practical 3 Working with Forms and Interactive elements(Creating a Form, Working with Input, Button, DataList, KeyGen and Output Element)

Working with Forms Creation of form and display the textbox, button, checkbox, radio button. Working on KEYGEN and OUTPUT elements.


Working with Forms and Interactive elements(Working with Progress, Meter element)

Working with Forms To view the progress of our current task and display a range of scalable measurement.


Working with Forms and Interactive elements(Using the enctype, action, and method attribute)

Form attributes Various method associate with Form Web Browser and Text Editor

Working with Forms and Interactive elements(Using the Detail and Summary, Command and Menu element)

Interactive Elements Providing additional information regarding your document, executing command and displaying menu in web page.


Working with Forms and Interactive elements(Using the KBD and TIME Element)

Interactive Elements To display the keyboard text and time on web page.


Practical 4 Working with Multimedia(Setting the Background sound using the AUDIO element)

Working with Multimedia To play the audio sound in web page. Web Browser and Text Editor

Working with Multimedia(Using the VIDEO Element)

Working with Multimedia To play the video file in web page. Web Browser and Text Editor

Working with Multimedia(Embedding the AUDIO and VIDEO file using EMBED element)

Working with Multimedia To add multimedia files using EMBED element


Working with Multimedia(Adding multimedia files using OBJECT element)

Working with Multimedia Playing Background music using the OBJECT element


Working with Multimedia(Initializing an OBJECT using PARAM element)

Initializing the Object Use of PARAM element to pass the parameters to object


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

Overview of JavaScript To learn placing SCRIPT element in HEAD and BODY elements.


JavaScript Application Development(Using variables and operators)

Variables in JavaScript Declaration of variables and use it in the script with operators


JavaScript Application Development(Using control statements such as if...else, switch, break and continue)

Control Statements in JavaScript Use of conditional statement for business logic


JavaScript Application Development(Using looping statements such as while, do...while, for)

Control Statements in JavaScript Working on loop statement in JavaScript


JavaScript Application Development(Using Popup boxes such as Alert, Confirm, and Prompt)

Working with Messages To displaying various messages. Web Browser and Text Editor

Practical 6 JavaScript Functions and Events(Working with functions with parameters, Using function Arguments, Return statement)

Working with Functions Working on functions in JavaScript. Web Browser and Text Editor

JavaScript Functions and Events(Working with setTimeout(), setInterval() methods)

JavaScript Methods To specify the time interval for coding execution.


JavaScript Functions and Events(Working with onclick, onload,onreset, onsubmit, ondblclick, onmouseover, onmouseout, onmousemove, onmouseup, onmousedown)

Working with Events Various events associate with mouse Web Browser and Text Editor

JavaScript Functions and Events(Events for media elements of HTML such as onended, onratechange, onwaiting)

Working with Events Various events for media elements Web Browser and Text Editor

JavaScript Functions and Events(Validating Forms using JavaScript)

Form Validation 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)

Objects in JavaScript Working on objects used to implement business logic


JavaScript Objects(Working with an Array Object)

Working on Array Object Working on Array Object Web Browser and Text Editor

JavaScript Objects(Working with Math and Date Object)

Date and Math Object To learn how to perform basic mathematical functions and showing date.


Practical 8 Document Object Model(Working with Document Object Collection, Document Object Methods)

Document Object Working on document object collections, methods and properties


Document Object Model(Verifying the Type of Node, ChildNodes of a Node)

Document Object Model Identifying the nodes and child nodes used in web page


Document Object Model(Changing the text of an element)

Document Object Model To learn automatically change the text on web page


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

CSS Create the CSS code and use it as internal, external and inline CSS file


Practical 9 CSS(CSS selectors: The universal, The type, The class, The ID)

CSS Define the type, ID and class Web Browser and Text Editor

CSS(Working with Background Colors and Images, Font and Text styles)

CSS Implement the styles on various elements


CSS(Working with Borders, Displaying, Positioning and Floating of an element)

CSS Working on outlining and positioning of elements


Practical 10 XML(Creating an XML document, Defining XML attributes)

XML Document Create XML document using use-defined elements


XML(Creating an XML Tree, Working with XML Comments)

XML Parser Create XML document and display in web page using XML parser


SPILL OVERPractical 11 JavaScript Form Validation and Different

types of Effects in CSSTo validate the data before sending off the server and adding the effects into HTML web pages with CSS


web lab.pdf

Documents

Transcript of web lab.pdf