সাধারন তথ্য
HTML (HyperText Markup Language) হল একটি মার্কআপ ভাষা যা ওয়েব পেজ এবং ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। HTML ডকুমেন্ট গুলোতে বিভিন্ন ট্যাগ (tags) ব্যবহার করে গঠন করা হয়, যা ব্রাউজারকে নির্দেশ করে কীভাবে কনটেন্ট প্রদর্শন করতে হবে।
HTML কিভাবে কাজ করে?
HTML ফাইলগুলি সাধারণত .html এক্সটেনশনে সংরক্ষণ করা হয় এবং ব্রাউজার দ্বারা রেন্ডার করা হয়। যখন কোনো ব্যবহারকারী একটি ওয়েব পেজে প্রবেশ করেন, তখন ব্রাউজার সেই পেজের HTML ফাইলটি সার্ভার থেকে ডাউনলোড করে এবং সেই ফাইল অনুযায়ী পেজের গঠন তৈরি করে। HTML মূলত গঠনমূলক (structure) নির্দেশনা প্রদান করে, যেমনঃ
- Heading: শিরোনাম (Title) নির্ধারণ করতে ব্যবহার করা হয়
<h1>,<h2>, ইত্যাদি ট্যাগ। - Paragraph: প্যারাগ্রাফ তৈরি করতে
<p>ট্যাগ ব্যবহার করা হয়। - Link: অন্য পেজ বা রিসোর্সে লিঙ্ক তৈরি করতে
<a>(anchor) ট্যাগ ব্যবহার করা হয়। - Image: ইমেজ যুক্ত করতে
<img>ট্যাগ ব্যবহার করা হয়। - List: লিস্ট তৈরি করতে
<ul>(unordered list) বা<ol>(ordered list) ট্যাগ ব্যবহার করা হয়।
HTML ট্যাগের সাধারণ গঠন:
HTML ট্যাগগুলি একটি opening tag এবং closing tag দিয়ে গঠিত হয়। যেমন:
<p>এটি একটি প্যারাগ্রাফ।</p>
HTML এর ভিত্তিমূলক স্ট্রাকচার:
HTML ডকুমেন্টের একটি সাধারণ স্ট্রাকচার এরকম হতে পারে:
01. <!DOCTYPE html>02.<html>03. <head>04. <!--- JS/CSS file is to be added here -->05. <title>আমার প্রথম ওয়েব পেজ</title>06. </head>07. <body>08. <h1>স্বাগতম!</h1>09. <p>এটি একটি উদাহরণমূলক প্যারাগ্রাফ।</p>10. <a href="https://www.smhamiri.com/">এখানে ক্লিক করুন</a>11. 12. </body>13.14.</html>যেভাবে HTML কাজ করে
- ব্রাউজার HTML পড়ে: যখন কোনো ব্রাউজার (যেমনঃ Chrome, Firefox) HTML ফাইল পড়ে, এটি ট্যাগগুলোর মাধ্যমে নির্দেশনা পায় কীভাবে কন্টেন্ট প্রদর্শন করতে হবে।
- CSS/JavaScript যুক্ত করে: HTML এর সাথে CSS (Cascading Style Sheets) এবং JavaScript ব্যবহার করে ওয়েব পেজের স্টাইল ও কার্যকারিতা বাড়ানো যায়।
- রেন্ডারিং: ব্রাউজার HTML অনুযায়ী পেজটিকে ভিজুয়াল ফরম্যাটে রেন্ডার করে।
কিছু সাধারন তথ্য
- এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper Text Markup Language. এটা কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়, মার্কআপ ল্যাংগুয়েজ।
- ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
- এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন। এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন
- তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল। সবশেষে পিএইচপি + ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।
যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)
নোটপ্যাড। Notepad open করে তৈরী হোন। যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Sublime text, Netbeans বা Dreamweaver. আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন। উইন্ডোজে বাই ডিফল্ট যে নোটপ্যাড টি থাকে সেটা দিয়ে কোড করে কোন মজা বা সুবিধা কিছুই পাবেননা। তবে এরকমই একটা হালকা নোটপ্যাড আছে নাম "Notepad++" এখানে প্রচুর সুবিধা পাবেন এবং এটা প্রফেশনাল কোড লেখার জন্য নি:সন্দেহে ব্যবহার করতে পারেন। এই যে ডাউনলোড লিংক
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
- এইচটিএমএল এলিমেন্ট (Element)
- এইচটিএমএল ট্যাগ (Tag)
- এইচটিএমএল অ্যাট্রিবিউট (Attribute)
এ শব্দগুলি সবসময় আসবে এবং এগুলির পরিষ্কার ধারনা থাকতে হবে।
HTML, XHTML এবং HTML5
HTML এর সর্বশেষ ভার্সন হচ্ছে HTML5। এইচটিএমএল ৫ এ এক্সএইচটিএমএল সকল নিয়ম অনুসরন করা হয়। কাজেই HTML 5 শিখলেই আগের ভার্সনগুলি অটোমেটিক শেখা হয়ে যাবে। তাই আমরাও ঐভাবে টিউটোরিয়ালগুলি দেব।
* W3C নামের এই সংস্থাটি HTML তৈরী এবং ম্যানেজমেন্ট করে।
* HTML 5 মুলত HTML ই তবে এখানে নতুন নতুন অনেক ট্যাগ এবং নিয়ম যুক্ত হয়েছে যেগুলির বর্ননা আমরা পরবর্তী টিউটোরিয়ালগুলিতে প্রয়োজন অনুসারে দিয়ে দেব।
এইচটিএমএল: ডকুমেন্ট DOC type
নিচে একটা সাধারন এইচটিএমএল ডকুমেন্ট দেয়া হল এবং এর প্রতিটি অংশের বিস্তারিত বর্ননা করা হচ্ছে
01.<!DOCTYPE html>02.<html>03.<head>04.<!--- JS/CSS file is to be added here -->05. 06.</head>07.<body>08. 09.<h1>SMH Amiri demo heading</h1>10. 11.<p>demo content goes here.</p>12. 13.</body>14.</html>প্রথম লাইনটি <!DOCTYPE html> হচ্ছে ডকুমেন্টটি কি ধরনের তা বোঝানোর (ব্রাউজারকে) জন্য দেয়া হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়। যেমন উপরের ডকুমেন্ট টি এইচটিএমএল ৫ এর একটি ডকুমেন্ট । এরুপ যদি এটা XHTML এর ১.০ ভার্সন হতো তাহলে ডিক্লেয়ারেশনটি দিতে হতো এভাবে
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"2."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">এটা হচ্ছে ট্রানজিশনাল অর্থ্যাৎ এইচটিএমএল এর সকল কিছু এই্ ডকুমেন্টে লেখা যাবে সাথে সাথে deprecated এলিমেন্টগুলিও ব্যবহার করা যাবে যেমন font। ফ্রেমসেট ব্যবহার করা যাবেনা।
যাইহোক এভাবে "xhtml1-transitional.dtd" এর জায়গায় "xhtml1-strict.dtd" দিলে deprecated এলিমেন্টগুলি ব্যবহার করা যাবেনা।
** এখন HTML5 আসার পর এগুলি আর সাধারনত ব্যবহার করেনা। HTML 5 এর ডিক্লেয়ারেশন দেয়া হয়।
1.<!DOCTYPE html> যাইহোক এটা খুব গুরত্বপূর্ন কিছু নয়। কপি করে (X)HTML ডকুমেন্ট লেখার শুরুতে পেস্ট করে দিলেই চলবে। তবে দিতে হবে কেননা না দিলে কিছু কিছূ ব্রাউজারে ঠিকমত আউটপুট আসেনা যেমন ইন্টারন্টে এক্সপ্লোরার (IE)।
বর্তমানে XHTML এই বেশি ব্যবহৃত হচ্ছে তাই এই সাইটেও HTML এর মুরব্বি XHTML এরই টিউটোলিয়াল দেয়া হচ্ছে, যদিও উচ্চারন করছি HTML আসলে সব এইচটিএমএল এর টিউটোলিয়ালগুলিতে আমরা XHTML এরই নিয়ম অনুসরন করেছি। আর একটা দরকারী কথা, HTML এর সর্বশেষ ভার্সন HTML 5 আসার পর এখনতো এটাই বেশি ব্যবহার করা হচ্ছে বিশ্বের ওয়েবজুড়ে।
এইচটিএমএল: এলিমেন্ট - Element
এর আগে এইচটিএমএল ট্যাগ নিয়ে আলোচনা করলাম। একটা start tag (যেমন <div>) এবং end tag (যেমন </div>) এর মাঝে যা থাকে তা সহ পুরোটি একটা এলিমেন্ট। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা একাধিক এলিমেন্ট থাকতে পারে বা থাকে (এটাকে nested এলিমেন্ট বলে)। নিচের উদাহরনটি দেখুন
1.<!DOCTYPE html>2.<html>3.<head> </head>4.<body>5.<h1>SMH Amiri demo heading</h1>6.<p>demo content goes here.</p>7.</body>8.</html>এখানে <html> </html> এর ভিতর যত কিছু আছে সব নিয়ে এটা একটা html এলিমেন্ট এরুপ body একটা এলিমেন্ট। একইভাবে বাকিগুলিও এক একটি এলিমেন্ট।
এলিমেন্টের ভিতর এলিমেন্ট থাকতে পারে আবার যেমন <h1></h1> এর ভিতর কোন এলিমেন্ট নেই, যে লেখাটি আছে সেটি হচ্ছে এর কনটেন্ট। তাই <h1></h1> এর ভিতরের লেখাটিসহ এটা h1 এলিমেন্ট।
এই উদাহরনটি DOC type এও দেয়া আছে, আমাদের অনলাইন এডিটরে কোডটি পেস্ট করে দেখতে পারেন বা নোটপ্যাডে লিখে .html এক্সটেনশন (যেমন index.html বা test.html) দিয়ে সেভ করে ব্রাউজারে খুলুন, এটিই হচ্ছে আউটপুট, একটা বেসিক এইচটিএমএল ডকুমেন্ট বা একটা ওয়েব পেজ।
এই উহরনটিতে মোট ৫টি এলিমেন্ট আছে html এলিমেন্ট, head এলিমেন্ট, body, h1 এবং p এলিমেন্ট।
* ট্যাগের মত এখানে html এলিমেন্টের চাইল্ড এলিমেন্ট হচ্ছে বাকি সবগুলি এলিমেন্ট। আবার body হচ্ছে প্যারেন্ট এবং এর চাইল্ড হচ্ছে h1 ও p এলিমেন্ট। যে এলিমেন্টের ভিতর অন্য এলিমেন্ট থাকে সেটা হচ্ছে প্যারেন্ট এবং ভিতরের গুলি চাইল্ড এলিমেন্ট।
* ট্যাগগুলির শব্দগুলি ছোটহাতের অক্ষরে লিখতে হবে, যেমন <body> এভাবে না দিয়ে <BODY> এভাবে দিলে এটা একটা গ্রামাটিকাল ভুল। সাথে সাথে end tag টিও দিতে হবে নাহলে একই ভুল হবে।
** যত এলিমেন্ট লেখি না কেন সব body এলিমেন্টের ভিতরই লিখতে হবে, বাকি এলিমেন্ট যেমন head ইত্যাদির ভিতর শুধু নির্দিষ্ট কিছু এলিমেন্ট লেখা যায়। ব্রাউজারে শুধু ঐটুকুরই আউটপুট আসে যেটা body এলিমেন্টের ভিতর থাকে।
Notepad++ এ বাংলা লিখবেন কিভাবে??
++++++++++++++++++++++++++++++
খুব সহজ। কোড লেখার আগে নোটপ্যাডের "Encoding" মেনু থেকে ইউনিকোড সেটিং সিলেক্ট করে দিতে হবে। তাহলে এবার বাংলা লিখলে ব্রাউজারে ঠিক ঠিক আউটপুট দেখতে পাবেন।
ব্লক লেভেল এবং ইনলাইন এলিমেন্ট
=========================
দুই ধরনের এলিমেন্ট আছে
ব্লকলেভেল এলিমেন্ট : যে এলিমেন্টগুলি বাই ডিফল্ট তার ডানে বামে পুরো জায়গা দখল করে থাকে সেগুলিকে ব্লক লেভেল এলিমেন্ট বলে। অন্যভাবে বলা যায় যে, যে এলিমেন্টগুলি শুরু হয় নতুন লাইনে (যখন ব্রাউজারে প্রদর্শন করবে) সেগুলি ব্লক লেভেল এলিমেন্ট।
div, p, h1, ul, li ইত্যাদি ব্লকলেভেল এলিমেন্ট।
ইনলাইন এলিমেন্ট : যে এলিমেন্টগুলির কারনে নতুন লাইন শুরু হয়না সেগুলি ইনলাইন এলিমেন্ট।
a, i, b, span, strong ইত্যাদি ইনলাইন এলিমেন্ট।
01.<!DOCTYPE html>02.<html>03.<head>04. 05.</head>06.<body>07. 08.<h1>I am a block level element</h1>09. 10.<p>I am block level element too</p>11. 12.<strong>I am inline element</strong>13.<a href="https://www.smhamiri.com/">"a" is a inline element </a>14. 15.</body>16.</html>
![জাভাস্ক্রিপ্ট-৬ [কমেন্ট, অপারেটর]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyb8n_zvJUyWrdYaZlstACeLt5P2QU4AFzxuIhSFoEStv2aKMKiPKY3YhV4sbNlINE6CDRduDEOhcz6aIvrSfbIQUJoaYRFlN74DWmJdp8AHGGBrebktvrCLsw1AEExtqjOT7Ef6ayrOPt2Xu0K5pgUr4CqOt04lImf4bl7kvu5e4UE3NVz0hTLzb0tX7i/s72-w370-c-h277/image.png)
![পাইথন প্রোগ্রামিং ল্যাঙ্গুয়েজ দিয়ে দ্বিঘাত সমীকরণ বের করার জন্য প্রজেক্ট [পাইথন-১৫]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FUX-7-HvI8Q3HM6OHtkr77HOo4IRopsPklC29WEd67doy1ySl8WwSGH2fn6SKlteo3q9b8ivKD7XdE3ZE-L6v1XfCVxFHHjuSooXeo5ZLsy2dHpbTLUuBRzj35Fvfvb7yJE6j6nToNpoEQHX-qJ1Ydiieix555Gwh9EXnzobiUqcog8mfAbdKgR1-JUz/s72-c/image.png)
![এক্সএমএল - XML : ৮ [XML Elements]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisymurbCebTBxApDvlyc-eLtsgysafLxdPpmO87iLj1jba_Lqf8hmCQKIE8gZKDJGF7kxbtp5zZdkwwudi4-xcNbcbgRiSrKcfEngGTMdySQn8O36QawRkYewevV3PnWhBCmpYr6ROs-uifpKee8WlfIPcLZ-IDlA1sucBcl7Lfp9wFjp7mAYU4wGlSier/s72-c/image.png)