HTML Tutorial in Bangla-Web Design-এইচটিএমএল-ওয়েব ডিজাইন শিখুন
ইতিহাস
১৯৮০ সালে ব্রিটিশ কম্পিউটার বিজ্ঞানী টিম বার্নার্স-লি, যিনি সার্ন এ একজন ঠিকাদার ছিলেন, সর্বপ্রথম সার্ন গবেষকদের মাঝে দস্তাবেজ শেয়ার করার জন্য ENQUIRE prototyped নামে একটি System এর প্রস্তাব দেন। ১৯৮৯ সালে, বার্নার্স-লি একটি ইন্টারনেট ভিত্তিক হাইপারটেক্সট সিস্টেম প্রস্তাবে একটি মেমো লিখেন। ১৯৯০ সালে বার্নার্স-লি ব্রাউজার এবং সার্ভারের সফ্টওয়্যারে এইচটিএমএল (HTML) এর উল্লেখ করেন ।এ বছরেই, বার্নার্স-লি এবং সার্ন এর তথ্য সিস্টেম ইঞ্জিনিয়ার Robert Cailliau যৌথভাবে সার্নকে এ প্রকল্পের জন্য অর্থায়নে অনুরোধ করেন, কিন্তু প্রকল্পটি আনুষ্ঠানিকভাবে সার্ন দ্বারা গৃহীত হয়নি।এইচটিএমএল
এইচটিএমএল -HTML এর পূর্নরূপঃ হাইপার টেক্সট মার্কআপ ল্যাংগুয়েজ (Hypertext Markup Language)।
বর্তমানে একজন অতি সাধারণ মানুষেরও একটি নিজস্ব ওয়েব সাইট থাকে।
এইচটিএমএল এর মাধ্যমে আপনি আপনার এই নিজস্ব ওয়েবসাইট ডিজাইন তথা তৈরি করতে পারবেন।
আমাদের এই এইচটিএমএল টিউটোরিয়ালটি আমরা খুবই সহজভাবে উপস্থাপন করেছি যেন আপনিও খুব সহজেই পুরো এইচটিএমএল শিখতে পারেন এবং নিজের ওয়েবসাইটটি ডিজাইন করতে কোন ডেভেলপার ভাড়া না করে নিজেই করতে পারেন।
এইচটিএমএল শেখা খুবই সহজ এবং আশা করি আপনি আমাদের এই টিউটোরিয়ালটি উপভোগ করবেন।
এইচটিএমএল ভূমিকা (HTML Introduction)
HTML (এইচটিএমএল) হচ্ছে Hyper Text Markup Language. অর্থাৎ এইচটিএমএল হল ওয়েব পেজ তৈরির জন্য স্ট্যান্ডার্ড মার্কআপ ভাষা। এইচটিএমএল মার্কআপ ব্যবহার করে একটি ওয়েব পেজের মূল কাঠামো তৈরী করা হয়। এইচটিএমএল এটি কোন প্রোগ্রামীং ভাষা নয় তবে, জাভাস্ক্রীপ্ট, পিএইচপি সহ ওয়েব ডেভেলপমেন্টের জন্য ব্যবহার হয় এমন সকল প্রোগ্রামিং ভাষাগুলি এইচটিএমএল নিয়েই অধিকতর ব্যবহার হয়ে থাকে৷
আপনার কম্পিউটার ফাইল বা ডকুমেন্ট কোন ফরমাটে সেভ আছে সেটা দেখার জন্যঃ
start menu তে গিয়ে লিখবেন: Folder.....দেখবেন File Explorer Option নামে একটি সেটিংস ফোল্ডার আসবে...সেখানে ক্লিক করে ওপেন করে view তে গিয়ে Hide extensions......নামের অপশনের টিক টি তুলে দিয়ে Apply...ok...করে দিন...তারপর index.html লিখে সেভ করুন।
এই অপশনটি চালু থাকলে আপনার সকল ফাইল এর ফরমাট কী সেটা দেখা যাবে।
শুরুতে যা যা লাগবে-
1. Desktop এ একটি New Folder তৈরী করে সেটার নাম Web Design দেই।
2. এখন এই ফোল্ডারের ভিতরে একটি New Text Document তৈরী করি।
3. New Text Document টির নাম Index.html দিতে পারি ।
4. এখন একটি কোড এডিটর অনলাইন থেকে ডাউনলোড করি এবং ইনষ্টল করি।
অনেকগুলো কোড এডিটর সফট্ওয়্যার আছে। আপাতত এখন আমরা Notepad++ সফটওয়্যারটি ডাউনলোড করি।
5. Index.html নামে সেভ করি
6. এখন Webdesign Folder এ গিয়ে দেখা যাবে আগের সেই New Text Document টি যেটা এখন আমাদের কম্পিউটারে থাকা ব্রাউজার এর মত দেখাচ্ছে। এখন এটাকে ব্রাউজারে ওপেন করি। 7.
7. Index.html টির উপরে মাউসের ডানদিকে ক্লিক করে
Edit With Notepad++ লেখাটার উপরে মাউস দিয়ে ডকুমেন্টটি কোড এডিটর সফটও্য়্যার Notepad++ দিয়ে ওপেন করি।
8. এখন সফটওয়্যারটি ওপেন হয়ে গেল ।
9. এবার আমরা এইচটিএমএল এর ব্যাসিক ট্যাগটি লেখা আরম্ভ করবো এবং লেখা শেষে সেভ করবো Ctrl+S দিয়ে এবং ব্রাউজারে গিয়ে ব্রাউজার রিলোড করলেই আমাদের লেখা কোডের আউটপুট ব্রাউজারে শো করবে।
তো এখন চলো এইচটিএমএল এর বেসিক ট্যাগ গুলো লেখা শিখিঃ
নোটপ্যাডে নিচের কোড বা লেখাগুলো লিখি, সেভ করি এবং ব্রাউজারে ওপেন করি।
<html>
<head>
<title> Saifulitpoint.com </title>
</head>
<body>
<h1> My First Heading </h1>
<p> My First Paragraph </p>
</body>
</html>
Output:
এইচটিএমএল ট্যাগ
HTML ট্যাগ কি?
HTML এ প্রোগ্রাম লেখার জন্য <> এবং দুইটা চিহ্ন এবং এর মধ্যে কিছু Pre-defined Word যেমন html, head, title, body ইত্যাদি Keyword ব্যবহার করা হয়। <> বা চিহ্ন এবং এর মাঝে লেখা এক একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন এবং । হল body শুরু ট্যাগ এবং হল body শেষ ট্যাগ।
- এইচটিএমএল ট্যাগ সচরাচর জোড়ায়-জোড়ায় থাকে। যেমন
<p>এবং</p>। - জোড়ার প্রথম ট্যাগকে ওপেনিং ট্যাগ এবং দ্বিতীয় ট্যাগকে ক্লোজিং ট্যাগ বলা হয়।
- ক্লোজিং ট্যাগকে ওপেনিং ট্যাগের মতই লেখা হয়, ক্লোজিং ট্যাগের ক্ষেত্রে ট্যাগের নামের আগে শুধুমাত্র একটি ফরওয়ার্ড স্ল্যাশ(/) দিতে হয়।
বহুল ব্যবহ্নত ট্যাগ সমুহ
| |||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
HTML Element কি?
HTML এ যেকোন শুরু ও শেষ tag এবং মাঝের অংশকে সংশ্লিষ্ট tag এর Element বলা হয়। যেমন <h1> This is an example of element.</h1> । এখানে <h1> হেডার 1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে This is an example of element. লেখা হয়েছে, তাই This is an example of element.হচ্ছে h1 tag এর element । কিছু কিছু ট্যাগের কোন Element থাকে না যেমন <br /> <img /> ইত্যাদি।
সাধারণতঃ যে সকল ট্যাগের শেষ ট্যাগ থাকে না তাদের ইলিমেন্টও থাকে না। এ ধরণের শুরু ট্যাগের মধ্যেই / চিহ্নটি অন্তর্ভূক্ত থাকে, এবং এর আগে একটা স্পেস দিতে হয়। আর এগুলোকে বলা হয় HTML empty Element
HTML Attributes কি?
HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য শুরু tag এর মধ্যে কিছু pre-defined কথাকে HTML Attribute বলে। মূলত HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য Attributes ব্যবহার করা হয়। যেমন < h1 style=”color: red”> Hello এখানে color=”red” অংশটি হল h1 ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ This is a paragraph. লেখাটির color কেমন হবে।
এট্রিবিউট | বিবরণ |
alt= “......” | এটি ছবির জন্য ব্যবহৃত হয়। ছবি প্রদর্শিত না হলে বিকল্প হিসাবে এই এট্রিবিউট এর ভেলু বা টেক্সটি ব্রাউজারে প্রদর্শিত হয়। |
href= “......” | এটি একটি লিঙ্কের URL সেট করতে ব্যবহার করা হয়। |
src= “......” | একটি ইমেজ বা স্ক্রিপ্ট এর সোর্স সেট করতে ব্যবহার হয়। |
style= “......” | যে কোন এলিমেন্টকে ইনলাইন স্টাইল করার জন্য এটি ব্যবহার করা হয়। |
এইচটিএমএল বিন্যাস (HTML Formatting)
Formatting শব্দের বাংলা অর্থ বিন্যাস বা সজ্জা। এইচটিএমএল ফর্মেটিং বলতে সাধারণত টেক্সট ফর্মেটিং বুঝানো হয়। আমরা সবাই কম বেশি Microsoft Word এর সাথে পরিচিত। জীবনে কোন না কোন সময় আমরা Microsoft Word নিয়ে কাজ করেছি বা মাইক্রোসপ্টের এই সফটওয়্যার নিয়েই আমরা আমাদের কম্পিউটার কীবোর্ড চালাতে শিখেছি। এই Microsoft Word এ টেক্সট নিয়ে আমরা অনেক কিছু করেছি। যেমনঃ- কোন একটি টেক্সটকে মোটা করা, একটু বাঁকা করা, টেক্সটের নিচে আন্ডার লাইন দেওয়া, টেক্সটকে মনের মত করে ডিজাইন করা, ছোট করা, বড় করা, অথবা বিশেষ কোন টেক্সটকে হাল্কা রঙ দিয়ে চিহ্নিত করা, খেলার ছলে এরকম অনেক কিছুই আমরা করেছি। সেখানে যা করেছি এইচটিএমএলে কোডের মাধ্যমে সেই একই কাজ করার নাম HTML Text Formatting.
যেহেতু ফর্মেটিং বলতে সাজ সজ্জাকে বুঝানো হয়, সেহেতু সিএসএস দিয়েও এমন ফর্মেটিং করা যায়। তবে, এই কাজ গুলি খুব ছোট কিন্তু বহুল ব্যবহৃত। এগুলিকে সিএসএস দিয়ে করতে গেলে হয়তো ইনলাইন ষ্টাইল করতে হবে অথবা ক্লাস বা আইডি বানিয়ে ষ্টাইলশিটে কোড করে ডিজাইন করতে হবে। এতে করে কোড এবং সময় দুটো'ই বেশি হয়ে যায়। কিন্তু এইচটিএমএলে মাত্র ছোট্ট একটি ট্য্যাগের মাধ্যমে এটা অতি সহজে হয়ে যায় বলেই এই ট্যাগ গুলোকে ফর্মেটিং ট্যাগ বলা হয়। এসব ট্যাগের মাধ্যমে শুধুমাত্র টেক্সটকেই ফর্মেটিং করা হয়। তাই এর নাম টেক্সট ফর্মেটিং। নিচে এইচটিএমএল ফর্মেটিং ট্যাগ ও ব্যবহার টেবিল আকারে দেখালাম-
ট্যাগ সমুহ | বর্ণনা |
<b>....</b> | এটা দ্বারা টেক্সটকে মোটা বা গাঢ় করা হয় এটি বোল্ড ট্যাগ। |
<del>....</del> | টেক্সটকে মুচে দেওয়া বা কেটে দেওয়া হয়েছে বুঝানোর জন্য ব্যবহৃত হয়। |
<em>....</em> | Emphasized বা গুরুত্বপূর্ণ টেক্সট বুঝায়। যা দেখতে বাকা দেখায় |
<i>....</i> | হাল্কা বাঁকা ইটালিক টেক্সট এর জন্য ব্যবহার করা হয়। |
<mark>....</mark> | কোন টেক্সটকে বিশেষ ভাবে চিহ্নিত করার জন্য হাইলাইট করে রাখার জন্য এই ট্যাগ ব্যবহার করা হয়। |
বিশেষ বা গুরুত্বপূর্ণ টেক্সট বুঝানোর জন্য ব্যবহার করা হয়। এটিও বোল্ড ট্যাগ। | |
Subscript বা নিম্নে লিখনযুক্ত টেক্সট বুঝানো হয়। Example: H2O | |
Superscript বা শীর্ষে লিখনযুক্ত টেক্সট বুঝানো হয়। যেমনঃ a2 |
Post a Comment