আশাকরি ভালো লাগবে। ভুলত্রুটি ক্ষমা করবেন।
খুবই সাধারনভাবে, আপনি ব্রাউজারে যখন একটি ওয়েব পেজ দেখেন, তখন আপনার সামনে থাকে ওয়েব পেজ এর সবচেয়ে সাধারন চেহারাটা, আপনি কতগুল শব্দ দেখে থাকেন। এই শব্দ গুলোর সাথে সাধারন বেশ কিছু ডিজাইন সম্পর্কিত ব্যাপার থাকে, যেমন নানা ধরনের ফন্ট সাইজ, কালার। আবার কিছু কিছু ক্ষেত্রে, একটা পেজে আপনি ছবি বা ভিডিও দেখতে পাবেন। আবার অনেক সময় আপনি একটা ফর্ম দেখতে পাবেন, সেখানে আপনি নিজের মতো করে লিখে সার্চ করতে পারেন, অথবা আপনার ইচ্ছে মতো পেজের চেহারা পরিবর্তন করতে পারেন। আবার কখনো কখনো পেইজের কিছু অংশ স্থির থাকে আর কিছু অংশ পরিবর্তিত হতে থাকে।
আমি এইচটিএমএল নিয়ে ধারাবাহিক টিউটোরিয়াল আমার ইউটিউব চ্যানেলে আপলোড করতেছি। এখান থেকে ঘুরে আসুন- click here
বেশ কিছু প্রযুক্তি রয়েছে (যেমন CSS, JavaScript, Flash, AJAX, JSON) যেগুলো একটা ওয়েব পেজ এর নানা অংশকে তৈরি করার কাজে ব্যবহার করা হয়। তবে, একদম শুরুর কথা বললে, একটা ওয়েব পেজ কে শুরু করতে হবে HTML (HyperText Markup Language) ব্যবহার করে। HTML ছাড়া কোন ওয়েব পেজ হতে পারে না। HTML হচ্ছে সেই জিনিস যা কিনা ওয়েবের বাকি সবকিছুকে ধরে রেখেছে - এটি একটি আন্তর্জাতিক স্ট্যান্ডার্ড যার নীতিমালা প্রণয়ন করে World Wide Web Consortium (W3C) এবং Web Hypertext Application Technology Working Group (WHATWG)। WHATWG ধরেই নিয়েছে HTML প্রায়ই পরিবর্তিত হবে। আর W3C, নিয়মিত বিরতি তে HTML এর সংস্করণ প্রণয়ন করে, যেটার সর্বশেষ টা হচ্ছে HTML5, যার ভবিষ্যৎ হচ্ছে HTML 5.1।
HTML নির্দেশিকা একটি মাত্র প্রোগ্রামিং ভাষা আমাদের দিয়েছে, যা আমরা HTML সিনট্যাক্স ব্যবহারকরে লিখে থাকি। এই সিনট্যাক্স অতটা কড়াকড়ি করে না, তবে একটু কড়াকড়ি (strict) সিনট্যাক্স ও আছে যেমন XML (Extensible Markup Language)। এছাড়া ওয়েব এপ্লিকেশন তৈরি করতে কি কি লাগতে পারে সেটাও এই নির্দেশিকার অংশ। তবে এই নির্দেশিকা যা নিয়ে মাথা ঘামায় না তা হল কন্টেন্ট কে কিভাবে স্টাইল দেওয়া হবে। নির্দেশিকা শুধুমাত্র কন্টেন্ট এর মানে কি, সেটা নিয়েই আলোচনা করে। যারা ওয়েব পেইজ তৈরি করেন, তারা CSS ব্যবহার করে ওয়েবসাইটের চেহারা/দেখতে কেমন হবে তা বলে দিতে পারেন। ওয়েবপেইজের টেক্সট এর লে-আউট কেমন হবে ইত্যাদি এটি দিয়ে নির্ধারণ করে দেওয়া যায়। HTML ব্যবহার করেও ওয়েব পেইজ দেখতে কেমন হবে তা নির্ধারণ করা যায়, তবে আপনাকে উৎসাহিত করা হচ্ছে CSS ব্যবহার করে পেইজের চেহারা দিতে। এখনকার ভাল ডেভেলপার রা এটাই করে থাকেন। এই আর্টিকেলে আপনাকে HTML এর সাথে পরিচয় করিয়ে দেওয়া হবে। যদি ওয়েব ব্রাউজারে যা হচ্ছে, কিভাবে হচ্ছে জানার আগ্রহ থাকে, তাহলে ঠিক যায়গাতেই এসেছেন।
১৯৮০'র শেষের দিকে টিম বার্নার লি, সার্নে (দ্যা ইউরোপিয়ান অর্গানাইজেশন ফর নিউক্লিয়ার রিসার্চ) একজন ফিজিসিষ্ট হিসাবে কর্মরত ছিলেন। তিনি বিজ্ঞানীদের জন্য ইন্টারনেট ব্যবহার করে নানা ধরনের তথ্য উপাত্ত শেয়ার করার একটা উপায় খুঁজে বের করেন। তার আবিষ্কার এর আগে, ইন্টারনেট এর মাধ্যমে যোগাযোগ শুধু সাধারন টেক্সট, ইমেইল এর মতো প্রযুক্তি, FTP (ফাইল ট্রান্সফার প্রটোকল) এবং Usenet ভিত্তিক আলোচনা মাধ্যমের মধ্যেই সীমাবদ্ধ ছিলো। HTML এর আবিষ্কার একটা কেন্দ্রীয় সার্ভারে রাখা বিভিন্ন তথ্যকে সাজিয়ে সেটাকে ব্রাউজার এর মাধ্যমে দেখার সুযোগ সৃষ্টি করে। এটা "রিচ" ডকুমেন্ট (যেখানে লেখালেখি নানা ভাবে সাজানো হয় এবং ছবি দেখানোর ব্যবস্থা থাকে) দেখার সুবিধাকে আরো সহজ করে দেয়।
HTML (HyperText Markup Language) কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়; HTML হল একটি মার্কআপ ল্যাঙ্গুয়েজ, আপনি যে ওয়েবসাইটটি ভিজিট করছেন সেটি কিভাবে আপনার সামনে উপস্থাপন করতে হবে তা ব্রাউজারকে নির্দেশ দেয়। এই নির্দেশাবলী ওয়েবসাইটটির ডেভেলপার দিয়ে থাকেন, নির্দেশাবলী গুলো অনেক জটিল বা অত্যন্ত সরল হতে পারে। HTML অনেকগুল উপাদান(শব্দ, ছবি, অডিও, ভিডিও এবং আরও অনেক) নিয়ে গঠিত হয়, যেগুলো একত্রে বিভিন্ন ধরনের কাজ করে থাকে। HTML পূর্ব নির্দেশিত উপাদানের সমষ্টি ব্যবহার করে বিষয়বস্তুর উপস্থাপন করে। যেকোনো উপাদান উপস্থাপন করতে HTML-এ ট্যাগ ব্যবহার করা হয়। ট্যাগগুলো বেস্টিত থাকে কোনাকৃতির ব্রাকেট(< >), এবং "বন্ধ" ট্যাগ (যা বিষয়বস্তুর শেষে নির্দেশিত হয়) অগ্রবর্তী স্ল্যাশ (</>) দ্বারা।
এইচটিএমএল ল্যাঙ্গুয়েজ অনেক গুলো টেক্সট এর মার্কআপ করা।
কিছু মার্কআপ ট্যাগ এর সমন্বয়ে এইচটিএমএল ট্যাগ গুলো গঠিত।
এইচটিএমএল ডকুমেন্ট এইচটিএমএল ট্যাগ দ্বারা বর্ননা করা হয়।
প্রতিটি এইচটিএমএল ট্যাগ বিভিন্ন ডকুমেন্টের বিষয়বস্তু বর্ণনা করে থাকে।
যেমনঃ
<!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” এক্সটেনশন ব্যবহার করতে হবে। অন্যথায় কিন্তু আপনার ব্রাউজার ফাইলটি রিট করতে পারবে না।
ধাপ-৪: এবার আপনার ফাইলটি ওপেন করুন যে কোন একটি ব্রাউজারে। তখন আপনি দেখতে পাবেন যা যা লিখেছেন সব ব্রাউজারে দেখা যাবে।
নিচের ভিডিওটি দেখুন এবার।
আমি কাজী শামীম শাহারিয়ার ইসলাম। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 8 বছর 2 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 121 টি টিউন ও 21 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 24 ফলোয়ার আছে এবং আমি টেকটিউনসে 2 টিউনারকে ফলো করি।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
