html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
.">
0% found this document useful (0 votes)
150 views22 pages

MY Siwes Program Within Niit

The document provides an overview of HTML (Hypertext Markup Language) and some of its core tags for structuring and formatting text on web pages. It discusses HTML tags for headings, paragraphs, bold, italics, links, images, videos, and lists. It also covers using HTML attributes like href for links and src for images/videos. Basic HTML page structure is demonstrated using tags like <html>, <head>, <title>, and <body>.

Uploaded by

willyshow84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
150 views22 pages

MY Siwes Program Within Niit

The document provides an overview of HTML (Hypertext Markup Language) and some of its core tags for structuring and formatting text on web pages. It discusses HTML tags for headings, paragraphs, bold, italics, links, images, videos, and lists. It also covers using HTML attributes like href for links and src for images/videos. Basic HTML page structure is demonstrated using tags like <html>, <head>, <title>, and <body>.

Uploaded by

willyshow84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 22

CHAPTER ONE

1.1 About SIIWES

The Students' Industrial Work Experience Scheme (SIWES) was established in 1973 by the
Industrial Training Fund (ITF) in Nigeria to address the problem of tertiary institution
graduates lacking practical skills for employment in industries. SIWES is a skill training
program aimed at preparing university, polytechnic, and college of education students for the
industrial work environment they will encounter after graduation. It acts as a bridge from
classroom learning to practical work experience, exposing students to equipment and
machinery not typically available in their institutions. Prior to SIWES, there was a concern
that graduates lacked practical skills, making it difficult for them to secure jobs. ITF initially
funded the program, but financial constraints led to a transition of management to the
National Universities Commission (NUC) and the National Board for Technical Education
(NBTE) in 1979. In 1984, ITF resumed management, with the federal government providing
funding starting in 1985.

SIWES is a crucial program for Nigerian students studying technology and science, now
required by the government's educational policy for the award of diploma and degree
certificates. Undergraduate students in various disciplines, including Natural sciences,
Engineering and Technology, Education, Agriculture, Medical Sciences, Environmental, and
pure and applied sciences, are expected to participate. The duration of the program varies,
with four months for polytechnic and college of education students, one year for polytechnic
and college of education students, and six months for university student

1.2 About NIIT

Established in 1981 by Rajendra S. Pawar and Vijay K. Thadani, NIIT is an Indian


Multinational company that offers learning management and training delivery solutions to

1
corporations, institutions and individuals in over 40 countries. It has three main lines of
business worldwide: Corporate Learning Group (CLG), Skills and Careers Group (SCG), and
School Learning Group (SLG).

1. Corporate Learning Group - It offers Managed Training Services (MTS), which


include custom curriculum design and content development, learning administration,
learning delivery, strategic sourcing, learning technology and advisory services.
2. Skills and Careers Group - This focuses on providing employability skills to learners.
It includes learning programs in soft skills, business process excellence, retail sales
enablement, vocational skills, digital media marketing, new age IT, Banking,
Insurance and Financial services (through IFBI), Executive Management (through
NIIT Imperia) and BPO/KPO training.
3. School Learning Group - It provides technology based learning to government and
private schools. It offers NIIT learning solutions for schools, which include
Interactive classrooms with digital content, Math Lab, IT Wizard programs and Quick
School software.

NIIT has alliances with global leaders such as Adobe, Cisco, Citrix, EMC, Intel, Microsoft,
Oracle, SAS, Sun and provides training on their platforms. For its academic alliance, the
company has collaborated with 100 leading educational institutes across India, China, New
Zealand, UK, Malaysia, Australia, USA, Canada and Ireland.

AWARDS

NIIT was ranked among the Top 20 Companies in the IT Training Industry in 2008 by
TainingOutsourcing.com.

NIIT was acknowledged for its innovation in ICT in Education by UNESCO in 2008.

NIITs brand HiWEL received Digital Opportunity Award by World Information Technology

Services Alliance (WITSA) in 2008.

In 2011

Ranked among the Top 20 Best IT Employers, in DQ–CMRs Best Employers Survey.

Conferred with the Excellence in Training Award at ASIAs Best Employer Brand Awards.

Best IT Implementation of the year award conferred to three projects by PC Quest.

2
In 2012

Featured in the Leaders category in 2012 Global Outsourcing 100 service providers list.

Received Award for Excellence in HR through Technology and Training at ASIA's Best
Employer Brand Awards.

NIIT Technologies' Intranet Prahari bags Skoch Digital Inclusion Award 2012 for the Best
Process Automation Recognized as a Special Category Winner.

Ranked No.3 in Best Companies in Career Growth category in Great Place to work study.

Ranked No. 6 in DQ–CMR Best IT Employer Survey.

Ranked No.1 across all industries globally in the 2012 ASTD (American Society for Training
and Development).

3
CHAPTER TWO

2.1 Introduction to web development

Web development is a broad term for the work involved in developing a website. In
developing a website or a web application. It involves the use of a markup language, scripting
language, scripting language, database management and network security configuration.

2.1.1 Web Development using HTML

HTML is a markup language for describing web documents (web pages). HTML stands for
Hyper Text Markup Language. A markup language is a set of markup tags. HTML
documents are described by HTML tags. Each HTML tag describes different document
content.

Web browsers can read HTML files and render them into visible or audible web pages.
HTML describes the structure of a website semantically along with cues for presentation,
making it a markup language, rather than a programming language.

HTML was developed in 1980 by an English physicist Tim Berners-Lee.

What is HTML?

HTML is a markup language for describing web documents (web pages).

HTML stands for Hyper Text Markup Language

A markup language is a set of markup tags


HTML documents are described by HTML tags
Each HTML tag describes different document content
HTML Example
A small HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My first heading</h1>
<p>My first paragraph</p>
</body>
</html>

4
Output:

Example Explained

The DOCTYPE declaration defines the document type to be HTML

The text between <html> and </html> describes an HTML document

The text between <head> and </head> provides information about the document

The text between <title> and </title> provides a title for the document

The text between <body> and </body> describes the visible page content

The text between <h1> and </h1> describes a heading

The text between <p> and </p> describes a paragraph

Using this description, a web browser can display a document with a heading and a
paragraph.

− HTML Tags.

Tag Description
<!DOCTYPE> Defines the document <>type
<html> Defines an HTML document
<head> Contains
metadata/information for the document
<title> Defines the title of the document
<body> Defines the document’s body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--…--!> Defines a comment

5
2.1.2 HTML - Text Formatting Tags

As you begin to place more and more text elements onto your website, you may find yourself
wanting to incorporate bold or italic properties in your text elements. HTML offers a handful
of special tags that can be utilized to do just that:

HTML TEXT FORMATTING TAGS:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>i am normal</p>
<p>An example of <b>Bold Text</b></p>
<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>
<p>An example of <sup>superscripted Text</sup></p>
<p>An example of <sub>subscripted Text</sub></p>
<p>An example of <del>struckthrough Text</del></p>
</body>
</html>

Output:

2.1.3 HTML - Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and
more.

- Background color

The CSS background-color property defines the background color for an HTML element.

Example

6
2.1.4 HTML – Links

Links are found in nearly all web pages. Links allow users to click their way from page to
page.

-Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href=”url”>link text</a>

The most important attribute of the <a> element is the href attribute, which indicates the
link’s destination.

Example:

This example shows how to create a link to Google.com:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.google.com/">Visit google</a>
</body>
</html>

Output:

2.1.5 HTML – Images & Videos

Images and videos can improve the design and the appearance of a web page.

-Syntax

The HTML <img> for images and <video> for video tag is used to embed an image and a
video in a web page.

The <img> tag is empty, it contains attribute only, and does not have a closing tag

The <video> tag contains attribute only, and has a closing tag

7
The <img> tag has two required attributes:

Src Specifies the part to the image


Alt Specifies an alternate text for the image
While the <video> tag has only the “src” attribute
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="./image.jpg" alt="trees">
<video src=”./video.mp4”></video>
</body>
</html>

HTML – LISTS

HTML lists allows web developers to group a set of related items in lists

In HTML there are two types of list:

-Unordered HTML list

This list starts with the <ul> tag. Each list items starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

8
Output:

-Ordered HTML List

An ordered list starts with the <ol> tag. Each list items starts with the <li> tag.

The list items will be marked with number by default.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>

Output:

2.1.6 HTML - Input Element(S)

HTML input elements are form elements such as text fields, checkboxes, and buttons. The
name comes from the <input> tag, which is the mark-up that identifies web form
components. The <input> tag relies upon a few attributes to classify and name each form
item, providing the web developer with a means to manipulate each element individually.

9
Input type Use
<input type=”text”> Defines a single-line text input field
<input type=”password”> Defines a password field
<input type=”submit”> Defines a button for submitting form data
to a form-handler
<input type=”reset”> Defines a reset button that will reset all
form values to their default values
<input type=”radio”> Radio buttons let the user select ONLY
ONE of a limited number of choices
<input type=”checkbox”> Defines a checkbox
<input type=”button”> Defines a button

Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text">
<input type="password">
<input type="submit">
<input type="reset">
<input type="button" value="Click>
<input type="checkbox">
<input type="radio">
</body>
</html>

Output:

2.2 Cascading Style Sheet

Cascading Style Sheets (CSS) is a style language used for describing the presentation of a
document written in a markup language. CSS was developed by Hakon Wium Lee in the year
1996.

2.2.1 Selector

In CSS, selectors are used to declare which part of the markup a style applies to by matching
tags and attributes in the markup itself. Selectors may apply to:

 all elements of a specific type, e.g. the second-level headers h2

10
 elements specified by attribute, in particular:

o id: an identifier unique to the document

o class: an identifier that groups multiple elements in a document

 elements depending on how they are placed relative to others in the document tree.

Classes and IDs are case-sensitive, start with letters, and can include alphanumeric characters
and underscores. Any number of instances of any number of elements may have the same
class. Conventionally, IDs only apply to one instance of one element.

Selectors may be combined in many ways to achieve great specificity and flexibility. [6]
Multiple selectors may be joined in a spaced list to specify elements by location, element
type, id, class, or any combination thereof. The order of the selectors is important. For
example, div .myClass{color:red;} applies to all elements of class myClass that are inside div
elements, whereas .myClass div{color:red;} applies to all div elements that are in elements of
class myClass.

To link a CSS to the HTML we use the link tag for example:

<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3>A White Header</h3>
<p>
This paragraph has a blue font. The background color of this page is gray
because we changed it with CSS!
</p>
</body>
</html>

2.2.2 Project Embarked on During SIWES IT

I designed a prototype of the Instagram login webpage using HTML and CSS. The design
incorporates lots of features like color codes, positioning, display, margin, padding and
adding images by specifying the relative and absolute paths etc.

11
2.3 Introduction to JavaScript

JavaScript is a high-level, dynamic, un-typed, and interpreted programming language.

This language which was developed by Brendan Eich in 1995 under the name Mocha but was
officially called Livescript before it was later called JavaScript is the client side scripting
language of the Web.

JavaScript is used in billions of Web pages to add functionality, validate forms, communicate
with the server, and much more.

JavaScript is easy to learn.

JavaScript was designed to add interactivity to HTML pages.

JavaScript can be written in the same page with the HTML but for clarity some developers
prefer writing the scripting language on a separate page. To link JavaScript to a HTML page
we use the script tag. For example:

<head>
<script type="text/javascript" src="script.js"></script>
<meta charset="UTF-8">
<title></title>
</head>

In the example above the <script></script> tells the web browser that is a JavaScript
document, the type ‘’text/javascript’’ specifies it is a JavaScript type document and the
validate.js is the relative part of the JavaScript document. All JavaScript document has the
“.js” extension.

12
2.3.1 JavaScript data types

Type Sample Description


String “nugget” Series of alphanumerical characters in quotes
Number 24.2 Any number that is not in a quote
Boolean False A logical true or false
Object - An entity that is defined by properties and
methods
Function - A function definition
Null Null A value that is totally devoid of content

2.3.2 JavaScript operators

Operators are words or expressions that perform on one or two values to get another value.

Operators perform actions on operands [unary and binary]

Types Symbol
Comparison ==, !=, >, >=, <, <=
Assignment =
Connubial +, -, *, /
Boolean && AND, || OR, ! NOT

2.3.3 JavaScript functions

JavaScript function: A collection of JavaScript statement built-in to perform a particular task


(i.e. declare variables).

Function must be named and can be called (or invoke) by other parts of the script.

It can be called as often as necessary. Example of a function,

function fName() {

//statements

13
A simple code for a simple functional calculator using HTML, CSS and JAVASCRIPT

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 400px;
height: fit-content;
padding: 20px;
border: 2px solid #333;
background-color: #333;
border-radius: 20px;
position: relative;
}
input{
width: 404px;
height: 60px;
font-size: 40px;
margin-bottom: 20px;
color: black;
}
button{
width: calc(300px / 3);
height: 50px;
background-color: red;
color: #fff;
font-size: 20px;
}
.col{
position: relative;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="textbox">
<div onclick="deleteValue()" style="color: black; font-size: 20px; position: absolute;
top: 40px; right: 40px; z-index: 1;">del</div>
<div class="col">
<div class="row">
<button onclick="addValue(9)">9</button>
<button onclick="addValue(8)">8</button>

14
<button onclick="addValue(7)">7</button>
</div>
<div class="row">
<button onclick="addValue(6)">6</button>
<button onclick="addValue(5)">5</button>
<button onclick="addValue('/')">/</button>
<button onclick="addValue('+')" style="position: absolute;top: 0; height: calc(53px *
2);">+</button>
</div>
<div class="row">
<button onclick="addValue(4)">4</button>
<button onclick="addValue(3)">3</button>
<button onclick="addValue('*')">*</button>
</div>
<div class="row">
<button onclick="addValue(2)">2</button>
<button onclick="addValue(1)">1</button>
<button onclick="addValue(0)">0</button>
<button onclick="equalTo()" style="height: calc(51px * 2); position: absolute;
bottom: 0;">=</button>
</div>
</div>
</div>
<script>
var btn = document.getElementById('button');
var textbox = document.getElementById('textbox')

function addValue(value){
textbox.value += value;
}

function equalTo(){
var answer = eval(textbox.value);
textbox.value = answer;
console.log(answer)
}

function deleteValue(){
var textBoxValue = textbox.value
textBoxValue = textBoxValue.slice(0, -1);
document.getElementById('textbox').value = textBoxValue
}
</script>
</body>
</html>

15
CHAPTER THREE

3.1 Introduction to PHP (Hypertext Preprocessor)

PHP is an acronym for “PHP: Hypertext Preprocessor” PHP is a widely-used, open source
scripting language which can also be used as a general purpose programming language.
Originally created by Rasmus Lerdorf in 1994, the reference implementation of PHP
(powered by the Zend Engine) is now produced by The PHP Group. While PHP originally
stood for Personal Home Page, it now stands for PHP: Hypertext Preprocessor, which is a
recursive backronym.

PHP files have extension ".php".

PHP was developed in 1994 by Rasmus Lerdorf, Andi Gutmans and Zeev Suraski.

A Simple PHP Code to Display “Hello World”.

<html>
<head>
<title>Hello World</title>
<body>
<?php echo "Hello, World!";?>
</body>
</html>
It will produce following result:

Hello, World!

3.1.1 Environment Setup

In order to develop and run PHP Web pages, three vital components need to be installed on
your computer system.

Web Server - PHP will work with virtually all Web Server software, including Microsoft's
Internet Information Server (IIS) but then most often used is freely available Apache Server.
Download Apache for free here: http://httpd.apache.org/download.cgi

Database - PHP will work with virtually all database software, including Oracle and Sybase
but most commonly used is freely available MySQL database. Download MySQL for free
here: http://www.mysql.com/downloads/index.html

16
PHP Parser - In order to process PHP script instructions, a parser must be installed to
generate HTML output that can be sent to the Web Browser. This tutorial will guide you how
to install PHP parser on your computer.

3.1.2 Variable Types

The main way to store information in the middle of a PHP program is by using a variable.

PHP has a total of eight data types which we use to construct our variables:

Data type Definition


Integers Are whole numbers, without a decimal point, like 412
Double Are floating-point numbers, like 3.14159 or 49.1.
Booleans Have only two possible values either true or false.
NULL Is a special type that only has one value: NULL
Strings Are sequence of characters, like ‘PHP supports string
operation’.
Arrays Are named and indexed collection of other values.
Objects Are instances of programmer- defined classes, which can
package up both other kinds of values and functions that are
specific to the class

A SIMPLE PHP PROGRAM FOR FORM VALIDATION

<?php
if ($_SERVER["REQUEST_METHOD"] === 'POST' && isset($_POST['submit'])) {
$username = filter_input(INPUT_POST, 'username',
FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$email = filter_input(INPUT_POST, 'email',
FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$password = filter_input(INPUT_POST, 'password',
FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$confirm_password = filter_input(INPUT_POST, 'confirm_password',
FILTER_SANITIZE_FULL_SPECIAL_CHARS);

if ($password != $confirm_password) {
$message = '<p style="color: #fff;">Password does not match</p>';
} else {
$password_hash = password_hash($password, PASSWORD_DEFAULT);
$confirm_password_hash = password_hash($confirm_password,
PASSWORD_DEFAULT);

$db_host = 'localhost';
$db_username = 'tega';
$db_password = '123456';
$db_name = 'e-commerce';

17
$conn = new mysqli($db_host, $db_username, $db_password, $db_name);

$check_stmt = $conn->prepare("SELECT user_id FROM user_info WHERE username


= ?");
$check_stmt->bind_param('s', $username);
$check_stmt->execute();
$check_stmt->store_result();

if ($check_stmt->num_rows > 0) {
$message = '<p class="message" style="color: #fff;">User already exists</p>';
} else {
$email_stmt = $conn->prepare("SELECT COUNT(*) as count FROM user_info
WHERE email = ?");
$email_stmt->bind_param('s', $email);
$email_stmt->execute();
$result = $email_stmt->get_result();

$row = $result->fetch_assoc();

if ($row['count'] > 0) {
$message = '<p style="color: red">Email is already in use</p>';
} else {
$stmt = $conn->prepare("INSERT INTO user_info(username, email, password,
confirm_password) VALUES(?,?,?,?)");
$stmt->bind_param('ssss', $username, $email, $password_hash,
$confirm_password_hash);
$stmt->execute();
$stmt->close();

$conn->close();

$message = '<p style="color: #fff;">Registration successful</p>';


}
}
}
}
?>

3.2 Introduction to MySQL/PHPMYADMIN

PHP has the ability to connect to and manipulate databases. The most popular database
system that is used with PHP is called MySQL. This is a free database system.

MySQL (pronounced My-Ess-Que-Ell) is a relational database management system


(RDBMS).

A Relational Database Management System (RDBMS) is a software that:

18
Enables you to implement a database with tables, columns, and indexes.

STRUCTURED QUERY LANGUAGE (SQL)

Structured Query Language (SQL) is a special-purpose programming language designed for


managing data held in a relational database management system (RDBMS), or for stream
processing in a relational data stream management system (RDSMS).

SQL was developed at IBM by Donald D. Chamberlin and Raymond F. Boyce in the early
1970s.

A query is a question or a request.

We can query a database for specific information and have a record set returned.

e.g.: SELECT LastName FROM Employees

We can insert into database specific information.

e.g.: INSERT INTO Employees values (‘somebody’)

We can update information on our database

e.g.: UPDATE Employees SET LastName = ‘somebody’ WHERE UserName = ‘thatperson’

We can delete specific information from our database

e.g.: DELETE FROM Employee WHERE Username = ‘somebody’

The example above falls under DML (Data Manipulation Language) which is a subset of
SQL used of adding, updating and deleting data from database.

19
CHAPTER FOUR

4.1 Problems encountered during SIWES IT

Despite the fact that my Industrial Training was a success, there were some factors that
restricted the fluidity of my internship.

 Distance Barrier
 Financial Constraint
 Time Factor

4.2 Summary

Web Development.

Web development is a broad term for the work involved in developing a website for the
internet.

A web developer is a programmer who specializes in the development of World Wide Web
or World Wide Web applications.

Programming and scripting languages such as Html, JavaScript, php and Mysql database are
used to develop websites and web applications.

Hyper Text Markup Language (HTML) is the main markup language for creating web
pages and other information that can be displayed in a web browser.

Cascading Style Sheet (CSS) it’s a style sheet language used in controlling the look and feel
of your HTML documents in an organized and efficient manner.

JAVASCRIPT is a dynamic computer programming language. It is most commonly used as


part of web browsers, whose implementations allow client-side scripts to interact with the
user, control the browser and alter the document.

PHP is a server-sided Scripting language designed for web development.

MySQL (pronounced My-Ess-Que-Ell) is a relational database management system


(RDBMS).

A Relational Database Management System (RDBMS) is software that enables you to


implement a database with tables, columns, and indexes.

20
4.3 Conclusion

In conclusion, there were many things that I have experience and learned during the six
month of my Industrial Training at NIIT. The whole training period was very interesting,
instructive and challenging. Through this training I was able to gain new insights and more
comprehensive understanding about the real industry working condition and practice. The
six-month placement also has provided me the opportunities to develop and improve my soft
and functional skills. All of this valuable experience and knowledge that I have gained were
not only acquired through the direct involvement in task given but also through other aspect
of the training such as work observation, interaction with colleagues, superior, and other
people related to the field. From what I have undergone, I am very sure that the industrial
training program has achieved its entire primary objectives. It’s also the best way to prepare
students to face the real working life. As a result of the program now I am more confident to
build my future career.

21
REFERENCE

Kelechi Kalu. (2023) SIWES: Student Industrial Work Experience Scheme. (n.d.).
Goodreads. https://goodreads.com/book/show/135570109-siwes

22

You might also like