IUWT Assignments

Assignments for Introduction to UI Concepts and Web

Technologies

Author(s) Anil Kumar P & Malathi M

Campus Connect Customization for FP 4.0 Kalpana

Authorized by Pramod Panda

Creation/Revision Date Sep 2014

Version 4.0

COPYRIGHT NOTICE 2014 Infosys Limited, Bangalore, India. All Rights Reserved. Infosys believes the information in this document is accurate as of its publication date; such information is subject to change without notice. Infosys acknowledges the proprietary rights of other companies to the trademarks, product names and such other intellectual property rights mentioned in this document. Except as expressly permitted, neither this documentation nor any part of it may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, printing, photocopying, recording or otherwise, without the prior permission of Infosys Limited and/ or any named intellectual property rights holders under this document.

Education, Training and Assessment Department Infosys Limited Electronics City Hosur Road Bangalore - 561 229, India. Tel: 91 80 852 0261-270 Fax: 91 80 852 0362 www.infosys.com mailto:[email protected]

CONFIDENTIAL

Document Revision History

Version Date Author(s) Reviewer(s) Description

1.0 Jan 2014 Anil Kumar P Manjunatha Prasanna Vijay Kumar Dani Initial creation as per FPR

2014 guidelines

2.0 Jun 2014 Anil Kumar P

Malathi M Suhird Singh

Manjunatha Prasanna Mohana Krishna B G

Updated based on the feedback from stake holders

Customization Revision History

Version Date Author(s) Reviewer(s) Description

4.0 Sep 2014 Kalpana Dr. Suresh P., Manisha Customization for Campus

Connect FP 4.0 release

CONFIDENTIAL

Contents COPYRIGHT NOTICE .............................................................................................................................................................. iContents .................................................................................................................................................................................. iiiAssignments for Introduction to UI Concepts and Web Technologies ...................................................................................... 1

Context ................................................................................................................................................................................... 1Guidelines .............................................................................................................................................................................. 1Assignment 1: Explore on your social Network .................................................................................................................... 2Assignment 2: Impact of Web ............................................................................................................................................... 2Assignment 3: Network Components .................................................................................................................................... 3Assignment 4: Interconnecting Devices ................................................................................................................................ 4Assignment 5: IP Addressing and Types of Web Content ..................................................................................................... 5Assignment 6: Understanding Browsers and HTML ............................................................................................................. 5Assignment 7: Ways to Apply CSS and its formatting .......................................................................................................... 7Assignment 8: Chaining of Selectors and Class in CSS ....................................................................................................... 8Assignment 9: Using div, Span, list, hyperlink and images in CSS....................................................................................... 9Assignment 10: Creating Tables and Form Elements in HTML ......................................................................................... 12Assignment 11: Understanding the client side Java Script .................................................................................................. 16Assignment 12: Understanding functions and scope of variables ........................................................................................ 18Assignment 13: Understanding typeof operator and in-built functions ............................................................................... 21Assignment 14: Functions and Dialog boxes ....................................................................................................................... 22Assignment 15: Applying styles to Tables and Form Elements .......................................................................................... 25Assignment 16: Creating Interactive Webpage and Apply CSS, Form Validation and submission using JavaScript ........ 27

Infosys Limited Lab Guide for Introduction to Web Technology

Version No: 4.0 Page 1 of 30

Assignments for Introduction to UI Concepts and Web Technologies

Context This document contains the assignments to be completed as part of the hands on for the subject Introduction to UI Concepts and Web Technologies.

Guidelines 1. All assignments in this document must be completed in order to complete the

course 2. The assignments need to be completed as instructed by the facilitators and

submitted appropriately 3. In order to complete the course, assignments in this document must be

completed in the sequence mentioned



Assignment 1: Explore on your social Network Objective: To explore on web technology statistics presently. Problem Description: Identify the statistical data for the Social Media listed below in the year 2014.

Google Twitter Yahoo You Tube Amazons Cloud Service

Q1: Active Users for all the above social networks. Q2: Number of visitors per day Q3: Data Storage or sharing per day Q4: Number of Hits per day Q5: Number of video uploads per minute in you tube. Q6: Number of page in google index Social Network 2014 Google Twitter Yahoo YouTube Amazons Cloud Service Active Users Visitors (per day) Data (per day) No. of Hits (per day)

Estimated time: 10 minutes

Assignment 2: Impact of Web Objective: To understand how web technology plays an important role in present day scenario.

Background: Wheel is one of greatest inventions of mankind during bronze era (3500 to 1200 BC). Steam Engine initiated Industrial revolution (1606 to 1770 AD) in Europe. The adding machine by Blaise Pascal (AD 1642) set the trend for automation of computations. The concept of amplification realized using the vacuum tube triodes brought paradigm shift in the field of electronics. The invention of transistor (AD 1947) revolutionized the field of semiconductor electronics. Yet another accomplishment is the



invention of microprocessor (AD 1971). The first Personal computer was rolled out by IBM in the year 1981. All these inventions have had a great impact on day to day life of people. Q1: In the last 40 years, what in your opinion is the significant revolution which has transformed the life style of people with the use of interconnected computers?

Q2: Can you list few popular online applications/systems which you have used for the following services?

communication and collaboration online shopping online ticket reservation online searching social networking

Q3: Which is your favorite web-browser? What makes it different from the other browsers? Where is the content displayed in the browser coming from?


Assignment 3: Network Components Objective: To study about different network components such as repeaters, hubs, bridges, switches, and routers.

Problem Description: A network service provider has several orders from reputed institutions and organizations for installation of connecting devices in their networks. Below are given details of few such orders.Identify the network component that can be suitably used for the below orders.

Scenario 1:Your University has two departments, Computer Science department and Mechanical Engineering department. Both are using Ethernet based networks. The distance between the two department buildings is around 500 meters within the university campus and the two networks need to be connected. What is the device that can be used?

Scenario 2:Your Company has two offices in a mega city. The first office located in heart of the city has network working on say, ATM technology, and the second office located around 50 km away has a network using Ethernet. The networks of the two offices need to be connected. What is the device that can be used?



Scenario 3: Data has to go from Bangalore to Chennai on a dedicated link on optical fiber. Since the distance of around 350 km between these two cities is quite high, the signal strength at the receiving end will become too poor and not remain recognizable by the receiver. What is the device that can be used for ensuring successful communication? Estimated time: 10 minutes Summary of this assignment:

You have learnt to identify the different interconnecting devices for the given scenarios.

Assignment 4: Interconnecting Devices Objective: To study about different network components such as repeaters, hubs, bridges, switches, and routers. Problem Description: If you are given two hosts which are connected via a black box which you dont know. How can you recognize that black box as hub, switch, router or gateway without using any additional device or host?

One more thing: You cannot perform any operation on the black box. You can't do anything with black box. You have access to two hosts only.

Identify the network component that can be suitably used for the below criteria.

Scenario 1: The two hosts have IP addresses in different IP networks.

Scenario 2: A broadcast ping (ie: 255.255.255.255) from one host does not increment traffic counters on the other host. Scenario 3: Either hosts' ARP table does not have an entry for the other host. Estimated time: 5 minutes Summary of this assignment:

You have learnt to identify the different interconnecting devices for the given scenarios.



Assignment 5: IP Addressing and Types of Web Content Objective: To find out IP addresses of the servers working on your network and understand web content types static, active and dynamic. 1. (a) Problem Description: Identify the following:

a. IP address of your machine b. DNS server IP addresses c. DHCP server IP address

1. (b) Problem Description: Identify the appropriate web content type for the following scenarios.

1. LiveFree hospital is a reputed medical organization known for its social activities. Recently, management organized free medical checkup camp as part of social responsibility activities. Jane, the coordinator of the medical camp uploaded the photos and shared the link to other employees for viewing.2.Alex is curious to play an online game, however he is prompted for downloading a script on to his computer for better performance and display. Alex accepted the download prompt and started playing the game.

3. James is searching for information on Algorithm Design Techniques using Google search engine.

Estimated time: 5 minutes Summary of this assignment:

You have understood about how to know the IP address and other information of your machine and your network.

You have learnt to identify the different types of web content.

Note: To get the above information: Go to the command prompt: Start -> Run and type, cmd. At the prompt type, ipconfig -all.

Assignment 6: Understanding Browsers and HTML Objective: To understand the software requirements for learning HTML and work with different Browsers and editors.



Background: HTML file is a text file containing markup tags. HTML file can be created using a text editor. You can view the pages with a program called a Web browser. Popular browsers are Internet Explorer (from Microsoft) and Netscape Navigator (from Netscape Communications) now known as Mozilla Firefox. Opera is a very popular alternative browser. Lynx is a text browser for the World Wide Web.

Note: You can easily edit HTML files using a WYSIWYG (what you see is what you get) editor like FrontPage, Visual Interdev etc. However, these tools do not generate much optimized HTML code. As a programmer, you should be able to create and edit HTML files using text editors like Notepad or Textpad. In the entire course you are supposed to use only a text editor

Estimated time: 5 minutes Step 1: Open Internet Explorer(Select the Start Menu-> Internet Explorer). And type http://www.w3schools.com on the Address bar.

Step 2: Select menu option, view -> source. You can find the HTML tag that creates the sparsh home page.



Step 3: Select menu option, Help -> About Internet Explorer. This should display the version of the Internet Explorer browser you are using. Step 4: What is the version of Internet Explorer you are using?. Summary of this exercise: You have just learnt

Using a Web Browser Using View Source feature of Web browsers to see the actual HTML code Finding the version of the browser

Assignment 7: Ways to Apply CSS and its formatting Objective: To understand the usage of CSS and provide cascading style for your HTML documents. Background: You have learned how to create HTML documents. Style Sheets is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once.

Note: CSS1 Accepted by the W3C Consortium in 1996. In 1998, CSS2 was introduced to add more power to CSS. However, no browsers support all of the CSS2 features; although, many support parts of it. Internet Explorer 6, Netscape 6, and Opera 6 have almost full support of CSS.



You have been provided with EasyShop_Ext_CSS folder that contains html_files, css and images subfolders. You are expected to modify .css file as suggested below and observe the changes in the HTML pages. Estimated time: 15 minutes Step 1: Take a copy of EasyShop_Ext_CSS folder to the desktop. Make the modifications to style.css as per the following requirements. Step 2: Modify the text format of EasyShop Manager heading in the banner area as follows:

font-family to Cursive color to #FF00FF font-size to 30px font-weight to normal

Step 3: Observe the changes to the text EasyShop Manager in the HomeScreen, AddUser and AddCustomer pages. Step 4: Modify the text format of Infosys Limited in the footer area as follows:

font-size to 10pt font-family to Arial font-weight to normal font-style to italic

Step 5: Observe the changes to text Infosys Limited in the footer area of all the 3 screens Summary of this exercise: You have just learnt

Usage of different font properties in CSS file Deliverables of the exercise:

1) style.css

Assignment 8: Chaining of Selectors and Class in CSS Objective: To understand the usage of selectors using cascading style for your HTML documents. You have been provided with EasyShop_Ext_CSS folder that contains html_files, css and images subfolders. You are expected to modify .css file and HomeScreen.html file as suggested below and observe the changes in the HTML pages.



Estimated time: 15 minutes Step 1: Take a copy of EasyShop_Ext_CSS folder to the desktop. Make the modifications to style.css and HomeScreen.html as per the following requirements. Step 2: Create style for divisions using its id and assign different color to each division. Division with same id must have similar appearance. Summary of this exercise: You have just learnt

Usage of selectors in CSS file Deliverables of the exercise:

1) style.css 2) HomeScreen.html

Assignment 9: Using div, Span, list, hyperlink and images in CSS Objective:

To create a new division using , , list, hyperlink and image tags. To understand how to create ordered and unordered lists in HTML. To understand how to create hyperlinks in HTML To understand how to embed images in HTML

You have been provided with EasyShop_Ext_CSS folder that contains html_files, css and images subfolders. You are expected to modify .css file and HomeScreen.html file as suggested below and observe the changes in the HTML pages. Estimated time: 30 minutes Step 1: Take a copy of EasyShop_Ext_CSS folder to the desktop. Make the modifications to style.css and HomeScreen.html as per the following requirements. Step 2: Add a new div id called string to the style.css with the following text formatting values:

font-family as Calibri color as # 58BE6C font-style as normal font-size as18px font-weight as normal

Add a div tag with id as string to the following sentences in HomeScreen.html file:



This application automates the retail processing. The application helps in faster billing and easy maintenance of the stock and customer details.

Step 3: Observe the changes in the HomeScreen page. Step 4: Add a new span id called RetailWord to the style.css with the following text formatting values:

font-family as Cursive color as # D0B173 font-size as 20px

Add a span tag with id as RetailWord to the following words in HomeScreen.html file:

retail chain

Step 5: Observe the changes to the words retail chain in the HomeScreen page. Step 6: Take a copy of EasyShop_Ext_CSS folder to the desktop. Make the modifications to HomeScreen.html as per the following requirements. Step 7: Add a new list item called Working Staff as the last item to the user groups in HomeScreen.html file as follows:

1. Administrator 2. Manager 3. Billing Staff 4. Working Staff

Step 8: Modify the above list numbering to A, B, C, and D instead of 1, 2, 3 and 4. Step 9: Modify user groups ordered list to unordered list in HomeScreen.html file as follows:

Administrator Manager Billing Staff Working Staff

Step 10: Remove Manager list item from the above unordered list. (delete tag for Manager)



Step 11: Modify the text of the items in the unordered list of the previous requirement with the following properties: font-family as Tahoma color as # 76DECB font-style as italic Hint: Use li tag in the .CSS file and apply the above mentioned properties to the same. Step 11: Modify the above unordered list items from disc to square in .CSS file. Hint: Use ul tag in the .CSS file and specify the appropriate type for list-style-type property. Step 12: Observe the changes to the ordered list in the HomeScreen page. Step 13: Take a copy of EasyShop_Ext_CSS folder to the desktop. Make the modifications as per the following requirements. Step 14: Add a new link with the label Contact Us next to home link in AddUser.html as follows :

Home | Contact Us

Link Contact Us label to ContactUs.html provided in the EasyShop_Ext_CSS folder. Step 15: Add a new link with the label Contact Us next to home link in AddCustomer.html as follows :

Home | Contact Us

Link Contact Us label to ContactUs.html provided in the EasyShop_Ext_CSS folder. Step 16: Change the link properties for Contact Us in style.css as follows:

Change color as # A87648 for unvisited link Change color as # 48A89E for visited link

Hint: Changes to be made for a:link{} and a:visited{} Step 17: Add following two properties for the above mentioned links in style.css

Change the color as # 9AC25A for hover link Change the color as # EEB281 for active link

Hint: a:hover{} and a:active{} is to be added as CSS properties



Step 18: Observe the changes in AddUser page and AddCustomer page before visiting the links and after visiting the links Step 19: Take a copy of EasyShop_Ext_CSS folder to the desktop. Make the modifications to HomeScreen.html as per the following requirements. Step 20: Change the cart image to Cart 1.jpg in style.css Step 21: Observe the changes in AddUser page, AddCustomer page, HomeScreen Page and ContactUs Page. Summary of this exercise: You have just learnt

Usage and tag Usage of text formatting in CSS Ordered List Unordered List CSS properties of list Usage of links in HTML Applying CSS properties to links in HTML Adding images to the existing HTML files

Deliverables of the exercise:

1. style.css 2. HomeScreen.html 3. AddUser.html 4. AddCustomer.html 5. style.css

Assignment 10: Creating Tables and Form Elements in HTML Objective:

To understand how to create tables and adding CSS properties to tables in HTML.

To add text box and text area in a form and apply different properties to the elements.

To add radio button, list box and check box in a form. To add button in a form.

Estimated time: 30 minutes Step 1: Design a table file named table.html Step 2: Add the following rows to the table.



Hint: Use rowspan and colspan wherever necessary Step 3: For the above created table, apply the following CSS properties to the table and its rows in style.css:

For Table: Cellspacing as 2 Cellpadding as 3 Border as 5px

For rows:

Background color as # E5E6E6 Hint 1: Use table tag as selector in style.css for applying the above mentioned properties. Hint 2: Use border-spacing and padding in style.css for applying the above mentioned properties

Step 6: Observe the changes in html Page. Step 7: Add a new row immediately after Contact Preferences row with label as Address Line immediately after Contact Preferences row and create a text area with 3 rows and 12 columns corresponding to the Address Line in AddCustomer.html file. Step 8: Address Line text area should have default text as Your Address Here. Step 9: Add a new row immediately after Address Line row with label as Zip Code and create a textbox for the corresponding Zip Code label. Step 10: Zip Code text field should allow a maximum of ten characters

Step 11: Add default value as 02201-2021 in Zip Code Id text field Note : Refer to the screenshot for the above mentioned requirements.



Step 12: Observe the changes in AddCustomer.html and AddUser.html Page. Step 13: Elite should be selected as the default without changing the above mentioned sequence. Note : Refer to the screenshot for the above mentioned requirements



Step 14: Observe the changes in AddCustomer.html Page. Step 15: Add a new button in AddCustomer.html with type as submit and label of the button as Check.



Summary of this exercise: You have just learnt

Creating a table in HTML Usage of rowspan and colspan CSS properties of table Creating text box and text area in HTML Properties of text box and text area in HTML Creating radio button and check box in HTML Usage of button and its properties in CSS

Deliverables of the exercise: 1. ContactUs.html 2. Style.css 3. AddCustomer.html

Assignment 11: Understanding the client side Java Script Objective: To understand the usage of Client Side JavaScript. Background: You have learned HTML and Cascading Style Sheet (CSS). Using HTML and CSS you can create only static pages. Now you can create interactive pages using client side JavaScript.

Note: JavaScript is embedded as a small program in a web page that is interpreted and executed by the Web client. JavaScript is a scripting language - a scripting language is different from programming language. JavaScript is an interpreted language (means that scripts execute without preliminary compilation). JavaScript is supported by all major browsers like Netscape, Internet Explorer, Mozilla etc.

Estimated time: 15 minutes Step 1: Type the following code into a text editor and save it as FirstJS.html



First JavaScript Program

Note: To hide the script from the browsers, which are not supporting JavaScript use HTML comments ().

Step 2: Modify the FirstJS.html like the following and save as FirstError.html. Open the page in the browser.

document.write("Displaying using JavaScript"); Observe the error message. Double click on the status bar, you would be able to see the below screen. In case

Step 3: Click on Show details button. The dialog box is showing that the error is at line number 5 and the message is Syntax error. Let us examine the code at line number 5

document.write("Displaying using JavaScript")



We can find that the syntax is wrong. The correct syntax is document.write(Displaying using JavaScript)

Step 4: Correct the error and save the file as ErrorFree.html Summary of this exercise: You have learnt

How to use JavaScript in HTML documents. Debug and fix the error.


1) FirstJS.html 2) FirstError.html 3) ErrorFree.html

Assignment 12: Understanding functions and scope of variables Objective: To understand the basic concepts of functions and scope of variables in JavaScript Estimated time: 20 minutes



Step 1: Take a copy of AddSupplier.html Step 2: Add the below function inside tag

sName= ; function valSupNameForEmpty() { sName= document.suppform.sName.value; if(sName!=null && sName.length==0) { document.write("Supplier Name is empty"); return; } } Step 3: Include another function by name 'valSupNameForOnlySpaces' function valSupNameForOnlySpaces() { for(var count=0;count



Inference: The variable sName is defined as global and hence it is accessible by both the functions valSupNameForEmpty and valSupNameForOnlySpaces Step 7: Modify the definition statement of sName in the code by adding the keyword var. Step 8: Open the modified AddSupplier.html in the browser. Input only spaces in the supplier name field and click Submit button. Verify that the following output is displayed Supplier Name cannot contain only spaces. Inference: Even though the variable sName is defined with the keyword var, still it is global as it is defined outside all the functions. Hence sName is accessible by both the functions, valSupNameForEmpty and valSupNameForOnlySpaces Step 9: Remove the keyword var associated with sName definition. Place this modified statement inside the function valSupNameForEmpty as the first statement. Step 10: Open the modified AddSupplier.html in the browser. Input only spaces in the supplier name field and click Submit button. Verify that the following output is displayed Supplier Name cannot contain only spaces. Inference: Even though the variable sName is defined inside the function valSupNameForEmpty it is still global as it is NOT associated with var . Hence accessible by valSupNameForOnlySpaces also. Step 11: Now, add the keyword var with sName definition. Step 12: Open the modified AddSupplier.html in the browser. Input only spaces in the supplier name field and click Submit button. Verify that the following output is displayed Supplier Name cannot contain only spaces. Inference: As the variable sName is associated with var inside the function valSupNameForEmpty , it is local to this function only. It is not accessible by valSupNameForOnlySpaces. Hence the error message. Summary of this exercise: You have learnt How to define functions

How to define variables with different scopes Deliverables of the exercise:

1) AddSupplier.html



Assignment 13: Understanding typeof operator and in-built functions

Objective: To understand the operation of typeof operator and in-built functions Estimated time: 20 minutes Step 1: Take a copy of AddSupplier.html code Step 2: Add the below function within tag

function checkVarType()

{ contactNum = document.suppform.contactNo.value;//Line 1 document.write(Data type of contactNum is +typeof(contactNum));//Line 2 } Step 3: Associate the following event with the Submit button of Add Supplier web page onClick= checkVarType() Step 4: Open the modified AddSupplier.html in the browser. Input contact number and click Submit button. Verify that the following output is displayed

Data type of contactNum is string Step 5: Convert the type of contactNum to number type using the in-built function

Number by adding the following lines after Line 2 contactNum = Number(contactNum); document.write(Data type of contactNum after conversion is +typeof(contactNum)); Step 6: Open the modified AddSupplier.html in the browser. Input contact number and click Submit button. Verify that the following output is displayed

Data type of contactNum is string Data type of contactNum after conversion is number

Summary of this exercise: You have learnt the following

There is no explicit data type for variables Automatic conversion of types would take place in JavaScript Usage of few in-built functions like 'typeof' , 'Number'

Deliverables of the exercise: 1) AddSupplier.html



Assignment 14: Functions and Dialog boxes Objective: Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure a set of statements that performs a specific task. Here we will learn how to create user defined functions and make use of in built functions. Estimated time: 25 minutes Step 1: Type the following code in to a text editor and save it as fun1.html.

/* Comments : function definition */ function addFun(num1,num2) { document.write("the sum is "+ (num1+num2)); } /* Comments: Calling function */ addFun(10,20);

Step 2: Modify the above program, add a function for multiplying two numbers.

Note: The main advantage of a function is reusability. So instead of displaying the output inside the function return the result to the caller using the return keyword.

Step 3: Type the following code into a text editor and save it as funreturn.html. function addFun(num1,num2) {

/* Comments : Returning value to the calling environment */ return num1+num2; } Function Demo

/* Comments : More than one script tag can be used in a document */ document.write("Sum is "+addFun(20,50)+"");



Step 4: Write a function called power(arg1, arg2) to find the power of the given number and save it as power.html.

Note: The arguments of a function are maintained in an array. Within a function, you can address the parameters passed to it as follows: arguments[i]. The total number of arguments is indicated by arguments.length.

Step 5: Type the following code and save it as funarg.html.

/* Comments : function does not have any arguments, but arguments array will store the arguments */ function dispStr() { for(count=0;count



Step 6: Write a function which takes n number of arguments and return the average of n numbers and save it as numarg.html

Note: There are three different types of dialog boxes (alert, prompt and confirm) which are the methods of window object. All these three dialog boxes are modal i.e. The user must close it before continuing.

Note: Event handlers are very powerful and useful in client side scripting. They are JavaScript code that are not added inside the tags, but rather, inside the html tags, that execute JavaScript when an event happens, such as pressing a button, moving your mouse over a link, submitting a form ,etc. For Example

Step 7: Type the following code and save it as dialog.html.

function dispMsg() {

/* Comments : Using prompt dialog box data can be accepted through data entry field from the user */

num1=parseInt(prompt("Enter the first number","0"));

/* Comments : parseInt method used to convert string to a numeric value */

num2=parseInt(prompt("Enter the second number")); alert("Sum is \n"+(num1+num2)); } function closeWin() {

/* Comments : confirm dialog box used to get user confirmation about closing the window or not */

res=confirm("Do you really want to close the window?"); if(res)

{ window.close();

} }



/* Comments : Event Onclick used with Add button . Hence on clicking the Add button dispMsg() function is invoked */ Summary of this exercise: You have learnt

Create and invoke user defined functions. The arguments array and its usage Use Dialog boxes. Use onClick event handler.


1) fun1.html 2) funreturn.html 3) power.html 4) funarg.html 5) numarg.html 6) dilog.html

Assignment 15: Applying styles to Tables and Form Elements Objective: To understand the usage of CSS with tables and form elements.

Note: Its possible to change the default look of a table and form elements by styling their html tags.

Estimated time: 25 minutes Step 1: Create the following html file and save it as csstab1.html. Hint: Create separate Ids styles for the following:

1. Table heading 2. Even numbered rows 3. Odd numbered rows



Step 2: Modify the above code by including the above created style classes in a separate external file cssexternal.css. Step 3: Type the following code and save the file as cssform1.html. input{ color:blue; letter-spacing:3pt; font-size:14pt; } form{ border: thick solid blue; } Name Step 4: create the following html file and save it as cssform2.html.



Summary of this exercise: You have learnt Applying styles to , and tag. Applying styles to , and tag. Applying external styles. Deliverables of the exercise:

1) csstab1.html 2) cssexternal.css 3) cssform1.html 4) cssform2.html

Assignment 16: Creating Interactive Webpage and Apply CSS, Form Validation and submission using JavaScript

Objective: To understand designing interactive forms in HTML.

Note: Forms enable users to submit information that can be used to create an interactive web application ranging from an order entry system to an email application.




Step 1: Use AddCustomer.html page, which you have designed in Assignment 10.

User ID tag -->

Note: Some special elements. : This control is used for file uploading. : This control used to create a button that has no predetermined actions(rest (or) submit). : Used to store some temporary data(hidden) that can be accessed by client side or server side programs. :This control is used to create a graphical version of the submit button.



Note: Some special attributes. name and value are the common attribute for all the elements. maxlength : sets the maximum number of characters allowed in the field. Applicable only to text, hidden and password elements. checked : To set a checkbox (or) radio button to be selected by default. selected : An occurrence of the selected attribute in the element sets the form select control to select this item by default.

Step 2: Write the Scripting code to validate the form and add the values to the database. Step 4: Partial JavaScript code for SQL Database connection for adding and retrieving the data from the database.

function DataSubmit() {

var connection = new ActiveXObject("ADODB.Connection") ; var connectionstring="Data Source=;Initial Catalog=;Integrated Security=SSPI;Provider=SQLOLEDB"; connection.Open(connectionstring); var rs = new ActiveXObject("ADODB.Recordset"); rs.Open("SELECT * FROM TableName", connection); connection.execute("insert into );

rs.MoveFirst while(!rs.eof) { document.write(rs.fields(column1)+\t+ rs.fields(column2));

rs.movenext; }

rs.close; connection.close;

}



Summary of this exercise: You have learnt Creating a login screen. Designing GUI using HTML. Using and Aligning form elements using tables. Debugging the code. Deliverables of the exercise:

1) login.html 2) AddCustomer.html

IUWT Assignments

Documents

Transcript of IUWT Assignments