A TECHNICAL REPORT ON STUDENT INDUSTRIAL WORK EXPERIENCE

SCHEME 2024/2025.

UNDERTAKEN AT

DUBIX

No 5, OKIGWE ROAD, UMUAHIA, ABIA STATE

SUBMITTED TO

THE DEPARTMENT OF COMPUTER SCIENCE EDUCATION

By

OMUMU CHIMEREMEZE

MOUAU/COMPED/22/116808

IN PARTIAL FULFILMENT OF REQUIREMENTS FOR THE COURSE CSE 399.

SUPERVISOR

MR. A. K. IHUEZE

JULY, 2025.
 TABLE OF CONTENT

Title Page i

Letter of Transmittal ii

Table of Contents iii

Acknowledgement v

Dedication vi

List of Figures vii

Abstract viii

CHAPTER ONE: INTRODUCTION

1.1 History of SIWES

1.2 Objective of SIWES

1.3 About the Company

1.3.1 Vision of the Company

1.3.2 Mission of the Company

1.3.3 Core Values

1.3.4 Nature of business

CHAPTER TWO: WORK DONE

2.1 Hyper Text Markup Language (HTML)

2.2 Cascading Style Sheets (CSS)

2.3 Web Design and Development Project

CHAPTER THREE: CHALLENGES AND SOLUTIONS PROFERRED

 3.1 Challenges

3.2 Solutions proffered

CHAPTER FOUR: SUMMARY AND CONCLUSION

4.1 Summary

4.2 Conclusion

References

Appendices
 ACKNOWLEDGEMENT

I acknowledge the effort of my parent (Mr. and Mrs. Omumu) for their moral and financial

support during the industrial training.

 DEDICATION

The Student Industrial work experience scheme (SIWES) is dedicated to Almighty God who has

being the alpha and omega starting from the beginning to the end of the training and also to my

parent for their financial support during the course of the industrial training.
 ABSTRACT

This report is a summary of all work experience I have been able to gather during my

SIWES training programme at DUBIX.

The report contains my all my experience in front-end development in relation to HTML,

and CSS.

In conclusion is a summary of what I learnt in my three months SIWES programme.

 CHAPTER ONE

INTRODUCTION

1.1. History of SIWES

SIWES was established by ITF in 1973 to solve the problem of lack of adequate practical

skills preparatory for employment in industries by Nigerian graduates of tertiary institutions.

The Scheme exposes students to industry based skills necessary for a smooth transition from

the classroom to the world of work. It affords students of tertiary institutions the opportunity

of being familiarized and exposed to the needed experience in handling machinery and

equipment which are usually not available in the educational institutions.

Participation in Industrial Training is a well-known educational strategy. Classroom studies

are integrated with learning through hands-on work experiences in a field related to the

student’s academic major and career goals. Successful internships foster an experiential

learning process that not only promotes career preparation but provides opportunities for

learners to develop skills necessary to become leaders in their chosen professions.

One of the primary goals of the SIWES is to help students integrate leadership Development

into the experiential learning process. Students are expected to learn and develop basic non-

profit leadership skills through a mentoring relationship with innovative non-profit leaders.

By integrating leadership development activities into the Industrial Training experience, we

hope to encourage students to actively engage in non-profit management as a professional

career objective. However, the effectiveness of the SIWES experience will have varying

outcomes based upon the individual student, the work assignment, and the supervisor/mentor

requirements. It is vital that each internship position description includes specific, written

learning objectives to ensure leadership skill development is incorporated.

Participation in SIWES has become a necessary pre-condition for the award of Diploma and

Degree certificates in specific disciplines in most institutions of higher learning in the

country, in accordance with the education policy of government.

1.2. Objectives of SIWES

The objective of SIWES among others include to:

 provide an avenue for students in institutions of higher learning to acquire industrial

skills and experience in their approved course of study;

 Prepare students for the industrial work s situation which they are likely to meet after

graduation. Expose students to work methods and techniques in handling equipment

and machinery in their institutions.

 Provide students with an opportunity to apply their knowledge in real work situation

thereby bridging the gap between theory and practices.

 Enlist and strengthen employers’ involvement in the entire education process and

prepare students for employment in industry and commerce.

1.3. About the company

DUBIX is a fully indigenous and non-governmental company that provides clients with

quality, cost effective and innovative IT and security solutions. DUBIX focuses on total

client satisfaction. The Company has built reputable standard over the years from her vast

technical knowledge and competence, in project management and execution.

1.3.1 Vision of the Company

To be a first choice Information and Communication Technology (ICT) company with the

idea of rendering unmatchable excellent professional solution to our clients in line with

emerging technology.

1.3.2 Mission of the Company

Our reason for existing as a company is to provide unbeatable first choice consistent

professional service solution.

1.3.3 Core Values

 Integrity

 Services

 Commitment

 Excellence

 Professionalism

1.3.4 Nature of business

With a team of professional Computer programmers, Graphic designers, data analyst and web

developers, the Company has a reputable recognition in the following areas:

Software Development

Their customer-centered approach enables their developers to capture your business

requirements and develop a fully customized software solution that solves your unique

business needs.

If you are looking for a reliable software development company to enhance your business

performance, that differentiates you from your competitors and helps you become more cost

efficient, they are in a better position to do that. Their software services have helped their

clients achieve the following:

 High quality solutions that tailor fit the business requirements

 Scalable solution that grows with client requirement

 Streamlining customer business work-flow

 Productivity Improvement

 Reduction in overheads and increase in return on investment (ROI)

Website Design

They are set to work as a professional that helps both individuals and companies create and

manage their online presence in a dynamic, efficient and unique way which makes you, your

product or company stand tall in this virtual world. Your website is the vehicle that targets,

attracts, and qualifies your visitors before turning those visitors into monetized customers.

The pages and applications that make up your web presence are critical to your web strategy,

and BudgIT FOUNDATION can help you create a solution that accomplishes your goals.

From site redesigns to end to end custom applications, they can put together a solution that

you can be confident in from all sides of your web marketing strategy.
 CHAPTER TWO
WORK DONE

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.

3.1 Web Development Using HTML

As an outgrowth of SGML (Standard Generalized Markup Language), HTML is generally viewed as
nothing more than a document formatting, or tagging, language. The tags (inside <> delimiter
characters) instruct a viewer program (the browser or, more generically, the client) how to display
chunks of text or images (Goodman & Morrison, 2007)

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 tagsp

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>

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
HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content</tagname>

HTML tags normally come in pairs like <p> and </p>

The first tag in a pair is the start tag, the second tag is the end tag

The end tag is written like the start tag, but with a slash before the tag name

The start tag is often called the opening tag. The end tag is often called the closing tag.

Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display
them.

The browser does not display the HTML tags, but uses them to determine how to display the
document:

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>

</html>

Only the <body> area (the white area) is displayed by the browser.

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps the browser to display a web page correctly.

There are different document types on the web.

To display a document correctly, the browser must know both type and version.

The doctype declaration is not case sensitive. All cases are acceptable:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>
3.1.1 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:
<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 ^{superscripted Text}</p>
<p>An example of _{subscripted Text}</p>
<p>An example of <del>struckthrough Text</del></p>

3.1.2 HTML - WEB COLORS

Below is a table of the 16 basic HTML color values that are available to HTML web
designers.
HTML BASIC COLORS:
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
Fig 3.0 Basic Html Colors

HTML CODE:
<table bgcolor="#ff0000" border="1"><tr>
<td>A red colored table background using hexadecimal values "#FF0000".</td>
</tr></table>

<table bgcolor="rgb(0, 0, 255)" border="1"><tr>

<td>A blue colored table background using numeric, RGB values "rgb(0, 0,
255)".</td>
</tr></table>

<table bgcolor="lime" border="1"><tr>

<td>A lime colored table background using color names.</td>
</tr></table>
Table Bgcolor Values:
A lime colored table background using color names.

A red colored table background using hexadecimal values "#FF0000".

A blue colored table background using numeric, RGB values "rgb(0, 0, 255)".

Fig. 3.1 Html Table

3.1.3 HTML - WEB FORMS

HTML web forms are a composition of buttons, checkboxes, and text input fields embedded
inside of HTML documents with one goal in mind: to capture user input. By doing things
such as providing fields for user data such as names, phone number, and email addresses,
web forms give users the opportunity to interact directly with a webpage.

HTML forms are placed on a web page using the <form> tag. This tag should encapsulate a
series of other form elements, identifying them as a single cohesive web form.
HTML FORM ELEMENT:
<form name="myWebForm" action="myServerSideScript.php" method="post">
<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>

HTML WEB FORM:

Checkbox

Text Field 1
HTML form elements rely on action and method attributes to identify where to send the form data
for processing (action) and how to process the data (method).

3.1.4 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.
The type attribute determines what kind of input element to render to the screen. Options here
include: text, checkbox, radio, button, submit, reset, password, and hidden form elements.
Each has its own unique functionality and customizable presentation.
HTML INPUT ELEMENT CODE:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
Check Me: <input type="checkbox" /><br />
Name: <input type="text" /><br />
Yes: <input type="radio" /> No: <input type="radio" /><br />
<input type="submit" value="SUBMIT" />
<input type="reset" value="RESET" />
</form>

HTML INPUT ELEMENTS:

Check Me:

Name:

Yes: No:

HTML - TEXT FIELDS

Text fields offer a small rectangular box that's always ready to receive information from viewers.
Users will notice that when they click these fields, the cursor will change from the typical arrow to a
pipe character ( | ), allowing for text entries to be typed inside each input field.

A text field is placed on a web page using the <input> tag, with the type attribute set with a
value of "text".
HTML TEXT FIELD CODE:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" /> Last: <input
title="Please Enter Your Last Name" id="last" name="last" type="text" />
<input type="submit" value="SUBMIT" />
</form>

HTML TEXT FIELDS:

First: Last:
Text fields are designed to capture single words or phrases from the user. That information may then
be processed through some kind of client/server side script (PHP, PERL, JavaScript).

HTML - SUBMIT BUTTONS

Submit buttons send form data to a back-end process or application. The back-end process
then verifies and processes the data, eventually passing the information into some database
application.

Set the type attribute of the <input> tag to "submit" in order to place a submit button on a
web page.
HTML SUBMIT BUTTONS:
<input type="submit" value="Submit" />
<br /> <input type="submit" value="Send" />
<br /> <input type="submit" value="Submit Form" /><br />

3.1.5 HTML - FORM SUBMISSION - ACTION

Submission buttons send form data to whatever action has been designated by the action
attribute of the encapsulating <form> element. The code below will send the form data’s to
an email address (youremail@youremail.com).
HTML CODE:
<form method="post" action="mailto:youremail@youremail.com" >
First:<input type="text" name="First" size="12" maxlength="12" />
Last:<input type="text" name="Last" size="24" maxlength="24" />
<input type="submit" value="Send Email" />
</form>

3.1.6 HTML - UPLOAD FORMS

Upload fields provide the interface that allows users to select a local file and upload it to the
web server. An upload field renders as two parts -- an empty text field and a Browse button
that opens up a local window explorer on the user's computer. This allows them to quickly
browse to the local file and automatically fills in the file path inside of the text field.

Setting the type attribute of the <input> to "file" places the upload element on a web page.
HTML UPLOAD FIELD CODE:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<input type="file" name="uploadField" />
</form>

HTML - TEXTAREAS
 An HTML textarea is an oversized Text Field capable of capturing "blurb" type information
from a user. If you've ever posted on a forum or left feedback on your favorite blog, you
probably do so using an HTML textarea.

Embed textareas in HTML documents using the <textarea> tag.

HTML TEXTAREA CODE
<textarea name="myTextArea"cols="20" rows="10">Please limit your response
to 100 characters.</textarea><br />
<textarea name="myTextArea" cols="40" rows="2">Please limit your response
to 200 characters.</textarea><br />
<textarea name="myTextArea" cols="45" rows="5">Please limit your response
to 500 characters.</textarea><br />

HTML TEXTAREA FORM ELEMENT:

Please limit your response to 100 characters

Please limit your response to 200 characters.

Please limit your response to 500 characters.

3.1.7 HTML - DIV ELEMENT(S)

Web developers use <div> elements to group together HTML elements and apply CSS styles
to many elements at once. For instance, by wrapping a set of paragraph elements into a <div>
element, the developer can take advantage of CSS styles and apply a font to all paragraphs at
once by applying a font style to the <div> tag instead of coding the same style for each
paragraph element.
HTML DIV ELEMENT CODE:
<div id="myDiv" name="myDiv" title="Example Div Element">
<h5>Subtitle</h5>
 <p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>

With these text elements now grouped together under a <div> element, we can alter the
appearance of each underlying element collectively by applying a style attribute to the <div>
tag.
HTML DIV ELEMENT CODE:
<div id="myDiv" name="myDiv" title="Example Div Element" style="color:
#0900C4; font: Helvetica 12pt;border: 1px solid black;">
<h5>Subtitle</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>

HTML DIV ELEMENT IN ACTION:

Subtitle

This paragraph would be your content paragraph...

Here's another content article right here.

Elements housed within a <div> tag acquire any styles or properties applied to the master div
element. Therefore the paragraph and heading elements should now be rendered blue in a
Helvetica font. In addition, we've applied a border to the <div> element just to help visualize
the grouping of elements together.
HTML uses start tags and end tags to markup web page elements: In the example above, the <p> tag
marks the start of a paragraph, and </p> marks the end of the paragraph.
By using simple HTML tags, web designers can add headers, paragraphs, text, tables, images, lists,
programming code, etc., to a web page (HTML document).
Web browsers (IE, Firefox, Chrome, etc.) read HTML documents, interpret the HTML tags, and
display the proper output (without displaying the HTML tags):

According to the HTML standard, HTML should be used to define the content of web pages.
To define the visual style (color, size, appearance, layout, etc.), CSS (Cascading Style Sheets) should
be used.
3.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.

CSS defines how HTML elements are to be displayed.

CSS describes the visual style (appearance, layout, color, fonts) of HTML elements.
CSS was designed to separate document layout from document content (which greatly
improved HTML flexibility and reduced HTML complexity).
CSS is easy to learn. You can use HTML element names as selectors, and list the style
properties inside curly brackets:

3.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

 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.

Pseudo-classes are used in CSS selectors to permit formatting based on information that is
not contained in the document tree. One example of a widely used pseudo-class is :hover,
which identifies content only when the user "points to" the visible element, usually by
holding the mouse cursor over it. It is appended to a selector as in a:hover or
#elementid:hover. A pseudo-class classifies document elements, such as :link or
:visited, whereas a pseudo-element makes a selection that may consist of partial elements,
such as :first-line or :first-letter.[5]
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.

3.2.2 CSS Example

body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, p, a{
margin: 0px;
padding: 0px;
}

#wrapper{
width: 100%;
height: auto;
}
#header{
width: 100%;
height: 50px;
background-color: #333333;
position: fixed;
z-index: 20; /*change the value of section-bar's top anytime you change this value*/
}
ul#nav-bar{
list-style-type: none;
float: right;
}
ul#nav-bar li{
float: left;
}
ul#nav-bar li a{
display: block;
 margin: 0px 15px;
color: #ffffff;
text-decoration: none;
line-height: 50px;
}
ul#nav-bar li a:hover{
color: #666666;
}
The CSS definitions are normally stored in external files. This enables a web developer to
change the appearance and layout of every page in a web site, just by editing one single file!
If you have ever tried to change the style of all elements in all your HTML pages, you
understand how you can save a lot of work by storing the style definitions in an external file.
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>

Here the relationship is “stylesheet”, the type being the ‘’text/css” file and the css page is test.css. All
css documents have the ‘.css’ extension.

Project Embarked on During SIWES IT

I designed a static 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.
Fig 3.2 Static Webpage
 CHAPTER THREE

CHALLENGES AND SOLUTIONS PROFFERED

3.1. Challenges

There are challenges that were encountered during the industrial training. These challenges

are time demanding and thereby consume a lot of time and effort but to my optimum

satisfaction I was able to overcome those challenges which really exposed me to some

technical problems that can occur and how to tackle or solve these problems.

 The first challenge I encountered during the industrial training was the use of new

programming languages and concepts in the course of completing the web project and

other activities that required programming ideas.

 The intense traffic on my way home was a serious challenge, most times I spend

almost 2 hours in traffic and I have to get up early the next morning

 The problem of time management was inevitable, a lot of activities needed to be

completed in a limited time.

Other Challenges

 Inability of firms, organizations, companies to accept IT students, and to dedicate

quality time towards educating and enlightening them about work etiquette.

 Inability of the university to provide a more suitable office or workshop for SIWES

students.

 Lack of trust and confidence on the side of the organizations towards students on

Industrial attachment.

 There was problem of accommodation within Lagos which was a serious challenge

for students on attachment leaving them with no option than to rent apartments in

nearby settlements.
  This was another challenge for students leaving in nearby settlement due to lack of

accommodation within the company. Despite a means transportation provided by the

company to convey workers to and fro, there was either late arrival of the vehicle or

failure to turn up which leave the students with no option than to pay for transport fair

since they are after knowledge.

3.2. Solutions proffered

Here are some solutions I employed in the approach of solving each of the difficulties faced;

 For the first problem I encountered, I used the internet by checking for help on how to

go about new programming language concepts in useful websites such as Git-Hub and

YouTube tutorials.

 In solving the second challenge, I had to change my daily routine so that I don’t get

tired of waking early in the morning.

 In solving the Time Management problem, I had to schedule all my activities in such

a way that I can perform more than one activity that are not conflicting

simultaneously.
 CHAPTER FOUR

SUMMARY AND CONCLUSION

4.1. Summary

The six months student industrial work experience scheme undergone at DUBIX is

world class which is web development and training, to mention a few exposed me to know

gain more practical knowledge of programming. I was opportune to have learnt and

experience lot in this field in so little time. The programme has been highly enlightening,

beneficial, interesting and successful.

4.2. Conclusion

My SIWES was a very successful one, I had an insight of the Information Technology world.

I have now known the power of programming and graphics designing. With this, I will be

able set a goal for myself to build a complete website and write codes for different programs.

SIWES as a course has truly exposed me to the challenges faced in a growing I.T world that

is dependent on computers.
References

 Albert Jackson, An Introduction to Web development (Milton Park, Abingdon, Oxon:

Routledge, 2013), p. 40.

 Adrian Waygood; David Day, Popular Mechanics Complete Home How-to (New

York: Hearst Books, 2009), p. 282.

 Computer software definition, archived from the original on 2012-01-21,

retrieved 2011-11-12

 Posinna, Mariddetta (Apr 1, 2014). "JavaScript Basic". HFCL. Archived from the

original on 2016-04-20. Retrieved 2016-04-11

 S. Deering; R. Hinden (December 1995), Internet Protocol, Version 6 (IPv6)

Specification, Internet Engineering Task Force (IETF), RFC 1883

 Ugwuanyi Ezema, Challenges of SIWES in Library and Information Science in the

ICT Enviroment.