Download Computer Application Notes PDF on HTML for HS 2023 (WBCHSE). Get HTML notes PDF 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).
“Computer Application Study Notes on HTML for Class 12 (WBCHSE)”
(সম্পুর্ন নোটটি দেখতে নিচের দেওয়া লিঙ্কে ক্লিক করো)
Computer Application Notes PDF on HTML for HS 2023 Download PDF
Computer Application Notes PDF on HTML (Demo Copy)
HTML (Hypertext Markup Language) for H.S. Exam – 2023
- HTML হল একটি ভাষা। এটি কোন সফটওয়্যার নয়।
- এর দ্বারা ওয়েবসাইটের স্ট্রাকচার তৈরি করা হয়।
- এই ভাষা তৈরি করেন ১৯৮৯ সালে সুইৎজারল্যান্ডের বিজ্ঞানী টিম বার্নার্স লি।
- এইচটিএমএল ভাষা লিখতে গেলে কম্পিউটারের মধ্যে নোটপ্যাড নামক সফটওয়্যারটি থাকতে হবে।
- এই ভাষায় লিখিত প্রোগ্রাম পড়তে গেলে কম্পিউটারের মধ্যে ওয়েব ব্রাউজার (Web Browser) যেমন গুগল ক্রোম (Google Chrome), ফায়ারফক্স(FireFox), অপেরা মিনি(Opera Mini), ইউসি ব্রাউজার(UC Browser), ইন্টারনেট এক্সপ্লোরার(Internet Explorer) ইত্যাদি সফটওয়্যার থাকতে হবে।
HTML Tag:
HTML ট্যাগ হল html ভাষার মূল ভিত্তি বা কতকগুলি সাংকেতিক চিহ্ন, যেগুলি ইংরেজি লেটার, < (Less Than), > (Greater than), / (Slash) ইত্যাদি দ্বারা গঠিত।
কোনো ট্যাগ লেখা হয় < এবং > চিহ্ন এর মাঝখানে। ট্যাগ শেষ করার সময় ট্যাগ এর নামের আগে / (Slash) চিহ্ন বসাতে হয়।
HTML Section:
Html এর প্রধান তিনটি সেকশন হল – 1. Head, 2. Title, 3. Body
Container Element:
কোন শুরু এবং শেষ ট্যাগ এর মাঝখানে যে টেক্সট লেখা টি থাকে তাকে বলে Contain।
শুরু এবং শেষ ট্যাগ সমেত সম্পূর্ণ অংশটিকে বলা হয় Container Element।
Container Tag:
যে সমস্ত ট্যাগ এর শুরুর ট্যাগ এবং শেষ ট্যাগ থাকে তাকে বলে Container Tag।
উদাহরণ: <b>…</b>, <i>…</i>, <html>…</html>, <body>…</body>, <head>…</head> ইত্যাদি।
Empty Tag:
যে সমস্ত ট্যাগ এর শুরুর ট্যাগ থাকে কিন্তু শেষ ট্যাগ থাকে না তাকে বলে Empty Tag।
উদাহরণ: <br>, <img>, <hr>
Computer Application Notes PDF on HTML:
বিভিন্ন প্রকার ট্যাগের নাম এবং কাজ:
| ট্যাগ এর নাম | ট্যাগ এর কাজ |
| <html> </html> |
এটি html এর শুরুর ট্যাগ। এটি html এর শেষ ট্যাগ। |
| <head>…</head> | এর সাহায্যে হেড অংশে কোন কিছু লেখা হয়। |
| <title>…</title> | এর সাহায্যে টাইটেল অংশে কোন কিছু লেখা হয়। |
| <body>…</body> | এর সাহায্যে বডি অংশে কোন কিছু লেখা হয়। |
| <b>…</b> | এর সাহায্যে কোন টেক্সটকে বোল্ড করা হয়। |
| <i>…</i> | এর সাহায্যে কোন টেক্সটকে ইটালিক হরফে লেখা হয়। |
| <u>…</u> | এর সাহায্যে কোন টেক্সট এর নিচে আন্ডার লাইন করা হয়। |
| <p>…</p> | এর সাহায্যে প্যারাগ্রাফ তৈরি করা হয়। |
| <h1>…</h1> <h2>…</h2><h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6> |
সবচাইতে বড় আকারের হেডিং দেওয়ার জন্য এটি ব্যবহার করা হয়। আরেকটু ছোট আকারের হেডিং দেওয়ার জন্য বা সাব হেডিং দেওয়ার জন্য। আরেকটু ছোট আকারের হেডিং দেওয়ার জন্য বা সাব হেডিং দেওয়ার জন্য। আরেকটু ছোট আকারের হেডিং দেওয়ার জন্য। আরেকটু ছোট আকারের হেডিং দেওয়ার জন্য বা মাইনর হেডিং দেওয়ার জন্য। সবচাইতে ছোট আকারের হেডিং দেওয়ার জন্যবা মাইনর হেডিং দেওয়ার জন্য। |
| <br> | লাইন ব্রেক করার জন্য। |
| <hr> | আনুভূমিক লাইন দেওয়ার জন্য। |
| <img src=”…….”> | ওয়েব পেজ এর উপর ছবি দেওয়ার জন্য। |
| <a href=”…………”>…</a> | হাইপারলিংক করার জন্য। |
| <ol>…</ol> | অর্ডার লিস্ট বা তালিকা তৈরি করার জন্য। |
| <ul>…</ul> | আনঅর্ডার লিস্ট বা তালিকা তৈরি করার জন্য। |
| <li>… </li> | কোন তালিকার মধ্যে লাইন তৈরি করার জন্য। |
| <font>…</font> | কোন টেক্সট বা লেখা কে সাজানো অর্থাৎ সাইজ, কালার, স্টাইল দেওয়ার জন্য। |
| <table>…</table> | টেবিল তৈরি করার জন্য। |
| <tr>…</tr> | টেবিলের মধ্যে রো তৈরি করার জন্য। |
| <th>…</th> | টেবিলের হেডিং অংশে কিছু লেখার জন্য। |
| <td>…</td> | টেবিলের মধ্যে ডাটা বা তথ্য লেখার জন্য। |
| <caption>…</caption> | কোন ছবি বা টেবিলের নিচে ক্যাপশন অঞ্চলে কিছু লেখার জন্য। |
| <sup>…</sup> | কোন টেক্সট বা লেখা কে সুপারস্ক্রিপ্ট হরফ লেখার জন্য। |
| <sub>…</sub> | কোন টেক্সট বা লেখা কে সাবস্ক্রিপ্ট হরফ লেখার জন্য। |
| <strong>…</strong> | কোন লেখাকে বা টেক্সটকে বোল্ড করার জন্য এবং বেশি গুরুত্বপূর্ণ তা বোঝার জন্য। |
| <marquee>…</marquee> | কোন টেক্সট বা পিকচার কে সচল করাবার জন্য। |
| <frameset>…</frameset> | ব্রাউজার উইন্ডোকে ফ্রেমে বিভক্ত করার জন্য। |
| <audio>…</audio> | কোন অডিও ফাইল যুক্ত করার জন্য। |
| <video>…</video> | কোন ভিডিও ফাইল যুক্ত করার জন্য। |
| <big>…</big> | কোন টেক্সট বড় করার জন্য। |
| <left>…</left> | কোন কিছুকে পেজের বামদিকে আনবার জন্য। |
| <center>…</center> | কোন কিছুকে পেজের মাঝখানে আনবার জন্য। |
| <right>…</right> | কোন কিছুকে পেজের ডানদিকে আনবার জন্য। |
| <del>…</del> | কোন ডিলিট হয়ে যাওয়া টেক্সটকে দেখাবার জন্য। |
| <header>…</header> | ওয়েবপেজের বডির হেড অংশে কোন কিছু লেখার জন্য। |
| <footer>…</footer> | ওয়েবপেজের বডির ফুটার অংশে বা নিচের দিকে কোন কিছু লেখার জন্য। |
| <input>…</input> | কোনো তথ্য বা ডাটা ইনপুট হিসেবে নেওয়ার জন্য। |
| <label>…</label> | কোন ফর্ম এর প্রতিটি ঘরের লেবেল অংশে কোন কিছু লেখার জন্য। |
| <nav>…</nav> | কোন ওয়েব পেজের মধ্যে নেভিগেশন লিংক দেওয়ার জন্য। |
| <pre>…</pre> | কোন Preformatted টেক্সট উল্লেখ করার জন্য। |
| <q>…</q> | কোন ছোট কোটেশন বা উক্তি লেখার জন্য। |
| <strike>…</strike> | কোন Strikethrough টেক্সট বা কেটে দেওয়া লেখাকে দেখাবার জন্য। |
| <time>…</time> | ওয়েব পেজ এর উপর সময় বা তারিখ-সময় দেখাবার জন্য। |
Html Document তৈরি করা এবং শেভ করার পদ্ধতি:
প্রথমে কম্পিউটারে নোটপ্যাড সফটওয়্যারটি ওপেন করতে হবে (Start > Programs > Accessories > Notepad এ Click)। এরপর কোড টাইপ করা হয়ে গেলে নোটপ্যাডের File মেনুর অন্তর্গত Save As অপশনে ক্লিক করতে হবে। আগত ডায়ালগ বক্সের মধ্যে File Name এর টেক্সট বক্সে ফাইলের নাম টাইপ করতে হবে এবং তারপর .html বা .htm লিখতে হবে। শেষে Save বাটনে ক্লিক করতে হবে।
Html কোড লেখার গঠন বা স্ট্রাকচার:
<html>
<head>
<title>(এখানে শুধুমাত্র টাইটেল হিসাবে যা লিখতে বলা হবে সেটি টাইপ করতে হবে) </title>
</head>
<body>
(এই অংশে অর্থাৎ বডি অংশের মধ্যে টাইটেল ছাড়া বাকি যা যা কাজ করতে বলবে অর্থাৎ প্যারাগ্রাফ লেখা হেডিং দেওয়া ছবি দেওয়া হাইপারলিংক করা ইত্যাদি সমস্ত কাজ পরপর কোড টাইপ করতে হবে)
</body>
</html>
Html কোড ব্যবহার করে My School লেখাটিকে Title করার পদ্ধতি।
<html>
<head>
<title>My School</title>
</head>
<body>
</body>
</html>
Html কোড ব্যবহার করে Page এর Background এ কালার দেবার পদ্ধতি।
<html>
<head>
<title>……</title>
</head>
<body bgcolor=”yellow”>
</body>
</html>
ব্যাখ্যা:
ওয়েবপেজের ব্যাকগ্রাউন্ডে হলুদ রং দিতে হলে bgcolor=”yellow” লিখতে হবে body ট্যাগ এর মধ্যে।
Html কোড ব্যবহার করে কোনো টেক্সটকে বোল্ড, ইটালিক, আন্ডারলাইন করার পদ্ধতি।
<html>
<head>
<title>……</title>
</head>
<body>
<b> যে টেক্সটিকে Bold করতে বলা হবে সেই Textটি এখানে অর্থাৎ b ট্যাগ এর মাঝে টাইপ করা হবে। </b>
<i> যে টেক্সটিকে Italic করতে বলা হবে সেই Textটি এখানে অর্থাৎ i ট্যাগ এর মাঝে টাইপ করা হবে। </i>
<u> যে টেক্সটিকে Underline করতে বলা হবে সেই Textটি এখানে অর্থাৎ u ট্যাগ এর মাঝে টাইপ করা হবে। </u>
</body>
</html>
Html কোড ব্যবহার করে কোনো Paragraph করার পদ্ধতি।
<html>
<head>
<title>……</title>
</head>
<body>
<p> Paragraph টিকে এখানে অর্থাৎ p ট্যাগ এর মাঝে টাইপ করা হবে। </p>
</body>
</html>
- মনে রাখবে কতকগুলি ফন্ট ফেস বা স্টাইল এর নাম হলো – Arial, Georgia, Impact, Roboto, Times New Roman ইত্যাদি।
- যদি Font face দিতে বলা হয় তাহলে font ট্যাগ এর পর Space দিয়ে লেখা হবে face=”Font face name”উদাহরণ – <font face=”arial”>
- যদি color দিতে বলা হয় তাহলে font ট্যাগ এর পর Space দিয়ে লেখা হবে color=”color name” উদাহরণ – <font color=”red”>
- যদি size দিতে বলা হয় তাহলে font ট্যাগ এর পর Space দিয়ে লেখা হবে size=”size px”উদাহরণ – <font size=”10px”>
Html কোড ব্যবহার করে কোনো Text কে Decoration অর্থাৎ সাজানোর পদ্ধতি।
<html>
<head>
<title>……</title>
</head>
<body>
<p><font face=”arial” color=”red” size=”10px”> Text টিকে এখানে অর্থাৎ font ট্যাগ এর মাঝে টাইপ করা হবে। </font> </p>
</body>
</html>
Tag Attribute:
কোনো ট্যাগ কে সাজানোর (Decoration) জন্য যে Term গুলি ব্যবহার করা হয় , সেগুলিকে ওই ট্যাগের Attribute বলে। Attribute শুরুর ট্যাগ এর সাথে যুক্ত হয়।
উদাহরণ – font ট্যাগ এর attribute হল – face, color, size ইত্যাদি।
<tagName attributeName=”attributeValue”>
উদাহরণ – <font size=”10px”>
Html কোড ব্যবহার করে কোনো Picture দেবার পদ্ধতি।
<html>
<head>
<title>……</title>
</head>
<body>
<img src=” rose.jpg / C:\desktop\rose.jpg ” width=”200px” height=”200px” border=”2px”>
</body>
</html>
ব্যাখ্যা
<img src=” ছবিটির Source বা Path Name এখানে টাইপ করতে হবে ” width=” ছবিটি কত পিক্সেল চওড়া হবে তা এখানে লিখতে হবে” height=”ছবিটি কত পিক্সেল উচ্চতা হবে তা এখানে লিখতে হবে” border=” ছবিটির চারপাশে কত পিক্সেল বর্ডার হবে তা এখানে লিখতে হবে”>
Img ট্যাগ এর Attribute হল – width, height, border ইত্যাদি