Lazico 5

CHAPTER ONE
INTRODUCTION
Gestric Information Technology and Management Institute (GITMI) is an

institution founded in 2002 by Dr Chris Ekpenyong (FNSE) as a subsidiary
of Gestric Group of companies.GITMI was created to help student achieve
professional advancement and personal enrichment. As an accredited
training institute with Nigeria Computer Society (NCS) and affiliated to
Federal University of Technology, Akure, GITMI has for long made it
possible for students and professionals to achieve their career goals in the
areas of Information and Communication Technology (ICT),professional
manpower development, public Administration, Business management,
Hospitality management and Entrepreneurial Development. In partnership
with Academics, Government and industry, GITMI provides qualitative
world-class training in the following:
Web/multimedia Development
Hardware Engineering
Data processing/info Tech
Network/Security
Software Engineering
Ethical Hacking (CEH)
Cisco CCNA
AUTOCAD 2D & 3D
Oracle Database
IT Infrastructure Library
Project Management(PMP)
1|Page
CBT Software use.

And prepares students for international certification examinations in:
Microsoft Certified systems Engineer (MCSE)

Cisco Certified Network Associate (CCNA)
Oracle Database and
Project Management (PMP).
I was assigned at her uyo center(No14,oron Road) to the school of

information technology as seen in fig1.1, were i obtained training in web
design.
2|Page
Fig1.0: Organogram Of Gestric Information Technology And Management

Institute
CHAPTER TWO
INDUSTRIAL TRAINING EXPERIENCE
Web design is the planning and creation of websites. In other words it

involves basically building interfaces of a site. It has become a very
lucrative business as lots of companies now own websites. This has help
them in promoting their business or marketing their product and has also
given them the edge over mire technophobic competitors as it provides
feedback forms to do market research in order to find out exactly what their
customers expectations are. This websites were created by web designers
using the following languages:
PHP
HTML
3|Page
CSS
JAVASCRIPT and
SQL.
I will be stating in this chapter the various knowledge I had acquired in each
of the languages listed above.
2.1 HTML
Html is an acronym of the word Hypertext markup language. It is

used in structuring a site and is said to be a coding language that uses tags to
segment the structure of a web document. It falls under the view module of a
web project in a design pattern. Other vital point about Html are explained
below.
2.1.1 HTML STRUCTURE
Html pages always begins with a Document type definition (DTD)

e.g.
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">.This helps the web-browser to find out what type of

HTML I am using as well as the type of language the characters are
4|Page
in.Immediately after the document type definition is the html tag (i.e. HTML
closing and opening tag).
<HTML>
...
</HTML>
Within this HTML tags, is the Head and the Body which forms the two
main sections of my HTML pages. The head section holds the site
information, while the body holds the site content. A typical HTML
document is seen below:<DOCTYPE
HTML
PUBLIC
_//W3C//DTD
HTML
1.01
Transitional//EN >
<HTML>
<HEAD>
...
</HEAD>
<BODY>
5|Page
...
</BODY>
</HTML>
2.1.2 PAGE TITLE
The most vital element of a quality web page is the title. It helped me
know what am visiting and represents the page. Its also one of the tags that
goes within the HEAD tags and can only be applied once on a page. To add
a title to my document I will use the code below:
<Title>this is the title /title>
2.1.3 SIMPLE HEADINIG
Many websites use headings. Simple headings ranges from H1 to H6.i

was able to apply various kinds of headings to many of my web pages using
any of these header tag:
<h1>this is the Heading</h1>
<h1>this is the heading</h1>
<h1>this is the heading</h1>
. . .
6|Page
<h6>this is the Heading </h6>

Of all the different headings, <h1> produces the biggest, and <h6> produces
the smallest.
2.1.4 PARAGRAPHS
Paragraphs can be applied to my html document. To do this I would

use the paragraph tag in this way:
<p>this is a paragraph </p>
2.1.5 NEW LINES/SPACING
To create a new line on my webpage I would make use of the break

tag (i.e. <BR>), while to apply spacing to the page I would make use of:

2.1.6 HORIZONTAL LINES
Horizontal lines can be added to my web page by me using the

horizontal Tag below:
7|Page
<HR>
Attributes such as ALIGN, WIDTH and SIZE can be used as seen below:
<HR ALIGN=left WIDTH=50% SIZE="5 >
2.1.7 COMMENTS
Comment use in html is as important as those used in other

programming languages. They are used when more than one persons update
website. To add a comment to my webpage I would simply do so in
following this form:
<!this is the comment-- >
2.1.8 CHANGING FONT COLOUR/FACE/SIZE
To change the colour of the font in my web page I would do

this:
<FONT COLOR=red> the text that the color applies to </FONT>
Or
<FONT COLOR=red >the text that the color applies to </FONT>
I can also change my font face and size by doing the following:
8|Page
<FONT FACE =webdings>text being affected </FONT>

And
<FONT STYLE =Font-size: 20px ;> text being affected</FONT>
2.1.9 BOLDING/ITALICING/STRIKING
Bolding, italicing and underlining my webpage makes it standout.

To make my text bold I will follow this form:
<B>Text Being Affected</B>
Or
<STRONG>Text Being Affected </STRONG>
While to italicize my text I will do this:
<I>Text Being Affected </I>
To Strike through my text I would do this:
<STRIKE>Text to be Affected</STRIKE>
2.1.10 LINKS IN HTML
Links are very Essential to help users of my website move from one
page to another within the website .To create a simple link I would make use
of an Anchor tag in the form seen below:
<A Href =Gestric.php>text to be affected </A>
9|Page
Links can be made use of in different ways as seen below:
I.
Links in new window:

To create new windows, I would do this:
<A HREF=lazico.php TARGET =_Blank>Text to be
affected</A>
II.
Links to Email addresses:

To create a link that connects to my email address I will do this:
<A
HREF
=mailto:laziboy4sure@gmail.com>E-mail
me</A>
III.
Linking a Page to Another page:

To do this I would place this code in the body section of my html
document:
<A HREF=erosion.html>Erosion</A>
IV.
Link with in a page :

To do this I would place this code:
<A name =page link><?A>
after the body tag in my html document and also place this other code:
<A href =#pagelink>jump to top </A>
before the closing tag of the body.
2.1.11 INCLUDING IMAGES IN HTML
10 | P a g e
Putting up images such as pictures or diagram in my webpage is

no big deal. This is made possible with the image tag. To add an image I
would do so in this form:
<img src=ufan/babs.png ALT = photo of the man>
2.1.12 SPECIAL CHARACTERS
These are characters that my web browser threats as a special thing.

Special characters in Html includes the following but not limited to these:
i.
ii.
iii.
iv.
v.
vi.
vii.
Left single quote

Right single quote
Number sign
Dollar sign
Ampersand
Copyright
Percent sign
‘
’
# #
$ $
& &
©
% %
2.1.13 LIST
This is same as bullet and numbering in Microsoft word. There are

several types of lists in html.The two most common are:
i.
ii.
Ordered list and

Unordered list
11 | P a g e
Ordered list has numbers for people to be guided by. Below is an

example with it output in fig2.0:
<ol>
<li> omo</li>
<li> maggi </li>
<li> Bimbo </li>
</ol>
Fig2.0: Output of the code for the ordered list example.
Unordered list is similar to ordered list, except that it has bullets

instead of numbers to be guided. Below is an example with it output in
fig2.1:
<ul>
<li> BOY</li>
12 | P a g e
<li> Girl </li>

<li> man </li>
<li> woman </li>
</ul>
Fig2.1: Output of the code for the unordered list example.
In addition there exist what is called Defination List (DL) which consist of
the Defination Term (DT) and Defination (DD).An example is seen below:
<dl>
<dt> EFCC</dt>
<dd> Economic and Financial Crimes Commission</dd>
</dl>
13 | P a g e
2.1.14
FORMS
Forms help create a means of interaction between a device and it user.

This is called Interactivity (i.e. the only way to interact on a web).To begin
with a form I must make use of <form> and </form> which appears as a
container. This tag (i.e. form tag) possesses attributes that affect it function
and they are:
i.
Action: helps to specify the server site processing script for the form
ii.
input.
Method: sends input to the processing script.
The component of a form are numerous, however it has as its basic
component input and select. An example of a form is seen in fig2.2 and it

code seen below:
<html>
<head>
<title>Form</title>
</head>
<body>
<form action =# method =post>
<b> username</b><br/>
<input
type
=text
size
=20
placeholder
=username
name=username/> <br/>
14 | P a g e
<b> password: </b><br/>

<input type =password size =20 placeholder =password name
=password /><br/>
<b>Select your Sex : </b> <br/>
<input type=Radio name=gender value=m />male <br/>
<input type=radio name=gender value =f />Female<br/>
<b> select your best color:</b> <br/>
<input type=checkbox name=color value=r />Red<br/>
<input type=checkbox name=color value=b />Blue <br/><br>
<p ><input type="submit" value="login" /></p>
</form>
</body>
</html>
15 | P a g e
Fig2.2: output of the Html form code above
The select component in a form is used in implementing a dropdown

list. An example of how it is implemented is seen below:
<b>Select your state of Origin :</b><br/>
<select name=state>
<option value=AL>Akwa-Ibom</option>
<option value=KN>Kaduna </option>
<option value=EN>Enugu</option>
</select>
16 | P a g e
2.1.15 TABLES
Web developers use tables to organize their form fields. This tables has
many attributes which I can modify to fit exactly what i want; some of
which include:
i.
ii.
iii.
Border
Cell padding
Cell spacing etc.
In creating a table i made use of the following table tags:
i.
ii.
iii.
iv.
v.
<table>
<tr> :defines rows
<th> :table header
<td> :data cells
<caption> :Allow you put a caption
In addition simple tables can be added by following this pattern:

`<TABLE BORDER =1 >
<TR>
<TD> BOY </TD>
<TD> GIRL </TD>
</TR>
<TR>
<TD> man </TD>
<TD> woman </TD>
</TR>
</TABLE>
2.1.16 OTHER IMPORTANT TAGS IN HTML
The usefulness of tags cannot be over emphasized as it assist a

web designer to achieve his/her desired design. From the code of the form
17 | P a g e
in fig2.2 it can be seen that tags made-up the whole code. Table 2.1 below
consist of some of these tags.
Table2.1: Useful Html tags.

s/n
1
2
3
4
5
6
7
8
9
Opening tag
<p>
<h1>
<div>
<textarea>
<br/>
<frameset>
<fieldset>
<legend>
<img/>
Description
Paragraph tag
Heading tag
Division tag
Textarea tag
Break tag
Frameset tag
Fieldset tag
Legend tag
Image tag
Closing tag
</p>
</h1>
</div>
</textarea>
</frameset>
</fieldset>
</legend>
2.2 CASCADING STYLESHEET (CSS)
This determine how documents are displayed on screens, in print and

also how they are recited. Cascading style sheets make available easy and
effective means to specify various attributes for the html tags. It allows one
to specify a number of style properties for a given html element. Every
single property has a name and a value, separated by a colon (:) and it
declaration separated by a semicolon. It is worthy of note that W3C has
actively promoted the use of style sheet on the web since the consortium was
founded in 1994.
18 | P a g e
CSS can be used in Html document in three ways which include:

i.
ii.
iii.
External style information

Embedded style information
Inline style information
External style information also known as external style sheet are used for
the whole multiple-page website. It involves having a separate css file saved
in the same directory as my html document and then linking it with the html
page using:
<link rel=stylesheet href=name of css file >
Placed in the head section of the html document.

Embedded style information are used for the whole page. It has in the
head element of an html document style tags, surrounding all of the styles
for my web page. An example is seen in fig 2.3 below.
19 | P a g e
Fig2.3: Embedded styling.

Inline style information are plonked straight into the html tags using
the style attribute. They look something like this:
<p style=color: blue> text</p>
2.2.1 SELECTORS, PROPERTIES AND VALUES
Just as Html has tags, css has selectors. Selectors are the names used
to describe styles in internal and external stylesheet.Each selector has
properties inside curly brackets, which simply take form of words such as
color, front-weight or background-color. Each of these properties are given a
20 | P a g e
value following a colon and semicolon to separate the properties. Here is an

example:
Body {
Font-size: 13px;
Color: red;
}
When the above code is applied to an html document, text between the body
tags will be 13pixels in size and red in color.
Css selectors can be said to be of basically three types and they are:
i.
ii.
iii.
Class selectors
Html tag selectors and
Id selector.
Class selectors are used when one want to define a style that does not
redefine an html tag entirely. A class selector has the general syntax:
.class selector {property: value ;}

When referring to a class selector i would simply add the class to an html
tag.
21 | P a g e
Html tag selectors are used when one wants to redefine the general
look for an entire html tag. It has the general syntax:
Html selector {property: value ;}

In the case of Id selectors, by applying an id rule a style can be
applied to just a single tag .An id selector has the general syntax:
#ID selector {property: value ;}

I must be very careful to ensure that elements are named uniquely. If two
paragraphs have the same id, both paragraphs would be affected in the same
way.
Css properties support a wide variety of values, from keywords like
underline and solid, to a variety of absolute measurements like inches (in) to
often poorly understood relative measurements like em unit, ex values, and
percentages. Below is an overview of the types of measurements and values
found in css:
Table 2.2: Measurements and Values.
s/
Unit
Description
Examples
n
1
Absolute
Lengths are used for P{margin:0.5;}
lengths
horizontal or vertical .h1{font-size:8cm;}

22 | P a g e
measurements.
3-Hex color This is an
RGB Body{
hexadecimal format of Backgroundcolor:#000;

#rgb
where
r Color:#fff;
corresponds to a hex }
value (0 - f) for red, g
for green and b for blue.
For
example,
#f00
would specify pure red,

while
3
#fff
would
specify white.
6-Hex color This is an
RGB Body
{backgroundcolor
hexadecimal format of :#FFA500;

#rrgbb
where
rr Color:#f3ffff;}
corresponds to a hex
value (00 ff) for red,g
in the same range for
green and b for blue for
example
,#ff0000
would specify pure red,

while
#ffffff
would
23 | P a g e
RGB Color
specify white.
A
decimal
or
Strong {
percentage RGB color Color: rgb (255,0);

can be specified via a }
function style rgb(r, g,
b) value, where r, g and
b are specified as a
decimal value from 0 to
255 or a percentage
5
Numbers
from 0 to 100%.
Css supports simple P{line-height:2;}
positive integer values
like 2 etc. as well as Body {margin: 0;}
real
numbers
like3.5
.Note that in the case of

0 values, it is not
required
to
put
measurement unit like

px and thus a plain zero
value will be commonly
6
seen.
Percentages Percentages are denoted Body{font-size:10%}
24 | P a g e
by a number followed /*20px*/

by the % symbol and
are always relative to
another value such as a
7
Strings
length.
Strings are defined with P{font-family: fancy font;}
either single quotes or
double quotes.
2.3 PHP
Php is the acronym for the word hypertext preprocessor, a powerful

scripting language that fits gracefully into html and place the tools for
designing dynamic websites in the hands of the people .It is a freely
circulated open-source language which is one of its greatest attributes. It is
installed on top of ones webserver software (i.e. versions of apache,
Microsoft IIs and other server software packages.
25 | P a g e
Fig2.4: Illustrating how a website functions.
From the fig2.4 above, it can be seen that php is used by inserting phpcode
inside the html that makes up the website. When a client (i.e. anybody on the
web) visits a webpage that contains this code, the webserver (which is the
brain) executes it.
2.3.1 USEFULNESS OF PHP
The following are the common usefulness of php:

26 | P a g e
i.
Take information from web-based forms and use it in a million ways

(store it in a database, create conditional pages depending on what
ii.
iii.
iv.
forms said, send email etc.)

Authenticate users.
Serve different pages to people using different browsers or devices.
It performs systems function, i.e. from file in a system, it can create
open, read, write and close them etc.
2.3.2 SAMPLE SCRIPT OF PHP
Fig2.5: A simple php script.

From fig2.5 Above, the <?Php and ?> tags start and end a phpscript and
the middle houses the content.
27 | P a g e
2.3.3 BASIC RULES OF PHP
They are as follows:

i.
Any file that contains php code must be named as .php, in order to get
ii.
the php script working. Like Html my files are saved as plain text.
Notes about my code with comment tag should be included so that
months down the road i can make sense of what i was trying to make
my script do. Im able to set comment apart from my code by using
either // at the beginning of each line, or surrounded by /* and
iii.
iv.
*/ for several lines comment; as seen in fig2.6 and fig 2.7.

Every php code must begin with <? php and ends with?>.
Every chunk with a few exceptions, each separate instruction entered
must end with a semicolon.
28 | P a g e
Fig2.6: Several lines comment.
Fig2.7: Single line comment.
2.3.4 PHP VARIABLES
A variable is a named memory location (i.e. it is used for holding one

or more values).It is the medium by which php stores information and passes
it along between documents and functions and such.
Variables in php begins with a dollar sign ($).They have three
fundamental things I can do with them which are:
i.
ii.
iii.
Set them (i.e. give them one or more values);

Reset them if they were already set;
Access them(i.e. read and make use of them)
29 | P a g e
This can be observed in fig 2.8 below.
Fig2.8: Showing a variable is set, reset and accessed.
2.3.5 RULES IN NAMING VARIABLES
In naming variables the following rules must be adhered to:

i.
ii.
It begins with a letter.

It contains letters,
iii.
e.g. $lazay_joy;
It is not used elsewhere (like print).
numbers
and
underscore
character
2.3.6 PHP OPERATOR TYPES
Php has five operator types which includes:

i.
ii.
Arithmetic operators
Comparison operators
30 | P a g e
iii.
iv.
v.
Assignment operators
Logical operators
Conditional operators.
The table2.3, 2.4, 2.5 and 2.6 below gives the description of each of these
operators with examples:
Table 2.3: Arithmetic operators
s/
Operato
n
1
2
3
4
5
Description
Example
Adds two operands
Let A=10,B=20
A + B will give
30.
Subtracts second operand from the first A B will give
Multiply both operands
-10.
A * B will give
/
%
200.
Divide numerator by denumerator
B/A will give 2.
Modulus operator and remainder of B % A will give
after an
6
7
0.
++
Integer division
Increment operator, increases integer A++ will give
--
value by one.
11.
Decrement operator, decreases integer A-- Will give 9.
value by one.
Table 2.4: Some comparison operators
31 | P a g e
s/
Operato
==
Description
Example
Let
A=10,B=20
It checks if the value of two operands are A == B is not
equal or not and if yes then condition true.
!=
becomes true.
It checks if the value of two operands are (A! = B) is
equal or not. If values are not equal then true
>
condition becomes true.

It checks if the value of left operand is (A > B) is not
greater than the value of right operand if true.
<
yes condition becomes true.

Checks if the value of the left operand is (A < B) is
less than the value of the right operand if true.
>=
yes therefore conditions becomes true.

Checks if the value of left operand is (A >= B) is
greater than or equal to the value of right not true.
<=
operand.
Checks if the value of the left operand is (A <= B) is
less or equal to the value of the right
true
Table 2.5: Logical operator table
s/
Operato
Description
Example
32 | P a g e
n
1
r
AND
let
A=10,B=20
This is the logical AND operator. If both the (A and B) is
operands are true, then the condition true.
OR
becomes true.
Called logical OR operators .if any of the (A or b) is
two operators are non-zero then the true
$$

Called logical AND operator. If both of the (A $$ B) is
operands are non-zero then the condition true.
||
becomes true.
This is a logical OR operator. If any of the (A || B)
two operands are non-zero then the

This is known as Logical not operator. It is !(A $$ B) is
used to reverse the logical state of its false
operand. If the condition is true then logical
not operator will make it false.
Table 2.6: Assignment operators table
s/
Operato
Description
Example
n
1
r
=
Let A=10,B=20
Simple operator assignment operator C=A+B
will
33 | P a g e
assigns value from right side operands assign

2
+=
value
of
to left side operand.

A +B into C.
Adds AND assignment operators. It C+=A
is
adds right operand to the left operand equivalent
to
and assign the result to the left C =C +A

3
-=
operand.
This is known as subtract AND C-=A is equivalent
assignment operator. It subtract right to C = C A.
operand from the left operand and
*=
/=
assign the result to left operand.

This is called multiply AND C*=A
is
assignment operator. It multiply right equivalent
to
operand to the left operand.

C = C * A.
This divides an assignment operator. C/=A
is
It divides left operand with the right equivalent to C =C

operand and assign the result to the / A
.6
%=
left operand.
This is known as modulus AND C%=A
is
assignment operator. It takes modulus equivalent
to
using two operands and assign the C = C % A.

result to the left operand.
34 | P a g e
Table 2.7: Conditional operator table.
s/
Operato
Description
Example
n
1
r
?:
Let A=10,B=20
This operator evaluates expression If condition is true
for a true or false value and then then
value
X:
execute one of two given statement, otherwise value Y.

depending upon the result of the
evaluation.
2.4 JAVASCRIPT
This is a scripting language developed specifically for use in web

browsers to make websites more dynamic. It permitted me to change how
my documents looks completely. It is a client-side language and therefore
needs no trips to the server.
2.4.1 SOME USES OF JAVASCRIPT
JavaScript is used in the following ways:

35 | P a g e
i.
Animation :
Is said to occur when a thing designed in still or two dimensional

form is brought to life and seems to move in a way that follows
laws of physics. In other words, it is the way a cartoon character
walks across the screen or the manner an app icon bounces like a ball
while it is loading. JavaScript is used to create lots of these animation.
ii.
Cookies :
This can be created with JavaScript. They are the little bits of data
stored on ones computer by web pages that recall information selected or
inputted by users.
iii.
Analytics :
User tracking are built in lots of browsers with JavaScript. Data is

collected by the owner of the website using this script to better understand
people using the site. The web owners can then create contents that are more
useful to their users.
iv.
Forms :
JavaScript can be used to check that users have completed all required
fields before submitting, so that users dont have to reload the page and start
all over again if they omit a field .This is important as it saves a lot of stress
and time.
36 | P a g e
I made use of the JavaScript below to validate my html form (see

Appendix c) and its output message is seen in fig2.9 below .This script is
placed in the head section of the Html of the form( see appendix D) :
<script type="text/javascript">
//form validation code.
function validate()
{
if(document.myform.name.value == "")
{
alert("please provide your name!");
document.myform.name.focus();
return false;
}
if(document.myform.position.value == "")
{
alert("please provide your position!");
document.myform.position.focus();
return false;
}
if(document.myform.tel.value == "")
{
alert("please provide your tel!");
document.myform.tel.focus();
return false;
}
if(document.myform.email.value == "")
{
alert("please provide your email!");
document.myform.email.focus();
return false;
}
if(document.myform.res_address1.value == "")
{
alert("please provide your res_address1!");
document.myform.res_address1.focus();
return false;
37 | P a g e
}
{
return false;
}
if(document.myform.per_address.value == "")
{
alert("please provide your per_address!");
document.myform.per_address.focus();
return false;
}
if(document.myform.village.value == "")
{
alert("please provide your village!");
document.myform.village.focus();
return false;
}
if(document.myform.clan.value == "")
{
alert("please provide your clan!");
document.myform.clan.focus();
return false;
}
if(document.myform.lga.value == "")
{
alert("please provide your lga!");
document.myform.lga.focus();
return false;
}
if(document.myform.state.value == "")
{
alert("please provide your state!");
document.myform.state.focus();
return false;
}
if(document.myform.dob.value == "")
{
alert("please provide your dob!");
38 | P a g e
document.myform.dob.focus();
return false;
}
if(document.myform.mastatus.value == "")
{
alert("please provide your mastatus!");
document.myform.mastatus.focus();
return false;
}
if(document.myform.nac.value == "")
{
alert("please provide your nac!");
document.myform.nac.focus();
return false;
}
if(document.myform.heq.value == "")
{
alert("please provide your heq!");
document.myform.heq.focus();
return false;
}
if(document.myform.inataqod.value == "")
{
alert("please provide your inataqod!");
document.myform.inataqod.focus();
return false;
}
if(document.myform.workex_date.value == "")
{
alert("please provide your workex_date!");
document.myform.workex_date.focus();
return false;
}
if(document.myform.sub_date.value == "")
{
alert("please provide your sub_date!");
document.myform.sub_date.focus();
return false;
39 | P a g e
}
return(true);
}
</script>
40 | P a g e
41 | P a g e
Fig2.9: Form validated with JavaScript

2.5 COMPUTER NETWORKING
Computer network is a system used to link two or more computers.
Network users are able to share files, printers, and other resources; send
electronic messages; and run programs on other computers.
In computer networking, I was taken on Ethernet Cabling (see
appendix .).An Ethernet cable is a networking cable used on wired networks.
2.5.1 TYPES OF ETHERNET CABLE
They are categorized as follows:

a. Category 3 :
This is also known as cat 3 and has the following description:
One of oldest forms of Ethernet cable still in use today.
It is an unshielded twisted pair (UTP)
Capable of carrying 10 megabits per second (mbps) of data or
voice transmissions.
Its maximum possible bandwidth is 16MHz.
b. Category 5 :
This is also known as Cat 5 and has the following description :
A successor to category 3 cable.

It is an unshielded twisted pair (UTP).
It can support either 10mbps or 100mbps speeds.
It can be used for telephone signals and video.
c. Category 5e :
42 | P a g e
This is also known as cat5E and has the following description:

It is an enhanced version of cat5 cable.
It can support 10/100mbps and 1000mbps (Gigabit) Ethernet.
It has a maximum bandwidth of 100MHz.
d. Category 6:
This is also known as cat6 and has the following description:
Certified to support gigabit Ethernet with a bandwidth of up to
250MHz.
It has better insulation and thinner wires.
It is available in shielded twisted pair (STP) forms or UTP
forms.
e. Category 6a : This is also known as Cat6a and has the following
description :
It has a data transmission rate of 10,000Mbps.
It has a maximum bandwidth of 500MHz. and
Are available in STP form.
f. Category 7:
This is also known as Cat7 and has the following description:
It has data transmission rate of up to 10Gbps.
It has a bandwidth of up to 600MHz.
It consist of a screened, shielded twisted pair (SSTP) of wires.
2.5.2
ETHERNET CABLE CONNECTORS
Ethernet cable connectors enable the ends of Ethernet cables to

connect into router or other network device.RJ-45 connector is the most
43 | P a g e
common type of connector used for Ethernet installations. Categories 3

through 6 all use the RJ-45 called the GigaGate45 (GG45).
In preparing twisted pair cables there are three ways namely:
i.Straight through cable
ii.Crossover cable
iii.Rollover cable.
Straight through cables (see fig2.10) are cables that have the pin
assignment on each end of the cable (i.e. pin1 connector A goes to pin1 on
connector B, pin 2 to pin 2 etc.) as seen below:
Connector A
connector B
Pin 1
Pin1
Pin 2
Pin 2
Pin 3
Pin 3
Pin 4
Pin 4
Pin 5
Pin 5
Pin 6
Pin 6
Pin 7
Pin 7
Pin 8
Pin 8
44 | P a g e
Fig2.10: straight through wiring.
In addition straight through cables are used to connect dissimilar devices e.g.
pc to switch.
Crossover cables (see fig2.11) are similar to straight through cables
except that TX (transmitter) and RX (receiver) lines are crossed as shown
below:
Connector A
Connector B
Pin 1
Pin 3
Pin 2
Pin 6
Pin 3
Pin 1
Pin 4
Pin 7
Pin 5
Pin 8
Pin 6
Pin 2
Pin 7
Pin 4
45 | P a g e
Pin 8
Pin 5
Fig
2.11: Crossover wiring
In addition crossover cables are used to connect similar devices e.g. pc to pc.
Rollover cables (see fig2.12) are used to connect to a device console
port
to
make
programming
changes
to
the
device
(i.e.
for
configuration).They have opposite pin assignments on each end of the cable

as shown below:
Connector A
Connector B
Pin 1
Pin 8
Pin 2
Pin 7
Pin 3
Pin 6
Pin 4
Pin 5
46 | P a g e
Pin 5
Pin 4
Pin 6
Pin 3
Pin 7
Pin 2
Pin 8
Pin 1
Fig2.12: Rollover wiring.
2.6 DATABASE
Database is a collection of tables with related data. It is needed to
create dynamic pages with changing content and features. There are many
software applications available for building web databases and connecting to
them including:
47 | P a g e
i.Gatsby database Access software.

ii.BizDB
iii.Msql
iv.Mysql
However i was tutored and adviced to always make use of MySQL due to
the following reasons:
It is released under an open source license.
It handles a large subset of the functionality of the most expensive and
powerful database packages.
It uses a standard form of a well-known sql data language.
It works on many operating system and with many languages e.g.
Linux, Ubuntu etc. and languages like php, PERL, C++, java etc.
It works quickly and well with large data set and as a result used by
large
and
fast
growing
organizations
including
facebook,google,Adobe,etc.
It is very friendly with php.
The most appreciated language for web development.
It support large database up to 50millions row or more than in a table.
The default file size of the table is 4GB but it can be increased to a
theoretical unit of 8 million terabyte.

It is customizable (i.e. you can modify it to fit the environment you
are working with.
48 | P a g e
Fig2.13: MySQL and apache running
MySQL and php are contained in Xamp server which I installed on

my system. In order to have the MySQL working I made sure MySQL and
apache are running as in fig 2 .13 .In addition, using either the commandline prompt or Phpmyadmin provided by MySQL as seen in fig2.14 and
fig2.15 respectively, I was able to design, modify and restructure databases.
49 | P a g e
Fig2.14: MySQL command-line prompt.
50 | P a g e
Fig
2.15: Phpmyadmin
2.6.1
MYSQL ADMINISTRATIVE COMMANDS
a) Use Database name; -This will be used to select a particular database in

mysql work area.
b) Show Databases; -This list the databases that are accessible by the
mysql database management.
c) Show Tables; -This shows tables contained in the database selected.
51 | P a g e
d) Show columns from Table name;
-This shows the attributes, type of
attributes and key information of a table.

e) SHOW index from table name; -This present the details of all indexes on
the table including the primary key.
f) Show table status like table name; -Returns details of the mysql database
management system performance and statistic.
2.6.2 CONNECTING TO MYSQL USING PHP
The functions mysql_connect() and mysql_close() are provided by

php and help to open and disconnect from mysql database respectively.
However in connecting to a database, i would code this way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<title>config.php</title>
</head>
<body>
<?php
$mysql_hostname ="localhost";
$mysql_user="root";
52 | P a g e
$mysql_password="";
$mysql_database="registration";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die
("could not connect databese");
mysql_select_db($mysql_database, $bd) or ("could not select database");
?>
</body>
</html>
2.6.3
MYSQL DATABASE TABLE
Tables in mysql database are created using the CREATE TABLE

statement. They are organized into rows and columns and each having a
name.However,in creating a table i would follow this sql create table syntax
below :
CREATE TABLE
Table_name
(
Column_name1
data_type(size),
53 | P a g e
column_name2
data_type(size),
column_name3
data_type(size),
. . .
);
An example is seen in fig2.16 and fig2.17, where fig2.16 is the code of the
table and fig2.17 show one part of the table for the Deltona personnel form
designed by me in fig2.7.
54 | P a g e
55 | P a g e
Fig2.14: Sql syntax used for creating table lazico in the database registration
for the form in fig2.7.
56 | P a g e
Fig2.15: A section of the table Lazico displayed in myphpadmin.
CHAPTER THREE
57 | P a g e
3.0
CONCLUSION/RECOMMENDATION
This Siwes report has presented my experience in my attached company

of training, Gestric information Technology & management institute, going
through highlights of the various activities the student participation in, what
he learnt and the skills he acquired during the six months of industrial
training. With the skills acquired i am able in summary to do the following:
Design a website.
Code in Php
Code in Css
Code in Html
Enable two computers to communicate with each other using cables or
wireless connection.
Perform some functions with JavaScript.
3.1
CHALLENGES/RECOMMENDATION
During training there was difficulty in debugging of codes. This

was as a result of the trail version of Dreamweaver CS5, failing to continue
trail and as such we(student) were left with no option but to make use of
Dreamweaver8 which is a much lesser version. I will recommend that the
full version of the Dreamweaver CS5 be provided to student to ease the task
of debugging.
58 | P a g e
APPENDIXES
APPENDIX A
59 | P a g e
APPENDIX B
60 | P a g e
APPENDIX C
61 | P a g e
APPENDIX D
62 | P a g e
<!DOCTYPE
html
Transitional//EN"
PUBLIC
"-//W3C//DTD
XHTML
1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>personnel form</title>
function Redirect(){
window.location = "ubong1.html";
}
</script>
//form validation code.
function validate()
{
if(document.myform.name.value == "")
{
alert("please provide your name!");
63 | P a g e
document.myform.name.focus();
return false;
}
if(document.myform.position.value == "")
{
alert("please provide your position!");
document.myform.position.focus();
return false;
}
if(document.myform.tel.value == "")
{
alert("please provide your tel!");
document.myform.tel.focus();
return false;
}
if(document.myform.email.value == "")
{
alert("please provide your email!");
document.myform.email.focus();
return false;
64 | P a g e
}
{
return false;
}
{
return false;
}
if(document.myform.per_address.value == "")
{
alert("please provide your per_address!");
document.myform.per_address.focus();
return false;
}
if(document.myform.village.value == "")
65 | P a g e
{
alert("please provide your village!");
document.myform.village.focus();
return false;
}
if(document.myform.clan.value == "")
{
alert("please provide your clan!");
document.myform.clan.focus();
return false;
}
if(document.myform.lga.value == "")
{
alert("please provide your lga!");
document.myform.lga.focus();
return false;
}
if(document.myform.state.value == "")
{
alert("please provide your state!");
66 | P a g e
document.myform.state.focus();
return false;
}
if(document.myform.dob.value == "")
{
alert("please provide your dob!");
document.myform.dob.focus();
return false;
}
if(document.myform.mastatus.value == "")
{
alert("please provide your mastatus!");
document.myform.mastatus.focus();
return false;
}
if(document.myform.nac.value == "")
{
alert("please provide your nac!");
document.myform.nac.focus();
return false;
67 | P a g e
}
if(document.myform.heq.value == "")
{
alert("please provide your heq!");
document.myform.heq.focus();
return false;
}
if(document.myform.inataqod.value == "")
{
alert("please provide your inataqod!");
document.myform.inataqod.focus();
return false;
}
if(document.myform.workex_date.value == "")
{
alert("please provide your workex_date!");
document.myform.workex_date.focus();
return false;
}
68 | P a g e
if(document.myform.sub_date.value == "")
{
alert("please provide your sub_date!");
document.myform.sub_date.focus();
return false;
}
return(true);
}
</script>
</head>
<style>
.form {
background-color:
#FFFFFF;
}
69 | P a g e
#mymenu{margin-left:10px;padding:0;margin-right:0px;margintop:0px;margin-bottom:0px;
background-color:#FFFFFF;
height:70px;
}
#mymenu li{display:inline;list-style:none;
}
#mymenu li a{
display:inline;
float:left;
width:131px;
background:red;
margin-top:52px;
margin-right:27px;
padding-right:0px;
padding-bottom:0px;
margin-bottom:0px;
padding-left:0px;
text-decoration:none;
70 | P a g e
color:#ffffff;
text-align:center;}
#mymenu li a:hover{background:black;display:inline;
}
#mymenu ul{;border:1px solid #ffffff;}
#mymenu
ul
a{width:80px;text-
align:left;background:blue;color:#FFFFFF;}
.lion{float:left;
}
</style>
<body>
<div>
<ul id="mymenu">
<img src="fr.jpg" height=
70px;alt="student photo"; style="float:left"/>
71 | P a g e
<img
src="deltona.jpg"
height=70px;alt="school
name";
style="float:left"/>
<li><a href="javascript:void()" onclick="change_content('science')"
id="scie1">HOME</a>
</li>
<li><a href="#" >tutorials</a></li>
<li><a href="#">About</a></li>
<li><a href="#">contactus</a></li>
</ul>
</div>
<form
action="connection.php"
method="post"
class="form"
enctype="multipart/form-data"
name="myform"onsubmit="return(validate());">
<div style="background:green;height:320px;margin-left:10px;paddingright:0px ;">
72 | P a g e
<b><span style="color:white;margin-top:100px;marginright:0px;font-size:50px;float:left;"><em>PERSONEL
FORM</em></span></b>
<span style="float :right ;margin-right:20px; margintop:100px;background:#FFFFFF;height:200px;"><input
name="file"
accept="image/*"
width:200px
type="file"
height:200px;
/></span>
</div>
<div style="margin-top:10px; margin-left:10px">
<table>
<tr>
<td>1.Name:<input
type="text"
size="100px"
name="name"/></td>
</tr>
<tr>
<td>2.Position
Held:<input
type="text"
size="93px"
name="position"/></td>
</tr>
73 | P a g e
<tr>
<td>3.Telephone Number:<input type="text" size="89px"
name="tele"/></td>
</tr>
<tr>
<td>4.E-mail Address:<input
type="text"
size="92px"
uyo:<input
type="text"
name="email"/></td>
</tr>
<tr>
<td>5.Residential Address
in
size="89px" name="ad_uyo"/></td>
</tr>
<tr>
<td>6.Residential Address of parents:<input type="text"
size="89px" name="ad_parent"/></td>
74 | P a g e
</tr>
<td>7.Permanent
Home
Address:<input
type="text"
size="89px" name="ad_home" /></td>

</tr>
<tr>
<td>8.Village:<input
type="text"
size="89px"
name="village"/></td>
</tr>
<tr>
<td>9.Clan:<input
type="text"
size="89px"
name="clan"/></td>
</tr>
<tr>
<td>10.Local
Government
Area:<input
type="text"
size="89px" name="lga"/></td>
</tr>
75 | P a g e
<tr>
<td>11.State of Origin:<input type="text" size="89px"
name="state_ori"/></td>
</tr>
<tr>
<td>12.Date of Birth:<input type="text" size="89px"
name="dob"/></td>
</tr>
<tr>
<td>13.Marital
status:<input
type="text"
size="89px"
name="m_status"/></td>
</tr>
<tr>
<td>14.Number and Ages of Children:<input type="text"
size="89px" name="n_uchild"/></td>
</tr>
76 | P a g e
<tr>
<td>16.Highest
Educational
Qualification:<input
type="text" size="89px" name="h_edu"/></td>

</tr>
<tr>
<td>17.Institutions
Attended/Academic
Qualification
Obtained with Date:<br/>
<input type="text" size="89px" name="i_attend"/><br/>
<input type="text" size="89px" /></td>

</tr>
<tr>
<td>18.Working Experience with Date:<br/>
<input type="text" size="89px" name="w_date"/><br/>

77 | P a g e
<input type="text" size="89px" /></td>

</tr>
<tr>
<td>Submission Date:
<select name="yearofbirth">
<option selected="disable">year</option>
<option value="">---select---</option>
<?php for($i=1980;$i<('y');$i++)?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
</select>
<select name="monthofbirth">
<option value="">--selectdate--</option>
<?php for($i=1;$i<=12;$i++)?>
<option value="<?php echo ($i<10)?'0'.$i:$i;?>"><?php echo $i;?
></option>
<?php end;?>
</select>
<select name="dayofbirth">
78 | P a g e
<option value="">--selectdate--</option>
<?php for ($i=1;$i<=31;$i++)?>
<option value="<?php echo ($i<10)?'0'.$i:$i;?>"><?php echo $i;?
></option>
<?php end; ?>
</select>
</div>
<p style="float:right"><input type="submit" value="click to submit"
onclick="Redirect();"/></p>
</form>
</body>
</html>
REFERENCES
79 | P a g e

Lazico 5

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Lazico 5

Transféré par

Droits d'auteur :

Formats disponibles

CHAPTER ONE

Gestric Information Technology and Management Institute (GITMI) is an

CBT Software use.

Microsoft Certified systems Engineer (MCSE)

I was assigned at her uyo center(No14,oron Road) to the school of

Fig1.0: Organogram Of Gestric Information Technology And Management

Web design is the planning and creation of websites. In other words it

Html is an acronym of the word Hypertext markup language. It is

2.1.1 HTML STRUCTURE

Html pages always begins with a Document type definition (DTD)

Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">.This helps the web-browser to find out what type of

2.1.2 PAGE TITLE

2.1.3 SIMPLE HEADINIG

Many websites use headings. Simple headings ranges from H1 to H6.i

<h6>this is the Heading </h6>

Paragraphs can be applied to my html document. To do this I would

2.1.5 NEW LINES/SPACING

To create a new line on my webpage I would make use of the break

2.1.6 HORIZONTAL LINES

Horizontal lines can be added to my web page by me using the

<HR ALIGN=left WIDTH=50% SIZE="5 >

Comment use in html is as important as those used in other

2.1.8 CHANGING FONT COLOUR/FACE/SIZE

To change the colour of the font in my web page I would do

<FONT FACE =webdings>text being affected </FONT>

Bolding, italicing and underlining my webpage makes it standout.

2.1.10 LINKS IN HTML

Links can be made use of in different ways as seen below:

Links in new window:

Links to Email addresses:

Linking a Page to Another page:

Link with in a page :

2.1.11 INCLUDING IMAGES IN HTML

Putting up images such as pictures or diagram in my webpage is

2.1.12 SPECIAL CHARACTERS

These are characters that my web browser threats as a special thing.

Left single quote

This is same as bullet and numbering in Microsoft word. There are

Ordered list and

Ordered list has numbers for people to be guided by. Below is an

Fig2.0: Output of the code for the ordered list example.

Unordered list is similar to ordered list, except that it has bullets

<li> Girl </li>

Fig2.1: Output of the code for the unordered list example.

Forms help create a means of interaction between a device and it user.

component input and select. An example of a form is seen in fig2.2 and it

<b> password: </b><br/>

Fig2.2: output of the Html form code above

The select component in a form is used in implementing a dropdown

In addition simple tables can be added by following this pattern:

The usefulness of tags cannot be over emphasized as it assist a

Table2.1: Useful Html tags.

2.2 CASCADING STYLESHEET (CSS)

This determine how documents are displayed on screens, in print and

CSS can be used in Html document in three ways which include:

External style information

<link rel=stylesheet href=name of css file >

Placed in the head section of the html document.

Fig2.3: Embedded styling.

2.2.1 SELECTORS, PROPERTIES AND VALUES

value following a colon and semicolon to separate the properties. Here is an

.class selector {property: value ;}

Html selector {property: value ;}

by a number followed /20px/