HS Computer Application Study Notes on HTML for Class 12 (WBCHSE)

Download HS Computer Application Study Notes on HTML for Class 12 (WBCHSE). Get PDF of html long question answers. Download HS Exam study notes. Computer Application study notes for class 12. WBCHSE computer application study notes on html (Hyper Text Markup Language).

“HS Computer Application Study Notes on HTML for Class 12 (WBCHSE)”

Study Notes on HTML:

HTML এর পুরো নাম Hyper Text Mark Up Language 1989  সালে সুইজারল্যান্ডের বিজ্ঞানী টিম বার্নার্স লি এটি আবিষ্কার করেছিলেন| এটি একটি ভাষা ওয়েব পেজ তৈরি করতে ব্যবহার করা হয়|




 HTML Tag:

 এই ভাষার মূল ভিত্তি হলো Tag.  ট্যাগ হল কতকগুলি চিহ্ন যার সাহায্যে Html প্রোগ্রাম তৈরি করা হয়| ট্যাগ গুলি হল –

  1. Heading Tag
  2. Body Tag
  3. Title Tag
  4. লিংক ট্যাগ

 ট্যাগ গুলিকে <>  চিহ্নের মধ্যে লেখা হয়| শেষ   ট্যাগের নামের শুরুতে Slash চিহ্ন (/)  দিতে হয়|  HTML Document এর শুরুর Tagটি হলো <Html>|  শেষ  Tag   টি হলো </Html>

Long Question on HTML:

 বিভিন্ন  Tag  এর নাম এবং কাজ:

  1. <html>, </html>     html  এর শুরু এবং শেষ ট্যাগ|
  2. <head>, </head>   কোন Heading দেওয়ার জন্য ব্যবহার করা হয়|
  3. <title>, </title>    কোন ডকুমেন্ট এর টাইটেল অংশে লেখার জন্য ব্যবহার করা হয়|
  4. <body>, </body>    body অংশে মূল লেখাটি লেখার জন্য ব্যবহার করা হয়|
  5. <b>, </b>    কোন লেখাকে বোল্ড করবার জন্য ব্যবহার করা হয়|
  6. <i>, </i>     কোন লেখাকে italic হরফে লেখার  জন্য ব্যবহার করা হয়|
  7. <u>, </u>    কোন লেখাকে underline করবার জন্য ব্যবহার করা হয়|
  8. <p>, </p>    paragraph লেখার জন্য ব্যবহার করা হয়|
  9. <h1>, <h2>…….<h6>    বিভিন্ন আকৃতির  heading লেখার জন্য ব্যবহার করা হয়|  এদের শেষ ট্যাগ হয় না|
  10. <br>    একটি লাইন ফাকা দেওয়ার জন্য ব্যবহার করা হয়|
  11. <a href=”……..”>……….</a>    হাইপারলিংক করবার জন্য ব্যবহার করা হয়|
  12. <img src=”……..”>    কোন পিকচার দেওয়ার জন্য ব্যবহার করা হয়|
  13. <ol>, </ol>    ordered list (1.2.3……) অনুযায়ী তালিকা তৈরি করার জন্য ব্যবহার করা হয়|
  14. <ul>, </ul>   unordered list (stylist bullets) অনুযায়ী তালিকা তৈরি করার জন্য ব্যবহার করা হয়|
  15. <li>, </li>    কোন তালিকায় লাইন দেবার জন্য ব্যবহার করা হয়|
  16. <font>, </font>    লেখার উপর বিভিন্ন স্টাইল,  color, size, ফেস ইত্যাদি দ্বারা লেখাটিকে সাজাবার জন্য ব্যবহার করা হয়|
  17. <hr>    অনুভূমিক লাইন দেবার জন্য ব্যবহার করা হয়|
  18. <table>, </table>    টেবিল শুরু এবং শেষ করার জন্য ব্যবহার করা হয়|
  19. <caption>, </caption>    টেবিলের caption অংশে কিছু লেখার জন্য ব্যবহার করা হয়|
  20. <th>, </th>    টেবিলের  heading অংশে কিছু লেখার জন্য ব্যবহার করা হয়|
  21. <td>, </td>    টেবিলের মধ্যে রেকর্ড লেখার জন্য ব্যবহার করা হয়|
  22. <tr>, </tr>    টেবিলের রো উল্লেখ করবার জন্য ব্যবহার করা হয়|
  23. <sup>, </sup>    কোন লেখাকে Superscript হরফ লেখার জন্য ব্যবহার করা হয়|
  24. <sub>, </sub>   কোন লেখাকে Subscript হরফ লেখার জন্য ব্যবহার করা হয়|

 কন্টেনার element:




শুরু এবং শেষ ট্যাগের মাঝখানে যে লেখাটি থাকে তাকে Content বলে|  শুরু এবং শেষ ট্যাগ সমেত মাঝের লেখাটি সমেত সম্পূর্ণ অংশটিকে বলে কন্টেনার Element|

Container tag:

 যে সমস্ত Tag এর শুরু এবং শেষ   Tag আছে তাদের বলে Container Tag |

Ex- <b>…..</b>; <i>…….</i>  ইত্যাদি

Empty tag:

 যাদের শেষ  ট্যাগ থাকে না তাদের এম Empty Tag |

Ex- <br>; <hr> ইত্যাদি

  1. html ডকুমেন্ট লেখা হয় নোটপ্যাড নামক সফটওয়্যারটির মাধ্যমে|
  2.  html ডকুমেন্ট পড়া হয় ব্রাউজার Internet Explorer,  ফায়ারফক্স,  Google Chrome,  Opera,  UC Browser ইত্যাদি নামক সফটওয়্যারটির মাধ্যমে|

 html ডকুমেন্ট সেভ করার পদ্ধতি:

 Save As নামক ডায়ালগ বক্সের File Name এর জায়গায় ফাইলের নাম লিখে তার সাথে.html  লেখাটি অবশ্যই লিখতে হবে|

html ডকুমেন্টের Programming Structure

<html>

<head>

<title>………………………… </title>

</head>

<body>

……………………………………………………………

( বাকি সমস্ত ট্যাগের ব্যবহার বা সমস্ত লেখা এই অংশে হবে)

……………………………………………………………..

……………………………………………………………….

</body>

</html>

ডকুমেন্টের Heading অংশে টাইটেল এবং বডি ডেকোরেশন করার পদ্ধতি:

<html>

<head>

<title> টাইটেলের লেখাটি লেখ </title>

</head>

<body>

                                    এই অংশে body description লেখ

</body>

</html>

Heading Tag এর ব্যবহার:

<html>

<head>

<title>……….. </title>

</head>

<body>

<h1>  হেডিং এর লেখা টি লেখ </h1>

<h2>  হেডিং এর লেখা টি লেখ </h2>

H1 দিলে হেডিংটি বড় সাইজের হবে

H2 দিলে হেডিংটি  আরেকটু ছোট সাইজের হবে

H3 দিলে হেডিংটি  আরেকটু ছোট সাইজের হবে

H4 দিলে হেডিংটি  আরেকটু ছোট সাইজের হবে

H5 দিলে হেডিংটি  আরেকটু ছোট সাইজের হবে

…….

 বারে বারে size কমতে থাকবে|

</body>

</html>

কোন Text কে Bold Italic Underline করার পদ্ধতি:

<html>

<head>

<title>……….. </title>

</head>

<body>

<b><i><u>  এখানে টেক্সট লেখা হবে </u></i></b>

</body>

</html>




SAQ on HTML:

Paragraph দেবার পদ্ধতি:
<html>
<head>
<title>……….. </title>
</head>

<body>
<p> এখানে  paragraph লেখা হবে ………………..
………………………………………….</p>

<p> এখানে  দ্বিতীয় paragraph লেখা হবে ………………..
………………………………………….</p>
</body>
</html>

কোন  টেক্সট এর Alignment দেবার পদ্ধতি:
<p align=”left/center/right”> এখানে  text টি লেখা হবে  </p>

 লাইন ব্রেক করার পদ্ধতি:
<p> এখানে  text টি লেখা হবে  </p>
<br>
<br>
<p> এখানে  text টি লেখা হবে  </p>

Font ট্যাগ এর ব্যবহার:
<font face=”ariel” color=”red” size=”5”> এখানে  text টি লেখা হবে  </font>

Font Style  গুলি হল – Ariel/ Impact / Algerian / Courier  ইত্যাদি

অনুভূমিক লাইন দেওয়ার পদ্ধতি:
<hr size=”10” width=”50%” align=”center” color=”red”>

Ordered List দেওয়ার পদ্ধতি:
<ol type=”i/A/1/a” start=”1”>
<li>প্রথম লাইন</li>
<li> দ্বিতীয় লাইন</li>
<li> তৃতীয় লাইন</li>
</ol>

Unordered List দেওয়ার পদ্ধতি:
<ul style=”list-style-type:disc/circle/square”>
<li>প্রথম লাইন</li>
<li> দ্বিতীয় লাইন</li>
<li> তৃতীয় লাইন</li>
</ul>

Nested list দেওয়ার পদ্ধতি:
<ul>
<li>প্রথম লাইন</li>
<li> দ্বিতীয় লাইন
<ul>
<li>প্রথম sub লাইন</li>
<li> দ্বিতীয় sub লাইন</li>
</ul>
</li>
<li>তৃতীয় লাইন</li>
</ul>

পিকচার দেওয়ার পদ্ধতি:
<center>
<img src=”img-girl.jpg” style=”float:right;width:42px;height:42px;” border=”5px” border color=”red” >
</center>
<caption> ক্যাপশন  লেখার text  লেখা হবে </caption>

 পিকচারের উপর hyperlink দেওয়ার পদ্ধতি:
<a href=”www.girlimage.com”>
<img src=”img-girl.jpg” style=”width:42px;height:42px;” border=”5px” border color=”red” ></a>

MCQ on HTML:





Hyperlink  দেওয়ার পদ্ধতি:
<a href=” যে ফাইল টি কে অথবা যে ওয়েবসাইটটিকে লিংক করাবো তার এড্রেস হবে “> ডকুমেন্ট এর যে টেক্সট এর উপর অথবা যে পিকচার  টির উপর লিংক করাব  লেখা টি সেই লেখাটি বা ছবিটি এখানে বসবে</a>

Example-

<a href=”https://www.google.com”>Visit Google</a>

  1. হাইপারলিংক এর <A> Tag  কে  এংকার  tag (anchor tag) বলে
  2. Image file এর কতগুলি extension হল যেমন – .gif / .jpeg / .jpg / .png etc.

টেবিল তৈরির পদ্ধতি:
<p align=”center”>
<table style=”width:50%” height=”70%” border=”3” bordercolor=”red” bgcolor=”yellow” cellpadding=”5” cellspacing=”3”>
<tr align=”center”> (প্রথম row শুরু)
<th>প্রথম কলামের heading</th>
<th> দ্বিতীয় কলামের heading</th>
<th> তৃতীয় কলামের heading</th>
</tr> (প্রথম row শেষ)
<tr align=”center”> ( দ্বিতীয় row শুরু)
<td>প্রথম ঘরের data</td>
<td>  দ্বিতীয় ঘরের data</td>
<td>তৃতীয় ঘরের data</td>
</tr> ( দ্বিতীয় row শেষ)
<tr align=”center”> ( তৃতীয় row শুরু)
<td>প্রথম ঘরের data</td>
<td>দ্বিতীয় ঘরের data</td>
<td>তৃতীয় ঘরের data</td>
</tr> ( তৃতীয় row শেষ)
</table>
<caption> টেবিলের caption অংশের লেখাটি এখানে হবে </caption>

Table Tag এর Attribute:
কোন Tag Attribute বলতে বোঝায় সেই Tag কে  ডিজাইন করবার জন্য  যে  Term গুলি ব্যবহার করা হয়
Table Tag এর Attribute  হল – border, bordercolor, bgcolor, width, height, cellpadding, cellspacing, colspan. rowspan, valign

Valign এর ব্যবহার:
এর সাহায্যে টেবিলের ডাটাগুলোকে Cell এর মধ্যে বিভিন্ন Alignment  এ সাজানো হয়
<th/tr/td valign = “top/ middle/ bottom”>……………….. <th>

Colspan এর ব্যবহার:
এর সাহায্যে টেবিলের এক বা একাধিক Column গুলিকে Merge বা  Join করানো হয়

Rowspan এর ব্যবহার:
এর সাহায্যে টেবিলের এক বা একাধিক Row গুলিকে Merge বা  Join করানো হয়
<td rowspan=”2”> যে text টি লিখতে চাই সেটি হবে</td>
<td colspan=”2”>যে text টি লিখতে চাই সেটি হবে</td>

Cellpadding এর ব্যবহার:
এর সাহায্যে টেবিলের সেলের ডাটা থেকে সেল বর্ডারের  মধ্যবর্তী ফাঁকা অংশকে বাড়াতে বা কমাতে সাহায্য করে|

Cellspacing এর ব্যবহার:
দুই বা তার বেশি  সেল এর মধ্যে দূরত্ব কমাতে বা বাড়াতে সাহায্য করে|




Marquee Tag এর ব্যবহার:
<marquee width=”40%” direction=”up/down/left/right” height=”30%” behaviour=”alternate/scroll/slide” bgcolor=”red” scrollamount=”100” scrolldelay=”150” loop=”5” vspace=”70” hspace=”200” style=”border:solid”>
যে লেখাটিকে সচল করতে চাই সেই লেখাটি এখানে লেখা হবে
</marquee>

Hspace এর ব্যবহার:
এর সাহায্যে কোন Marquee টেক্সের Horizontal Margin পরিবর্তন করা হয়

Vspace এর ব্যবহার:
এর সাহায্যে কোন Marquee টেক্সের Vertical Margin পরিবর্তন করা হয়

Loop এর ব্যবহার:
Marquee  Text টি কতবার Scrolling করবে তা নির্ধারণ করা হয় |

Scrolldelay এর ব্যবহার:
এর সাহায্যে Marquee  টেক্সটির গতি কমানো হয়|

Scrollamount এর ব্যবহার:
এর সাহায্যে Marquee  টেক্সটির গতি বাড়ানো হয়|

Direction এর ব্যবহার:
Marquee  টেক্সটি কোন দিকে যাবে তা নির্ধারণ করা হয় | (left/right/up/down)

Behavior এর ব্যবহার:
Marquee  টেক্সটি কিভাবে Move  করবে তা নির্ধারণ করা হয়
Scroll –  এর মাধ্যমে Marquee  টেক্সটি  ক্রমাগত Scrolling  করবে|
Slide –  এর মাধ্যমে Marquee  টেক্সটি  একদিক থেকে অন্যদিকে যাওয়ার পর থেমে যাবে|
Alternate – এর মাধ্যমে Marquee  টেক্সটি  একদিক থেকে অন্যদিকে যাওয়ার পর আবার অন্য দিক বরাবর যাবে বারবার ধরে Bouncing Ball এর মত ব্যবহার করবে|

Bgcolor এর ব্যবহার:
এর মাধ্যমে Marquee  টেক্সটি যে Scrooling  অঞ্চলের  ওপর দিয়ে যায়,  ওই অঞ্চলের Background Color পরিবর্তন করা হয়|

Frame এর ব্যবহার:
একটি Browser Window কে একাধিক ভাগে ভাগ করার জন্য Html এ ফ্রেম ব্যবহার করা হয়|
Frame দেবার জন্য <frameset> Tag ব্যবহার করা হয়|  এই Tag র দুটি Attribute  যথা rows  এবং cols|

<frameset cols/rows=”25%,25%”>
(column অনুযায়ী ভাগ করলে cols  হবে / row অনুযায়ী ভাগ করলে rows  হবে|  যতগুলি ভাগ হবে, কমা দিয়ে কতগুলি percentage|)
<frame name=”top/bottom/middle/lafe/right/center” src=”frame_a.html”> ( প্রথম frame টির source  উল্লেখ করতে হবে)
<frame name=”top/bottom/middle/lafe/right/center” src=”frame_b.html”>(  দ্বিতীয় frame টির source  উল্লেখ করতে হবে)
</frameset>

Share This Post:

Comment Below