Experiment: 01
Name of Experiment: To create an HTML File.
Theory:
At first, one needs to create an HTML file to create a webpage. Generally, this file is created by using any
text editor. Then the file is saved to any secondary memory. Editing, updating and modification can be
done by using the saved file.
Uses of devices:
Hardware: A Computer
Software: Operating System- windows 7
Application software- Notepad
Uses:
To complete the above experiment, the steps of using devices are as follows:
1) At first, we have to check out the electricity connection
2) If the electricity connection is OK then we need to switch on the power of the computer.
3) To check whether the above mentioned software’s are installed or not.
4) Necessary programs have to be started to complete the experiment.
5) After completing the experiments, all programs should be closed and the computer should be shut
downand the electricity connection should be switched off.
Activities:
To complete the experiment, the following steps should be followed:
a) Switch on the computer and perform the following steps:
Click on start icon.
Click on all program menu.
Click on Notepad from Accessories submenu.
b) After opening Notepad type the following program.
Program:
<html>
<head>
<title>
This is my first program.
</title>
</head>
<body>
<b>This line using bold properties </b><br>
<i>This line using italic properties </i><br>
<u>This line using underline properties </u><br>
</body>
</html>
c) File Save:
Click on file menu.
Click on save submenu.
Type [Link] on file name text box.
Click on save button.
d) Explanation:
The explanations of the tags which are used in this experiment are as follows:
Tags Description
<html></html> Indicate HTML document
<head></head> Indicate head of the program
<title></title> Indicate title of the document
<body></body> Indicate main content of the program
<b></b> Indicate text bold
<i></i> Indicate text italic
<u></u> Indicate text underline
<br> Indicate one line break
Fill will be saved on the location C:\Users\Darda (Computer_name\Documents. According to necessary
the file can be saved on other locations too.
e) Observation:
After completing these activities an HTML file will be created named [Link].
Experiment: 02
Name of Experiment: To open a previously created HTML file.
Theory:
A previously saved HTML file can be opened as a webpage. For this reason, one needs a browser. Any
browser can be used to create an HTML file.
Uses of devices:
Hardware: A Computer
Software: Operating System- windows 7
Application software- Notepad
Uses:
To complete the above experiment, the steps of using devices are as follows:
1) At first, we have to check out the electricity connection.
2) If the electricity connection is OK then we need to switch on the power of the computer.
3) To check whether the above mentioned software’s are installed or not.
4) Necessary programs have to be started to complete the experiment.
5) After completing the experiments, all programs should be closed and the computer should be shut
downand the electricity connection should be switched off.
Activities:
To complete the experiment, the following steps should be followed:
a) Switch on the computer and perform the following steps:
‘[Link]’ file is selected.
From the submenu obtained from right click button of the mouse ‘open with’ is selected.
From the browser list, click “Internet Explorer” and the output of the file is found.
b) Observation:
After completing these activities, the ‘[Link]’ file will be opened.
Experiment: 03
Name of Experiment: To prepare a web page to present various
types of text formats.
Theory:
Bold, italic, underline, strike through etc. are used in Microsoft word for text formatting, subscript and
superscript are used for some signs, algebraic formula etc. In case of HTML, for text formatting like
Microsoft word <b>, <i>, <strike>, <sub>, <sup>, <tt> etc. tags are used.
Uses of devices:
Hardware: A Computer
Software: Operating System- windows 7
Application software- Notepad
Uses:
To complete the above experiment, the steps of using devices are as follows:
1) At first, we have to check out the electricity connection.
2) If the electricity connection is OK then we need to switch on the power of the computer.
3) To check whether the above mentioned software’s are installed or not.
4) Necessary programs have to be started to complete the experiment.
5) After completing the experiments, all programs should be closed and the computer should be shut
downand the electricity connection should be switched off.
Activities:
To complete the experiment, the following steps should be followed:
a) Switch on the computer and perform the following steps:
Click on “start” icon.
Click on “All programs” menu.
Click on “Notepad” form “Accessories” sub menu.
b) After opening Notepad type the following program.
Program:
<html>
<head>
<title> Experiment 3 </title>
</head>
<body>
<p><b> (Bold) </b> This is an example of bold <br>
<i> (Italic) </i> This is an example of italic <br>
<u> (Underline) </u> This is an example of underline <br>
<strike> (Strike) </strike> This is an example of strike <br>
(CO<sub> 2 </sub> This is an example of subscript <br>
(E=MC<sup> 2 </sup> This is an example of superscript <br>
<big> (Big Text) </big> This is an example of Big Text<br>
<small> (Small Text) </small> This is an example of Small Text <br>
<strong> (Strong Text) </strong> This is an example of Strong text <br>
<samp> (Sample Text) </samp> This is an example of Sample Text <br>
<tt> (Teletype) </tt> This is an example of Teletype <br>
<abbr> (U.N.O) </abbr> (United Nation Organization) This is an example of Abbreviation <br>
<var> x </var> This is an example of Variable <br>
<code> Computer Code Text </code> This is an example of Code <br>
<address> (Written by i2Hosting <br>
Address: Karwan Bazar, Dhaka-1215 <br>
Email: info@[Link]) </address> This is an example of Address <br>
</p>
</body>
</html>
c) File Save:
Click on file Menu.
Click on save sub menu.
Type [Link] on the file name text box.
Click on save button.
d) Explanation:
The explanations of the tags that are used in this experiment are as follows:
Tags Description
<html></html> Indicate HTML document
<head></head> Indicate head of the program
<title></title> Indicate title of the document
<body></body> Indicate main content of the program
<b></b> Indicate text bold
<i></i> Indicate text italic
<u></u> Indicate text underline
<small></small> Smaller than normal text
<br> Create one line break
<code></code> Express computed code text
<p></p> Indicate paragraph
<pre></pre> Used for creating preformatted text
<big></big> Bigger than normal text
<tt></tt> Indicate teletype text
<strong></strong> Indicate strong text
<sub></sub> Indicate subscript text
<sup></sup> Indicate superscript text
<abbr></abbr> Abbreviation tag
File will be saved on the location C:\Users\Darda (Computer_name)\Documents. According to necessary
file can be saved on other locations too.
e) Observation:
[Link] file is selected.
“open with” is selected from the submenu found by clicking the right button of the mouse.
Click “Internet Explorer” from obtained browser list and the required output of the file will be shown.
Experiment: 04
Name of Experiment: To prepare a webpage to present various types of
heading and paragraph formats.
Theory:
Header tags are used for writing heading or titles. For example: <h1>.................. </h1>. Here, if we use
any number from 1 to 6 after H, different sizes of heading format are found. In case of paragraph <p> tag
is used. If one wants to present any writing from one line to another then <br> that is (line break) tag is
used.
Uses of devices:
Hardware: A Computer
Software: Operating System- windows 7
Application software- Notepad
Uses:
To complete the above experiment, the steps of using devices are as follows:
1) At first, we have to check out the electricity connection.
2) If the electricity connection is OK then we need to switch on the power of the computer.
3) To check whether the above mentioned software’s are installed or not.
4) Necessary programs have to be started to complete the experiment.
5) After completing the experiments, all programs should be closed and the computer should be shut
downand the electricity connection should be switched off.
Activities:
To complete the experiment, the following steps should be followed:
a) Switch on the computer and perform the following steps:
Click on the “start” icon.
Click on “All programs” menu.
Click on “Notepad” from “Accessories” sub menu.
b) After opening Notepad type the following program.
Program:
<html>
<head>
<title> Heading and paragraph </title>
</head>
<body>
<h1> This is an example of heading 1</h1>
<h2> This is an example of heading 2</h2>
<h3> This is an example of heading 3</h3>
<h4> This is an example of heading 4</h4>
<h5> This is an example of heading 5</h5>
<h6> This is an example of heading 6</h6>
<p> This is a paragraph</p><br>
<p> This is a paragraph</p><br>
<p> This is a paragraph</p><br>
<p> This is a paragraph</p><br>
</body>
</html>
c) File Save:
Click on “file Menu”.
Click on “save” submenu.
Type [Link] on the file name text box.
Click on “save” button.
d) Explanation:
The explanation of the tags used in this experiment is as follows:
Tags Description
<html></html> Indicate HTML document
<head></head> Indicate head of the program
<title></title> Indicate title of the document
<body></body> Indicate main content of the program
<br> Create one line break
<h1></h1> Header tag 1 will be the largest
<h2></h2> Header tag 2
<h3></h3> Header tag 3
<h4></h4> Header tag 4
<h5></h5> Header tag 5
<h6></h6> Header tag 6
<p></p> Indicate paragraph
File will be saved on the location C:\Users\Darda (Computer_name) \Documents. According to necessary
file can be saved on other locations too.
e) Observation:
[Link] file is selected.
“open with” is selected from the submenu found by clicking the right button of the mouse.
Click “Internet Explorer” from obtained browser list and the required output of the file will be shown.
Experiment: 05
Name of Experiment: To make a web page using font face, font size,
font color and PRE tag
Theory:
Various types of font, various sizes of font and different colors of font are required to create a web page.
For these reasons, the mentioned elements are used. In case of long sentences in text editor, the places
where Enter is used to start a paragraph and the places where tab is used. Similarly, in those cases PRE
element is used while presenting a text on browser.
Uses of devices:
Hardware: A Computer
Software: Operating System- windows 7
Application software- Notepad
Uses:
To complete the above experiment, the steps of using devices are as follows:
1) At first, we have to check out the electricity connection.
2) If the electricity connection is OK then we need to switch on the power of the computer.
3) To check whether the above mentioned software’s are installed or not.
4) Necessary programs have to be started to complete the experiment.
5) After completing the experiments, all programs should be closed and the computer should be shut
downand the electricity connection should be switched off.
Activities:
To complete the experiment, the following steps should be followed:
a) Switch on the computer and perform the following steps:
Click on the “start” icon.
Click on “All programs” menu.
Click on “Notepad” from “Accessories” sub menu.
b) After opening Notepad type the following program.
Program:
<html>
<head>
<title> This is my third program. </title>
</head>
<body>
<p align=center”><b><u>HTML program using font face, font size, font color and pre-element
</u></b></p>
<font face=“arial”> This text is using arial font </font><br>
<font face=“impact”> This text is using impact font </font><br>
<font size=“20”> This text is using font size = point</font><br>
<font color=“red”> This text is using font color = red</font><br>
<font color=“green”> This text is using font color = green</font><br>
<h1>Grading System</h1>
<PRE>
<b>MARKS GRADE POINT LETTER GRADE</b>
80-100 5.00 A+
70-79 4.00 A
60-69 3.50 A-
50-59 3.00 B
40-49 2.00 C
33-39 1.00 D
00-32 0.00 F
</PRE>
</body>
</html>
c) File Save:
Click on “file Menu”.
Click on “save” sub menu.
Type [Link] on the file name text box.
Click on “save” button.
d) Explanation:
The explanations of the tags used in this experiment are as follows:
Tags Description
<html></html> Indicate HTML document
<head></head> Indicate head of the program
<title></title> Indicate title of the document
<body></body> Indicate main content of the program
<br> Create one line break
<h1></h1> Header tag 1 will be the largest
<p align=”center”></p> Indicate paragraph all the center
<font face=”arial”></font> Indicate Arial font
<font size=20></font> Indicate font size 20
<font color=red></font> Indicate font color red
<b></b> Indicate Text bold
<i></i> Indicate Text italic
<u></u> Indicate Text underline
<p></p> Indicate paragraph
<PRE></PRE> To create PRE formatted text
File will be saved on the location C:\Users\Darda (Computer_name) \Documents. According to necessary
file can be saved on other locations too.
e) Observation:
[Link] file is selected.
“open with” is selected from the submenu found by clicking the right button of the mouse.
Click “Internet Explorer” from obtained browser list and the required output of the file will be shown.
Experiment No: 6
Name of the experiment: To create a webpage using different typesof
list tags.
Theory:
Lists are used in webpage to present various data and information in an ordered [Link], 3 tags are
used in case of list.
For Example:
ul- Unordered List
li-List Item
ol- Ordered List
Uses of devices:
Hardware: A Computer
Software: Operating System- windows 7
Application software- Notepad
Uses:
To complete the above experiment, the steps of using devices are as follows:
1) At first one needs to check the electricity connection
2) If the electricity connection is ok, then one needs to switch on the power of the computer.
3) To check whether the above mentioned software’s are installed or not.
4) Necessary programs have to be started to complete the experiment.
5) After completing the experiment all programs should be closed and computer should be shut
down and the electric connection has to be switched off.
Activities:
To complete the experiment, the following steps should be followed:
a) Switch on the computer and perform the following steps:
Click on start icon.
Click on all program menu.
Click on Notepad from Accessories submenu.
b) After opening Notepad type the following program.
Program:
<html>
<head>
<title>This is my fourth program.</title>
</head>
<body>
<p align="center"> <b><u>html program using list</u></b></p>
<h3 align="center"> List of programming language using OL</h3>
<ol>
<li> BASIC </li>
<li> c </li>
<li> PASCAL </li>
<li> FORTRAN </li>
</ol>
<ol TYPE=A>
<li> BASIC </li>
<li> c </li>
<li> PASCAL </li>
<li> FORTRAN </li>
</ol>
<ol>
<li> BASIC </li>
<ol type=1>
<li> GWBASIC </li>
<li> QBASIC </li>
</ol>
<li> c </li>
<li> PASCAL </li>
<li> FORTRAN </li>
</ol>
<h3 align="center"> List of programming language using UL </h3>
<ul>
<li> BASIC </li>
<li> c</li>
<li> PASCAL
</li>
<li> FORTRAN </li>
</ul>
</body>
</html>
c) File Save:
Click on “file” menu.
Click on “save” submenu.
Type “[Link]” on the file name text box.
Click on “save” button.
d) Explanation:
The explanations of the tags which are used in this experiment are given:
Tags Description
<html></html> Indicate HTML document
<head></head> Indicate head of the program
<title></title> Indicate title of the document
<body></body> Indicate main content of the program
<h3></h3> Header Tag 3
<p align=”center”></p> Indicate center alignment of paragraph
<b></b> Indicate text bold
<i></i> Indicate text italic
<br> Indicate line break
<li></li> Used to create list
<ol></ol> Used to create ordered list
<ul></ul> Used to create unordered list
<p></p> Indicate paragraph
File will be saved on the location C:\Users\Darda (computer-name)\Documents. According tonecessity
file can be saved on other locations.
e) Observation:
[Link] file is selected.
“open with” is selected from the submenu found by clicking the right button of the mouse.
Click “Internet Explorer” from obtained browser list and the required output of the file will be shown.
Experiment No: 7
Name of the experiment: To create a webpage presenting various
data in the form of a table.
Theory:
In web page, data can be presented in the form of table when required. For this reason, TABLETAG is used.
To create rows in a table <tr> is used and to create column, <tr> is used, besides
<th> is used to present the Heading of the table.
<tr> that is Table ROW.
<td> that is Table Data.
<th> that is Table Header.
Uses of devices:
Hardware: A Computer
Software: Operating System- windows 7
Application software- Notepad
Uses:
To complete the above experiment, the steps of using devices are as follows:
1) At first one needs to check the electricity connection
2) If the electricity connection is ok, then one needs to switch on the power of the computer.
3) To check whether the above mentioned software’s are installed or not.
4) Necessary programs have to be started to complete the experiment.
5) After completing the experiment all programs should be closed and computer should be shut
down and the electric connection has to be switched off.
a) Switch on the computer and perform the following steps:
Click on start icon.
Click on all program menu.
Click on Notepad from Accessories submenu.
b) After opening Notepad type the following program.
Program:
<html>
<head>
<title>
This is my fifth program.
</title>
</head>
<body>
<p align="center"> <b><u>html program using table</u></b></p>
<table border=5 width=350 height=50>
<caption> List of programming language using table</caption>
<tr>
<tr>Sl. no <th> programming language </th>
</tr>
<tr>
<td>1. </td><td>BASIC</td>
</tr>
<tr>
<td>2. </td><td>c</td>
</tr>
<tr>
<td>3. </td><td>FORTRAN</td>
</tr>
<tr>
<td colspan=2>Merge cell</td>
</tr>
</table>
</body>
</html>
c) File Save:
Click on “file” menu.
Click on “save” submenu.
Type “[Link]” on the file name text box.
Click on “save” button.
Explanation:
The explanations of the tags which are used in this experiment are given:
Tags Description
<html></html> Indicate HTML document
<head></head> Indicate head of the program
<title></title> Indicate title of the document
<body></body> Indicate main content of the program
<b></b> Indicate text bold
<i></i> Indicate text italic
<br> Indicate line break
<table></table> Used to create table
<col></col> Used to create column of a table
<tr></tr> Used to create row of a table
<th></th> Used to create header of a table
<caption></caption> Used to write caption of a table
<td></td> Used to create cell of a table
<p align= ”center”></p> Center alignment of a paragraph
File will be saved on the location C:\Users\Darda (computer-name)\Documents. According tonecessity
file can be saved on other locations.
e) Observation:
[Link] file is selected.
“open with” is selected from the submenu found by clicking the right button of the mouse.
Click “Internet Explorer” from obtained browser list and the required output of the file will be shown.
Experiment No: 8
Name of the experiment: To create a webpage with image
attachment and hyper link.
Theory:
Picture or image is one of the important elements of a webpage. Attaching image to a webpagemakes it
more attractive and friendly to the user. To attach image, <img> is a necessary tag. Thefirst page of web is
the home page. In this page there are various types of data index. Clicking on each of the index item,
another related item shows up. In this way, creating a link between one webpage to another a complete
website can be created.
Uses of devices:
Hardware: A Computer
Software: Operating System- windows 7
Application software- Notepad
Uses:
To complete the above experiment, the steps of using devices are as follows:
1) At first one needs to check the electricity connection
2) If the electricity connection is ok, then one needs to switch on the power of the computer.
3) To check whether the above mentioned software’s are installed or not.
4) Necessary programs have to be started to complete the experiment.
5) After completing the experiment all programs should be closed and computer should be shut
down and the electric connection has to be switched off.
Activities:
To complete the experiment, the following steps should be followed:
a)Switch on the computer and perform the following steps:
Click on start icon.
Click on all program menu.
Click on Notepad from Accessories submenu.
b) After opening Notepad type the following program.
Program:
<html>
<head>
<title>
Link, Image, Hyperlink and Email.
</title>
</head>
<body>
<body bgcolor="green" style="text" align="center">
<h3> This is an example of image </h3>
<img src="[Link]" align="center">
<p align="center"> <b><u>html program using link</u></b></p>
<h3 align="center">click the following to go to required page</h3>
<ol>
<li><a href=[Link]> First program</a></li>
<li><a href=[Link]> Second program</a></li>
<li><a href=[Link]> Third program</a></li>
<li><a href=[Link]> Fourth program</a></li>
<li><a href=[Link]> Fifth program</a></li>
</ol>
<a href=[Link] Search </a><br>
<a href="[Link] abcd@[Link]</a>
</body>
</html>
c) File Save:
Click on “file” menu.
Click on “save” submenu.
Type “[Link]” on file name text box.
Click on “save” button.
d) Explanation:
The explanations of the tags which are used in this experiment are given:
Tags Description
<html></html> Indicate HTML document
<head></head> Indicate head of the program
<title></title> Indicate title of the document
<body></body> Indicate main content of the program
<a></a> anchor tag
href href should be added to anchor tag. “href”
Indicate header reference
<a href=[Link]> The page of “[Link]” will be added to
the webpage
<img src=”[Link]”> “[Link]” image fill will be show
<br> create one line break
<a href=[Link] link should be created with
“[Link]
<li></li> Used to indicate list
<ol></ol> Used to create order list
<p align= ”center”></p> Center alignment of a paragraph
File will be saved on the location C:\Users\Darda (computer-name)\Documents. According tonecessity
file can be saved on other locations.
e) Observation:
[Link] file is selected.
“open with” is selected from the submenu found by clicking the right button of the mouse.
Click “Internet Explorer” from obtained browser list and the required output of the file will be shown.