Basics of HTML


HTML এর মৌলিক বিষয়সমূহ
 
HTML এর পূর্ণরূপ হচ্ছে Hyper Text Markup Language. এটা একটা মার্কাআপ ল্যাঙ্গুয়েজ । এইচটিএমএল কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় । এটা দিয়ে ওয়েবসাইটের কাঠামো গঠন করা হয়। এজন্য HTML কে ওয়েব পেজ তৈরীর বিশুদ্ধ ল্যাংগুয়েজ বলা হয়।
এইচটিএমএল এর সুবিধা
১। HTML সহজে ব্যবহার করা যায় এবং সহজে অনুধাবন করা যায়।
২। সকল ব্রাউজার HTML কে সমর্থন করে।
৩। HTML এবং [XML] এর অনেক মিল রয়েছে।
৪। বিনামূল্যে ব্যবহার করা যায়।
৫। ভুলের পরিমাণ কম হয় এবং ভুল ধরা সহজ।
৬। বেশিরভাগ ডেভেলপমেন্ট টুলস HTML সমর্থন করে।
৭। বেশিরভাগ সার্চ ইঞ্জিন HTML বান্ধব।

এইচটিএমএল এর অসুবিধা
১। নিরাপত্তা তুলনামূলকভাবে কম।
২। একটি ওয়েবপেজ তৈরীতে অনেক বেশি CODE লিখতে হয়।
৩। CODE লিখতে অনেক [Syntax] মনে রাখতে হয়।

HTML ট্যাগ
HTML এ প্রোগ্রাম লিখার সময় <> এবং </> এই দুটি চিহ্ন ব্যবহৃত হয় এবং এর মধ্যে কিছু শব্দ যেমনঃ html, head, title, body ইত্যাদি ব্যবহার করা হয়। অ্যাঙ্গেল ব্র্যাকেট অর্থাৎ <> এবং </> এই দুই চিহ্নের মাঝে লিখা  শব্দগুলোকে বলা হয় ট্যাগ বলা হয়।

HTML  ট্যাগ দুই ধরনের:

এম্পটি ট্যাগ (Empty Tag)
যে  ট্যাগে কোন এলিমেন্ট থাকে না তাকে এম্পটি ট্যাগ বলে। এ এম্পটি ট্যাগে কোন সমাপ্তি ট্যাগ দেওয়ার দরকার হয় না। এ ধরনের ট্যাগের উদাহরণ হচ্ছেঃ <br> , <hr> , <img> , <meta> ইত্যাদি।

কন্টেইনার ট্যাগ:
কন্টেইনার ট্যাগের ক্ষেত্রে শুরুর এবং সমাপ্তির উভয় ট্যাগই লাগে। যেমন <b> ট্যাগের ভেতর আমরা কোন কিছু লিখলে সেটা বোল্ড অর্থাৎ মোটা অক্ষরে দেখা যাবে। যেমন আমরা যদি লিখি <b> Bangladesh </b>
তাহলে ওয়েবসাইটে দেখা যাবে Bangladesh. অর্থাৎ লেখাটি বোল্ড হয়ে গেছে।

ট্যাগের নাম
বর্ণনা
<html> </html>
(HTML) ডকুমেন্ট নির্দেশ করে
<head> </head>
(HEAD) প্রোগ্রামে প্রধান অংশ নির্দেশ করে
<title> </title>
(TITLE) ডকুমেন্ট শিরোনাম নির্দেশ করে
<body> </body>
(BODY) প্রোগ্রাম মূল অভ্যন্তরস্থ অংশ নির্দেশ করে
<a> </a>
(ANCHOR) নির্দেশ করে
<b> </b>
(BOLD) গাড় লেখা নির্দেশ করে
<i> </i>
(ITALIC) বাঁকা লেখা নির্দেশ করে
<br>
একটা লাইন ব্রেক তৈরি করে
<table> </table>
(TABLE) টেবিল তৈরি করতে
<td> </td>
টেবিলে সেল তৈরি করতে ব্যবহৃত হয়
<tr> </tr>
টেবিলে সারি তৈরি করতে ব্যবহৃত হয়
<form> </form>
(FORM) ফর্ম তৈরি করতে ব্যবহৃত হয়
<h1> </h1>
(HEADER) শিরোনাম লিখতে ব্যবহৃত হয়। হেডার ট্যাগ 1-6 পর্যন্ত হয়
<img>
(IMAGE) চিত্র যুক্ত করতে ব্যবহৃত হয়
<input> </input>
(INPUT) ফর্ম ফিল্ডে তৈরি করতে ব্যবহৃত হয়
<li> </li>
(LIST) তালিকা তৈরি করতে ব্যবহৃত হয়।
<ol> </ol>
(ORDER LIST) অর্ডার তালিকা তৈরি করতে ব্যবহৃত হয়
<ul> </ul>
(UNORDER LIST) আনঅর্ডার তালিকা তৈরি করতে ব্যবহৃত হয়
<p> </p>
(PARAGRAP)
<strong> </strong>
(STRONG) স্ট্রঙ লেখা নির্দেশ করে
<sub> </sub>
(SUBSRICPTED) উপঃলিপি লেখা নির্দেশ করে
<sup> </sup>
(SUPERSRICPTED) সুপারস্ক্রিপ্ট লেখা নির্দেশ করে

এইচটিএমএল এলিমেন্ট (Element)

এলিমেন্ট শব্দের অর্থ হচ্ছে উপাদান বা উপকরন। এলিমেন্ট HTML এর শুরুর ট্যাগ এবং শেষের ট্যাগের মাঝের অংশকে বলে ইলিমেন্ট। যেমন
<b> Chowmuhani Govt. S. A. College </b>

এইচটিএমএল ট্যাগের দ্বারাই এইচটিএমএল এলিমেন্ট গঠিত। এইচটিএমএল এলিমেন্ট হল এইচটিএমএল-এর কেন্দ্রবিন্দু যার মাধ্যমে ওয়েব পেজে বিভিন্ন এলিমেন্ট প্রদর্শন করা হয়।

এইচটিএমএল এলিমেন্ট কতগুলো বৈশিষ্ট্য মেনে চলে:
       Start Tag/Opening Tag দিয়ে শুরু হয়।
       End Tag/Closing Tag দিয়ে শেষ হয়।
       Start ও End ট্যাগের মাঝে Element Content থাকে।
কিছু ক্ষেত্রে Element Content নাও থাকতে পারে।

এইচটিএমএল ডকুমেন্ট (HTML Document)

এইচটিএমএল এলিমেন্ট দ্বারা গঠিত ওয়েব পেজটাই হল এইচটিএমএল ডকুমেন্ট। এইচটিএমএল ডকুমেন্টের প্রধান দুটি অংশ হল head ও body সেকশান।

এইচটিএমএল এর এট্রিবিউট

HTML উপাদানের এট্রিবিউট থাকতে পারে। এট্রিবিউট HTML উপাদান সম্পর্কে অধিকতর তথ্য প্রদান করে। সবসময় ওপেনিং বা শুরুর ট্যাগে এট্রিবিউট থাকে।
এট্রিবিউটের ২টি অংশ থাকে- Attribute Name এবং Attribute Value।
যেমন
<font size="5" face="Tahoma" color="red"> This is a paragraph</font>  এখানে size="5"  অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ This is a paragraph. লেখাটির সাইজ কেমন হবে। এছাড়া face="Tahoma"  প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।

এইচটিএমএল সিনট্যাক্স
এইচটিএমএল সিনট্যাক্স হচ্ছে এমন কিছু বিধিবদ্ধ নিয়ম যা অনুসরণের মাধ্যমে এইচটিএমএল এর কোড লিখা হয়। যেমন: Bangladesh লেখাটি ইটালিক করার জন্য এর আগে <i> ও পরে </i> ট্যাগ লিখতে হয়।
<i>Bangladesh</i>

HTML ফাইল এর গঠন

HTML এ লিখিত প্রোগ্রামকে দুটি সেকশনে ভাগ করা যায়।
১। হেড সেকশন
২। বডি সেকশন

হেড সেকশন:
একটি ডকুমেন্টের head,  ডকুমেন্ট সস্বন্ধে মৌলিক ধারনা দেয়। <head> elements যা পেজের header নির্দেশ করে।head elements এর মধ্যে রাখা elements সরাসরি ব্রাউজারে প্রদর্শিত হয় না। head সেকশনে <title>, <link>, <meta>, <style>, <script> ইত্যাদি ট্যাগগুলো থাকে।

বডি সেকশন:
body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়।
একটি HTML ফাইলের Basic Structure নিম্নরুপ:

<!DOCTYPE HTML>
<html>
          <head>
          
                    <title> </title>
          </head>
          <body>
                     ..........................
                     ..........................
          </body>
</html>
    

এইচটিএমএল টেক্সট ফরম্যাটিং ট্যাগ
এইচটিএমএল এর কিছু ট্যাগ আছে যেগুলো ব্যবহার করে text এর স্টাইল পরিবর্তন করা যায়। এই ট্যাগগুলোকে একত্রে ফরম্যাটিং ট্যাগ বলে। যে সকল ফরম্যাটিং ট্যাগ এইচটিএমএল এ ব্যবহার করা হয় সেগুলো হল -
 
ট্যাগ
বর্ণনা
<b>
বোল্ড/গাঢ় টেক্সট করে।
<em>
এম্ফেসাইজ/গুরুত্বপূর্ণ টেক্সট বুঝায়।
<i>
ইটালিক টেক্সট বুঝায়।
<small>
অপেক্ষাকৃত ছোট টেক্সট বুঝায়।
<strong>
গুরুত্বপূর্ণ টেক্সট বুঝায়।
<sub>
সাবস্ক্রিপ্ট টেক্সট বুঝায়।
<sup>
সুপারস্ক্রিপ্ট টেক্সট বুঝায়।
<ins>
ইনসারটেড টেক্সট বুঝায়।
<del>
ডিলেটকৃত টেক্সট বুঝায়।
<mark>
মার্ক/হাইলাইট টেক্সট বুঝায়।

যেমন-
 <b>This is bold text</b>
 <i>This is italic text</i>
 <u>This is underlined text</u>
 <big>This is big text</big>
 <small>This is small text</small> 
  
এগুলো ব্রাউজারে দেখাবে
This is bold text
This is italic text
This is underlined
This is big text
This is small text

এইচটিএমএল হেডিং

এইচটিএমএলে শিরোনাম/হেডিং লেখার জন্য <h1> - <h6> ট্যাগসমূহ ব্যবহার করা হয়। অন্যকথায় <h1> থেকে <h6> দ্বারা এইচটিএমএলে হেডিং বা শিরোনাম তৈরি করা হয়।
<h1> দ্বারা সবচেয়ে বেশি গুরুত্বপূর্ণ হেডিং এবং <h6> দ্বারা সর্বনিম্ন গুরুত্বপূর্ণ হেডিং বুঝায়।

নিচের উদাহরণে <h1> - <h6> হেডিং দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
      <h1>এটি হলো হেডিং ১</h1>
     <h2>এটি হলো হেডিং ২</h2>
     <h3>এটি হলো হেডিং ৩</h3>
     <h4>এটি হলো হেডিং ৪</h4>
     <h5>এটি হলো হেডিং ৫</h5>
     <h6>এটি হলো হেডিং ৬</h6>
</body>
</html>

ফলাফল
এটি হলো হেডিং ১
এটি হলো হেডিং ২
এটি হলো হেডিং ৩
এটি হলো হেডিং ৪
এটি হলো হেডিং ৫
এটি হলো হেডিং ৬

এইচটিএমএল প্যারাগ্রাফ

প্যারাগ্রাফ তৈরির জন্য <p>… </p> ট্যাগ ব্যবহার করা হয়। যেমন
<p>This is a paragraph</p>

No comments:

Post a Comment

Subscribe to: Comments (Atom)