COMPUTER SCIENCE DEPARTMENT,
ABDU GUSAU POLYTECHNIC TALATA MAFARA
ZAMFARA STATE.
LECTURE/PRACTICAL
MANUAL
ON
WEB TECHNOLOGY
(COM 225)
FOR
NDII COMPUTER SCIENCE
COMPILED BY:
MUSA ABUBAKAR
musaabubakartm@[Link], 08107072658 Page 1
Concept of internet and www
Web page: is a document written in hypertext markup language that is being displayed on the browser.
Website: Is a collection of web pages links together and stored in a world wide web.
World wide web (www): is a collection of public websites connected to the internet. Is a combination of all resources
and users on the internet that are using the hypertext transfer protocol
How Does the WWW Work?
1. Web information is stored in documents called Web pages
2. Web pages are files stored on computers called Web servers
3. Computers reading the Web pages are called Web clients
4. Web clients view the pages with a program called a Web browser
5. Popular browsers are Internet Explorer and Mozilla Firefox
How Does the Browser Fetch the Pages?
1. A browser fetches a Web page from a server by a request
2. A request is a standard HTTP request containing a page address
3. A page address looks like: [Link]
How Does the Browser Display the Pages?
1. All Web pages contain instructions on how to be displayed
2. The browser displays the page by reading these instructions
3. The most common display instructions are called HTML tags
4. The HTML tag for a paragraph looks like this: </p>
5. A paragraph in HTML is defined like this <p>This is a Paragraph</p>
Internet: Is a global network that interconnect different set of computers and allow them to share some resources In
common all over the world.
BENEFITS OF INTERNET APPLICATION
(a) Downloading of information
(b) Advertisement
(c) Accessing newspapers, magazines and academic journals
(d) On-line banking
(e) Accessing international media (CNN, BBC, VOA)
Protocol: is a set of rules that governs data communication
HTTP: hypertext transfer protocol is an application protocol for distributed, collaborative, hypermedia information
systems.
HTTPS: hypertext transfer protocol secured is an extension of the hypertext transfer protocol. It is used for secure
communication over a computer network and is widely used on the internet. In https the communication protocol is
encrypted using transport layer security or formerly its predecessor, secure socket layer
Static web page: is a web page that does not change it contents in response to the user’s input.
Dynamic web page: is a webpage that change it contents in response to the user’s input.
Html: hypertext markup language is the standard markup language for creating web pages
Cascading style sheets (CSS): is a style sheet language used for describing the presentation of a document written in a
hypertext markup language.
Html text editors
Notepad, notepad++, dreamweaver, sublime. e.t.c
musaabubakartm@[Link], 08107072658 Page 2
HTML BASICS
HOW TO CREATE HOME PAGE
HOW TO FORMAT TEXT
HOW TO CREATE LIST
HOW TO CREATE TABLE
HOW TO INSERT IMAGE
HOW TO INSERT VIDEO AND AUDIO
HOW TO CREATE LOGIN FORM
HOW TO CREATE APPLICATION FORM
HOW TO CREATE LINK TO DIFFERENT WEB PAGES
HOW TO CREATE SIMPLE ANIMATION
HOW VALIDATE LOGIN FORM USING JAVASCRIPT
GETTING STARTED
1. Open your text editor, notepad or notepad++ and dreamweaver e.t.c
2. Type the HTML BASIC TAGS
DESCRIPTION
The <HTML> tag is the opening tag that tells the browser this is a web page written in HTML. HTML is case insensitive
therefore <HTML> and <html>,<Html>,<hTmL> are all the same.
What ever is written between <HEAD> and </HEAD> will not be displayed in the content of the browser but could be
displayed in the title bar.
The title of the web page will be written in between <TITLE>and </TITLE> which will be displayed in the title bar
Anything written in between the <BODY> and </BODY> will be displayed in the content of the browser.
</HTML> tag mark the end of the HTML code
Note: <HTML> is the opening tag while </HTML> is the closing tag
<HEAD> is the opening tag while </HEAD> is the closing tag
<TITLE> is the opening tag while </TITLE> is the closing tag
<BODY> is the opening tag while </BODY> is the closing tag
Save your web page with a name [Link] ,each and every HTML document must be save with the page [Link]
that is extension of the document [[Link]].
You can save the web page in side any folder or on desktop, but in this tutorial we are going save it on desktop.
musaabubakartm@[Link], 08107072658 Page 3
Locate the file on desktop and double click on it to lunch your web page
OUTPUT
Note: this is a blank webpage with nothing inside
Let’s write WELCOME TO ND2 COMPUTER SCIENCE in between <body> and </body> and see
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
WELCOME TO ND2 COMPUTER SCIENCE
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 4
OUTPUT
Text Formatting
You can format the text in html using <font>tag that is increasing the size of the text the color e.t.c
Example: <font size=”+2”>your text here</font>
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<font size="+4">WELCOME TO ND2 COMPUTER SCIENCE</font>
</body>
</html>
OUTPUT
To change the color of the text we add color attribute inside the <font> tag
<font size=”+2” color=”red”>your text here</font>
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<font size=""+4" color="red">WELCOME TO ND2 COMPUTER SCIENCE</font>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 5
OUTPUT
Making the text to be bold we add <b> and close it with </b>
Example: <font size=”+2”><b>your text here</b></font>
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<font size="+4" color="red"><b>WELCOME TO ND2 COMPUTER SCIENCE</b></font>
</body>
</html>
OUTPUT
To make this text to be italic we add<i>and close it with</i>
Example: <font size=”+2”><b><i>your text here</i></b></font>
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<font size="+4" color="red"><b><i>WELCOME TO ND2 COMPUTER SCIENCE</i></b></font>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 6
OUTPUT
To make the text to be in center add<center>and close with</center>
Example: <font size=”+2”><b><i><center>your text here</center></i></b></font>
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<font size="+4" color="red"><b><i><center>WELCOME TO ND2 COMPUTER SCIENCE</center></i></b></font>
</body>
</html>
OUTPUT
Let’s add subtitle after the above title, <p> tag is use to move to next line with a space between the present line and
the next line.
Let’s try something simple below:
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<font size="+4" color="red"><b><i><center>WELCOME TO ND2 COMPUTER SCIENCE</center></i></b></font>
<p>
<font size="+2" color="blue"><center>this website has been created by nd2 computer science AGP</center></font>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 7
OUTPUT
The background color of the webpage can be change inside the <body> tag
Example: <body bgcolor=”pink”>
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body bgcolor="pink">
<font size="+4" color="red"><b><i><center>WELCOME TO ND2 COMPUTER SCIENCE</center></i></b></font>
<p>
<font size="+2" color="blue"><center>this website has been created by nd2 computer science AGP</center></font>
</body>
</html>
OUTPUT
Another subtitle using<p>tag
musaabubakartm@[Link], 08107072658 Page 8
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body bgcolor="pink">
<font size="+4" color="red"><b><i><center>WELCOME TO ND2 COMPUTER SCIENCE</center></i></b></font>
<p>
<font size="+2" color="blue"><center>this website has been created by nd2 computer science AGP</center></font>
<p>
<b>definition of computer:</b>
</body>
</html>
OUTPUT
Let’s add a texts after the above title, <br> tag is use to move to next line with no space between the present line and
the next line.
Let’s try something simple below:
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body bgcolor="pink">
<font size="+4" color="red"><b><i><center>WELCOME TO ND2 COMPUTER SCIENCE</center></i></b></font>
<p>
<font size="+2" color="blue"><center>this website has been created by nd2 computer science AGP</center></font>
<p>
<b>definition of computer:</b>
<br>
computer is an electronic device that is capable of accepting data as input, process the data and produce accurate
result as output.
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 9
OUTPUT
HTML LIST
We have two types of list in html. Ordered list and unordered list
<ol> is a starting tag of ordered list and </ol> is the ending or closing tag of ordered list.
Ordered list means a list that is in order e.g.1,2,3 or a,b,c and I,ii,ii they are all ordered list.
<li> is a tag inserting the list item, each element in the list must be written before <li> tag example:
<ol>
<li>item1
<li>item2
</ol>
Try the source code below
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body bgcolor="pink">
<font size="+4" color="red"><b><i><center>WELCOME TO ND2 COMPUTER SCIENCE</center></i></b></font>
<p>
<font size="+2" color="blue"><center>this website has been created by nd2 computer science AGP</center></font>
<p>
<b>definition of computer:</b>
<br>
computer is a elecronic device that is capable of accepting data as input, process the data and produce accurate result
as output.
<p>
<b>types of computer:</b>
<ol>
<li>digital computer
<li>analog computer
<li>hybrid computer
</ol>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 10
OUTPUT
<ul> is a starting tag of unordered list and </ul> is the ending or closing tag of unordered list.
unordered list means a list that is not in order, usually use bullets.
<li> is a tag inserting the list item, each element in the list must be written before <li> tag example:
<ul>
<li>item1
<li>item2
</ul>
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body bgcolor="pink">
<font size="+4" color="red"><b><i><center>WELCOME TO ND2 COMPUTER SCIENCE</center></i></b></font>
<p>
<font size=""+2" color="blue"><center>this website has been created by nd2 computer science AGP</center></font>
<p>
<b>definition of computer:</b>
<br>
computer is a elecronic device that is capable of accepting data as input, process the data and produce accurate result
as output.
<p>
<b>types of computer:</b>
<ol>
<li>digital computer
<li>analog computer
<li>hybrid computer
</ol>
<br>
<b>characteristics of computer:</b>
<ul>
<li>speed
<li>accuracy
<li>storage
</ul>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 11
OUTPUT
HTML TABLE
<table> is the starting tag of the table and </table> is the ending tag of the table
<tr> is the starting tag of the table row and </tr> is the ending of the table row
<td> is the the starting tag of the table data and </td> is the ending tag of of the table data.
Note: adding more <td> and </td> in between <tr> and </tr> will add more columns to the table.
SOURCE CODE
<html>
<head>
<title>result</title>
</head>
<body>
<table border="+2">
<tr>
<td>NAME</td><td>REG NO</td><td>CA</td><td>EXAM</td><td>TOTAL</td>
</tr>
</table>
</body>
</html>
OUTPUT
To add more rows <tr> and </tr> will be added with <td> and </td> in side in order to add more columns
musaabubakartm@[Link], 08107072658 Page 12
SOURCE CODE
<html>
<head>
<title>result</title>
</head>
<body>
<table border="+2">
<tr>
<td>NAME</td><td>REG NO</td><td>CA</td><td>EXAM</td><td>TOTAL</td>
</tr>
<tr>
<td>sani musa</td><td>001</td><td>30</td><td>40</td><td>70</td>
</tr>
</table>
</body>
</html>
OUTPUT
SOURCE CODE
<html>
<head>
<title>result</title>
</head>
<body>
<table border="+2">
<tr>
<td>NAME</td><td>REG NO</td><td>CA</td><td>EXAM</td><td>TOTAL</td>
</tr>
<tr>
<td>sani musa</td><td>001</td><td>30</td><td>40</td><td>70</td>
</tr>
<tr>
<td>dahiru magami</td><td>002</td><td>35</td><td>40</td><td>75</td>
</tr>
</table>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 13
OUTPUT
SOURCE CODE
<html>
<head>
<title>result</title>
</head>
<body>
<table border="+2">
<tr>
<td>NAME</td><td>REG NO</td><td>CA</td><td>EXAM</td><td>TOTAL</td>
</tr>
<tr>
<td>sani musa</td><td>001</td><td>30</td><td>40</td><td>70</td>
</tr>
<tr>
<td>dahiru magami</td><td>002</td><td>35</td><td>40</td><td>75</td>
</tr>
<tr>
<td>abdulhakeem abiola</td><td>003</td><td>35</td><td>50</td><td>85</td>
</tr>
<tr>
<td>musa abubakar</td><td>004</td><td>35</td><td>45</td><td>80</td>
</tr>
</table>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 14
OUTPUT
Changing the position of the table
Add <table border=”+2” align=”right”>
SOURCE CODE
<html>
<head>
<title>result</title>
</head>
<body>
<table border="+2" align="right">
<tr>
<td>NAME</td><td>REG NO</td><td>CA</td><td>EXAM</td><td>TOTAL</td>
</tr>
<tr>
<td>sani musa</td><td>001</td><td>30</td><td>40</td><td>70</td>
</tr>
<tr>
<td>dahiru magami</td><td>002</td><td>35</td><td>40</td><td>75</td>
</tr>
<tr>
<td>abdulhakeem abiola</td><td>003</td><td>35</td><td>50</td><td>85</td>
</tr>
<tr>
<td>musa abubakar</td><td>004</td><td>35</td><td>45</td><td>80</td>
</tr>
</table>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 15
OUTPUT
<table border=”+2” align=”center”>
SOURCE CODE
<html>
<head>
<title>result</title>
</head>
<body>
<table border="+2" align="center">
<tr>
<td>NAME</td><td>REG NO</td><td>CA</td><td>EXAM</td><td>TOTAL</td>
</tr>
<tr>
<td>sani musa</td><td>001</td><td>30</td><td>40</td><td>70</td>
</tr>
<tr>
<td>dahiru magami</td><td>002</td><td>35</td><td>40</td><td>75</td>
</tr>
<tr>
<td>abdulhakeem abiola</td><td>003</td><td>35</td><td>50</td><td>85</td>
</tr>
<tr>
<td>musa abubakar</td><td>004</td><td>35</td><td>45</td><td>80</td>
</tr>
</table>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 16
OUTPUT
How to insert image in a webpage
You need to know the format of your image before you call the image in a webpage, some images has the extension
(.jpg or jpeg), (.png) and (.gif) e.t.c.
The size of the image can be increase or decrease by adding width and height attributes either in percentage (%)or in
pixel (px).
Note: the image and the webpage should be in the same directory or folder.
Try the source code below:
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<img src="[Link]" width="25%" height="50%">
</body>
</html>
OUTPUT
How to insert video in a webpage
Note: the video and the webpage should be in the same directory or folder.
Try the source code below:
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<video src="jok.mp4" controls="controls">
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 17
Tip: jok is the name of the video while .mp4 is the format of the video, you can try something difference may different
file name
OUTPUT
The same thing with the audio file but the format or extension is .mp3
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<audio src="craig.mp3" controls="controls">
</body>
</html>
Tip: craig is the name of the file while .mp3 is the format of the audio.
OUTPUT
How to create simple login form
SOURCE CODE
<html>
<head>
<title>login</title>
</head>
<body bgcolor="pink">
<form>
username:<input type="text" name="username">
<br>
password:<input type="text" name="password">
<br>
<input type="submit" value="login" name="login">
</form>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 18
OUTPUT
How to create application form
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body bgcolor="pink">
<form>
firstname:<input type="text" name="firstname">
<br>
lastname:<input type="text" name="lastname">
<br>
state:<select>
<option>abia</option>
<option>adamawa</option>
<option>kano</option>
<option>kaduna</option>
<option>zamfara</option>
</select>
<br>
gender:male:<input type="checkbox">female:<input type="checkbox">
<br>
date:<input type="date" name="date">
<br>
<input type="submit" value="submit" name="submit">
</form>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 19
OUTPUT
How to create hyperlink i.e linking different webpages with one another
SOURCE CODE
<html>
<head>
<title>login</title>
</head>
<body>
<a href="[Link]">home</a>
</body>
</html>
OUTPUT
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body>
<a href="[Link]">click here to login</a>
</body>
</html>
musaabubakartm@[Link], 08107072658 Page 20
OUTPUT
Simple text animation
<marquee behavior=”alternate”>your text here</marquee>
SOURCE CODE
<html>
<head>
<title>ND2 WEBSITE</title>
</head>
<body><html>
<head>
<title>welcome</title>
</head>
<body>
<marquee behavior="alternate">Welcome To Nd2 Computer Science AGP</marquee>
</body>
</html>
</body>
</html>
OUTPUT
musaabubakartm@[Link], 08107072658 Page 21
How to validate the user’s login details, that is username and password using javascript and HTML.
SOURCE CODE
<html>
<head>
<title>login validation</title>
<script type="text/javascript">
function check_user(){
var username = [Link]('username').value;
var password = [Link]('password').value;
if (username=="nd2" && password=="computer"){
alert("you are welcome To our website")
return true
}
else if (username=="musa" && password=="thinker"){
alert("you are welcome")
return true
}
else{
alert('invalid Username Or Password')
return false
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="[Link]" onsubmit="return check_input();">
username:<input type="text" name="username">
<br>
password:<input type="text" name="password">
<br>
<input type="submit" value="login" name="login">
</form>
</body>
</html>
Description of some HTML tags
Tag Description
<b> bold
<i> italic
<u> underline
<p> paragraph
<br> break
<tr> Table row
<td> Table data
<th> Table Header
<ol> Ordered list
<ul> Unordered list
musaabubakartm@[Link], 08107072658 Page 22
<li> List item
HTML Colors
Colors are displayed combining RED, GREEN, and BLUE light sources.
Color Values
HTML colors can be defined as a hexadecimal notation for the combination of Red, Green,
and Blue color values (RGB).
The lowest value that can be given to one light source is 0 (hex
#00) and the highest value is 255 (hex #FF).
The table below shows the result of combining Red, Green, and Blue light sources:.
Color Color HEX Color
#000000 Description
black
#FF0000 red
#00FF00 green
#0000FF blue
#FFFF00 yellow
#00FFFF Lemon green
#FF00FF purple
#C0C0C0 ash
#FFFFFF white
musaabubakartm@[Link], 08107072658 Page 23
