Scribd
Upload
190 views30 pages

Ict Lab

The document contains the revised syllabus for the practical exam of Information and Communication Technology (ICT) for classes 11 and 12. It includes 11 topics: 1) use of formatting tags in HTML, 2) use of paragraphs, headings, colors and formatting, 3) use of bullets and numbering lists on web pages, 4) adding images to web pages and using hyperlinks, 5) creation of tables and data entry in HTML, 6) use of frames in HTML, 7) input output statements, 8) conditional statements, 9) loop statements, 10) arrays, and 11) functions. It then provides details and code examples for 4 lab works on using various text formatting tags in HTML, using paragraphs, headings, font

Uploaded by

Tasmia Tisha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
190 views30 pages

Ict Lab

The document contains the revised syllabus for the practical exam of Information and Communication Technology (ICT) for classes 11 and 12. It includes 11 topics: 1) use of formatting tags in HTML, 2) use of paragraphs, headings, colors and formatting, 3) use of bullets and numbering lists on web pages, 4) adding images to web pages and using hyperlinks, 5) creation of tables and data entry in HTML, 6) use of frames in HTML, 7) input output statements, 8) conditional statements, 9) loop statements, 10) arrays, and 11) functions. It then provides details and code examples for 4 lab works on using various text formatting tags in HTML, using paragraphs, headings, font

Uploaded by

Tasmia Tisha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Translated from Bengali to English - www.onlinedoctranslator.

com

Rajuk Uttara Model College


Class: XI and XII
Subject : Information and Communication Technology (Practical)

Revised Syllabus of HSC Exam 2023 (Practical)

Practical :

1. Use of formatting tags in HTML


2. Use of paragraphs, headings, colors and formatting
3. Use of bullets and numbering lists on web pages
4. Adding images to web pages and using hyperlink
5. Creation of table and data entry in HTML
6. Use of frames in HTML
7. Input Output Statement
8. Conditional Statements
9. Loop Statement
10. array
11. Function
Labwork: 01 Use of various text formatting tags in HTML date : 6/11/2022
Required equipment: A personal computer.
Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10
2. Any editor program. E.g.- Notepad/Notepad++/Sublime Text
3. Any Browser : Google Chrome/Mozila Firefox/Microsoft Edge

Follow the process:


1. Click the quick button.
2. You have to click on Programs/All Programs.
3. Click on Accessories/Windows Accessories
4. Click on notepad. Then notepad editor will be launched. Enter the required
code in the editor.

HTML- code
<DOCTYPE html>
<body>
<P>This is normal text</P>
<P>This is small text</small tex </P>
<P>This is bold text <b> </P>
<P> <strong>This is strong text</strong> </p>
<P> <u>This is underlined text </u> </P>
<P><ins> This is inserted text </ins> </p>
<P><i> This is italic text </i> </p>
<P><em> This is emphasized text </em> </p>
<P><em> This is deleteted text </del> </p>
<P><s> This is strike text </s> </p>
<P> This is subscript text </sub>text </p>
<P>This is <sup> superscript text </sup>text </p>
<pre>
This is a programme
for i = 5 + 0 100 step 5
print
next i
</pre>
</body>
</html>

Save file:
1. Write the code in the notepad and click on the Save/Save As section in the
file menu. Then the save as dialog box will appear.
2. Type any name in the text box of file Name and write .html or .html at the
end of the name.
3. Select HTML or HTML file from the Type drop down list.
4. Finally click on save. Then the file will be saved.

Result: To open the extracted file in any browser, place the mouse pointer on the
file and double click. Then we can see the output as shown in the next image.

Figure: Output of various text formatting tags


Explanation: Each line is first defined as a separate paragraph by enclosing the
<p></p> tag. The tags used are described below.

<b> ..................</b> Makes text look bold.


<em> ...............</em> Shows text emphasized
<i> .................... </i> Makes text appear italicized.
<small>................</small> Minimizes text.
<strong> Makes text look strong.
...................</strong>
<sub> ......................</sub> Used to display subscript text.
<sup> .......................</sup> Displays text in superscript
<ins> ......................</ins> Underlines the inserted text.
<del>.....................</del> A dot in the middle of text is used to indicate that it
has been deleted.
<pre> ...................</pre> When written in code, this tag displays in a similar
way to breaking up text lines in a word processor.
<s> .......................</s> Draws a spot in the middle of the text
<u> .....................</u> Underlines text.

Table: Functions of various text formatting tags


Labwork: 02 Use of paragraphs, headings, font color and formatting
using tags in HTML date : 13/11/2023
Required equipment: A personal computer.
Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10
2. Any editor program. E.g.- Notepad/Notepad++/Sublime Text
3. Any Browser : Google Chrome/Mozila Firefox/Microsoft Edge

Follow the process:


1. Click the quick button.
2. You have to click on Programs/All Programs.
3. Click on Accessories/Windows Accessories
4. Click on notepad. Then notepad editor will be launched. Enter the required
code in the editor.
HTML- code
<DOCTYPE html>
<html>
<head>
<title>HTML Font</title>
</head>
<body>
<p>
This is a normal paragraph written in browser default font style.
font sixe and color.
</p> <p>
<font color="blue">Text with normal size and default face</font> </p>
<p> <font size="5" color="green">Text with Increased size and default face
</font></p>
<p> <font color="red" face="cursive">Text with Changed face</font>
</p>
</body>
</html>
Save file:
1. Write the code in the notepad and click on the Save/Save As section in the
file menu. Then the save as dialog box will appear.
2. Type any name in the text box of file Name and write .html or .html at the
end of the name.
3. Select HTML or HTML file from the Type drop down list.
4. Finally click on save. Then the file will be saved.

Result: To open the extracted file in any browser, place the mouse pointer on the
file and double click. Then we can see the output as shown in the next image.

Image: Adding Text Font, Font Size, Color to HTML


Explanation: About the tag used Described as-

<html> </html> Indicates HTMLDocument


<head> ...............</head> Indicates the head part of the
program
<title> .................... </title> Indicates the title of the
document.

<body>................</body> Indicates the main context part


of the program

<P> ...................</P> <P> ...................</P>

Labwork : 03 Use of bullets and numbering lists on web pages


date:20/11/20222

Required equipment: A personal computer.


Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10
2. Any editor program. E.g.- Notepad/Notepad++/Sublime Text
3. Any Browser : Google Chrome/Mozila Firefox/Microsoft Edge

Follow the process:


1. Click the quick button.
2. You have to click on Programs/All Programs.
3. Click on Accessories/Windows Accessories
4. Click on notepad. Then notepad editor will be launched. Enter the required
code in the editor.

HTML- code:
<DOCTYPE html>
<html>
<body>
<h2> An ordered list : </h2>
<ol>
<li>Dhaka </li>
<li>Rajshahi </li>
<li>Chattogram </li>
<li>Khulna </li>
<li>Brishal </li>
<li>Rangpur </li>
<li>Sylhet </li>
<li>Mymenshingh </li>
</ol>
<h2>An ordered list with attribute : </h2>
<ol start = "11">
<li>Barishal </li>
<li>Rangpur </li>
<li>Sylhet </li>
<li>Mymenshing </li>
</ol>
<h2>An unordered list </h2>
<ul type = "square">
<li>Dhaka </li>
<li>Rajshahi </li>
<li>Brishal </li>
<li>Mymenshingh </li>
</ul>
</body>
</html>
Save file:
1. Write the code in the notepad and click on the Save/Save As section in the
file menu. Then the save as dialog box will appear.
2. Type any name in the text box of file Name and write .html or .html at the
end of the name.
3. Select HTML or HTML file from the Type drop down list.
4. Finally click on save. Then the file will be saved.

Result: To open the extracted file in any browser, place the mouse pointer on the
file and double click. Then we can see the output as shown in the next image.

Figure: Use of Bullets and Numbering Lists in Web Pages


Explanation: <ol> </ol> tag is used for order list and <li> </li> tag is used to
define what items will be in the order list. The <ol> tag has two attributes namely
type and start. The <ul> </ul> tag is used for unorder lists. The <li> </li> tag is
used to specify which items will be in the list.The <u> tag has an attribute.
Namely: type

Type attribute Form:

Ordered list type Unordered list type


type = “A , output will be A, B, C type = “disc, output will be ⚫
type = “a” , output will be a, b, c type = “circle” , output will be 
type = “I, output will be I, II, III type = “square, output will be ◼
type = “i” , output will be i, ii, iii

Labwork: 04 Adding images and using hyperlinks to web pages


date: 27/11/2022

Required equipment: A personal computer.


Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10
2. Any editor program. E.g.- Notepad/Notepad++/Sublime Text
3. Any Browser : Google Chrome/Mozila Firefox/Microsoft Edge

Follow the process:


1. Click the quick button.
2. You have to click on Programs/All Programs.
3. Click on Accessories/Windows Accessories
4. Click on notepad. Then notepad editor will be launched. Enter the required
code in the editor.

HTML- code:
<DOCTYPE html>
<html>
<body>
<p>
An image:
<img src="rose.jpg" alt="Image of a Rose" width="300" height="300">
</p>
<p>
An image from picture folder in D drive:
<img src="D:\picture\tulip.jpg" alt="Picture of Tulip" width="200"
height="200">
</p>
<p>
an hyperlinked image:
<a href="https://www.google.com">
<img src="google_logo.jpg" alt="Logo" width="200" height="200">
</a>
</p>
</body>
</html>

Save file:
1. Write the code in the notepad and click on the Save/Save As section in the
file menu. Then the save as dialog box will appear.
2. Type any name in the text box of file Name and write .html or .html at the
end of the name.
3. Select HTML or HTML file from the Type drop down list.
4. Finally click on save. Then the file will be saved.
Result: To open the extracted file in any browser, place the mouse pointer on the
file and double click. Then we can see the output as shown in the next image.

Image: Using hyperlinks to add images to web pages

Labwork: 05 Table creation and data entry in HTML date :04/12/2022

Required equipment: A personal computer.


Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10
2. Any editor program. E.g.- Notepad/Notepad++/Sublime Text
3. Any Browser : Google Chrome/Mozila Firefox/Microsoft Edge

Follow the process:


1. Click the quick button.
2. You have to click on Programs/All Programs.
3. Click on Accessories/Windows Accessories
4. Click on notepad. Then notepad editor will be launched. Enter the required
code in the editor.

HTML- code:
<DOCTYPE html>
<html>
<body>
<html>
<h2>Table with empty cells:</h2>
<table border= “1” width ="50%">
<Captin> Empty Table</Caption>
<tr><td>&nbsp;<td><td>&nbsp;<td></tr>
<tr><td>&nbsp;<td><td>&nbsp;<td></tr>
</table>
<h2>Table with headers:</h2>
<table border= “1” cellspacing= “0”>`
<Caption>Contract</Caption>
<tr><th>Name</th><th>Telephone :2</th></tr>
<tr><td>Amin Arman</td><td>555 77 854</td><td>555 77 855</td></tr>
</table>
<h2>Vertical headers:</h2>
<table border= “1”>
<Caption>Contact</Caption>
<tr><th>Name</th><td>Amin Arman</td></tr>
<tr><th>Telephone:1</th><td>555 77 854</td></tr>
<tr><th>Telephone:2</th><td>555 77 854</td></tr>
</table>
</table>
</body>
<html>

Save file:
1. Write the code in the notepad and click on the Save/Save As section in the
file menu. Then the save as dialog box will appear.
2. Type any name in the text box of file Name and write .html or .html at the
end of the name.
3. Select HTML or HTML file from the Type drop down list.
4. Finally click on save. Then the file will be saved.

Result: To open the extracted file in any browser, place the mouse pointer on the
file and double click. Then we can see the output as shown in the next image.

Figure: Table creation and data entry in HTML


Explanation: For table inserts, the tag ¨<table> </table> is used. To determine how
much the border of the table will be, BORDER = “1"attribute is used. There is no
space between the table border and the cell border due to the value of 0 in the 2nd
table.
• <caption> is used to display table titles. The <table> tag is used before the
table row tag (<tr>) immediately after the <caption> tag. If you want to
write a title, then you have to write the <table> tag after the <caption>tag.
• The <tr>...</tr> tag is used to create table rows.
• <tr> Data cells are separated by <td> tag after each row and again. td stands
for Table data which is the content of a data cell.
• <th> tag is used to give headings within the table.
• &nbsp is used for white space.
• h2 is used for heading

Labwork: 06 Use of frames in HTML date: 11/12/2022

Required equipment: A personal computer.


Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10
2. Any editor program. E.g.- Notepad/Notepad++/Sublime Text
3. Any Browser : Google Chrome/Mozila Firefox/Microsoft Edge

Follow the process:


1. Click the quick button.
2. You have to click on Programs/All Programs.
3. Click on Accessories/Windows Accessories
4. Click on notepad. Then notepad editor will be launched. Enter the required
code in the editor.

HTML- code:
<!DOCTYPE html>
<html>
<frameset cols="*,*,*,*">
<frame src="lab work-2.html">
<frame src="lab work-3.html">
<lab work-5.html">
<frame src="lab work-4.html">
</frameset>
</html>

Save file:
1. Write the code in the notepad and click on the Save/Save As section in the
file menu. Then the save as dialog box will appear.
2. Type any name in the text box of file Name and write .html or .html at the
end of the name.
3. Select HTML or HTML file from the Type drop down list.
4. Finally click on save. Then the file will be saved.

Result: To open the extracted file in any browser, place the mouse pointer on the
file and double click. Then we can see the output as shown in the next image.
Figure : Use of Frames in HTML

Explanation: About the tag used Described as-


<div> </div> This element is used to separate different parts
of an HTML document.
width This determines the width of the element.
height It determines the length of the element.
float It determines the position and format of the
element's content.
margin It determines the element's margin.
padding It determines the white space around the
element's content.
font-family It determines the font of the element's text.
font-size It determines the font size of the element's
text.
border It determines the width of the border around
the element.
border radius This determines the radius of the border
rectangle around the element.
text-align It determines the font of the element's text.
background-color It determines the background color of the
element's content.
color It determines the element's text color.
Labwork: 07 Use of input output statement in C program date :01/01/2023

Required equipment: A personal computer.


Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10 and
2. It's an IDE with GNU GCC compiler. For example- code blocks

Follow the process:


1. You have to click on the Start/Windows button.
2. You have to click on Programs/All Programs.
3. Click on the link below. Then I will see the window of CodeBlocks.
4. Then to open a new file you have to press Ctrl+Shift+N or from file menu
you have to click on New → Empty File. As a result, the code editor will appear in
a new tab in the software. Enter the required code in the code editor.

Program code:
#include <stdio.h>
int main()
{
char x;
int n;
float y;
printf ("Enter a number:");
scanf("%d", &n);
printf ("The number is = %d\n\n",n);
printf ("Enter a fraction number:");
scanf("%f", &y);
printf ("The number is = %f",y);
return 0;
}
Saving the program:
1. To save the file, click on the save/save as menu and click press ctrl+s from
the keyboard. Then the save file dialog box will appear.
2. Type any name in the name box of file name and add .c extension at the end
of the name.
3. Select c/c++ from the drop-down list of Eligibility.
4. Finally click on the OK.

Program execution:
1. To compile, click on build menu or press ctrl+F9.
2. To run it, click on build manu or press ctrl+F10.
3. To compile and run together, click on Compile and Run from the
Compile menu or Press ctrl+F9.

Output : This program does not input a character, an integer, a decimal value. If
you run this program, you will see the result as shown in the image below.

Figure : Use of input output statement in C program


Explanation: In C program, the scanf() function is used to provide an input. In a C
program, the printf() function is used to get an output. For character data type
variable char is used, for integer data type variable int variable, for decimal data
type variable float is used. The format specifiers %c, %d and %f are used for the
typeschar,int,float respectively. Yes, the value of x,n,y is printed by the function
printf().

Labwork: 08 Program to find largest number out of three numbers


using conditional statement date :08/1/2023

Required equipment: A personal computer.


Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10 and
2. It's an IDE with GNU GCC compiler. For example- code blocks

Follow the process:


1. You have to click on the Start/Windows button.
2. You have to click on Programs/All Programs.
3. Click on the link below. Then I will see the window of CodeBlocks.
4. Then to open a new file you have to press Ctrl+Shift+N or from file menu
you have to click on New → Empty File. As a result, the code editor will appear in
a new tab in the software. Enter the required code in the code editor.
Program code:
#include <stdio.h>

int main()
{
int a,b,c;
printf ("Enter 3 interger valuse:");
scanf("%d %d %d",&a,&b,&c);
if ((a>b) && (a>c))
printf ("Largest value is:%d \n", a);
else if ((b>a) && (b>c))
printf ("Largest value is:%d \n", b);
else
printf ("Largest value is:%d \n", c);

return 0;
}

Saving the program:


1. To save the file, click on the save/save as menu and click press ctrl+s from
the keyboard. Then the save file dialog box will appear.
2. Type any name in the name box of file name and add .c extension at the end
of the name.
3. Select c/c++ from the drop-down list of Eligibility.
4. Finally click on the OK.

Program execution:
1. To compile, click on build menu or press ctrl+F9.
2. To run it, click on build manu or press ctrl+F10.
3. To compile and run together, click on Compile and Run from the
Compile menu or Press ctrl+F9.
Result: Three numbers are not input in this program. Output will be different for
different types of input. If you run this program, you will see the result as shown in
the image.

Figure : Program to find largest number among three numbers using conditional
statement

Explanation: The program compares three numbers with the if-esle statement to
find the larger number. The 1st number is compared with the 2nd and 3rd numbers
to determine the larger number among the three numbers. If 1st number is greater
than 2nd and 3rd number then 1st number will be greater. Similarly 2nd number is
compared with 1st and 3rd number. If 2nd number is greater than 1st and 3rd
number then 2nd number will be greater. Otherwise the 3rd digit will be larger.
Labwork: 09 Program to find sum of series 2+4+6....+n using loop
Dated : 15/01/2023
Required equipment: A personal computer.
Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10 and
2. It's an IDE with GNU GCC compiler. For example- code blocks

Follow the process:


1. You have to click on the Start/Windows button.
2. You have to click on Programs/All Programs.
3. Click on the link below. Then I will see the window of CodeBlocks.
4. Then to open a new file you have to press Ctrl+Shift+N or from file menu
you have to click on New → Empty File. As a result, the code editor will appear in
a new tab in the software. Enter the required code in the code editor.

Program code:
#include<stdio.h>
int main ( )
{
int n,sum= 0, i;
printef (“Enter a positive integer number:”)
scnaf(“% d & & n);
for (i = 2; i <=n; i=i+2)
{
sum = sum + i;
}
Printf ( “Result : %d\n, sum);
return 0 ;
}

Saving the program:


1. To save the file, click on the save/save as menu and click press ctrl+s from
the keyboard. Then the save file dialog box will appear.
2. Type any name in the name box of file name and add .c extension at the end
of the name.
3. Select c/c++ from the drop-down list of Eligibility.
4. Finally click on the OK.

Program execution:
1. To compile, click on build menu or press ctrl+F9.
2. To run it, click on build manu or press ctrl+F10.
3. To compile and run together, click on Compile and Run from the
Compile menu or Press ctrl+F9.

Result: A positive integer is not input. Output will be different for different types
of input. If you run this program, you will see the result as shown in the image
below.

Figure : Program to find sum of series 2+4+6....+n using loop


Explanation: The program stdio.h uses the functions included in the library
functions. The #include<stdio.h> line is the first line of every program should be
placed as main() is a function. When the program is started to run, the main()
function is executed first. '(' is the opening bracket and ')' is the closing bracket.
The program uses loops extensively. The loop will run from r = 2 to r < =n,
incrementing the value of r by 2 each time. In this, the value of the parameter
variable is initially set to 0. Each time the value of i will be added to sum. As a
result, after the loop repeats, the sum of the series 2+4+6+.....n will be in the sum
variable. Finally, we print the value which is the sum of the series.

Labwork: 10 Program to put some numbers in an array and display the


numbers Date: 22/01/2023

Required equipment: A personal computer.


Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10 and
2. It's an IDE with GNU GCC compiler. For example- code blocks

Follow the process:


1. You have to click on the Start/Windows button.
2. You have to click on Programs/All Programs.
3. Click on the link below. Then I will see the window of CodeBlocks.
4. Then to open a new file you have to press Ctrl+Shift+N or from file menu
you have to click on New → Empty File. As a result, the code editor will appear in
a new tab in the software. Enter the required code in the code editor.

Program code:
#include <stdio.h>

int main() {

int values[5];

printf("Enter 5 integers: ");

// taking input and storing it in an array


for(int i = 0; i < 5; ++i) {
scanf("%d", &values[i]);
}

printf("Displaying integers: ");

// printing elements of an array


for(int i = 0; i < 5; ++i) {
printf("%d\n", values[i]);
}
return 0;
}
Saving the program:
1. To save the file, click on the save/save as menu and click press ctrl+s from
the keyboard. Then the save file dialog box will appear.
2. Type any name in the name box of file name and add .c extension at the end
of the name.
3. Select c/c++ from the drop-down list of Eligibility.
4. Finally click on the OK.
Program execution:
1. To compile, click on build menu or press ctrl+F9.
2. To run it, click on build manu or press ctrl+F10.
3. To compile and run together, click on Compile and Run from the
Compile menu or Press ctrl+F9.

Result : Any three numbers are not input in this program. If you run this program,
you will see the result as shown in the image.

Figure : Program to put some numbers in an array and display the numbers

Explanation: The program uses the function stdio.h included in the library
functions. The line #include<stdio.h> should be placed as the first line of every
program. main() is a function. When the program is started to run, the main()
function is executed first. An array is a collection of data of a data type. The
program makrs declares a variable of type int which can hold up to 5 numbers.
The index of the array serves to separate each data. Array index starts from 0. The
first number will be in marks[0] the second in marks[1] and so on. If you want to
work with a specific variable of the array (display, arithmetic operation), you have
to use the name and index of the array variable.
Labwork: 11 Program to find square root of a number using functions
Date : 29/01/2023

Required equipment: A personal computer.


Required software:
1. an operating system. E.g.- Windows7/Windows 8/Windows 10 and
2. It's an IDE with GNU GCC compiler. For example- code blocks

Follow the process:


1. You have to click on the Start/Windows button.
2. You have to click on Programs/All Programs.
3. Click on the link below. Then I will see the window of CodeBlocks.
4. Then to open a new file you have to press Ctrl+Shift+N or from file menu
you have to click on New → Empty File. As a result, the code editor will appear in
a new tab in the software. Enter the required code in the code editor.
Program code:
#include <math.h>
#include <stdio.h>

int main() {
double number, squareRoot;

printf("Enter a number: ");


scanf("%lf", &number);

// computing the square root


squareRoot = sqrt(number);

printf("Square root of %.2lf = %.2lf", number, squareRoot);

return 0;
}
Saving the program:
1. To save the file, click on the save/save as menu and click press ctrl+s from
the keyboard. Then the save file dialog box will appear.
2. Type any name in the name box of file name and add .c extension at the end
of the name.
3. Select c/c++ from the drop-down list of Eligibility.
4. Finally click on the OK.

Program execution:
1. To compile, click on build menu or press ctrl+F9.
2. To run it, click on build manu or press ctrl+F10.
3. To compile and run together, click on Compile and Run from the
Compile menu or Press ctrl+F9.

Result: No single decimal number is input in this program. Output will be different
for different types of input. Running this program will show results like the image
shown.

Figure : Program to find square root of a number using functions


Explanation: The program stdio.h, math.h uses the functions included in the library
functions. The sprt() function is described in the existing math.h library function.
For decimal data, variables of type double are used. The %lf format specifier is
used for the double type. scanf() is used to take some input. prinf() is used to
display something on the monitor. The function sprt() will return the square root of
the number . The square root is kept in the squared variable and displayed next.

= Finished =

You might also like