HTML (এইচ টি এম এল) কনসেপ্ট কোডিংঃ
HTML এর পূর্ণ রূপ Hyper Text Markup
Language । ওয়েব ডেভেলপার বা ডিজাইনার হতে হলে এই ভাষাটি সবার আগে জানা
প্রয়োজন।এইটা কোনো প্রোগ্রামিং ল্যাংগুয়েজ নয় এটা মার্কআপ ল্যাংগুয়েজ।এইটা
শিখলেই পেজ তৈরি করতে পারবেন।আর যদি সিএসএস(CSS) শিখেন তবে আপনি সাইট টা সুন্দর
ভাবে ডিজাইন করতে পারবেন।আর অন্যান্য কিছু যেমন জাভাস্ক্রিপ্ট, পিএইচপি,
ডেটাবেস শিখলে আপনি পূর্ণাঙ্গ ডাটাবেস ভিত্তিক ওয়েব সাইট বানাতে পারবেন।
HTML, XHTML এবং HTML5 কিঃ
আমরা তো HTML চিনলাম কিন্তু আমাদের মনে আবার প্রশ্ন জাগে HTML5 টা আবার
কি?
আমরা তো ভার্সন চিনি ,যেমন আমরা বিভিন্ন এপস এর ভার্সন সম্পর্কে জানি, ঠিক
তেমনি HTML যখন তৈরি হয় তখন অনেক সময় ভুল থাকতে পারে এবং পরে আরো কিছু
যুক্ত করা প্রয়োজন হয় তখন আপডেট করা হয় এবং ভার্সন চেন্জ হয়।
তাই কোনো চিন্তা না করে আমরা যদি শুধুু HTML5 শিখি তবেই HTML এর সকল ভার্সন এর
ভাষা আমরা শিখে ফেলতে পারবো।
W3C নামের একটা কম্পানি এই HTML তৈরি এবং ম্যানেজম্যান্ট করে থাকে।
HTML শিখতে কি কি লাগবেঃ
আমাদের এই কোডিং লেখার জন্য দরকার হবে যেকোনো নোটপ্যাড।তারপরও আমরা প্রোফেশনাল
ভাবে কোডিং করার জন্য ব্যবহার করবো NOTEPAD++ এখানে কোডিং করার অনেক সুবিধা
পাবেন।
এখান থেকে ডাউনলোড করুন-
CLICK HERE
আর মোবাইল ইউজাররা ইউজ করতে পারেন anWriter Pro HTML editor
এবার আপনাদের প্রয়োজন হবে একটি ব্রাউজার যা আপনারা প্রায় ব্যবহার করেন।আমি
রিকমান্ড করবো গুগল ক্রোম ইউজ করা জন্য।
কোড সেভিং এন্ড রানিংঃ
আমরা এবার দেখবো কিভাবে আমাদের লেখা কোড কিভাবে সেভ করবো এবং ব্রাউজারে রান
করবো।
আপনার ডেস্কটপ থেকে মাউসের রাইট বাটন ক্লিক করে NEW থেকে Text Document নিবেন।
তারপর এমন আসলে আপনি এই পুরো লেখা কেটে দিয়ে আপনি লিখবেন index.html
এবার এন্টার বাটনে চাপ দিন।
এবার Yes করে দিন।
এবার আপনি দেখতে পারবেন আপনার পিসি এর ডিফল্ট সেট করা ব্রাউজারের লোগো
চলে আসছে।
এবার এই ফাইল সিলেক্ট করে মাউসের রাইট বাটন ক্লিক করলে আপনার ইনস্টল করা
Notepad ++ এর মেনু দেখতে পারবেন, এবার এটাই ক্লিক করুন।
এবার আপনারা দেখতে পারবেন আমাদের নোটপ্যাড ওপেন হয়ে গেছে।
ট্যাগ(HTML Tag)
আমরা যদি যে কোনো এইচটিএমএল দেখি তাতে ট্যাগ থাকবেই। ট্যাগ গুলো এমন,
<html>,<head>,<body>
(<) Less then আর (>) Greater than এর কোনো ওয়ার্ড থাকলেই তা ট্যাগ
হিসেবে ধরতে পারি। এই দুই চিন্হ দিয়ে যে ডকুমেন্ট আমরা লেখি তাই HTML
ট্যাগ।HTML এর Tag অনেক। যেমন আমরা প্যারাগ্রাফ লিখতে <p></p>
ট্যাগ ইউজ করি।
<html>
<head>
<title>HTML Tag tutorial in WikiJana</title>
</head>
<body>
<h1>WikiJana demo heading</h1>
<p>demo content goes here.</p>
</body>
</html>
শুরু ট্যাগ কে Opening tag আর শেষ ট্যাগকে Closing Tag বলে।Open Tag আর Close tag
প্রায় একই তবে ক্লোজ ট্যাগ এ ব্যকস্লাস(/) চিন্হ থাকে।
কিছু ট্যাগ আছে যার ক্লোজ ট্যাগ নাই। যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ।
<img src="/path/go/image.jpg" alt="an_image"/>
<input type="submit" value="Save"/>
খেয়াল করুন <img এভাবে শেষ/> এখানে input ট্যাগ টাও একই রকম ক্লোজ করা
হয়েছে।
এই গুলো কে বলা যেতে পারে সিঙ্গেল ক্লোজ ট্যাগ।
এট্রিবিউট( Attribute )
HTML এর প্রতিটি এলিমেন্ট ব্রাউজার এক একটা নির্দেশ দেয় যা তার ভিতর থাাকা
কনেন্টে কে কিভাবে প্রদর্শন করবে।h1 এলিমেন্ট যখন ব্রাউজারকে বড় ফন্টের শিরোনাম
প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই শিরোনামটির রং কি হবে তাও বলে দিতে
পারেন। যেমন,
<h1 style="color:yellow;">HTML Attribute tutorial</h1>
Title এট্রিবিউট কোন এলিমেন্টের দিলে এটা দিয়ে টুলটিপ আকারে তথ্য প্রদর্শন করা
যায় যেমন,
<h2 title="Hello WikiJana">Practice in your Life</h2>
এলিমেন্ট ( Element )
Start tag (যেমন <div>) এবং End tag (যেমন </div>) এর মাঝে
যা থাকে তা সহ পুরোটি একটা এলিমেন্ট। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা
একাধিক এলিমেন্ট থাকতে পারে বা থাকে।
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h1>WikiJana demo heading</h1>
<p>demo content goes here.</p>
</body>
</html>
হেডিং (Heading)
শিরোনাম বা হেডিং আকারে বড় ফন্টের লেখা ব্রাউজারে প্রদর্শনের জন্য
এইচটিএমএল এ রয়েছে ৬ ধরনের হেডিং ট্যাগ। এর মধ্যে সবচেয়ে বড় হচ্ছে
<h1></h1> এভাবে <h2></h2>, <h3></h3>
যেমন,
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
প্যারাগ্রাফ (Paragraphs)
ওয়েব পেজে কোন লেখা প্রকাশ করতে চাইলে p ট্যাগ ব্যবহার করা হয়। <p> হচ্ছে
এর start tag এবং </p> হচ্ছে এর end tag. এই start এবং end ট্যাগের ভিতর
যেকোন লেখা দিতে পারেন। এই লেখা প্যারাগ্রাফ আকারে ব্রাউজারে দেখাবে।
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
লিংকিং বিটুইন ২ পেজ
আমরা যখন ইনডেক্স পেজটা ডিজাইন করি তখন আমাদের প্রয়োজন হয় ওই পেজ থেকে অন্য পেজে যাওয়ার । আমারা যখন ব্রাউজিং করি তখন কিন্তু আমরা এটাই করি , এক এক ক্লিক করে করে ্র্রব্রাউজিং করেই যায়।এই লিংকিং করার জন্য আমাদের প্রয়োজন সাধারন একটা কোড নিচে কোডটা দেওয়া হলো।
<a href="/go/2ndpage.html">2nd Page</a>
এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে
অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর
পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই
আর্টিকেলটি WikiJana.Com সাইটের সম্পদ
তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট
কপিরাইটের অধিনে চলে যেতে পারে।