HTML, CSS, Java Script and Database Training

Manual.

About Softpro
Softpro is among one of the fastest growing IT company of North India dealing in
multiple domains namely Sotware Development, Industrial Automation and having
subsidiaries in Food Processing Sector. Softpro is also a popular name in Education
Sector where we cater the needs of IT professionals, engineering graduates and Diploma
Holders with latest technology training on Frameworks, Web Development, Java &
Mobile Application Development, Programming Languages and many more. Softpro
Consultants believe in the theory of "FUN WITH LEARN". The Journey of every individual
enrolling for any training program in Softpro starts from Beginner to Expert Level.

About Course
Become a Softpro Certified Web Designing Professional. This course is designed
specifically keeping in mind the need of the aspiring web designers. The course will not
only be helpful for one to make standard Web Pages but also functional Web
Applications.
Course Curriculum
Learning Objectives – Become a Softpro certified Web Designing Professional. A course
designed to make you an expert in HTML and CSS and learn all that is required to create
real world Websites and Web Application.

 Create a link within a web page.

 Insert an Image within a web page.
 Create a table within a web page.
 Insert heading levels within a web page.
 Insert ordered and unordered lists within a web page.
 Use cascading style sheets.
 Create a web page.
 Validate a web page.
 Publish a web page.

Lecture 1:-

Introduction of Web Technology

Why Website is used for Business.

Website and Web Application.

What is HTML, HTML Documents, Basic structure of an HTML document, creating an HTML
document, Mark up Tags, Heading-Paragraphs, Line Breaks, and HTML Tags?

Task:

1. How to write first HTML Program.

2. Create Paragraphs in HTML page.
3. How to create Headings in a HTML page and describe types of heading tags.

Assignment:

1. Create a PPT on Websites and Web Applications.

2. Write short notes on Web Technology.
3. Difference between HTML and XML.
Interview Questions:-

1. Difference between Website and Web Applications.

2. Difference between Static Page and Dynamic Page.
3. Define the process of execution of a website on the server.
4. What are the different TCP/IP Layers.
Lecture 2:-

Introduction to elements of HTML, Working with Text, Working with Lists, Tables and Frames,
Working with Hyperlinks, Images and Multimedia, Working with Forms and controls, Super
Script Tag, Sub Script Tag, Span Tag, Character Entities.

Tasks:

1. How to insert an Image in a HTML document.

2. How to use Audio and Video Tags in HTML document.
3. How to create Registration Page using all Input tags.
4. How to create Hyperlinks.

Assignment:

1. Create a Registration Page with the following fields.

2. Create a Login Page with the following options.

3. Create the following design of Lists.

Lecture 3:-

About Div Tag, Concept of CSS, Creating Style Sheet, CSS Properties, Types of CSS, CSS
Styling(Background, Text Format, Controlling Fonts), Working with block elements and objects,
Working with Lists and Tables, CSS Selectors, Box Model(Introduction, Border properties,
Padding Properties, Margin properties), CSS Advanced(Grouping, Dimension, Display,
Positioning, Floating, Align, Pseudo class, Navigation Bar, Image Sprites, Attribute sector), CSS
Color, Creating page Layout and Site Designs.

Assignment:

1.
2.

3.
4.

5.
Lecture 4:-

Creating menus in a website, Creating the whole Web Site, Saving the site, Working on the
website, Creating web site structure, Creating Titles for web pages.

Tasks:

1. Design this menu

Assignment:

1. Design these four menu.

Lecture 5:-

Discuss various CSS - 3 Properties

Tasks:

1. How to make a circle in websites.

2. Declare Padding and margin properties of CSS
3. Define some CSS-3 properties and their attributes.
Assignment:

1. Design the template of Gmail Page

2. Design the template of Image Gallery.

3. Design a Newsletter
4. Design a Complete website of minimum 5 Pages.
Lecture 6:-

Learning Objective: -

Not to be confused with Java, JavaScript allows you to build interactive websites. JavaScript has
become an essential web technology along with HTML and CSS, as most browsers implement
JavaScript. Thus, You must learn JavaScript if you want to get into web development, and you
must learn it well if you're planning on being a front-end developer or on using JavaScript for
backend development.
Furthermore, JavaScript usage has now extended to mobile app development, desktop app
development, and game development. All in all, it has exploded in popularity and is now a very
useful skill to learn.
 Explain separation of concerns and identify the three layers of the web.
 Use operators, variables, arrays, control structures, functions and objects in JavaScript.
 Map HTML using the DOM - Document Object Model.
 Identify popular JavaScript Libraries.
 Create dynamic styles.
 Create animation on a web page.
 Use regular expressions for form validation.
 Debug using firebug.
 Create an XMLHttpRequest Object

Introduction to client side scripting

Difference between Client side scripting and Server side Scripting

What is Java Script?

1. Pop ups:

 alert()
 prompt()
 confirm()

2. Taking input:
  Through prompt()
 Through input box

3. Output:

 Using alert()
 Inside HTML DOM
 Console

4. Variables & arrays in JavaScript:

 Using var keyword

 var array_name=new Array(size)

Tasks:-

1. Open alert box onload of document and on click of a button and show a welcome
message
2. Find max number from two numbers by using prompt and alert box.
3. Designing a simple image slider using Javascript.

Assignments:-

1. Create a Distance Converter in javascript that will convert meter into kilometer. Take
input from textbox and print in another textbox.
2. Write a program in Javascript to check if a no. is prime or not. Take input from an input
box and show result in span
3. Write a program in Javascript to calculate factorial of a no. with pattern.
Example: 4!=4x3x2x1=24
4. Create a Simple Calculator by using if statement in javascriptTake two textboxes for
getting inputs for calculation and take one textbox to display result. Take four buttons
for operations like + , - , * and / as shown below:

Interview Questions:-

1. Enumerate the differences between Java and JavaScript?

2. What are JavaScript Data Types?
 3. Between JavaScript and an ASP script, which is faster?
4. Which company developed JavaScript?
5. What is 'this' keyword in JavaScript?
6. What is the difference between window & document in JavaScript?

Lecture 7:-

1. Functions and Events

 Using functionkeyword
 Calling JavaScript functions on HTML events.
 .addEventListener(‘event’, ‘function_name ’)

2. DOM Traversal using:

 document.getElementById()
 document.getElementsByClassName()
 document.getElementsByTagName()
 innerHTML,innerText&value properties

Tasks:-

1. Getting the value of input elements

2. Adding values given by two input elements and then displaying them on <span></span>.
3. Generating Elements like <ul></ul> , <table></table>, <select></select>,input elements
etc. on click event.

Assignment:-

1. Write a program in Javascript to print table of a given no. Take input from an input box
and print table in textarea
2. Write a program in Javascript to set an image from one <img/> tag to another <img/>
tag.
3. Write a program in Javascript to copy contents of one <p></p> tag and set it into
another <p></p> tag.
4. Write a program in Javascript to generate a paragraph with some text inside a div on the
click of a button.
Interview Questions:-

1. What is NaN in JavaScript?

2. What are escape characters in JavaScript?
3. What are the advantages of using External JavaScript?
4. What is the difference between test () and exec () methods?
5. What is the use of ‘debugger’ keyword in JavaScript code?
6. What is the difference between ‘==’ and ‘===’?

Lecture 8:-

1. Manipulating CSS through JavaScript

 document.getElementById(‘id’ ).style.property=new style

2. Form validation & pattern.

Tasks:-

1. Changing background color of a div on click of a button

2. Validating the value of a textbox on the click of a button.

Assignment:-

1. Create a HTML page to validate Indian mobile number.

Hint: Take input from a textbox and validate it onkeyup event. Mobile Number should
start from 7, 8 or 9 having minimum/maximum 10 digits.
2. Write a program in javascript to validate file upload. Only .jpg, .png files should be
allowed.
3. Write a program in javascript which does not allow the user to put spaces between
words.
4. Write a javascript code to create a Slider.

Interview Questions:-

1. What are ‘settimeout()’?

2. Is it possible to break JavaScript Code into several lines?
3. What are global variables? How are these variable declared and what are the problems
associated with using them?
4. What is the difference between ViewState and SessionState?
Lecture 9:-

Learning Objective:-

The objective of the course is to present an introduction to database management systems,

with an emphasis on how to organize, maintain and retrieve - efficiently, and effectively -
information from a DBMS

Database Session

1. DBMS (Database Management System )

The Database Management System is a kind of software which is used to manage
database.DBMS provides facility to create, access & manipulate database.
Ex: Oracle, SQL Server, MySQL, MS-Access
2. SQL (Structured Query Language)
SQL stands for Structured Query Language. It is the language of database. Iyt provides set
of commands to perform database operations.
3. SQL Commands
Based on database operations SQL Commands are divided into 4 parts
 DDL (Data Definition Language)
 DML (Data Manipulation Language)
 DCL (Data Control Language)
 TCL (Transaction Control language)

Tasks:-

1. Installation of Oracle 11g

2. Creating user and granting rights
3. Performing CRUD operations

Assignments:-

1. Create a database user with user name “mydb and password “mydb”.
2. Give privileges of DBA to the user “mydb”.
3. Connect the database user “mydb” and create a table cust_info with following structure:-
Field name Datatype Constraints
Cust Id Number(5) Primary Key
Cust_Name Varchar(20)
Cust_Address Varchar(100)
Cust_connect_date Date
 Contact_No Varchar(15)
4. Insert the following records in cust_info table
Cust_Id Cust_Name Cust_address Cust_connect_date ContactNo
101 Rajeev Singh Lucknow 12-dec-2012 05226565114
102 Jitendra Verma Barabanki 01-Jan-2013 9838505980
103 Ravi Singh Lucknow 15-Jan-2013 9936652039
104 Priya Singh Sitapur 16-Jan-2013 9936390301
105 Brijesh Mishra Lucknow 16-Feb-2013 8738970899
106 Amit Singh Barabanki 18-mar-2013 0548-2202798

5. Perform commit command.

6. Perform select operation based on following instruction:-
a. Select all records with all its fields
b. Select all records with its Cust_Id and Cust_Name field.
c. Select those record in wich the Cust_connect_Date is after 15-Jan-2013, select only Cust_Id
Cust_Name and Cust_connect_Date fields.
d. Select those records in wich the Custmoer belongs from “Lucknow”.
e. Display all records of Cust_info table in ascending order on Cust_Name field.
f. Display all records of Cust_info table in descending order on Cust_Name field.

7. Perform the following commands.

a. Delete the record of Cust_info table having CustId 105.
b. Update the record of Cust_info table having Cust_Id 106(Update ContactNo with new
value 0522-6767144).
c. Perform truncate command with Cust_info table.
d. Perform drop command to delete Cust_info table.

Interview Questions:-

1. What do you understand by ‘Database’?

2. Enlist the advantages of DBMS.
3. What do you understand by Data Redundancy?
4. Explain Normalization and De-Normalization
5. What is BCNF?
6. What is SQL?
7. How many SQL statements are used? Define them
8. What is DDL interpreter?
9. Define DML Compiler?
10. Enlist the advantages of SQL.
Lecture 10:-

1. Concept of keys
i. Primary Key
ii. Foreign Key
2. Union Operation
3. Join Operation
4. Views
5. Select Operations
6. Where Clause
7. Use of check Constraints

Assignments:-

1. Connect the database user “mydb” and create a table login_info having following structure:
Field Name Data Type Constraints
User Id Number(5) Primary Key
Password Varchar(2) Not Null

2. Perform the following operation’s.

a. Use alter command to add new field HINT_QUES with data type VARCHAR2 (30), in
LOGIN_INFO table and view the table structure.
b. Use alter command drop field HINT_QUES and view the table structure.
c. Use alter command modify PASSWD field of LOGIN_INFO table with Data Type
VARCHAR (15) and view the table structure.
3. Create the following table structure.

EMPLOYEES
Field/Column Name Type Size Constraint
Employee_id number 5 NotNull
Employee_Name varchar2 20 null

ORDERS
Field/Column Name Type Size Constraint
Product_Id number 5 NotNull
Product varchar2 20 null
Employee number 5 null

a. Insert the record into table Employee and Orders with following specification
Employee Id Employee Name
1001 Karan
 1002 Shikhar
1003 Rajan

Product Id Product Employee id

1 Karan 1001
2 Shikhar 1002
3 Rajan 1003

b. Perform select operation to select Employee_Name Employee Table and Product from
Order Table based on Employee_Id.
c. Perform select operation using left join to select Employee_Name from Employees table3
and product from Orders table based on Employee_Id.
d. Perform select operation using right join to select Employee_Name Employees table and
product from Orders table based on Employee_Id.

Interview Questions:-

1. What do you understand by E-R model?

2. Define Cursor and its types.
3. What is Database transaction?
4. What do you understand by Join?
5. What do you understand by Fragmentation?
6. What do you understand by ‘Atomicity’ and ‘Aggregation’?
7. Define checkpoint
8. Explain Data Dictionary.
9. Explain Primary Key and Composite Key.
10. What do you understand by Unique key?
11. Define Stored procedures.
12. Differentiate between ‘DELETE’, ‘TRUNCATE’ and ‘DROP’ commands.