Web Tech Handout

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@gmail.com, 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: http://www.andugusaupolymafara.com/home.html
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

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 home.html ,each and every HTML document must be save with the page name.html
that is extension of the document [pagename.html].
You can save the web page in side any folder or on desktop, but in this tutorial we are going save it on desktop.

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>

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>
</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>
</head>
<body>
<font size=""+4" color="red">WELCOME TO ND2 COMPUTER SCIENCE</font>
</body>
</html>

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>
</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>
</head>
<body>
<font size="+4" color="red"><b><i>WELCOME TO ND2 COMPUTER SCIENCE</i></b></font>
</body>
</html>

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>
</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>
</head>
<body>
<p>
<font size="+2" color="blue"><center>this website has been created by nd2 computer science AGP</center></font>
</body>
</html>

OUTPUT
The background color of the webpage can be change inside the <body> tag
Example: <body bgcolor=”pink”>
SOURCE CODE
<html>
<head>
</head>
<body bgcolor="pink">
<p>
</body>
</html>
OUTPUT
Another subtitle using<p>tag

SOURCE CODE
<html>
<head>
</head>
<p>
<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>
</head>
<p>
<p>
<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>

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>
</head>
<p>
<p>
<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>

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>
</head>
<p>
<font size=""+2" color="blue"><center>this website has been created by nd2 computer science AGP</center></font>
<p>
<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>

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

SOURCE CODE
<html>
<head>
</head>
<body>
<table border="+2">
<tr>
</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>
</head>
<body>
<table border="+2">
<tr>
</tr>
<tr>
</tr>
<tr>
<td>dahiru magami</td><td>002</td><td>35</td><td>40</td><td>75</td>
</tr>
</table>
</body>
</html>

OUTPUT
SOURCE CODE
<html>
<head>
</head>
<body>
<table border="+2">
<tr>
</tr>
<tr>
</tr>
<tr>
</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>

OUTPUT
Changing the position of the table

Add <table border=”+2” align=”right”>
SOURCE CODE
<html>
<head>
</head>
<body>
<table border="+2" align="right">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>

OUTPUT
<table border=”+2” align=”center”>

SOURCE CODE
<html>
<head>
</head>
<body>
<table border="+2" align="center">

<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>

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>
</head>
<body>
<img src="mypic.jpg" 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>
</head>
<body>
<video src="jok.mp4" controls="controls">
</body>
</html>

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>
</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>
<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>

OUTPUT
How to create application form

SOURCE CODE
<html>
<head>
</head>
<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>

OUTPUT
How to create hyperlink i.e linking different webpages with one another
SOURCE CODE
<html>
<head>
<title>login</title>
</head>
<body>
<a href="home.html">home</a>
</body>
</html>
OUTPUT
SOURCE CODE
<html>
<head>
</head>
<body>
<a href="login.html">click here to login</a>
</body>
</html>

OUTPUT
Simple text animation

<marquee behavior=”alternate”>your text here</marquee>
SOURCE CODE
<html>
<head>
</head>
<body><html>
<head>
<title>welcome</title>
</head>
<body>
<marquee behavior="alternate">Welcome To Nd2 Computer Science AGP</marquee>
</body>
</html>
</body>
</html>
OUTPUT

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 = document.getElementById('username').value;
var password = document.getElementById('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="home.html" 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
<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

Web Tech Handout

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech Handout

Uploaded by

Copyright:

Available Formats

COMPUTER SCIENCE DEPARTMENT,

ABDU GUSAU POLYTECHNIC TALATA MAFARA

musaabubakartm@gmail.com, 08107072658 Page 1

How Does the Browser Fetch the Pages?

How Does the Browser Display the Pages?

Protocol: is a set of rules that governs data communication

musaabubakartm@gmail.com, 08107072658 Page 2

musaabubakartm@gmail.com, 08107072658 Page 3

Note: this is a blank webpage with nothing inside

musaabubakartm@gmail.com, 08107072658 Page 4

musaabubakartm@gmail.com, 08107072658 Page 5

To make this text to be italic we add<i>and close it with</i>

musaabubakartm@gmail.com, 08107072658 Page 6

To make the text to be in center add<center>and close with</center>

musaabubakartm@gmail.com, 08107072658 Page 7

Another subtitle using<p>tag

musaabubakartm@gmail.com, 08107072658 Page 8

musaabubakartm@gmail.com, 08107072658 Page 9

musaabubakartm@gmail.com, 08107072658 Page 10

musaabubakartm@gmail.com, 08107072658 Page 11

musaabubakartm@gmail.com, 08107072658 Page 12

musaabubakartm@gmail.com, 08107072658 Page 13

musaabubakartm@gmail.com, 08107072658 Page 14

Changing the position of the table

musaabubakartm@gmail.com, 08107072658 Page 15

<table border=”+2” align=”center”>

<table border="+2" align="center">

musaabubakartm@gmail.com, 08107072658 Page 16

How to insert image in a webpage

How to insert video in a webpage

musaabubakartm@gmail.com, 08107072658 Page 17

How to create simple login form

musaabubakartm@gmail.com, 08107072658 Page 18

How to create application form

musaabubakartm@gmail.com, 08107072658 Page 19

<a href="login.html">click here to login</a>

musaabubakartm@gmail.com, 08107072658 Page 20

Simple text animation

<marquee behavior="alternate">Welcome To Nd2 Computer Science AGP</marquee>

musaabubakartm@gmail.com, 08107072658 Page 21

Color Color HEX Color

musaabubakartm@gmail.com, 08107072658 Page 23

You might also like