A

REPORT OF THE

STUDENTS’ INDUSTRIAL WORK EXPERIENCE

SCHEME (SIWES)

UNDERTAKEN AT

ROTOSOFT TECHNOLOGIES (ROTOTECH),

New Motor Park, Sanngo Eruwa, Eruwa, Oyo state.
Email: akinwale.rototech@gmail.com

FROM NOVEMBER 2023 TO MARCH 2024.

BY

OLAWALE ISRAEL OLAMIDE

(202230110061)

SUBMITTED TO

THE SIWES COORDINATOR,

DEPARTMENT OF COMPUTER SCIENCE,

ADESEUN OGUNDOYIN POLYTECHNIC ERUWA, (AOPE)

OYO STATE, NIGERIA.

MARCH 2024.

1
 CERTIFICATION

I OLAWALE ISRAEL OLAMIDE with matriculation number 2230110061 hereby declare that

I undergo 16 weeks of Industrial Training (SIWES) at Rotosoft Technologies (Rototech) LTD,

Eruwa, Oyo State, and the report is certified by me about the practical knowledge I acquire

during the industrial training program.

___________________________ _________________________

SUPERVISOR DATE

___________________________ __________________________

H.O.D DATE

2
 DEDICATION
I dedicated this SIWES report to the Almighty God who gave me the strength, knowledge and

wisdom throughout the period of my four months industrial training scheme.

3
 AKNOWLEDGEMENTS

I will like to acknowledge my Parent Mr & Mrs. Olawale for their immense support, My HOD

Mr. Olawale , Mr. Ojoawo and all who have contributed to this point in the success of my

academic pursuit.

4
 ABSTRACT
This SIWES report gives details about all the work carried out and the relevant

experience gained at Rotosoft Technologies (Rototech), Eruwa, Center. During my four months

attachment at Rotosoft Technologies Center, I was involved in several activities. Firstly, I was

assigned to assist in Graphics Design. We were involved in designing logo and banners within

the center in Eruwa. Also, I was introduced to website designing as part of my Industrial

Training.

This report gives concise information on all the subjects afore mentioned, and defines

clearly the experience gained. It also highlights some problems I encountered during the process

of acquiring this experience, and a few recommendations.

5
 TABLE OF CONTENTS
Certification…………………………………………………………………….……………….……1
Dedication………………………………………………………………………………………..……2
Acknowledgement………………………………………………………………………………..…...3
Abstract………………………………………………………………………………………….……4
Table of Content……………………………………………………………………………………...5
CHAPTER ONE: INTRODUCTION
1.0 SIWES………………………………………………………………………………………….…6
1.1 Brief History of SIWES……………………………………………………………………….…..6
1.2 Aim and Objectives of SIWES……………………………………………………………………7
1.3 Roles of Students During SIWES…………………………………………………………………7
1.4 Objectives of The Report………………………………………………………………………….7
CHAPTER TWO:
2.0 Introduction …………………………………………………………………………………….8
2.1 Front-end……………………………………………………………………………………….8
2.2.0 HTML and its properties……………………………………………………………………..10
2.2.1 HTML Tags…………………………………………………………………………………..10
2.2.2 HTML
Table…………………………………………………………………………………..11
2.3.0 Introduction to CSS………………………………………………………………………..…12
2.3.1 Reasons for CSS…………………………………………………………………………...…13
2.3.2 Method Used by CSS in formatting HTML Document……………………………………...13
2.3.3 CSS Selectors and how they can be used……………………………………………….……14
2.3.4 CSS Rules Overriding………………………………………………………………………..14
2.3.5 CSS Comments………………………………………………………………………………14
2.3.6 Background and font of various html elements…………………………………………...…14
2.3.7 Text Decoration………………………………………………………………………………15
2.3.8 Properties of hyperlink using CSS…………………………………………………………...15
2.3.9 Adding CSS to the previous html design…………………………………………………….15
2.4 website design using HTML and CSS……………………………………………………….17
CHAPTER THREE
3.0 Knowledge Gained……………………………………………………………………………….20
3.1 Challenges ……………………………………………………………………………………….20
CHAPTER FOUR: CONCLUSION AND RECOMMENDATIONS
4.0 Summary…………………………………………………………………………………………21
6
4.1 Conclusion……………………………………………………………………………………….21
4.2 Recommendations……………………………………………………………………………….21
CHAPTER ONE

1.0 Introduction

This chapter introduces the SIWES report and this is done under the following subheads:

i. Introduction of SIWES
ii. About SIWES
iii. A brief history of SIWES
iv. Aim and Objectives of SIWES
v. Role of a student during SIWES
vi. Objectives of the report
vii. The logbook

1.1 Brief History of SIWES

SIWES is one of such schemes to help bridge the gap between what is taught and what is
eventually known by the students. SIWES is the acronym for Students' Industrial Work
Experience Scheme. It is a skill development program that is designed to prepare students of
higher institutions of learning like Universities, Polytechnics, Monotechnics, and Colleges of
Education for the transition from the college environment to the world of work. It was
established by Industrial Training Fund (ITF) in 1973 with the headquarters in Jos Nigeria. It is
meant to enable students in tertiary institutions in Nigeria acquire technical skills and experience
for professional development in their course of study as it bridges the gap between theory and
practice. It is the accepted skills training programme in institutions of higher learning in Nigerian
that forms part of the approved academic requirement in various degree programmes. It enables
students to acquire technical skills and experience for professional development in their studies.
Before the inception of the Scheme, there was a growing concern among Nigerian industrialists
that graduates of institutions of higher learning lacked adequate practical background experience
necessary for employment. So, employers thought that the theoretical education provided by
higher institutions did not meet nor satisfy the needs of the economy. It was against this
background that the Fund during its formative years, introduced SIWES to provide students with
the opportunity of exposure to handling equipment and machinery in Industry to enable them
acquire prerequisite practical knowledge and skills.

7
1.2 Aim and Objectives of SIWES

The scheme is aimed at bridging the existing gap between theory and practice of Sciences,
Agriculture, Medical Sciences (including Nursing), Engineering and Technology, Management,
and Information and Communication Technology and other professional educational
programmes in the Nigerian tertiary institutions

The specific objectives of SIWES were summarized by the federal government as follow:

i. To provide students with opportunities to apply their knowledge in real work and actual
practice.
ii. To make the transition from school to the world of work easier and to enhance student’s
contacts for later job placement.
iii. To aid students in acquiring practical skills to strengthen their work values.
iv. To helps students, gain interpersonal and entrepreneurial skills and also instil in them the
right kind of work attitudes and professionalism through interactions with people in the
organizations and observations of their future role.

1.3 Roles of Students During SIWES

The roles of Students are:

i. Participate in the SIWES Orientation Programme before proceeding with industrial
training.
ii. Be regular and punctual at respective places of industrial attachment
iii. Avoid unilateral change of place of attachment except in special circumstances and
only with the permission/approval of the institution's SIWES Coordinator and the
Employer.
iv. Comply with the Employers' rules and regulations
v. Keep proper records of training activities and other assignments in the logbooks

1.4 Objectives of The Report

The Industrial Training Fund’s Policy Document No. 1 of 1973 (ITF, 1973) which
established SIWES outlined the objectives of the scheme. The objectives are to:
i. Provide an avenue for students in institutions of higher learning to acquire industrial
skills and experience during their courses of study;
ii. Prepare students for industrial work situations that they are likely to meet after
graduation;
8
 CHAPTER TWO

2.0 Introduction
This chapter discusses the activities, knowledge and skills acquired during a 4month industrial
training at Rototech Technologies. During this period under review, interns were taken on web
development with emphasis on the front-end. The website is comprised of two parts, Front-End
and Back-End. And is based on the Front-end.
2.1 Front-End
When visiting or opening a website, the visual image present on the desktop or mobile screen is
called Front-End. It is also known as Client-Side. Front-End is the practice of producing HTML,
CSS and JavaScript for a website or Web Application so that a user can see and interact with the
device directly.
The objective of designing a site is to ensure that when the users open up the site they see the
information in a format that is easy to read and relevant. This is further complicated by the fact
that users now use a large variety of devices with varying screen sizes and resolutions thus
forcing the designer to take into consideration these aspects when designing the site. They need
to ensure that their site comes up correctly in different browsers (cross-browser), different
operating systems (cross-platform) and different devices (cross-device), which requires careful
planning on the side of the developer.
There are several tools available that can be used to develop the front end of a website, and
understanding which tools are best fit for specific tasks marks the difference between deve loping
a hacked site and a well-designed, scalable site. Below are some popular tools used for Front-
End development:
i. Hyper Text Markup language (HTML)
Hyper Text Markup Language is the backbone of any website development process. Without it, a
web page doesn't exist. It is the HTML code that provides an overall framework of how the site
will look. HTML was developed by Tim Berners-Lee in 1993. After the development of HTML,
many versions came into the market of the World Wide Web. The latest version of HTML is
called HTML5. This version contains new and efficient ways of handling elements such as video
and audio files. HTML5 is now very popular among front-end web developers. The HTML5 has
lots of features in comparison to the older versions. After the development of HTML, a
revolution came in the field of the internet. Now, the world started communicating by using the
single language i.e.: HTML. And also the term HTML is made up of two parts. The first one is
Hyper Text and the second one is Markup Language.
ii. Cascading Style Sheets (CSS)
CSS controls the presentation aspect of a website and allows a website to have its own unique
look. It does this by maintaining style sheets which sit on top of other style rules and are
triggered based on other inputs, such as device screen size and resolution. In simple words, it's a
tool that defines/control colors, text and its size (content) etc.
9
 iii. JavaScript
JavaScript is an event-based imperative programming language (as opposed to HTML's
declarative language model) that is used to transform a static HTML page into a dynamic
interface. JavaScript code can use the Document Object Model (DOM), provided by the HTML
standard, to manipulate a web page in response to events, like user input. Using a technique
called AJAX, JavaScript code can also actively retrieve content from the web (independent of
the original HTML page retrieval), and also react to server-side events as well, adding a truly
dynamic nature to the web page experience.

Below is an example of HTML used to define a basic webpage with a title and a single paragraph
of text

The Code-view of Basic HTML webpage is depicted in figure 3.1

Figure 3.1: Basic HTML webpage

The first line defines what type of document contains. "<!DOCTYPE html>" means the page is
written in HTML5. Properly formatted HTML pages should include <html>, <head>,
and <body> tags, which are all included in the example above. The page title, metadata,
and link to referenced files are placed between the <head> tags. The actual contents of the page
go between the <body> tags.
The web has gone through many changes over the past few decades, but HTML has always been
the fundamental language used to develop web pages. Interestingly, while websites have become
more advanced and interactive, HTML has gotten simpler. If you compare the source of an
HTML5 page with a similar page written in HTML 4.01 or XHTML 1.0, the HTML5 page

10
would probably contain less code. This is because modern HTML relies on cascading style
sheets or JavaScript to format nearly all the elements within a page.
2.2.0 Html and Its Properties
HTML stands for Hypertext Mark-up Language, and it is the most widely used language
to write Web Pages.

i. Hypertext refers to how Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called Hypertext.
ii. As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure it
to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between
researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

2.2.1 HTML TAGS:

As told earlier, HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>. Except for few tags, most of
the tags have their corresponding closing tags. For example, <html>has its closing
tag</html>and <body>tag has its closing tag </body>tag etc.
The following are the names of tags and their description.
Tag Description
<html> This tag encloses the complete HTML document and mainly comprises of document
header which is represented by <head>...</head> and document body which is
represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep other HTML tags like
<title>, <link>, <script language =”javascript”> etc.
<title> The <title> tag is used inside the <head> tag to mention the document title.

<body> This tag represents the document's body which keeps other HTML tags like <h1>,
<div>, <p>, <table> etc.

11
 <h1> This tag represents a heading

<p> This tag represents a paragraph.

<b>, Bold, italic, list, unordered list

<i>,
<li>,
<ul>

2.2.2 HTML TABLE:

The HTML table model allows web designers to arrange data –text, preformatted text,
images, links, forms, form fields, other tables, etc. into rows and columns of cells. It is defined
with the <table> tag.

Table are divided into table rows with the <tr> tag. Table rows are divided into table data
with the <td> tag. A table row can also be divided into table headings with the <th> tag.

Table data <td> are the data containers of the table. They can contain all sorts of HTML
elements like text, images, lists, other tables.

The Code-views and Design-view of Signup Page without CSS

12
Figure 3.2: Code-views of Signup Page without CSS

Figure 3.3: Design-view of Signup Page without CSS

2.3.0 Introduction to CSS

CSS stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout
of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages
that previously could only be defined in a page's HTML.

CSS helps Web developers create a uniform look across several pages of a Web site. Instead of
defining the style of each table and each block of text within a page's HTML, commonly used
styles need to be defined only once in a CSS document. Once the style is defined in cascading
style sheet, it can be used by any page that references the CSS file. Plus, CSS makes it easy to
change styles across several pages at once. For example, a Web developer may want to increase

13
the default text size from 10pt to 12pt for fifty pages of a Web site. If the pages all reference the
same style sheet, the text size only needs to be changed on the style sheet and all the pages will
show the larger text. While CSS is great for creating text styles, it is helpful for formatting other
aspects of Web page layout as well. For example, CSS can be used to define the cell padding of
table cells, the style, thickness, and color of a table's border, and the padding around images or
other objects. CSS gives

Web developers have more exact control over how Web pages will look than HTML does. This
is why most Web pages today incorporate cascading style sheets. Note: CSS code is not written
the same way as HTML code is. This makes sense because CSS is not HTML, but rather a way
of manipulating existing HTML.

2.3.1 REASONS FOR CSS

The following are reasons why CSS is better

i. It saves time
ii. It eradicates the idea of using repeating codes
iii. It provides efficiency in design and updates: with CSS, we can create rules, and apply
those rules to many elements within the website.
iv. It creates external file (server-side) for managing HTML content

2.3.2 METHOD USED BY CSS IN FORMATTING HTML DOCUMENT

i. Inline Style: It is used to apply a unique style to a single HTML element. An inline CSS
uses the style attribute of an HTML element.
ii. Embedded / Internal Style: It is used if one single page has a unique style. Internal
styles are defined within the <style> element, inside the <head> section of an HTML
page.
iii. External Style: With an external style sheet, you can change the look of an entire
website by changing just one file. Each page must include a reference to the external style
sheet file inside the <link> element. The <link> element goes inside the <head> section.
Also when using external CSS it is preferable to keep the CSS separate from your
HTML. Placing CSS in a separate file allows the web designer to completely differentiate
between content (HTML) and design (CSS). External CSS is a file that contains only

14
 CSS code and is saved with a “.css” file extension. This CSS is then referenced in your
HTML using the <link> instead of <style> as earlier stated.

2.3.3 CSS SELECTORS AND HOW THEY CAN BE USED

CSS selectors are used to find or select HTML elements based on their element name, id
or class

i. Element Selector: The element selector selects elements based on the element name.
ii. Id Selector: The id selector uses the id attribute of an HTML element to select a specific
element. The id of an element should be unique within a page, so the id selector is used to
select one unique element. e.g. id=”hello” CSS #hello { color; red;}
iii. Class Selector: The class selector selects elements with specific class attributes. To
select elements with a specific class, write a period (.) character followed by the name of
the class. e.g. .center {text-align: center;}

2.3.4 CSS RULES OVERRIDING

i. Any inline style sheet takes the highest priority, so it will override any rule defined in
<style>……</style> tags.
ii. Any rule defined in <style>………</style> tags will override the rules defined in any
external style sheet file.
2.3.5 CSS COMMENTS

To simply put comment inside a style sheet you use /*………..*/, you can use it to
comment multi-line blocks similarly as you do in c and c++ programming language.

2.3.6 BACKGROUND AND FONT OF VARIOUS HTML ELEMENTS

You can set the following background properties of an element.

i. The background-color: Is a property used to set the color background of an element.

ii. The background-image property: is used to set the background image of an element.
iii. The background-repeat: Is used to control the repetition of an image in the background.
iv. The background-position: Is used to control the position of an image in the background.

15
 v. The background attachment: Is used to control the scrolling of an image in the
background.
vi. The background property: Is used as a shorthand to specify the number of other
background properties. the font which are;
i. The Font-family property: This is used to change the face of a font
ii. The Font-style property: This is used to make a font italic or oblique.
iii. The Font-weight property: This is used to increase or decrease how bold or light a font
appears.
iv. The Font-size property: This is used to increase or decrease the size of a font.
2.3.7 TEXT DECORATION:

This demonstrates how to decorate a text in CSS, the values are none, underline, overline,
line-through and blink.

2.3.8 PROPERTIES OF HYPERLINK USING CSS

i. The link signifies unvisited hyperlinks

ii. The link visited signifies visited hyperlinks
iii. The link hovered signifies an element that currently has the user’s mouse pointer
hovering over it.
2.3.9 Adding CSS to the Previous HTML Design
The Code-view and Design-view of Signup Page with CSS

Figure 3.4: Code-view of Signup Page with CSS

16
Figure 3.5: Code-view of Signup Page with CSS

Figure 3.6: Design-view of Signup Page with CSS

17
2.4 WEBSITE DESIGN USING HTML AND CSS

Design-view and Code-view of using HTML and CSS in building a site

Figure 3.7: Design-views of building a site using HTML and CSS

Figure 3.8: Design-views of building a site using HTML and CSS

18
Figure 3.9: Design-views of building a site using HTML and CSS

Figure 4.0: Code-view of building a site using

HTML and CSS

Figure 4.1: Code-views of building a site using

HTML and CSS

19
Figure 4.2: Code-views of building a site using HTML and CSS

CHAPTER THREE

3.0 Knowledge Gained

SIWES is a body created to educate and give students practical knowledge for the Industrial
Work situation they are likely to meet after graduation. The following skills were acquired
during the period of industrial training:

i. Ability to structure websites with the help of HTML.

ii. Ability to beautify websites with the help of HTML and CSS.
iii. Ability to create standardize websites with the help of HTML, CSS and JAVASCRIPT.
iv. Debugging errors and being creative in the arrangement of codes.
v. Ability to identify and solve problems relating to Front-end development.
vi. Decision making, critical thinking, organizing and planning.

20
vii. Ability to work with team.

3.1 Challenges

As a student that has undergone this training, below are the following challenges encountered.

i. Using @media Screen properties to make a website responsive on different devices.

ii. Knowing the right CSS color combination to use for a project.
iii. Giving the correct structure to div tags to achieve a responsive website.
iv. The tool used in building a front-end website are always subjected to constant change

CHAPTER FOUR

4.0 Summary

The SIWES attachment with Rotosoft Technologies has been one of the most intrusive,
interesting and productive experiences. In respect of this program, gaining new insight and a
more comprehensive understanding of Front-end development and the real industrial conditions
has been fully achieved.

4.1 Conclusion
As an internship student who underwent the SIWES programme at Rotosoft Technologies,
Eruwa, Oyo State. The internship programme focused on front-end web development (also called
client-side) which is the most attractive part of a sıte that attract the mind of the user. Knowledge
gained was most specifically on HTML and CSS part of web development which enhance the
21
ability to create and design different kinds of webpage and also link them together to achieve a
user interface of a website. At this point ITH aim and objectives to established this programmne
indeed was worthwhile.

4.2 Recommendations

i. The school management should consider the fact that students find it difficult to be
admitted to a particular organization for attachment and urge these organizations to
accept students.
ii. The SIWES body should try as much as they can to assist students financially when
carrying out this very industrial attachment.
iii. Place of attachment should try as much as possible to employ educated workers to avoid
code-switching while lecturing.
iv. A mass enlightenment campaign should be carried out, to enable industries and
establishments to know the importance of SIWES to the future of students and the society
at large.

22