আমরা এ অধ্যায়ে HTML Attribute সম্পর্কে আলোচনা করব। Attribute মূলত HTML element সম্পর্কে অতিরিক্ত তথ্য (information) প্রদান করে। Attribute সর্বদা start tag এর মাধ্যমে চিহ্নিত হয়। HTML Document এ Attribute প্রকাশ হয় এভাবে name= “value”। নিম্নে HTML এ ব্যবহৃত কিছু Attributes এর list তুলে ধরা হল-
Attribute(বৈশিষ্ট্য)
Description(বর্ণনা)
Alt
Image এর alternative text কে চিহ্নিত করে এই Attribute।
Disabled
কোন input element কে নিষ্ক্রিয়(disable)করতে একে ব্যবহার করা হয়।
Herf
কোন link এর web address কে চিহ্নিত করে।
Id
এর দ্বারা element এর identification name বোঝায়।তবে প্রতিটি web page এর id একই রকম হওয়া যাবে না।
Src
Image এর source URL(web address)কে উল্লেখ করে।
Style
Element এর style(শৈলি)কে তুলে ধরা হয় এর মাধ্যমে।
Title
Element এর অতিরিক্ত তথ্য নির্দেশ করতে একে ব্যবহার করা হয়।যেমন-
<p title=” salearningschool.com সম্পর্কে ”>
Salearningschool.com একটি web developer site । এটি web developing সম্পর্কে বিভিন্ন ধরণের Tutorial প্রদান করে।
</p>
এই উদাহরণে <p> element এর attribute হল Title এবং এর value হল salearningschool.com।
Value
এর দ্বারা Document এ অবস্থিত element এর বিষয়বস্তুকে নির্দেশ করা হয়।
Width, Height
Document এ ব্যবহৃত image এর size কে এই attribute দ্বারা প্রকাশ করা হয়।
Lang
Element এর language (ভাষা) কে উল্লেখ করা হয় এর মাধ্যমে।
Translate
যদি কিনা কোন element এর বিষয়বস্তু translate করার প্রয়োজন হয় তখন এই attribute ব্যবহৃত হয়।
Class
কোন element এর এক বা একাধিক css class কে প্রকাশ করা হয় এর দ্বারা।
Hidden
কোন element নেই অর্থে এটি ব্যবহৃত হয়য়।
Spell check
এর দ্বারা কোন element এর বানান ও ব্যকরণ ঠিক আছে কিনা পরীক্ষা করা হয়।
<!DOCTYPE html> লেখার মধ্য দিয়ে সব ধরণের HTML document শুরু হয়।<html> tag লেখার মাধ্যমে শুরু এবং </html> tag লেখার মাধ্যমে শেষ হয়।<body> এবং </body> tag এর মাঝখানে HTML Document এর দৃশ্যমান অংশটুকু অবস্থান করে।
উদাহরণস্বরূপঃ
<!DOCTYPE html>
<html>
<body>
<h1> আমার প্রথম শিরোনাম </h1>
<p> আমার প্রথম অনুচ্ছেদ <p>
</body>
<html>
HTML Headings(শিরোনাম):
<h1> থেকে <h6> tag দিয়ে HTML এর Heading কে বিশেষায়িত করা হয়।
উদাহরণঃ
<h1> এই হল একটি শিরোনাম </h1>
<h2> এই হল একটি শিরোনাম </h2>
<h3> এই হল একটি শিরোনাম </h3>
HTML Paragraphs(অনুচ্ছেদ):
<p> tag এর মধ্য দিয়ে HTML এর Paragraph কে তুলে ধরা হয়।
এখানে (herf )attribute টি ব্যবহৃত হয়েছে link Address কে চিহ্নিত করার জন্য।এই attribute গুলো HTML elements এর অতিরিক্ত তথ্য সরবারহ করার জন্য ব্যবহৃত হয়।
HTML Images(চিত্র):
<img> tag এর মাধ্যমে HTML image কে প্রকাশ করা হয়।যার source file হিসেবে (src), alternative text হিসেবে (alt) এবং size প্রকাশ করতে (width এবং height) attribute ব্যবহার করা হয়।
Paste the translated text here এইচটিএমএল অনুচ্ছেদ
________________________________________
এইচটিএমএল তথ্য গুলো অনুচ্ছেদ আকারে দেয়া হয়
________________________________________
এইচটিএমএল অনুচ্ছেদ
এইচটিএমএল <p> উপাদান গুলকে অনুচ্ছেদ বলে ।
উদাহরন
<p> এটা একটা অনুচ্ছেদ </p>
<p> এটা আরেকটা অনুচ্ছেদ </p>
ব্রাউজার সয়ংক্রিয় ভাবে শূন্য যাইগা যোগ করে দিবে অনুচ্ছেদ এর আগে ও পরেএইচটিএমএল দেখুন
আপনি নিশ্চিত হতে পারবেন না কিভাবে এইচটিএমএল অনুচ্ছেদ দেখান হবে ।
ছোট অথবা বড় পর্দা এবং আকার পরিবর্তন করা উইন্ডোজ গুলো আলাদা আলাদা দেখাবে ।
এইচটিএমএল দিয়ে আপনি বাইরের জিনিস পরিবর্তন করতে পারবেন না, অথবা অতিরিক্ত ফাকা যাইগা অথবা বেশি সারি রেখে এইচটিএমএল সুত্র এর মাধ্যমে ।
আপনার ব্রাউজার টি পেজ দেখানোর সময় অতিরিক্ত ফাকা জাইগা অথবা সারি মুছে ফেলবে ।
যেকোনো ফাকা জাইগা অথবা ফাকা সারি একটা ফাকা জাইগা হিসেবে ধরা হবে ।
উদাহরন
<p>
এই অনুচ্ছেদটাতে অনেক ফাকা জাইগা আছে কিন্তু ব্রাউজার সেটা গণ্য করবে না
</p>
<p>
এই অনুচ্ছেদটাতে অনেক ফাকা জাইগা আছে কিন্তু ব্রাউজার সেটা গণ্য করবে না
________________________________________
কখনোই শেষ এ ট্যাগ যুক্ত করতে ভুলবেন না ।
অধিকাংশ ব্রাউজারই এইচটিএমএল সঠিকভাবে দেখাবে যদিও আপনি শেষে ট্যাগ যুক্ত করতে ভুলে গিয়ে থাকেন ।
উদাহরন
<p> এটি একটি উদাহরন
<p> এটা আরেকটা উদাহরনTry it Yourself »
উদাহরন গুলো মোটামুটি সবগুল ব্রাউজার এই কাজ করবে কিন্তু এর উপর নির্ভরশীল হওয়া যাবে না ।
শেষে ট্যাগ যুক্ত করতে ভুলে গেলে অনাকাঙ্ক্ষিত ভুল ফলাফল দেখাবে ।
এইচটিএমএল এর উন্নত ভার্সন গুলো যেমন একসএইচটিএমএল আপনাকে শেষে ট্যাগ যুক্ত না করা গ্রহন করবে না ।
এইচটিএমএল লাইন ভাঙা
এইচটিএমএল <br> গুলকে লাইন ভাঙা বলে ।
<br> ব্যাবহার করুন যদি আপনি লাইন ভাঙতে চান নতুন অনুচ্ছেদ শুরু না করেই ।
উদাহরন
<p>This is<br>a para<br>graph with line breaks</p>
নিজে চেষ্টা করুণ
<br> এই উপাদানটি এইচটিএমএল শূন্য উপাদান । এখানে কোন ট্যাগ নেই ।
________________________________________
কবিতার সমস্যা
উদাহরন
<p> এই কবিতাটি এক সারিতে দেখাবে </p>
<p>
বনি সাগরে শুয়ে থাকে
বনি নদিতে শুয়ে থাকে
বনি সাগরে শুয়ে থাকে
ওহ বনিকে আমার কাছে এনে দাও
</p>
নিজে চেষ্টা করুন
________________________________________
এইচটিএমএল <pre> উপাত্ত
এইচটিএমএল <pre> উপাত্ত গুলো আগে থেকে ঠিক করা লেখা বোঝায় যেখানে সঠিক ফাকা যাইগা ও সারি আছে ।
যে কোন কিছু দেখাতে হলে , সঠিক ফাকা যাইগা ও লাইন ভাঙ্গার আপনাকে লেখাটিকে মুড়ে ফেলতে হবে <pre> ।
উদাহরন
<p> এটা কবিতার মত দেখাবে </p>
<pre>
বনি সাগরে শুয়ে থাকে
বনি নদিতে শুয়ে থাকে
বনি সাগরে শুয়ে থাকে
ওহ বনিকে আমার কাছে এনে দাও
</pre> নিজে চেষ্টা করুন
________________________________________
আপনার অভিজ্ঞতা থেকে যাচাই করুন
অভিজ্ঞতা ১ অভিজ্ঞতা ২ অভিজ্ঞতা ৩
________________________________________
এইচটিএমএল ট্যাগ এর সুত্র
W3Schools' ট্যাগ সুত্র এইচটিএমএল নিয়ে অতিরিক্ত তথ্য আরোপ করে
ট্যাগ বর্ণনা
<p>
অনুচ্ছেদ কে বোঝায়
<br>
একটি লাইন ভাঙা বোঝায়
<pre>
আগে থেকে করা লেখা বোঝায়
Paste the translated text here এইচটিএমএল এর ভিত্তি এর উদাহরন
ভয় পাবার কারন নেই যদি এই উদাহরন গুলো আপনি না শিখে থাকেন । আপনি পরবর্তী অধ্যায় এ শিখতে পারবেন ।
________________________________________
এইচটিএমএল উপাত্ত
সকল এইচটিএমএল দলিল একটি ঘোষণা দিয়ে শুরু হবে <!DOCTYPE html>.
এইচটিএমএল দলিল নিজে নিজেই এটা দিয়ে শুরু হয় <html> এবং শেষ হয় </html>.
এইচটিএমএল এর দৃশ্যমান অংশ গুলো <body> and </body> এর মধ্যে হয় ।
উদাহরন
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Try it Yourself »
________________________________________
এইচটিএমএল শিরনাম
এইচটিএমএল শিরোনাম <h1> থেকে <h6> পর্যন্ত যুক্ত করে সংজ্ঞায়িত করা হয় ।
উদাহরন
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Try it Yourself »
________________________________________
এইচটিএমএল অনুচ্ছেদ
HTML অনুচ্ছেদ এভাবে দেখান হয় <p> ।
উদাহরন
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Try it Yourself »
________________________________________
এইচটিএমএল লিংক
এইচটিএমএল লিংক গুলো এভাবে দেখান হয় <a>
উদাহরন
<a href="http://bangla.salearningschool.com">This is a link</a>
Try it Yourself »
লিংক ঠিকানা টি এভাবে আরোপ করা হয় href ।
এইচটিএমএল এর তথ্যগুলো অতিরিক্ত তথ্য দেবার জন্য ব্যাবহার করা হয় ।
________________________________________
এইচটিএমএল ছবি
এইচটিএমএল ছবি গুলো এভাবে যুক্ত করে দেখান হয় <img>
উৎস ফাইল গুলো (src), বিকল্প লেখা (alt), এবং আকার (লম্বা এবং আড়াআড়ি) এভাবে আরোপ করা হয়
উদাহরন
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Paste the translated text here প্রথম পেইজঃ
এইচটিএমএল কি?
উওর: এইচটিএমএল ডকুমেন্ট (ওয়েব পেজ) বর্ণনা জন্য একটি মার্কআপ ভাষা.
এইচটিএমএল ল্যাঙ্গুয়েজ অনেক গুলো টেক্সট এর মার্কআপ করা।
কিছু মার্কআপ ট্যাগ এর সমন্বয়ে এইচটিএমএল ট্যাগ গুলো গঠিত।
এইচটিএমএল ডকুমেন্ট এইচটিএমএল ট্যাগ দ্বারা বর্ননা করা হয়।
প্রতিটি এইচটিএমএল ট্যাগ বিভিন্ন ডকুমেন্টের বিষয়বস্তু বর্ণনা করে থাকে।
যেমনঃ
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
এখানে লক্ষ করলে দেখা যে, প্রথমে <html> দিয়ে শুরু হয়েছে এবং শেষে </html> দিয়ে ডকুমেন্ট শেষ করা হয়েছে। এরকম প্রতিটি ট্যাগের শুরু এবং শেষ করতে হবে। এখানে এক একটি ট্যাগের এক এক ধরনের কাজ। যেমনঃ ওয়েবপেজে টাইটেল দিতে <title>Page Title</title> এই ট্যাগটি ব্যবহার করা হয়। <body>………</body> এই ট্যাগটির মাঝে সব রকম ট্যাগ ব্যবহার করা হয়। এই ট্যাগটির নাম বডি ট্যাগ।
যেমনঃ
<title>Page Title</title>
উপরের এটি একটি এইচটিএমএল ট্যাগ। যা দ্বারা আপনার এইচটিএমএল ডকুমেন্ট এর টাইটেল নির্দেশ করে। এটিকে টাইটেল ট্যাগ বলে। এমন অনেক এইচটিএমএল ট্যাগ রয়েছে।
যেমনঃ
<head>
<title>Page Title</title>
</head>
এখানে দুটি ট্যাগ ব্যবহার করা হয়েছে। একটি হেড ট্যাগ অন্যটি টাইটেল ট্যাগ।
<h1>My First Heading</h1>
h1, h2, h3, h4, h5, h6 এমন ছয়টি ট্যাগ আছে। যেগুলো দিয়ে লেখাকে বড় করা হয়ে থাকে। সবচেয়ে বড় h1 ট্যাগ। এবং সবচেয়ে ছোট h6 ট্যাগ।
<p>My first paragraph.</p>
এখানে যে ট্যাগটি ব্যবহার করা হয়েছে তাকে বলা হয় পি ট্যাগ। এর কাজ হল আপনার লেখাকে প্যারা করে সাজানো।
এখানে একটি কথা অবশ্যই মনে রাখতে হবে যে, প্রতিটি ট্যাগের শুরু এবং শেষ করতে হবে। এছাড়াও অন্য একটি ট্যাগ আছে যাকে ওপেন ট্যাগ বলে।
যেমনঃ <link />, <img />, <hr /> ইত্যাদি। এগুলোকে ওপেন ট্যাগ বলে।
দ্বিতীয় পেইজঃ
আপনি যে কোন টেক্স এডিটর ব্যবহার করতে পারেন। এক্ষেত্রে বিভিন্ন এডিটর ব্যবহার করা হয়ে থাকে। যেমনঃ Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor ইত্যাদি। এসব সফটওয়ার গুলো খুব ভাল মানের কাজের জন্য ব্যবহার করা হয়ে থাকে।
যাইহোক আমরা খুব সহজে আমার পিসি থেকে Notepad (PC) এটি ওপেন করে নিব।
আমরা বিশ্বাস করি একটি সহজ টেক্সট এডিটর ব্যবহার করে এইচটিএমএল শিখা একটি ভালো উপায়।
নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করার জন্য নীচের চারটি ধাপ অনুসরণ করুন.
ধাপ-১: আপানার নোটপ্যাডটি ওপেন করুন। স্টার্ট ক্লিক করুন>তার পর অল প্রোগ্রাম সিলেক্ট করুন>তারপর এক্সেসরিজ সিলেক্ট করুন>তারপর নোটপ্যাড সিলেক্ট করুন।
ধাপ-২: কিছু এইচটিএমএল ট্যাগ লিখুন। যেমনঃ <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ধাপ-৩: ফাইলটি আপনার কম্পিউটারের একটি নির্দিষ্ট ফোল্ডারে সেইভ করুন। ক্লিক ফাইল>তারপর সেইভএস এ ক্লিক করুন। এখানে অবশ্যই ফাইল নেইম “file_name.html” এক্সটেনশন ব্যবহার করতে হবে। অন্যথায় কিন্তু আপনার ব্রাউজার ফাইলটি রিট করতে পারবে না।
ধাপ-৪: এবার আপনার ফাইলটি ওপেন করুন যে কোন একটি ব্রাউজারে। তখন আপনি দেখতে পাবেন যা যা লিখেছেন সব ব্রাউজারে দেখা যাবে।
নোটপ্যাড বা TextEdit ব্যবহার করে HTML লিখা
নিচে উল্লেখিত একটি পেশাদারী HTML এডিটর ব্যবহার করে HTML সম্পাদনা করা যেতে পারে:
* অ্যাডোবি Dreamweaver
* মাইক্রোসফট এক্সপ্রেশন ওয়েব
* CoffeeCup এইচটিএমএল এডিটর
তবে, এইচটিএমএল শেখার জন্য আমরা নোটপ্যাড (পিসি) বা TextEdit (ম্যাক) মত একটি টেক্সট এডিটর সুপারিশ করব।
একটি সহজ টেক্সট এডিটর ব্যবহার করে এইচটিএমএল শিখার একটি ভালো উপায় বলে আমরা বিশ্বাস করি।
নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করার জন্য নীচের 4 ধাপ অনুসরণ করুন:
ধাপ 1: নোটপ্যাড ওপেন করুন
উইন্ডোজ 7 বা তার আগের নোটপ্যাড খোলা :
স্টার্ট মেনুতে ক্লিক করুন (পর্দা নিচে বামে) অল প্রগ্রামসে ক্লিক করুন. এ্যাক্সেসরিসে ক্লিক করুন. নোটপ্যাডে ক্লিক করুন.
Windows 8 বা পরে নোটপ্যাড খোলা:
স্টার্ট স্ক্রিন খুলুন (আপনার পর্দায় বামে নীচে উইন্ডো প্রতীক). নোটপ্যাড টাইপ করুন.
ধাপ 2: কিছু এইচটিএমএল লিখুন
নোটপ্যাড মধ্যে কিছু এইচটিএমএল লিখুন বা কপি করুন.
উদাহরণ:
< ! DOCTYPE html>
আমার প্রথম শীর্ষক
আমার প্রথম অনুচ্ছেদ.
নোটপ্যাড ধাপ 3: এইচটিএমএল সংরক্ষণ করুন
আপনার কম্পিউটারে ফাইল সংরক্ষণ করুন.
ফাইল নির্বাচন করুন >নোটপ্যাড মেনু হিসাবে সংরক্ষণ করুন .
আপনি ফাইল এক্সটেনশন হিসাবে .HTM বা .এইচটিএমএল ব্যবহার করতে পারেন. কোন পার্থক্য নাই, এটি আপনার উপরে।
ধাপ 4: আপনার ব্রাউজারে এইচটিএমএল পেজ দেখুন।
আপনার সংরক্ষিত HTML ফাইল ডাবল ক্লিক করুন, এবং এর ফলে নিচের মত দেখতে হবে।
ব্রাউজারে দেখুন
আজ আমি HTML 5 (এইচটিএমএল ৫)- এর খুঁটিনাটি নিয়ে আলোচনা করব । যারা HTML (এইচটিএমএল)- সম্পর্কে অথবা HTML 5 (এইচটিএমএল ৫)- সম্পর্কে জানেন না বা কিছু জানেন; আশা করি তারা এ সম্পর্কে মোটামোটি ধারণা নিতে পারবেন অর্থাৎ তাদের জন্য টিউনটি কিছুটা হলেও উপকারে আসতে পারে
HTML (এইচটিএমএল) কি ?
নতুনদের মনে প্রশ্ন জাগতে পারে যে, HTML (এইচটিএমএল) আবার কি ? যা অনেকের মুখে শুনা যায় ! তাদের উদ্দেশে আমি বলছি; HTML (এইচটিএমএল) হল এক প্রকার Markup Language (মার্কআপ ল্যাঙ্গুয়েজ), অর্থাৎ এটির মাধ্যমে কোন একটি ওয়েব পেইজের Markup (মার্কআপ) তথা মূল কাঠামো গঠন করা হয় । যার পূর্ণ নাম হচ্ছে Hyper Text Markup Language (হাইপার টেক্সট মার্কআপ ল্যাঙ্গুয়েজ) ।
তাছাড়া HTML (এইচটিএমএল) কত গুলো ট্যাগের সমন্বয়ে গঠিত, যা কোন ওয়েব পেইজের Markup (মার্কআপ) তথা কাঠামো গঠন করে, আর এই Markup (মার্কআপ) ট্যাগ এর কাজ হল কোন ওয়েব পেইজের বিভিন্ন ইলিমেন্ট কিভাবে প্রদর্শিত হবে তা নির্দেশ করা । একটি ওয়েব পেইজের ইলিমেন্ট যথাক্রমেঃ টেক্সট, ইমেজ, অডিও, ভিডিও ইত্যাদি ।
HTML (এইচটিএমএল) আমাদের কেন প্রয়োজন ?
একটি ওয়েব পেইজ বা কোন একটি ওয়েব সাইট তৈরি করতে HTML (এইচটিএমএল)- এর গুরুত্ব অপরিসীম । কেননা; যেহেতু HTML (এইচটিএমএল) কোন একটি ওয়েব পেইজের Markup (মার্কআপ) অর্থাৎ মূল কাঠামো গঠন করে, সেহেতু কোন ওয়েব পেইজ ডিজাইন করতে অথবা ওয়েবসাইট তৈরি করতে HTML (এইচটিএমএল) এর বিকল্প কিছু নেই ।
HTML (এইচটিএমএল) এর ইতিহাস
বহুল ব্যবহারিত আজকের এই HTML (এইচটিএমএল) আমাদের নিকট আপনা-আপনি চলে আসে নাই এটির পেছনেও রয়েছে এক বিশাল ইতিহাস, HTML (এইচটিএমএল) এর সৃষ্টি কর্তা হলেন- ইউরোপীয় বিজ্ঞানী স্যার টিম বার্নাস লী ।
তিনি ১৯৮০ সালে CERN এ একজন বিশেষজ্ঞ থাকাকালীন CERN গবেষকদের মাঝে তথ্য শেয়ারের জন্য ENQUIRE Prototyped নামে একটি System এর প্রস্তাব দেন ।
তারপর, ১৯৮৯ সালে স্যার টিম বার্নাস লী ইন্টারনেট ভিত্তিক একটি Hyper Text (হাইপার টেক্সট) সিস্টেম প্রস্তাবে একটি মেমো লিখেন । এবং ১৯৯০ সালে স্যার টিম বার্নাস লী ব্রাউজারের ও সার্ভারের সফটওয়্যারের HTML (এইচটিএমএল) উল্লেখ্য করেন । তারপর এই বছরেই স্যার টিম বার্নাস লী ও CERN এর তথ্য ইঞ্জিনিয়ার Robert Cailliau যৌথ ভাবে CERN কে এ প্রকল্পের জন্য অর্থায়নের অনুরোধ করেন কিন্তু প্রকল্পটি আনুষ্ঠানিক ভাবে CERN দ্বারা গৃহীত হয়নি । তবে HTML (এইচটিএমএল) পরিচিতি লাভ করে একই সালে NCSA কর্তৃক ডেভেলপকৃত মোজাইক ব্রাউজারের মাধ্যমে ।
তাছাড়া স্যার টিম বার্নাস লী অলাভজন জনসেবামূলক প্রতিষ্ঠান ওয়ার্ল্ড ওয়াইড ওয়েব এর তত্ত্বাবধায়ক ওয়ার্ল্ড ওয়াইড ওয়েব কনসোটিয়াম (W3C) এর ডিরেক্টর । ওয়ার্ল্ড ওয়াইড ওয়েব কনসোটিয়াম কর্তৃক ডেভেলপকৃত HTML 3.2 প্রকাশিত হয় ১৯৯৭ সালের জানয়ারিতে ও একই সনের শেষের দিকে প্রকাশ হয় HTML 4.2 এবং HTML (এইচটিএমএল) এর সর্বশেষ সংস্করণ তথা HTML 5 প্রকাশিত হয় ২০১০ সালে ।
HTML 5 (এইচটিএমএল ৫) কি ?
HTML 5 (এইচটিএমএল ৫) হচ্ছে HTML (এইচটিএমএল) এর সর্বশেষ সংস্করণ । যা ২০১০ সালে প্রকাশিত হয় এবং এখন পর্যন্ত পরবর্তী কোন সংস্করণ আসে নি ।
HTML 5 (এইচটিএমএল ৫) এ নতুন কিছু বৈশিষ্ট্যঃ
০১. মিডিয়া প্লেব্যাকের জন্য
০৩. স্থানীয় সংগ্রহস্থলের জন্য সমর্থন ।
০৪. নতুন ফর্ম নিয়ন্ত্রণ, যেমন ক্যালেন্ডার, তারিখ, সময়, ই-মেইল, অনুসন্ধান, ইউআরএল ইত্যাদি ।
০৫. নতুন নির্দিষ্ট বিষয়বস্তুর উপাদান, যেমনঃ
,
HTML 5 (এইচটিএমএল ৫) এর কিছু নিয়মঃ
০১. উন্নত ত্রুটি পরিচালনার ব্যবস্থা থাকতে হবে ।
০২. নতুন বৈশিষ্ট গুলো এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্টের উপর ভিত্তি করে তৈরি করা।
০৩. একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা ।
০৪. আলাদা প্লাগিনের ব্যবহার কমাতে হবে (যেমন: ফ্ল্যাশ) ।
০৫. HTML 5 (এইচটিএমএল ৫) এর স্বাধীন ডিভাইস হতে হবে ।
০৬. উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে ।
HTML 5 (এইচটিএমএল ৫) এর জন্য ব্রাউজার সাপোর্টঃ
HTML 5 (এইচটিএমএল ৫) এখনও অফিসিয়ালি প্রকাশিত হয় নি, তাছাড়া কোন ব্রাউজারে HTML 5 (এইচটিএমএল ৫) এর পূর্ণ সমর্থন আসে নাই । তবে প্রতিনিয়ত ব্রাউজারগুলোতে নতুন নতুন উপাদান যুক্ত করা হচ্ছে ।
HTML দ্বারা কিভাবে ডকুমেন্টসকে প্যারাগ্রাফ আকারে লেখা যায় । লেখকঃ মোস্তাফিজুর ফিরোজ ।
আজ আমি আপনাদের সামনে আলোচনা করবো HTML দ্বারা কিভাবে ডকুমেন্টসকে প্যারাগ্রাফ আকারে লেখা যায় ।
HTML প্যারাগ্রাফঃ
HLML <p> দ্বারা সাধারণত কোনো প্যারাগ্রাফ নির্দেশ করা হয় ।
উদাহরণ হিসেবে আমরা দেখাতে পারিঃ
<p>এটা একটা প্যারাগ্রাফ</p>
<p>এটা আরেকটা প্যারাগ্রাফ</p>
এভাবে লিখে চেষ্টা করুন ।
HTML ডিসপ্লেঃ
আমরা সাধারণত বুঝতে পারিনা HTML কিভাবে দেখাচ্ছে ।
বড় অথবা ছোট স্ক্রীন এবং মানানসই স্ক্রীনে ডিফারেন্ট ফলাফল দেখায় ।
HTML এ আপনি অতিরিক্ত ফাঁকা অথবা অতিরিক্ত লাইন যোগ করে আপনি আউটপুট পরিবর্তন করতে পারবেন না ।
কারণ, ব্রাউজার অতিরিক্ত ফাঁকা অথবা অতিরিক্ত লাইন বাদ দিয়ে আপনাকে ফলাফল দেখিয়ে থাকে । অতিরিক্ত ফাঁকা অথবা অতিরিক্ত লাইন কে ব্রাউজার একটি মাত্র স্পেস হিসেবে দেখায় ।
উদাহরণ হিসেবে আমরা দেখাতে পারি নিম্নরূপেঃ
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
উপরের দুইটি উদাহরণ লিখে দেখবেন ফলাফল একই দেখাবে । তাই স্পেস অথবা লাইন বেশি দিয়েও লাভ নেই ।
আর হ্যা, এখানে </p> হলো HTML এর শেষ ট্যাগ । এটা দিতে একদম ভুলে গেলে চলবে না কিন্তু ।
HTML লাইন ব্রেক এর ব্যবহারঃ
<br> দিয়ে একটা লাইন ব্রেক বুঝানো হয় ।
উদাহরণ হিসেবে বলতে পারিঃ
<p>This is<br>a para<br>graph with line breaks</p>
এভাবে আপনি HTML লাইন ব্রেক দিতে পারলেন । কিন্তু কবিতা লেখার সময় আপনাকে কিন্তু এভাবে লিখলে হবে না । তখন আপনাকে <pre> ট্যাগ ব্যবহার করতে হবে ।
উদাহরণ হিসেবে দেখাতে পারিঃ
<p>This will display as a poem:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
একটা কবিতা লিখে এভাবে HTML এর ভাষায় লিখেই দেখেন না ।
এভাবে আপনি HTML লিখে প্রাকটিস করতে থাকুন। আর আপনি এটা নোটপ্যাড প্লাস দিয়ে লিখে .html ফরমেটে সেভ করে আপনার ব্রাউজার দিয়ে ওপেন করে দেখতে পারেন কেমন হল । আর না বুঝলে আমি তো আছিই ।
HTML এর tag সমূহ
নামঃ সাদিক
TAG ব্যবহার ধরন
<!--...--> মন্তব্য করার জন্য STF
<!DOCTYPE> Html ডকুমেন্টের ধরন নির্ধারনের জন্য STF
<a> লিংক দেওয়ার জন্য STF
<abbr> Abbreviation দেওয়ার জন্য STF
<acronym> Acronym দেওয়ার জন্য STF
<address> Html ডকুমেন্টের লেখক এর তথ্য দেওয়ার জন্য STF
<applet> Applet এম্বেড করার জন্য TF
<area/> Image-map এরিয়া করার জন্য STF
<b> লেখা bold করার জন্য STF
<base/> Specific the basic url/target for all
relative urls in a documant STF
<basefont> ফন্ট সাইজ ও কালার নির্ধারন করার জন্য TF
<bdo> Overrides the current text direction STF
<big> বড় লেখার জন্য TF
<blockquote> উক্তি /quotation দেওয়ার জন্য STF
<body> বডি দেওয়ার জন্য STF
<br/> লাইন ব্রেক করার জন্য STF
<button> বাটন আনার জন্য STF
<caption> ক্যপশন দেওয়ার জন্য STF
<center> লেখা মাঝখানে নেওয়ার জন্য TF
<cite> Defines a citation STF
<code> কোড শো করার জন্য STF
<coi/> টেবিলের মধ্যে কলাম নেয়ার জন্য STF
<colgroup> Spucifies a group of one or more
columns in a table for formating STF
<dd> Defines a description of an
item in a definition list STF
<del> কোন লেখা মুছার জন্য STF
<dfn> Defines a definition term STF
<dir> ডাইরেক্টরি লিস্ট আনার জন্য TF
<div> Defines a section in a document STF
<dl> Defines a definition list STF
<dt> Defines a term(an item) in a definition list STF
HTML হল ওয়েব ডিজাইনের মূলভিত্তি যা দিয়ে ওয়েব পেজ তৈরি করা হয়।একজন দক্ষ ওয়েব ডিজাইনার বা ওয়েব ডেভলপার হতে গেলে অবশ্যই HTML সম্পর্কে ভালো জ্ঞান থাকতে হবে।এখন প্রশ্ন হতে পারে HTML ছাড়াই তো Microsoft Frontpage, Adobe Dreamweaver, Webpage Maker,Wordpress, Joomla ব্যবহার করে সুন্দর ওয়েব পেজ তৈরি করা যায়,HTML এর প্রয়োজন কি তাহলে? প্রয়োজনটা হল এটাই যে HTML জানা বাদে একজন নিজের মতো পুরোপুরি ওয়েব পেজ কাস্টমাইজেশন করতে পারে না।তাছাড়া সার্চ ইন্জিন অপটিমাইজেশন (SEO) এর জন্যও HTML জানা অতীব গুরুত্বপূর্ণ।
HTML এ সাধারনত তিন প্রকার ট্যাগ থাকে।
যথা- HEAD ট্যাগ,HTML ট্যাগ এবং BODY ট্যাগ।
HTML এর সর্বশেষ সংস্করন হল HTML 5।পরিবর্তন হিসেবে HTML 5 এ কিছু নতুন ট্যাগ সংযোজন করা হয়েছে।নিম্নে সেগুলো দেয়া হল:
HTML5 হলো এইচটিএমএলের নতুন সংস্করণ এইচটিএমএল৫। HTML 4.01 এর পূর্ববর্তী সংস্করণ 1999 সালে প্রকাশিত হয়েছিল। তারপর থেকে অনেক পরিবর্তন হয়েছে। HTML5 এর কাজ এখনও চলছে। কিন্তু অনেক ট্যাগ বিভিন্ন ব্রাউজারে এখন কাজ করে।
HTML5 কিভাবে কাজ শুরু করেছে?
HTML5 এর ওয়ার্ল্ড ওয়াইড ওয়েব সাথে (W3C) এবং ওয়েব হাইপারটেক্সট অ্যাপ্লিকেশন প্রযুক্তি ওয়ার্কিং গ্রুপ (WHATWG) মধ্যে সহযোগিতা করে তৈরির কাজ চলছে। WHATWG ওয়েব ফর্ম এবং অ্যাপ্লিকেশন তৈরির কাজ করছে এবং W3C এক্সএইচটিএমএল 2.0 নিয়ে কাজ করছিল। 2006 সালে তারা HTML-এর একটি নতুন সংস্করণ তৈরি করার সিদ্ধান্ত নিয়েছে।
HTML5 এর জন্য কিছু নিয়ম প্রতিষ্ঠিত হয়:
নতুন বৈশিষ্ট্য সমূহ এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্ট উপর ভিত্তি করে তৈরি করা উচিত
আলাদা প্লাগিনের ব্যবহার কমানোর কথা বলা হয়েছে (যেমন: ফ্ল্যাশ)
উন্নত ত্রুটি পরিচালনার ব্যবস্থা
আরও একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা
HTML5 এর স্বাধীন ডিভাইস হতে হবে
উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে
************************************************************
আমার Microworker ইমেল:skmdrony@yahoo.com
Author- MD.HABIBUR RAHMAN
ওয়েব ডিজাইন বা ওয়েব ডেভেলপমেন্ট করার জন্য HTML ভাষা জানা অত্যন্ত গুরুত্বপূর্ণ। HTML ভাষা না জেনে কোন ভাবেই ওয়েব ডিজাইন বা ওয়েব ডেভেলপমেন্ট করা যায় না। আবার HTML5 হচ্ছে HTML এর নতুন সংস্করণ। এজন্য আজ আমি HTML5 সম্পর্কে কিছু উদাহরণসহ ধারণা দেব।
HTML5 সাধারণত কিছু কোড এর mgš^q| যেমনঃ-
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
এখানে <!DOCTYPE html> দ্বারা ডকুমেন্টের প্রকারকে বোঝানো হয়েছে। আবার,এখানে html দ্বারা শুরু হয়েছে এবং html দ্বারা শেষ হবে এভাবে body দ্বারা শুরু হলে body দ্বারা শেষ হবে। অর্থ্যা কোড যেটি দ্বারা শুরু হবে সেটার দ্বারাই শেষ করতে হবে।
Input Type: date
Birthday: <input type="date" name="bday">
HTML Audio - Using <object>
<object height="50" width="100" data="horse.mp3"></object>
Playing Videos in HTML
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
HTML5 Compliant
<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<area> Defines an area inside an image-map
<body> Defines the document's body
<center> Defines centered text
<font> Defines font, color, and size for text
<footer> Defines a footer for a document or section
<head> Defines information about the document
<html> Defines the root of an HTML document
<input> Defines an input control
<li> Defines a list item
<p> Defines a paragraph
<span> Defines a section in a document
<td> Defines a cell in a table
<textarea> Defines a multiline input control (text area)
বর্তমান পৃথিবী হচ্ছে প্রযুক্তির বিশ্ব আর এই প্রযুক্তির বিশ্বে আর সব কিছু আমরা হাত বাড়ালেই পেয়ে যাই যেকোন মূহুর্তে যেকোন স্থানে। আর তাই এই বর্তমান পৃথিবী আরেক নামে ডাকা হয় ডিজিটাল পৃথিবী বলে। ডিজিটাল পৃথিবীর সবচেয়ে প্রধান অংশটির নাম হচ্ছে ইন্টারনেট। ইন্টারনেট ব্যবহারের ফলে সমস্ত বিশ্ব আমাদের হাতের মুঠোয় চলে এসেছে। আর ইন্টারনেটের প্রধান অংশ হচ্ছে ওয়েব সাইট। সমস্ত বিশ্বব্যাপী ওয়েব সাইট সমূহ জালের মতো বিস্তার করে আছে। আমাদের হয়তো এটার অনেকেরই ধারনা আছে যে একটি প্রকৃত ওয়েব সাইট তৈরির জন্য এইচটিএমএল বিষয়ে জানা অনেক গুরুত্ব পূর্ন বিষয়। আজকে আমি আপনাদের এইচটিএমএল এর কয়েকটি প্রয়োজনীয় কোড নিয়ে সংক্ষেপে কিছু আলোচনা করবো।
সাধারনত অক্ষরকে বোল্ড বা মোটা করার জন্য এইচটিএমএলে দুটি সহজ পদ্ধতি আছে, যথা:
<p style="font-weight:bold;">font-weight: bold</p>
<p style="font-weight:100;">font-weight: 100</p>
বিভিন্ন টেবিলে ব্যাকগ্রাউন্ড colure দেয়ার জন্য এইচটিএমএলে ব্যবহার করা হয় এ ধরনের ট্যাগ:
<table style="background-color:#FFFFE0;">
টেবিলটির হিডারে জন্য নিচের কোডটি অতি সহজে ব্যবহার করা যেতে পারে:
<th>Table Header</th><th>Table Header</th>
টেবিলের মাঝে সেলের পরিবর্তনের জন্য এই কোডটি ব্যবহার করা যেতে পারে:
<td>Table cell 1</td><td>Table cell 2</td>
এইচটিএমএলের সাহায্যে লিংকের সাথে বিভিন্ন ছবি ট্যাগ করার জন্য আমরা নিচের প্রচলিত কোডগুলো ব্যবহার করতে পারি।
<a href="http://www.travel-explorer.com/boracay-philippines/ target="_blank"><img src="http://www.html.am/images/html-codes/links/boracay-white-beach-sunset-300x225.jpg
সাধারনত ছবির পরিমাপ সহজে ধাবাহিক সুবিন্যস্ত করার জন্য নিচের কোডটি একই সাথে ব্যবহার করা যায়:
width="300" height="225"/></a>
ওয়েব সাইটে মূলত এইচটিএমএলের সাহায্যে টেক্সট বক্স বসানোর কোডটি এরকম হয়:
<textarea>This is where the user can enter text...</textarea>
সুতরাং আজ আমরা এইচটিএমএলের প্রয়োজনীয় কয়েকটি কোড সম্পর্কে জানলাম। আশাকরি কোডগুলো এইচটিএমএল কোড সাজাতে আপনাদের সহায়তা করবে। সুতরাং চেষ্টা করুন বারবার।
2. আমি এই ওয়েব সাইট থেকে বিষয় বেছে নিয়েছি:
http://salearningschool.com
আজকে আমরা এইচটিএমল লেখার টুল (tool) এবং HTML Editors সম্পর্কে আলোচনা করব।
Adobe Dreamweaver, Microsoft Expression Web, এবং CoffeeCup প্রভৃতি Professional HTML Ediotor ব্যবহার করে HTML কে edit করা যায়।তবে আমরা HTML শেখার জন্য Notepad অথবা Textedit কে Text editor হিসেবে সমর্থন করি। আমরা বিশ্বাস করি যে, একটি সাধারণ Text Editor ব্যবহার করেই HTML ভালোভাবে শেখা যায়। Notepad ব্যবহার করে web page তৈরি করতে হলে আপনাকে নিম্নের ৪ টি পর্যায় অনুসরণ করতে হবে।
পর্যায় ১ঃ Notepad খুলুন।
Windows 7 অথবা তার আগের ভার্সনে Notepad খুলতে(open)গেলে প্রথমে কম্পিউটারের screen এর বামপাশে অবস্থিত start এ click করবেন, এরপর All Programmes এ click করে Notepad এ click করবেন।
Windows 8 অথবা তার পরের ভার্সনে Notepad খুলতে(open)গেলে আপনার কম্পিউটারের start screen এ click করে Notepad type করবেন।
পর্যায় ২ঃ কিছু HTML লিখুন।
Notepad এ কিছু HTML লিখতে অথবা কপি করতে পারেন।
উদাহরণস্বরূপ-
<!DOCTYPE html>
<html>
<body>
<h1> আমার প্রথম শিরোনাম </h1>
<p> আমার প্রথম অনুচ্ছেদ </p>
</body>
</html>
পর্যায় ৩ঃ HTML Page টিকে সংরক্ষণ করুন।
আপনার কম্পিউটারে HTML Page কে সংরক্ষণ করতে গেলে Notepad Menu এর file option এ গিয়ে save as কে select করুন। file extention হিসেবে আপনি .htm অথবা .html ব্যবহার করতে পারেন, কারন দুটোর মাঝে কোন পার্থক্য নেই।
পর্যায় ৪ঃ আপনার browser এ HTML Page টিকে দেখুন।
আপনার সংরক্ষিত HTML file এ double click করুন এবং দেখবেন এর ফলাফল এরকম হবে।
আমার প্রথম শিরোনাম
আমার প্রথম অনুচ্ছেদ
যদিও এই উদাহরণে ব্যবহৃত tag গুলো সম্পর্কে আপনারা এখনও জানেননা তবে উদ্বিগ্ন হবার কিছু নেই, পরবর্তী অধ্যায়ে আপনারা এগুলো সম্পর্কে জানবেন।
Machine Learning, Big Data, Data Science, Analytics, Cloud, Security, AI, Robotics, Database, BI, Development: Software, Web, Mobile
