টিউটোরিয়ালটি ওয়েব এড্রেস হচ্ছে http://www.tutohost.com/bangla/html/ ।

HTML কি?

HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। বিস্তারিত দেখুন এখানে ……….

HTML এর ইতিহাস

HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। HTML তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। বিস্তারিত দেখুন এখানে ……….

প্রোগ্রাম লেখার পদ্ধতি

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। HTML এ প্রোগ্রাম লেখার জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে। বিস্তারিত দেখুন এখানে ……….

HTML ট্যাগ কি?

HTML এ প্রোগ্রাম লেখার জন্য  <>  এবং </> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body  ইত্যাদি  Keyword  ব্যবহার করা হয়। <> বা </> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। বিস্তারিত দেখুন এখানে ……….

HTML ইলিমেন্ট

HTML এ যেকোন শুরু এবং শেষ ট্যাগের মাঝের অংশকে ইলিমেন্ট বলা হয়। যেমন <h1> This is an example of element.</h1> । এখানে <h1> হেডার1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে This is an example of element. লেখা হয়েছে। বিস্তারিত দেখুন এখানে ……….

HTML এট্রিবিউটস্

HTML এ এট্রিবিউটস ইলিমেন্ট এর আনুসাঙ্গিক তথ্য প্রকাশ করে । মূলত HTML এ ট্যাগের কার্যক্ষমতাকে বর্ধিত করার জন্য এট্রিবিউটস ব্যবহার করা হয়। যেমন <font size=”5″ face=”Tahoma” color=”red”> This is a paragraph.</font>  এখানে size=”5″  অংশটি হল font ট্যাগের একটি এট্রিবিউট। বিস্তারিত দেখুন এখানে ……….

হেডিং

HTML এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। HTML এ মোট ছয় ধরণের হেডিং ট্যাগ রয়েছে এগুলো হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6>  । বিস্তারিত দেখুন এখানে ……….

প্যারাগ্রাফ

যে কোন ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। HTML এ প্যারাগ্রাফ তৈরির   জন্য <p> বা প্যরাগ্রাফ ট্যাগ ব্যবহার করা হয়। বিস্তারিত দেখুন এখানে ……….

টেক্সট ফরমেটিং

Microsoft Word এ Bold, Italic, Underline, strikethrough, Subscript, Superscript ইত্যাদি টেক্সট ফরমেটিং এর জন্য ব্যবহৃত হয়।বিস্তারিত দেখুন এখানে ……….

ফন্ট ট্যাগ

HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে। বিস্তারিত দেখুন এখানে ……….

স্টাইলের ব্যবহার

Style, HTML এর একটি নতুন এট্রিবিউটস, এর মাধ্যমে HTML এর মধ্যেই CSS ব্যবহারের সুযোগ সৃষ্টি হয়। Style তথা CSS ব্যবহারের মাধ্যমে ওয়েব পেজের বিভিন্ন উপাদানের ডিজাইন তৈরি করা হয়। বিস্তারিত দেখুন এখানে ……….

লিংক

কটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ। Link এর আভিধানিক অর্থ সংযুক্ত করা। বিস্তারিত দেখুন এখানে ……….

ছবি সংযোজন

একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। বিস্তারিত দেখুন এখানে ……….

টেবিল সংযোজন

দিনে দিনে ইন্টারনেট আজ সবচেয়ে বড় তথ্য ভান্ডারে পরিণত হয়েছে। তথ্য উপাত্ত পরিসংখ্যান চিত্র ভিডিও ইত্যাদির সংমিশ্রণে একটা ওয়েবপেজে কোন বিষয়বস্তুকে যতটা আকর্ষণীয় এবং পরিপূর্ণভাবে উপস্থাপন করা যায়, অন্যান্য মিডিয়ায় তা সম্ভব হয় না। বিস্তারিত দেখুন এখানে ……….

এইচটিএমএল লিষ্ট

কটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । বিস্তারিত দেখুন এখানে ……….

এইচটিএমএল ফর্ম

এইচটিএমএল ফর্ম একটি গুরুত্বপূর্ণ আলোচ্য বিষয়। বিশেষ করে ডাইনামিক এবং ডাটাবেজ নির্ভর ওয়েব সাইটের লগ ইন সিস্টেম, ভোটিং সিস্টেম, কন্টাক্ট ফর্ম সহ ইউজার ইনফরমেশন সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়ে থাকে। বিস্তারিত দেখুন এখানে ……….

HTML ফ্রেম

HTML এর মাধ্যমে কোন ওয়েব পেজকে একাধিক ভাগে বিভক্ত করার জন্য আগের দিনে ফ্রেম ব্যবহার করা হত। দিনে দিনে ফ্রেমের ব্যবহার কমে এসেছে। বিস্তারিত দেখুন এখানে ……….

আই ফ্রেম

একটা ওয়েব পেজের মধ্যেই অপর এক বা একাধিক ওয়েব পেজ প্রদর্শন করার অন্যতম উপায় হচ্ছে আই ফ্রেম। বিস্তারিত দেখুন এখানে ……….

রং ও কোড

ওয়েব পেজে রং এর ব্যবহার খুবই গুরুত্বপূর্ণ। একটা ওয়েব পেজ গঠিত হয় এক বা একাধিক প্যারাগ্রাফ, শিরোনাম, টেবিল, ব্যাগ্রাউন্ড, বর্ডার ইত্যাদির সমন্বয়ে। বিস্তারিত দেখুন এখানে ……….

লে আউট

একটা ওয়েব পেজ কতটা সুন্দর হবে তা সম্পূর্ণরূপে নির্ভর করে পেজের লে আউটের উপর। আগে শুধুমাত্র HTML ব্যবহার করেই সকল ওয়েব সাইটের লে আউট তৈরি করা হত। বিস্তারিত দেখুন এখানে ……….

সি এস এস

বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। বিস্তারিত দেখুন এখানে ……….

হেড ইলিমেন্ট

হেড ট্যাগ বা <head> এবং হেড ইলিমেন্ট যেকোন HTML পেজের একটি গুরুত্বপূর্ণ অংশ। কারণ <head>….</head> এর মধ্যে অর্থাৎ হেড ইলিমেন্ট হিসেবে <title> <link> <meta> <style> <script>    এ সকল গুরুত্বপূর্ণ ট্যাগ সমূহ রাখা হয়। বিস্তারিত দেখুন এখানে ……….

মেটা ট্যাগ

একটি ওয়েব সাইট তখনই জনপ্রিয় হয় যখন তা মানুষের প্রয়োজনে আসে এবং যে কেউ প্রয়োজনের সময় সহজেই সার্চ ইন্জিনের মাধ্যমে সার্চ করে সাইটটিকে খুজেঁ পায়। বিস্তারিত  দেখুন এখানে ……….

স্ক্রিপ্ট

HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। তাই ওয়েব পেজেও প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরনের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়, যেমন জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি। বিস্তারিত  দেখুন এখানে ……….

অডিও সংযোজন

কোন বিষয়কে উপস্থাপনার ক্ষেত্রে, টেক্সট এবং ছবির পাশাপাশি অডিও-ভিডিও ব্যবহার করলে বিষয়টি আরো প্রাণবন্ত হয়ে উঠে। ওয়েব মিডিয়ার মাধ্যমে এ কাজটি যতটা ভালোভাবে করা যায় আর অন্য কোনো মিডিয়ায় মাধ্যমে তা সম্ভব নয়। বিস্তারিত  দেখুন এখানে ……….

ভিডিও সংযোজন

সংঘটিত বাস্তব ঘটনাকে পরিপূর্ণভাবে উপস্থাপনার ক্ষেত্রে ভিডিও সবচেয়ে উপযোগী মাধ্যম। দৈনন্দিন সংবাদ প্রকাশক ওয়েব সাইটগুলো তাদের দৈনন্দিন ঘটনাগুলোকে টেক্সট এবং ইমেজ ব্যবহারের মাধ্যমে প্রকাশের পাশাপাশি ভিডিও প্রকাশের মাধ্যমে আরো বেশি জনপ্রিয়তা অর্জনের সুযোগ পাচ্ছে। বিস্তারিত  দেখুন এখানে ……….

ফ্লাস সংযোজন

ফ্লাস এনিমেশন ওয়েব সাইটের একটি অন্যতম আকর্ষণীয় উপাদান। আকর্ষণীয় নেভিগেশন বার, ব্যনার, বাটন ইত্যাদিতে ফ্লাসর এনিমেশন যুক্ত করে যেমন ওয়েব সাইটের ইন্টারফেসকে আকর্ষণীয় করে তোলা যায়।বিস্তারিত  দেখুন এখানে ……….

ডকটাইপ

এইচটিএমএল ফাইল ব্রাউজারে লোড হলে ডকটাইপ সহজেই ইন্টারপ্রেট করতে পারে। আর তাই ডকটাইপ দরকারী।

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

সিএসএস নিয়ে কাজ করা

সিএসএস তিনভাবে প্রকাশ করা যায়

১. বাইরের সিএসএস ফাইল কল করার মাধ্যমে
২. স্টাইল উল্লেখ করে তার ভেতরে কোড লিখে
৩. লাইনে লাইনে

১. বাইরের সিএসএস ফাইল কল করার মাধ্যমে

যে কোন নোট প্যাডে সিএসএস কোড লিখে তা .css ফরমেটে সেভ করতে হবে
মনে করি একটি সিএসএস ফাইল mystyle.css । mystyle.css ফাইলে নিচের কোড আছে

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

এই ফাইলটি কল করার জন্য নিচের html কোড লিখতে হবে।

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

যেখানে অনেকগুলো পাতার জন্য স্টাইল লিখতে হবে সেখানে বাইরের সিএসএস ফাইল কল করার মাধ্যমে কাজ করাই সুবিধাজনক

২. HTMLফইলে স্টাইল উল্লেখ করে তার ভেতরে কোড লিখে

একই পাতার জন্য স্টাইল ব্যবহার করার ক্ষেত্রে HTMLফইলেই CSS কোড লেখা যায়। <style type=”text/css”> … </style> এর মধ্যে CSS কোড লিখতে হয়। নিচের প্রোগ্রামটি দেখুন।

<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>

৩. লাইনে লাইনে সিএসএস কোড লিখে

নিচের মতোও লাইনে লাইনে সিএসএস কোড লিখে কাজ করার যায়। তবে এটাতে ভুল হওয়ার সম্ভাবনা আছে।
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

টাইটেল <title> ট্যাগ

টাইটেল ট্যাগের অংশের টেক্সট পাতাটির টাইটেলবারে প্রকাশ করা হয়। অনেক সময় বুকমার্ক বা ফেবারিট করলেও টাইটেল ট্যাগের টেক্সটটি যুক্ত হয়ে যায়। আবার সার্চ ইঞ্জিগুলোও পাতাটি ইনডেক্স করলে টাইটেল টেক্সটটাকেই দেখায়। গুগলসহ বেশিভাগ সার্চ ইঞ্জিন একটা নিদিষ্ট সংখ্যক শব্দ টাইটেল টেক্সটে দেখায়।

এই ট্যাগটি <head></head> ভিতরে লিখতে হয়।

মেটা ট্যাগ

<meta> ট্যাগের ভেতরের অংশ পৃষ্ঠায় প্রদর্শিত হয় না। কিন্তু বিভিন্নভাবে ওয়েবে ব্যবহৃত হতে পারে। মেটা ট্যাগের মাধ্যমে পৃষ্ঠার বর্ননা, লেখকের নাম বা সার্চইঞ্জিনের বান্ধব কীওয়ার্ডও দেওয়া হতে পারে।

সব সময়ই মেটা ট্যাগ <head></head> ভিতরে লিখতে হয়।

মেটা ট্যাগ লেখার নিয়ম মূলতঃ এরকম

<meta name=”description” content=”Free Web tutorials on HTML, CSS, XML” />

<meta name=”keywords” content=”HTML, CSS, XML” />

অনেক ওয়েবমাষ্টাররা মেটা ট্যাগে অনেক সময় স্প্যামিং এর উদ্দেশ্যও সম্পর্কহীন শব্দ ব্যবহার করে বেড়ায় তাই দিন দিন এই কীওয়ার্ড থেকে সরে যেতে চাইছে অনেক সার্চ ইঞ্জিনগুলো।

বাংলা ওয়েব রিসোর্স

• HTML5 এর নতুনত্ব পর্ব-১
• HTML5 টিউটরিয়াল পর্ব-২
• HTML5 টিউটরিয়াল পর্ব-৩
• এডবির এইচটিএমএল৫ এনিমেশন সফটঅয়্যার এজ
• এইচটিএমএল৫ শেখার জন্য সাতটি ওয়েব সাইট এবং ই-বুক

ইংরেজী ওয়েব রিসোর্স

• Yes, You Can Use HTML 5 Today! – HTML 5 এর প্রাথমিক ধারনা। একটি সাধারন লে-আউটের ডিজাইন তৈরী করা ও কোডিং পদ্ধতি
• উইকিপেডিয়াতে: HTML 5 – উইকিপেডিয়াতে HTML 5 সম্পর্কিত তথ্য
• HTML 5 চিট শিট – সুন্দর একটি চিট শিটের মাধ্যমে নতুন ট্যাগ গুলোর বিবরন দেওয়া আছে। এখান থেকে পিডিএফ আকারে ডাউনলোড করে প্রিন্ট করে রাখতে পারেন।
• HTML 5 Demos – একটা ডেমো যার মাধ্যমে বুঝতে পারবেন কিভাবে এইচটিএমএল৫ কাজ করে।
• HTML 5 ওয়েব গ্যালারী – এখানে রয়েছে ওয়েবসাইটের লিংক ও তাদের ডিজাইনের স্ক্রিনসট।
• HTML 5 ফরম ডিজাইন –  HTML 5 এ ফরমের ডিজাইনের ডেমো দেখুন।
• HTML 5 ডাক্তার – শুধু মাত্র HTML 5 এর উপরে চমৎকার একটা ওয়েবসাইট। এক বছরের বেশি সময় ধরে এটিতে ব্যাপক আলোচনা হচ্ছে HTML 5 এর বিভিন্ন বিষয়ে।
• HTM 5-এ হেডারের ব্যবহার
• ভিডিও – ভিডিও এমবেড করার সহজ পদ্ধতি।
• একটি ব্লগ ডিজাইন –  ব্লগ ডিজাইনের উপরে সুন্দর একটি টিউটোরিয়াল।
• ইন্টারেনেট একপ্লোরার ও ফায়ারফক্স-২ এ কিভাবে কাজ করানো যায় HTML5
• HTML 5 – এর উপরে ব্যাপক ভিত্তিক আলোচনা। বিশেষ করে কোডিং এর টেকনিক্যাল বিষয়গুলো এখানে পাবেন।
• Semantics in HTML 5 – কোড লেখার পদ্ধতির উপরে আলোচনা।
• সাপোর্ট লিষ্ট – কোন কোন অংশ কোন কোন ব্রাউজারে কাজ করে এবং করে না তার একটি তালিকা
• ড্রাগ ডপ কিভাবে কাজ করে কোডিং সহ আলোচনা।

আশা করি দিন দিন বাংলায় আরো বেশি লেখা পাওয়া যাবে। আপাততঃ এই লিংকগুলো দেখে কাজ শুরু করা যেতে পারে। সবাইকে ধন্যবাদ জানিয়ে শেষ করছি আজকের লিংক টিউটোরিয়াল।

১. ইন্টারনেট এক্সপ্লোরার চেনার সহজ কোডিং

যদিও ইন্টারনেট এক্সপ্লোরার-৮ ও তার পরের ভার্শনগুলো HTML5 সাপোর্ট করে, এর আগের ভার্শনের জন্য ব্রাউজার চেক করে নিতে হলে নিচের মতো কোডিং করে নিতে হবে। html5.js ফাইলটি যে কোন ব্রাউজারকেই HTML5 এর সুবিধা প্রদান করবে।

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

এখন মজিলা, সাফারী, গুগলক্রোম এর বর্তমান ভার্শনগুলো HTML5 সাপের্ট করে। এ বেপারে আরও জানতে এখানে দেখুন

২. ওয়েব ফরম

ওয়েবে বিভিন্ন ফরমের ইনপুট ডাটার ভেলিডেশন চেক করার জন্য ব্যবহার করতে হতো জাভাস্ক্রিপ্ট। এখন HTML5 এর মাধ্যমে শুধু কোডিং করলেই চলবে। সয়ংক্রিয়ভাবে ভেলিডেশন চেক হবে। তাহলে দেখে নেই সাধারন কিছু ফরম অবজেক্টের জন্য প্রয়োজনীয় কোড

আরও নতুন কয়েকটি ট্যাগঃ

টিউটরিয়ালবিডিতে প্রাথমিক বেশ কিছু বিষয়ে আলোচনা করা হচ্ছে বা হবে। একেবারে বেসিক বিষয়গুলো থেকে শুরু করে আরও অনেক টিউটরিয়াল লেখার ইচ্ছা আছে। বাংলাভাষায় শিক্ষাগ্রহনের এই প্লাটফর্মটিকে এগিয়ে নিতে আপনারাও লেখা জমা দিতে পারেন। আর লেখককে অনুপ্রানিত করতে মতামত অংশে আপনাদের মতামত দিন। আশা করা যায় এতে করে নতুন নতুন টিউটরিয়াল লিখতে লেখকগণ অনুপ্রানিত হবেন। সাথে থাকুন, ভাল থাকুন।

এখানে আমরা দুই ধরনের কোড ব্যাবহার করবো। CSS ও HTML আর এই দুটোই ওয়েব প্রোগ্রামিং কোড। ঠিক আছে কাজে নেমে যাই।

১. প্রথমে একটা ফোল্ডার তৈরি করুন। তারপর, এই লিং থেকে ইমেজের ফাইল গুলো নামিয়ে নিন। এবং images ফোল্ডারটা Extract করে আপনার তৈরিকৃত ফোল্ডারে কপি করে রাখুন।

২. এবার আমরা আমাদের HTML ফাইলটা তৈরি করে ফেলি। তার জন্য All Programs>Accessories>Notepad গিয়ে নোটপ্যাড ওপেন করুন এবং নিচের কোড গুলো কপি করে ফেলুন। তা অবশ্যই ঐ ফোল্ডারে আর HTML ফরমেটে শেভ করতে হবে। HTML ফরমেটে শেভ করার জন্য Save As.. এ ক্লিক করে .txt জায়গায় .html লিখে দিন আর এই ফাইলের নাম দিন index অন্য নাম ব্যাবহার করলেও সমস্যা নাই।

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Menu</title>

<link href=”style.css” rel=”stylesheet” type=”text/css” />

</head>

<body>

<div class=”nav-container-outer”>

<img src=”images/nav-bg-l.jpg” alt=”" class=”float-left” />

<img src=”images/nav-bg-r.jpg” alt=”" class=”float-right” />

<ul id=”nav-container” class=”nav-container”>

<li><a class=”item-primary” href=”#”>HOME</a>

</li>

<li><span class=”divider divider-vert” ></span></li>

<li><a class=”item-primary” href=”#”>Products</a>

<ul style=”width:150px;”>

<li><a href=”#”>SoftwarePlus</a></li>

<li><a href=”#”>MagicDriver</a></li>

<li><a href=”#”>GreatFX</a></li>

<li><a href=”#”>SampleSoft</a></li>

<li><a href=”#”>UnDoIt</a></li>

<li><a href=”#”>100% CSS Menu</a></li>

<li><a href=”#;”>With Cross-Browser</a></li>

<li><a href=”#;”>Dropdowns</a></li>

<li><a href=”#;”>Absolutely NO Javascript</a></li>

<li><a href=”#;”>Being Used On</a></li>

<li><a href=”#;”>These Menus</a></li>

<li><span class=”divider divider-horiz” ></span></li>

<li><a href=”#;”>Example Of a Divider</a></li>

<li><a href=”#;”>With No Title</a></li>

</ul></li>

<li><span class=”divider divider-vert” ></span></li>

<li><a class=”item-primary” href=”#”>Quality</a>

<ul style=”width:150px;”>

<li><a href=”#”>SoftwarePlus</a></li>

<li><a href=”#”>MagicDriver</a></li>

<li><a href=”#”>GreatFX</a></li>

<li><a href=”#”>SampleSoft</a></li>

<li><a href=”#”>UnDoIt</a></li>

<li><a href=”#”>100% CSS Menu</a></li>

<li><a href=”#;”>With Cross-Browser</a></li>

<li><a href=”#;”>Dropdowns</a></li>

<li><a href=”#;”>Absolutely NO Javascript</a></li>

<li><a href=”#;”>Being Used On</a></li>

<li><a href=”#;”>These Menus</a></li>

<li><span class=”divider divider-horiz” ></span></li>

<li><a href=”#;”>Example Of a Divider</a></li>

<li><a href=”#;”>With No Title</a></li>

</ul></li>

<li><span class=”divider divider-vert” ></span></li>

<li><a class=”item-primary” href=”#”>Services</a>

<ul style=”width:150px;”>

<li><span class=”item-secondary-title” >Title For Links</span></li>

<li><a href=”#”>These Links Still Appear</a></li>

<li><a href=”#”>Just Like The Others</a></li>

<li><a href=”#”>Even When Under A Title</a></li>

<li><span class=”divider divider-horiz” ></span></li>

<li><span class=”item-secondary-title” >Title After Divider</span></li>

<li><a href=”#”>Once Again…</a></li>

<li><a href=”#”>These Links Still Appear</a></li>

<li><a href=”#”>Just Like The Others</a></li>

<li><a href=”#”>Even When Under A Title</a></li>

</ul></li>

<li><span class=”divider divider-vert” ></span></li>

<li><a class=”item-primary” href=”#;”>Very Long Item</a>

<ul style=”width:150px;”>

<li><span class=”item-secondary-title” >Title For Links</span></li>

<li><a href=”#”>These Links Still Appear</a></li>

<li><a href=”#”>Just Like The Others</a></li>

<li><a href=”#”>Even When Under A Title</a></li>

<li><span class=”divider divider-horiz” ></span></li>

<li><span class=”item-secondary-title” >Title After Divider</span></li>

<li><a href=”#”>Once Again…</a></li>

<li><a href=”#”>These Links Still Appear</a></li>

<li><a href=”#”>Just Like The Others</a></li>

<li><a href=”#”>Even When Under A Title</a></li>

</ul></li>

<li><span class=”divider divider-vert” ></span></li>

<li><a class=”item-primary” href=”#;”>Fully Flexible</a>

<ul style=”width:150px;”>

<li><span class=”item-secondary-title” >Title For Links</span></li>

<li><a href=”#”>These Links Still Appear</a></li>

<li><a href=”#”>Just Like The Others</a></li>

<li><a href=”#”>Even When Under A Title</a></li>

<li><span class=”divider divider-horiz” ></span></li>

<li><span class=”item-secondary-title” >Title After Divider</span></li>

<li><a href=”#”>Once Again…</a></li>

<li><a href=”#”>These Links Still Appear</a></li>

<li><a href=”#”>Just Like The Others</a></li>

<li><a href=”#”>Even When Under A Title</a></li>

</ul></li>

<li class=”clear”>&nbsp;</li></ul>

</div>

</body>

</html>

৩. এবার আমরা CSS ফাইল তৈরি করবো তার জন্য নোটপ্যাড ওপেন করুন এবং নিচের ফাইল গুলো এটাতে কপি করে ফেলুন। এটাকে CSS ফরমেটে শেভ করতে হবে। তার জন্য Save As.. এ ক্লিক করে .txt জায়গায় . CSS লিখে দিন আর এই ফাইলের নাম দিন style অন্যনাম ব্যাবহার এলাও আছে কোন সমস্যা নাই।

এবার index ফাইলটা যে কোন ব্রাউজার দিয়ে ওপেন দেখুন নিচের মত লাগছে।

@charset “utf-8″;

/* CSS Document */

body{

padding: 25px;

}

/*^’^ Navigation Structure ^’^*/

.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(images/nav-bg.jpg);

}

.float-left{

float: left;

}

.float-right{

float: right;

}

.nav-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.nav-container .divider-vert{

float:left;

width:0px;

display: none;

}

.nav-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:left;

line-height:0px;

display:block;

float:none;

}

.nav-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.nav-container a, .nav-container li{

float:left;

display:block;

white-space:nowrap;

}

.nav-container div a, .nav-container ul a, .nav-container ul li{

float:none;

}

.nav-container ul{

left:-10000px;

position:absolute;

}

.nav-container, .nav-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.nav-container li a{

float:none

}

.nav-container li{

position:relative;

}

.nav-container ul{

z-index:10;

}

.nav-container ul ul{

z-index:20;

}

.nav-container ul ul ul{

z-index:30;

}

.nav-container ul ul ul ul{

z-index:40;

}

.nav-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

left:auto;

}

#nav-container ul {

top:100%;

}

#nav-container ul li:hover>ul{

top:0px;

left:100%;

}

/*^’^ Primary Items ^’^*/

#nav-container a{

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(images/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}

#nav-container a:hover{

color: #6C3600;

background: url(images/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}

/*^’^ Secondary Items Container ^’^*/

#nav-container div, #nav-container ul{

padding:10px 4px 10px 4px;

margin:0px 0px 0px 0px;

background: url(images/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}

/*^’^ Secondary Items ^’^*/

#nav-container div a, #nav-container ul a{

padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(images/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}

/*^’^ Secondary Items Hover State ^’^*/

#nav-container div a:hover, #nav-container ul a:hover{

background-color: #FFFFFF;

background: url(images/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}

/*^’^ Secondary Item Titles ^’^*/

#nav-container .item-secondary-title{

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(images/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}

/*^’^ Horizontal Dividers ^’^*/

#nav-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}

/*^’^ Vertical Dividers ^’^*/

#nav-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}

আর হ্যাঁ মেনুটা কেমন হয়েছে বলতে ভুলবেন না কিন্তু। একটা বিখ্যাত সাইটের মেনু দেখে বানিয়েছি।

এত কিছু আপলোড করলাম আবার পুরো ফাইটা বাদ দেই কেন? এটাও এখানে দিলাম।

A Web Developer’s Guide to HTML 5

একেবারে অ আ ক খ থেকে শিখানোর মতো ওয়েব এটি। একেবারে প্রাথমিকভাবে শিখতে গেলে চলে যান এখানে।

The WHATWG Blog

WHATWG ব্লগটিতে আলোচনার মাধ্যমে HTML5 এর বিষয়গুলো পরিষ্কার হওয়ার মতো সুবিধা পাওয়া যাবে।

Dive Into HTML 5

Dive Into HTML 5 বইটিতে হাতে ধরে শিখানো হয়েছে HTML5 i

HTML5 Doctor

Ask the Doctor অপশনের মতো ফিচার আছে এখানে যেখানে শিখতে গেলে কোন সমস্যা পেলে তার সমাধানর জন্য জিজ্ঞাস করার ব্যবস্থা আছে।

When can I use…

HTML5, CSS3, SVG সহ নতুন নতুন ব্যবহারগুলোর আলোচনা রয়েছে।

HTML5 Visual Cheat Sheet

এখানে HTML5 এর ট্যাগের বিবরণ দেওয়া আছে।

HTML5 Gallery

HTML5 gallery এ মূলত: HTML5 এর নান্দনিক ব্যবহারিক দিকগুলো তুলে ধরা হয়েছে। আর এর মাধ্যমে HTML5 শিখার গুরুত্বও দেওয়া হয়েছে। আশা করি এই ওয়েব গুলো আমাদের শিক্ষার মান বৃদ্ধিতে সহায়ক হবে। সাবাইকে আমার পরের লেখাগুলো অনুসরণ করার আমন্ত্রণ জানিয়ে এখানেই শেষ করছি।

৮. header ও footer ট্যাগ:

আগের মতো সিএসএসের পায়ে ধরার দরকার হবে না।

1. <div id=”header”>
2. …
3. </div>
4. <div id=”footer”>
5. …
6. </div>

এর মতো করে না লিখে

1. <div id=”header”>
2. …
3. </div>
4. <div id=”footer”>
5. …
6. </div>

এরকম লিখলেই চলবে।

৯. ফরম তৈরীতে আরও ফিচার

ফরম তৈরীতে আরও সুন্দর সুন্দর ফিচার এনে দিয়েছে। নিচের ভিডিও টিউটরিয়ালটিতে দেখতে পাবেন। কোড সহ আউটপুট

১০. Required এর ব্যবহার:

সয়ংক্রিয়ভাবে ভেলিডেশন চেকের মতো করে ফরমে ইফেক্ট সৃষ্টি করা যায়। ধরুন আপনি চান যে, কোন টেক্স বক্স খালি থাকলে কোন বাটন কাজ করবে না। তহলে, নিচের মতো করে HTML5 কোড লিখলেই চলবে।

1. <form method=”post” action=”">
2. <label for=”someInput”> Your Name: </label>
3. <input type=”text” id=”someInput” name=”someInput” placeholder=”Douglas Quaid” required>
4. <button type=”submit”>Go</button>
5. </form>

বক্সটি খালি থাকলে Go বাটনে চাপলে টেক্সট বক্স হাইলাট হবে।

১১. অডিও প্লে

আরও মজার বেপার হলো খুব সহজেই অডিও ভিডিও এমবেড করা যাবে এখন।

1. <audio autoplay=”autoplay” controls=”controls”>
2. <source src=”file.ogg” />
3. <source src=”file.mp3″ />
4. <a href=”file.mp3″>Download this file.</a>
5. </audio>এ্ই কোড লিখলেই হলো। সয়ংক্রিয়ভাবে চলবে অডিও ফাইল

১২. ভিডিও প্লে

1. <video controls preload>
2. <source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” />
3. <source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” />
4. <p> Your browser is old. <a href=”cohagenPhoneCall.mp4″>Download this video instead.</a> </p>
5. </video>

ভিডিও চলেবে এই কোড লিখলেই।

১. নতুন Doctype ডিক্লার করা:

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

২. ছবির প্রকাশনা

এখন নতুনভাবে দেখতে পাবেন ছবির প্রকাশনা।

1. <figure>
2. <img src=”path/to/image” alt=”About image” />
3. <figcaption>
4. <p>This is an image of something interesting. </p>
5. </figcaption>
6. </figure>

এ পদ্ধতিতে আরও সুন্দরভাবে ছবি প্রকাশ করা যাবে। যদিও এটা অনেকের কাছে বাড়তি ও বিরক্তকর কোড বলে মনে হয়।

৩. Type এট্রিবিউট ব্যবহার হবে না আর

জাভাস্ক্রিপ্ট ও সিএসএস এর ফাইল কল করার জন্য টাইপ ডিফাইন করা হতো নিচের মতো করে-

1. <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
2. <script type=”text/javascript” src=”path/to/script.js”></script>

মজার বেপার হলো এখন আর সেটা উল্লেখ করার দরকার নাই । নিচের মতো কোড লিখলেই চলবে-

1. <link rel=”stylesheet” href=”path/to/stylesheet.css” />
2. <script src=”path/to/script.js”></script>

৪. কষ্ট করে এখন আর ট্যাগ এর শেষ অংশ লিখতে হবে না

পূর্বে : <p class=myClass id=someId> Start the reactor.</p>

পরে: <p class=myClass id=someId> Start the reactor.

৫. কনটেন্ট সম্পাদনার মজার ও সহজ উপায়

contenteditable=”true” এর ব্যবহারের মাধ্যমে সহজে সম্পাদনা করা যাবে কনটেন্ট।

নিচের কোডগুলো দেখুন:

1. <!DOCTYPE html>
2. <html lang=”en”>
3. <head>
4. <meta charset=”utf-8″>
5. <title>untitled</title>
6. </head>
7. <body>
8. <h2> To-Do List </h2>
9. <ul contenteditable=”true”>
10. <li> Break mechanical cab driver. </li>
11. <li> Drive to abandoned factory
12. <li> Watch video of self </li>
13. </ul>
14. </body>
15. </html>

৬. ই-মেইল ইনপুট বক্স

এখন আগের মতো ঝামেলা করতে হবে না ইনপুটবক্স বানাতে। ই-মেইল ইনপুট বক্স সহজেই মনে রাখবে আপনার পূর্বে উল্লেখিত ইমেইল ঠিকানাগুলো।

1. <!DOCTYPE html>
2. <html lang=”en”>
3. <head>
4. <meta charset=”utf-8″>
5. <title>untitled</title>
6. </head>
7. <body>
8. <form action=”" method=”get”>
9. <label for=”email”>Email:</label>
10. <input id=”email” name=”email” type=”email” />
11. <button type=”submit”> Submit Form </button>
12. </form>
13. </body>
14. </html>

৭. টেক্স বক্সে ডিফল্ট টেক্স দেওয়ার সহজ সমাধান

আগের মতো জাভাস্ক্রিপ্ট নির্ভরশীল হতে হবে না সাধারন placeholder এর জন্য । এখন এসেছে placeholder এট্রিবিউট।

<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />

লিংক ইভেন্ট

onClick

এর মাধ্যমে ক্লিকের পরের কি হবে তা প্রকাশ করে দিতে পারেন। নিচের কোডটা দেখুন

<IMG SRC = http://tutorialbd.files.wordpress.com/2010/03/logo.gif onClick = “alert(‘This is Logo of TutorialBD.com’)”>

আউটপুট দেখুন: ছবিটিতে ক্লিক করলেই This is Logo of TutorialBD.com কমান্ডটি দেখা যাবে।

onDblClick

onDblClick এর জায়গায় onDblClick ণিখে কোড এক্সিকিউট করলে , ছবিটিতে ডাবল ক্লিক করলে একই ঘটনা ঘটবে।

mouseOut

মাউস কোন একটি লিঙ্কের উপর থেকে চলে গেলে,সেই ইভেন্টটি কাজ করবে।

mouseOver

মাউসটি কোন লিংকের উপরে আসলে সেই ইভেন্টটি কাজ করবে।

ইনপুট ইভেন্ট

blur

কোন একটি ইনপুট অবজেক্ট থেকে সরে গিয় অন্য অবজেক্টে কাজ করার সময়টাকে বুঝায়। (ফিজুয়ালবেসিকে এটাকে LostFocus বলা হয়।) সাধারনত: ডাটা চেক করতে এটি ব্যবহার করা হয়।নিচের কোডটা দেখুন।

<INPUT TYPE = text onBlur = “alert(‘Lost focus’)”>

এবার আউটপুট দেখুন। ইনপুট বক্সে কিছু লিখুন ।এবার অন্য কোথাও ক্লিক করুন। এলার্ট ব্কটি আসবে।

তাহলো আমরা একটি জাভাস্ক্রিপ্ট ফাংশনের মাধ্যমে এর ব্যবহারিক দিক দেখবো।

Enter email address <INPUT TYPE="text" VALUE=""          NAME="userEmail" onBlur=addCheck()>

<script type="text/javascript" language="JavaScript">

function addCheck() {
alert("Please check your email details are correct          before submitting")
}

</script>

পরবর্তিতে নিচের ইভেন্টগুলো আলোচনা করা হবে:

• change
• focus
• reset
• select
• submit

টিউটরিয়ালবিডির ভক্ত হিসেবে আমি মনে করি ফিড সাবক্রাইব করার সুবিধা নিতে ভুলবেন না। আর টিউটরিয়ালবিডির লিংকটি আপনার সাইটের (যদি থাকে) কোন অংশে প্রদান করে-এগিয়ে চলার পথ সহজ করলে আমারা আরও নতুন নতুন টিউটরিয়াল নিয়ে হাজির হতে পারবো। ই-মেইলের মাধ্যমে অনেকেই টিউটিরয়াল পড়ছেন। এ পোস্ট লেখা পর্যন্ত প্রায় ৩০০+ জনকে প্রতিটি টিউটরিয়াল ই-মেইলের মাধ্যমে পাঠানো হচ্ছে। আপনি যদি ই-মেইল পাঠক হতে চান তাহলে এখানে আপনার ইমেইল আইডি দিয়ে দিন, তার পর নিজের মেইল ব্ক্স থেকে একটিভেট করে নিন। এছাড়াও টুইটারে,গুগল বাজ এবং ফেসবুকে টিউটরিয়ালবিডিকে পাবেন।

১. টেক্সট বক্স (এক লাইন)

টেক্সট বক্সই প্রধানতম ইলিমেন্ট। এর মাধ্যমে সাধারনত ইউজারের কাছ থেকে ডাটা নেয়া হয়। নিচের কোডের মাধ্যমে একটি টেক্সট বক্স তৈরী করা হয়।

<input type="text" name="mail" size="25">

input

এই ট্যাগের মাধ্যমে বিভিন্ন ফর্ম অবজেক্ট কল করা হয়।

type=”text”

বিভিন্ন ধরনের অবজেক্টের মধ্যে টেক্স অবজেক্টটির জন্য type=”text” লেখা হয়।

size=”25″

২৫ টি অক্ষরের ধারন ক্ষমতা সম্পন্ন টেক্সট বক্স এটি। অবজেক্টের ধারন ক্ষমতা অনুসারে এর সাইজ দিতে হবে। নামের একটি অংশের জন্য সাইজ ১৫ এবং ঠিকানার জন্য আরও বড় সাইজের টেক্সট বক্সের প্রয়োজন হতে পারে।

name

টেক্সট বক্সের নামটির মাধ্যমে টেক্সট বক্সটিকে কল করা হতে পারে। কোন একটি ডাটা ইনপুট দিলে তা name এ সংগ্রিহিত হয়। যদি name=fname হয়, ইউজার যদি Karim ইনপুট দেয় তাহলে
fname=Karim হবে।

২. টেক্সট এরিয়া

একাধিক লাইনের টেক্সট লেখতে টেক্সটএরিয়া ব্যবহার করা হয়। টেক্সএরিয়ার জন্য input type=”…” ব্যবহারের দরকার হয় না। নিচের টেক্সএরিয়ার জন্য নিচের কোড লিখতে হয়।

<textarea cols="50" rows="4" name="comment"></textarea>
কলাম ও রো এর মান পরিবর্তনের মাধ্যমে এর সাইজ পরিবর্তন করা হয়। সিএসএস ব্যবহার করে অবশ্য আরও ভাল ডিজাইনের টেক্সটএরিয়া বানানো যায়। পরবর্তিতে একটি টিউটরিয়ালের মাধ্যমে ফর্ম ডিজাইনে সিএসএস এর ব্যবহার দেখাবো।

৩. রেডিও বাটন

বিভিন্ন জরিপ বা একাধিক অপশন থেকে একটি সিলেক্ট করতে রেডিও বাটন ব্যবহার করা হয়।
১.

১.<input type="radio" name="choices" value="choice1">
একই গ্রুপের সবগুলো বাটনের একই নাম থাকতে হয়। ভিন্ন নাম ব্যবহার করলে তারা ভিন্ন গ্রুপ হিসেবে আচরণ করবে। যেমন-

<form name=myform>
<input type="radio" name=myradio1 value="1">one
<input type="radio" name=myradio2 value="2">two
<input type="radio" name=myradio3 value="3">three
</form>

কোন একটি বাটনকে আগে থেকে সিলেক্ট করে রাখতে তার শেষে checked কথাটি লিখে দিতে হবে।আর কোন বাটনকে নিস্ক্রিয় রাখতে disabled লিখে দিতে হবে।

<form name=myform>
<input type="radio" name=myradio value="1" disabled>one
<input type="radio" name=myradio value="2" checked disabled>two
<input type="radio" name=myradio value="3" disabled>three
</form>


৪. চেক বক্স

চেক বক্সের জন্য অনেকটা রেডিও বাটনের মতোই কোড লিখতে হয়।

<form name=myform>
<input type="checkbox" name=mybox value="1" >one
<input type="checkbox" name=mybox value="2" >two
<input type="checkbox" name=mybox value="3" >three
</form>

একই ভাবে কোর বাটনকে চেক করা, নিস্ক্রিয় করাও যায়।

HTML টিউটরিয়াল সূচি-পত্র

HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)

HTMLপর্ব- দুই: রঙের ব্যবহার

HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার

HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১

HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২

HTML পর্ব-৬ HTML এ Font ট্যাগের ব্যবহার

HTML টিউটরিয়াল : ফরম ডিজাইন