Higher Secondary Modern Computer Application Study Materials on HTML

Download Higher Secondary Study Notes on Computer Application for HTML. Get PDF of html long question answers. Download H.S. Exam study materials. Modern Computer Application study materials. WBCHSE computer application study notes on html (hyper text markup language).

computer-application-study-notes-hs-Higher Secondary Study Notes

Read Higher Secondary Study Notes | Computer Application | HTML Question Answer:

Higher Secondary Study Notes | Computer Application | HTML Long Question Answer:

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>

Read Higher Secondary Study Notes | Computer Application | HTML Question Answer:

 বিভিন্ন  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>

Download Higher Secondary Study Notes | Computer Application | HTML Question Answer:

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>

Download Higher Secondary Study Notes | Computer Application | HTML Question Answer:

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

Download Higher Secondary Study Notes | Computer Application | HTML Question Answer:

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>

Download Higher Secondary Study Notes | Computer Application | HTML Question Answer:

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>

Download Higher Secondary Study Notes | Computer Application | HTML Question Answer: