Saturday , 7 December 2019
Home » Tag Archives: how to write html

Tag Archives: how to write html

HTML ফ্রি বাংলা টিউটোরিয়াল,HTML ব্যাসিক আলোচনা-2 (পর্ব-3)

হ্যালো বন্ধুরা ,

আসসালামু আলাইকুম

যারা আগের পর্ব দেখেন নি তাদের জন্য আগের পর্বের লিংক-

HTML ফ্রি বাংলা টিউটোরিয়াল,HTML নিয়ে প্রাথমিক আলোচনা।HTML শিখে ক্যারিয়ার গড়া সম্ভব? বিস্তারিত আলোচনা।

HTML ফ্রি বাংলা টিউটোরিয়াল,HTML ব্যাসিক আলোচনা-১ (পর্ব-২)

সবাই কেমন আছেন,আজকে আমি আপনাদের জন্য HTML ব্যাসিক আলোচনা-2 (পর্ব-3) নিয়ে হাজির হয়েছি,আজকের পর্বে আপনাদের জন্য যা যা রয়েছে-

১)অ্যাট্রিবিউট লেখার নিয়ম

2)ভ্যালিউ সেট করার নিয়ম

৩)HTML এর প্রধান অ্যাট্রিবিউট সমূহ

৪)কনটেন্ট (Contents)

৫) HTML এক্সটেনশন (Extension)

৬) HTML এডিটর

তাহলে দেখে নিলেন আজকের সূচি পত্র এবার চলুন মুল আলোচনায়-

১)অ্যাট্রিবিউট লেখার নিয়ম

HTML এ অ্যাট্রিবিউট লেখার নিয়ম হচ্ছে ওপেনিং ট্যাগ এর মধ্যে ট্যাগ এর নাম এর পর একটি স্পেস ব্যবহার করে অ্যাট্রিবিউট উল্যেখ করতে হয়।

<Tag_name attribute_name

2)ভ্যালিউ সেট করার নিয়ম

অ্যাট্রিবিউট এর ভ্যালিউ সেট করার জন্য অ্যাট্রিবিউট এর নামের পরে একটি ইকুয়াল সাইন, তারপর কোটেশন এর মধ্যে ভ্যালিউ লিখতে হয়।

” value “

নিচে অ্যাট্রিবিউট ও ভ্যালিউ ব্যবহার করে ট্যাগ লিখে দেখানো হল ঃ

বিঃদ্রঃভ্যালিউ অ্যাসাইন করার সময় কোটেশন ব্যবহার করা আবশ্যক। সিংগেল এবং ডাবল কোটেশন – উভয় পদ্ধতি ব্যবহার করা যাবে।

৩)HTML এর প্রধান অ্যাট্রিবিউট সমূহ

HTML এ উল্যেখ কিছু অ্যাট্রিবিউট রয়েছে, যেগুলো প্রায় সব ধরণের ট্যাগ এর সাথে ব্যবহারযোগ্য। এগুলো হলঃ id, class, title এবং style ।

এবার আমরা id, class, title এবং style সম্পর্কে একে একে জানব।

id

HTML পেজের কোন ট্যাগকে নির্দিষ্টভাবে সনাক্ত করার জন্য id অ্যাট্রিবিউট ব্যবহার করা হয়ে
থাকে। HTML পেজকে যখন কোন CSS অথবা JavaScript ফাইলের সাথে লিংক করা হয়, তখন HTML এর
ট্যাগকে ID অ্যাট্রিবিউট ব্যবহার এর মাধ্যমে উক্ত CSS অথবা JavaScript ফাইল যথাযথ কাজ সম্পাদন করে থাকে।
যেমন ঃSEE THE PHOTO-

class

HTML পেজের মধ্যে একই রকমের বিভিন্ন ট্যাগকে আলাদা-আলাদাভাবে সনাক্ত করার জন্য CLASS অ্যাট্রিবিউট ব্যবহার করা হয়ে থাকে। যেমন ঃ কোন একটি HTML পেজের মধ্যে ৪টি <P> ট্যাগ রয়েছে। এখন আমি যদি এই ৪টি <P> ট্যাগকে আলাদা-আলাদাভাবে সনাক্ত করতে চাই, তবে class Attribute এর মাধ্যমে
সংজ্ঞায়িত করতে হবে। যেমন ঃ

বিঃদ্রঃ HTML ID এবং CLASS অ্যাট্রিবিউট এর ভ্যালিউ ‘কেস-সেনসিটিভ’। ভ্যালিউ হিসেবে যে কোন নাম হতে পারে,সেই মান ধরে CSS অথবা JAVASCRIPT প্রয়োজনীয় কাজ সম্পাদন করবে। ভ্যালিউ অবশ্যই লেটার দিয়ে শুরূ হতে
হবে এবং পরবর্তীতে নাম্বার (০-৯), হাইফেন (-), আন্ডারস্কোর ( _ ), কমা (,) ব্যবহার করা যেতে পারে।

title

HTML পেজের কোন ইলিমেন্টকে (ইলিমেন্ট নিয়ে পরবর্তী পার্ট গুলোতে বিস্তারিত আলোচনা করা হবে) ব্রাউজারে নির্দেশ করার জন্য title অ্যাট্রিবিউট ব্যবহার করা হয়ে থাকে। title অ্যাট্রিবিউট সাধারণত
<a>, <area>, <img>, <link>, <abbr>, <acronym> ট্যাগ গুলোতে বেশি ব্যবহৃত হয়ে থাকে।পোস্টের পরবর্তী পার্ট গুলোতে title অ্যাট্রিবিউট এর ব্যবহার দেখানো হবে।

style

HTML পেজে এক লাইন বিশিষ্ট কোন ইলিমেন্টে স্টাইল ( Inline CSS ) প্রয়োগ করার জন্য style অ্যাট্রিবিউট ব্যবহার করা হয়ে থাকে। যেমন ঃ-নিচের <p> ট্যাগে স্টাইল অ্যাট্রিবিউট ব্যবহার করে এর ফন্ট ও কালার পরিবর্তন করা হয়েছে।

< p style=”font-family:arial; color:#FF0000;” > Some text. < /p >

৪)কনটেন্ট (Contents)

ওয়েবপেজে আমরা যা দেখতে পাই, (টেক্সট, ইমেজ, অডিউ, ভিডিউ ইত্যাদি) সব কিছুই কনটেন্ট। উদাহরণস্বরূপ ঃআমরা যদি ওয়েবপেজকে একটি কনটেইনার এর সাথে তুলনা করি যে, একটি কনটেইনার এর মধ্যে কি থাকে ? চাল,
ডাল, পানি ইত্যাদি। কনটেইনার এসব কিছু ধারণ ( contain ) করে। আর ধারণকৃত চাল, ডাল, পানি হচ্ছে উক্ত কনটেইনার এর কনটেন্ট ( contain )। ঠিক তেমনি, এখানে কনটেইনার হচ্ছে আমাদের ওয়েবপেজ আর কনটেইনার এর
মধ্যে থাকা চাল,ডাল, পানি ইত্যাদি যাবতীয় কনটেন্ট হচ্ছে ওয়েবপেজে ব্যবহৃত টেক্সট, ইমেজ, অডিউ, ভিডিউ ইত্যাদি।

চিত্র : (ওয়েবপেজ এর কনটেন্ট সমূহ)।

৫) HTML এক্সটেনশন (Extension)

কম্পিউটারে ব্যবহৃত প্রতিটি ফাইল, বিভিন্ন প্রোগ্রামিং ল্যাংগুয়েজ এর নিজস্ব এক্সটেনশন/ফরম্যাট রয়েছে। এক্সটেনশন
বলতে একটি ফাইল যে নামে সেভ করা হয়ে থাকে, তাকে বুঝায়। যেমন ঃ-বিভিন্ন ভিডিও ফাইলের এক্সটেনশন ঃ”.avi, .vod. .dat, .mp4″ ইত্যাদি হয়ে থাকে। বিভিন্ন অডিও ফরম্যাটের গান এর এক্সটেনশন ঃ “.mp3, .amr, .wav” ইত্যাদি হয়ে থাকে। আবার বিভিন্ন প্রোগ্রামিং ল্যাংগুয়েজ যেমন ঃ-পিএইচপি‘র এক্সটেনশন হচ্ছে “. php “,
JavaScript প্রোগ্রামিং ল্যাংগুয়েজ এর এক্সটেনশন হচ্ছে “. js “। ঠিক তেমনি HTML ল্যাংগুয়েজ এর এক্সটেনশন
হচ্ছে “. HTML”। এক্সটেনশন ব্যাতিত অথবা এক্সটেনশন পরিবর্তন হলে কোন ভাবেই উক্ত ফাইল কাজ করবে না। যেমন ঃ কোন অডিও ফাইলের এক্সটেনশন পরিবর্তন করে যদি ইমেজ ফরম্যাট ফাইলের এক্সটেনশন ” .jpg, .gif, .png” দেয়া
হয়, তাহলে যেমন উক্ত অডিও ফাইল কাজ করবে না, ঠিক তেমনি HTML এর এক্সটেনশন পরিবর্তন করে যদি “.php ” রাখা হয়, তাহলে এটি ও কাজ করবে না। সুতরাং এক্সটেনশন অতি গুরূত্বপূর্ণ বিষয়।

৬) HTML এডিটর

এইচটিএমএল কোড লিখার জন্য আমাদের একটি টেক্সট এডিটর প্রয়োজন হবে, যেমন – Notepad, Notepad ++, Text Editor ইত্যাদি। এছাড়া, বর্তমানে বিভিন্ন ধরনের IDE (Integrated Development Environment) Software যেমন:-(Macromedia Dreamweaver, Adobe Dreamweaver ইত্যাদি) রয়েছে, যেগুলো ব্যবহার করে সহজ ও স্বল্প সময়ে প্রোগ্রাম লেখা যায়। ম্যাক্রোমিডিয়া ড্রিমওয়েভার ব্যবহার করে অনায়াসেই অনেক আকর্ষনীয় ওয়েবসাইট তৈরি করা যায়।

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

আল্লাহ হাফেজ।

HTML ফ্রি বাংলা টিউটোরিয়াল,HTML ব্যাসিক আলোচনা-১ (পর্ব-২)

হ্যালো বন্ধুরা

আসসালামু আলাইকুম

সবাই কেমন আছেন আসাকরি ভাল আছেন,গত পোস্টে আমরা Html এর প্রাথমিক আলোচনা করেছিলা,মানে এইচটিএমএল কী ,এর কাজ কি,এইটা কিভাবে কাজ করে ।এটা শিকে কী ক্যারিয়ার গরা সম্ভব,আর আজকে আমরা আআলোচনা করব এইচটিএমএল নিয়ে মানে আমরা আজকে এইচটিএমএল এর ব্যাসিক গুলো জেনে নেব।তাহলে চলুন কথা না বাড়িয়ে জেনে নেই কী কী থাকছে আজকের পর্বে-

আজকের পর্বের বিষয়ঃ-

১) এইচটিএমএল ট্যাগ কী? (Tag)

২)ট্যাগ লিখার নিয়ম।(how to write html)

৩)ওপেনিং ট্যাগ। (Opening Tags)

৪)ক্লোজিং ট্যাগ। (Closing Tags)

৫)HTML এম্পটি ট্যাগ। (Empty Tags)

৬) HTML ডেপ্রিকেটেড ট্যাগ (Deprecated Tags) এট্রিবিউট (Attributes)

৭) HTML এট্রিবিউট (Attributes) ও ভ্যালিও (Value)

তাহলে জেনে নিলাম কী কী আছে আজকের পর্বে এবার আসুন চলে যাই মূল আলোচনায়।

মূল আলোচনাঃ-

১) এইচটিএমএল ট্যাগ কী? (Tag)

এইচটিএমএল কে ব্রাউজারে প্রদর্শন করার জন্য ব্যবহার হয়ে থাকে।এইচটিএমএল ট্যাগগুলো অনেকটা ইউজার ফ্রেন্ডলি।ইউজার ফ্রেন্ডলি বলতে এইচটিএমএল ট্যাগগুলো আয়ত্ত করার জন্য প্রোগ্রামিং ল্যাঙ্গুয়রজ এর মত এত কস্ট করতে হয় না।ব্রাউজার এইচটিএমএল এর ট্যাগ এর উপর ভিত্তি করে পেইজের কন্টেন্ট প্রদর্শিত করে।যেমন লেখাকে বোল্ড করার জন্য b এবং আন্ডারলাইন করার জন্য u টাগ ব্যবহার হয়।কিন্তু প্রশ্ন হতে পারে তাহলে সাধারন টেক্সট এবং এইচটিএমএল টেক্সট এর মাঝে পার্থক্য কি?হত্মল লিখার মূলত কিছু নিয়ম রয়েছে।

২)ট্যাগ লিখার নিয়ম।(how to write html)

  • প্রতিটি এইচটিএমএল ট্যাগ < (less than Sign) দিয়ে শুরু করতে হয়।
  • এর পরে ট্যাগ এর নাম উল্যেখ করতে হয়।
  • এবং সব শেষে (greater than Sign) দিয়ে ট্যাগ শেষ করতে হয়।যেমনঃ <a> ,<b>,<img> ইত্যাদি।

বিঃদ্রঃ এইচটিএমএল টাগ গুলো কেস সেন্সেটিভ নয়,তবে w3s স্টেন্ডার্ড অনুযায়ী ছোট অক্ষরে লিক্ষা ভাল। এইচটিএমএল এ কোন টেক্সট কে টয়াগ এর মাধ্যমে লিখার জন্য প্রতিটা ট্যাগ কে দুইবার লিখতে হয়।নিচে নিয়ম দেখানো হয়েছে-

৩)ওপেনিং ট্যাগ। (Opening Tags)

টেক্সট শুরু করার আগে অপেনিং ট্যাগ ডিক্লেয়ার করতে হয়,অপেনিং ট্যাগ লিখার নিয়ম -<Tag>

৪)ক্লোজিং ট্যাগ। (Closing Tags)

টেক্সট শেষ করার পরে ক্লোজিং ট্যাগ লিখতে হয়,ক্লোজিং ট্যাগ লিখার নিয়ম হচ্ছে,ট্যাগ এর নামের আগে লেসদেন সাইন এর পরে একটা ফরওয়ার্ড স্লেশ / ব্যবহার করতে হয়।অর্থাতঃ </tag>.নিছে ওপেনিং এবং ক্লোজিং ট্যাগ লিখার নিয়ম দেখানো হল।

< Opening Tag > Here is Your Text </ Closing Tag >

<p>This line would be written under Paragraph style </p>

৫)HTML এম্পটি ট্যাগ। (Empty Tags)

এইচটিএমএল এ এমন কিছু ট্যাগ আছে যেগুলো কোন ট্যাক্সটকে প্রবাবিত করে না।বিশেষ কিছু কাজে এদের ব্যবহার হয়ে থাকে।যেমনঃ< br >,< img >,< input > ইত্যাদি।এই ট্যাগ গুলোকে Empty Tags বলে।এই ট্যাগ গুলোর কোন ক্লোজিং ট্যাগ নাই।তবে W3C স্টেন্ডার্ড অনুযায়ী এসখল এম্পটি ট্যাগ গুলোকেউ ক্লোজ করা উচিৎ তাই এই সব ট্যাগে ট্যাগ এর নামের পরে ও greather than সাইন এর আগে একটা ফরওয়ার্ড স্লেশ / ব্যবহার করা হয়।

৬) HTML ডেপ্রিকেটেড ট্যাগ (Deprecated Tags) এট্রিবিউট (Attributes)

এইচটিএমএল এর পূর্বের ভার্সন গুলোতে ব্যাবহৃত কীছু ট্যাগ ও এট্রিবিউট নতুন ভার্সনে অনুনমুদিত(ডেপ্রিকেটেড) ঘোষনা করা হয়। ডেপ্রিকেটেড মানে এই নয় যে এটি আর ব্যাবহার করা যাবে না ,তবে পেইজ ভ্যালিডেশনে এটি সমস্যা হয়ে দাড়াবে।


৭) HTML এট্রিবিউট (Attributes) ও ভ্যালিও (Value)

এইচটিএমএল ট্যাগ এ ব্যবহৃত বিষয় সমূহের বিভিন্ন পরিবর্তন সাধন,বিভিন্ন আবজ্ঞিকে উপস্তাপনা এর জন্য ট্যাগ এর মাঝে নিভিন্ন এট্রিবিউট ব্যবহার হয়।আর এই সমস্ত এট্রিবিউট এর কাজকে সুনির্দিস্ট করতে এগুলোতে বিবভিন্ন ভ্যালু ব্যবহার হয়।যেমনঃ <p> ট্যাগ ব্যবহার করে যকন আওরা কিছু লিখি তখন এইটা স্বাভাবিক ভাবে পেইজের বাম দিক থেকে শুরু হয়,কিন্তু আমরা যদি এইটাকে ডান থেকে শুরু করতে চাই এর জন্য আমামদের ট্যাগ এর সাথে এট্রিভিউট ব্যবহার করতে হবে,নিচে উদাহরন দেওয়া হলঃ-

< p dir=” rtl “> This line will be shown as right to left in browser </p>

বিঃদ্রঃ এখানে <p> হচ্ছে ট্যাগ আর dir হচ্ছে উক্ত ট্যাগ এর এট্রিভিউট এবং rtl হল এট্রিভিউট এর ভ্যালু।

তাহলে বন্ধুরা আজকের পর্বের আলোচনা এ পর্যন্তই ছিল ,আসা করি শীগ্রই পরবর্তি পর্ব নিয়ে হাজির হব এবং পরবর্তিতে আরো অনেক কিছু নিয়ে আলোচনা করব ইনশাআল্লাহ।

পরবর্তি পর্বের আগে পর্যন্ত সবা ভাল থাকুন সুস্থ থাকুন,সে প্রত্যসায় শেষ করচি আজকের পোস্ট।

আল্লাহ হাফেজ।