Wednesday , 16 October 2019
Home » Tag Archives: html tutorial

Tag Archives: html tutorial

HTML বাংলা টিউটোরিয়াল (পর্ব-৭),এইচটিএমএল টেক্সট ফরম্যাটিং।

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

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

সবাই কেমন আছেন<আজকে আম আপনাদের জন্য নিয়ে এসেছি HTML বাংলা টিউটোরিয়াল (পর্ব-৭),এইচটিএমএল টেক্সট ফরম্যাটিং। চলুন দেখেনেই আজকের পর্ব-

আমরা যখন কোন ওয়েবসাইট ভিজিট করি, তখন সেখানে বিভিন্ন ধরণের টেক্সট (লেখা) দেখতে পাই।

বিভিন্ন ধরণের টেক্সট বলতে – টেক্সটকে বিভিন্নভাবে সাজানো হয়ে থাকে। যেমন ঃ লেখাকে বোল্ড করা, আন্ডারলাইন করা, প্যারাগ্রাফ আকারে লিখা, লেখার কালার পরিবর্তন করা, ফন্ট পরিবর্তন করা ইত্যাদি। আপনারা যারা মাইক্রোসফট ওয়ার্ড এ কাজ করেছেন, তারা জানেন – লেখাকে এমন বিভিন্ন আঙ্গিকে প্রকাশ করা কেবল কিছু অপশনে ক্লিক করা মাত্র। যেমন ঃ ” b ” বাটনে ক্লিক করে লেখাকে বোল্ড করা, ” Font color” অপশন থেকে বিভিন্ন কালার নির্বাচন করা, ” Font size ” অপশন থেকে লেখার আকার পরিবর্তন করা ইত্যাদি। এইচটিএমএল এও বিষয়গুলো অনেকটা একই, তবে পার্থক্য হলো মাইক্রোসফট ওয়ার্ড এ যেমন কাজগুলো আমরা ক্লিক করে করে করেছি, আর এখানে ম্যানুয়ালী কোড লিখে লিখে করতে হবে। প্রয়োজন হবে বিভিন্ন ইলিমেন্ট ব্যবহার করার। ব্যবহারের দিক থেকে এসব ইলিমেন্টসমূহকে আবার বিভিন্ন ভাগে
ভাগ করা হয়েছে। এখন আমরা এসব ইলিমেন্টস সম্পর্কে বিস্তারিত জানবো।

Heading ( <h1> থেকে <h6>) Elements

আমরা যখন পত্র-পত্রিকায় কোন লেখা পড়ি, তখন লেখার উপর শিরোনাম দেখে থাকি। ঠিক তেমনি ওয়েবসাইটেও বিভিন্ন আর্টিকেল, পোস্ট, ইমেজ অ্যালবাম ইত্যাদির উপর শিরোনাম ব্যবহার করা হয়ে থাকে, যাতে করে পাঠকরা এক নজরে পুরো বিষয়বস্তুটি বুঝে নিতে পারে। আর ওয়েবপেজে এসব বিষয়ে শিরোনাম ব্যবহার করার ক্ষেত্রে এইচটিএমএল এর হেডিং ইলিমেন্ট (< h1 > থেকে < h6 >) ব্যবহৃত হয়ে থাকে। এইচটিএমএল এ ছয় ধরণের হেডিং ইলিমেন্ট রয়েছে। যথা ঃ

1. h1 (Heading 1)

2. h2 (Heading 2)

3. h3 (Heading 3)

4. h4 (Heading 4)

5. h5 (Heading 5)

6. h6 (Heading 6)

এক্ষেত্রে ব্রাউজার Heading 1 (< h1 >) ইলিমেন্ট এর ভিতর এর লেখাকে সবচেয়ে বড় আকারে প্রদর্শিত করে এবং ক্রমানুসারে এ আকার ছোট হতে থাকে। নিচের উদাহরণের মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।

চিত্রঃ(এইচটিএমএল হেডিং ১ ইলিমেন্ট ব্যবহার করে ব্রাউজারে তার আউটপুট দেখা)।

কোড বিশে- ষণ ঃ

উপরের প্রোগ্রামে এইচটিএমএল এর সকল হেডিং ইলিমেন্ট (< h1 > থেকে < h6 >) এর ব্যবহার দেখানো হয়েছে। এখানে হেডিং ১ ইলিমেন্ট (< h1 >……</ h1 > ) এর ভিতর ” This is Heading 1–The largest o।।” লেখাটুকু ব্রাউজারে সবচেয়ে বড় আকারে প্রদর্শিত হবে। হেডিং ২ ইলিমেন্ট (< h2 >………</ h2 > ) এর ভিতর ” “This is Heading 2 – The larger one ” লেখাটুকু ব্রাউজারে হেডিং ১ ইলিমেন্ট এর চাইতে ছোট আকারে প্রদর্শিত হবে। এভা। ক্রমানুসারে লেখার আকার ছোট হয়ে আসবে।এখন ফাইলটি ব্রাউজারে রান করালে নিচের মতো আউটপুট প্রদর্শিত হবে।

চিত্র : (এইচটিএমএল এর সকল হেডিং ইলিমেন্ট ব্যবহার করে ব্রাউজারে তার আউটপুট দেখা)।

উপরে আমরা এইচটিএমএল এর সকল হেডিং ইলিমেন্টসমূহের আউটপুট দেখতে পাচ্ছি। এখন প্রশ্ন হচ্ছে, কোন ক্ষেত্রে কোন হেডিংটি ব্যবহার করবো?? হ্যা !! মূলত বিষয়বস্তুর গুরূত্বপূর্ণতার ক্রম অনুসারে এসব হেডিং ইলিমেন্ট এর ব্যবহা হয়ে থাকে। কোন বিষয়বস্তুর প্রধান সেকশন/শিরোনামকে হেডিং ১ (<h1>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে।

তার চেয়ে একটু কম গুরুত্বপূর্ণ সেকশনকে হেডিং ২ (<h2>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে।

আবার তার চেয়েও একটু কম গুরূত্বপূর্ণ সেকশনকে হেডিং ৩ (<h3>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে। তবে এখানে লক্ষ্যনীয় বিষয় হচ্ছে, উপরের প্রোগ্রামে ব্যবহার করা (<h4>, <h5> এবং <h6>) হেডিংসমূহের আউটপুট অনেকটা স্বাভাবিক টেক্সট এর
মতোই প্রদর্শিত হচ্ছে। এক্ষেত্রে ভিজিটর বুঝতে পারবে না যে, কোনটি আসলে হেডিং আর কোনটি নরমাল টেক্সট।

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

উপরের প্রোগ্রামটিতে আমি ” Web Designing ” লেখাটিতে হেডিং ১ (<h1>) ব্যবহার করেছি, কারণ-এই লাইনটিকে আমি প্রধান শিরোনাম হিসেবে উল্যেখ করতে চাচ্ছি। পরবর্তীতে আমি ” HTML (HyperText Markup Language ” এবং ” “CSS (Cascading Style Sheet) ” এই দুটি জায়গায় হেডিং ২ (<h2>) ব্যবহার করেছি, কারণএই লেখা দু’টিকে আমি ” Web Designing ” এর উপ-শিরোনাম হিসেবে উল্যেখ করতে চাচ্ছি। আশা করি বিষয়টি বুঝতে পেরেছেন।

এখন উপরের প্রোগ্রামটি ব্রাউজারে রান করালে নিচের মতো আউটপুট প্রদর্শিত হবে।

“Web Designing” লেখাটিতে হেডিং ১ ব্যবহার করার কারণে এটি ব্রাউজারে সবচেয়ে বড় আকারে প্রদর্শিত হচ্ছে। অন্যদিকে, “HTML (HyperText Markup Language)”
এবং “CSS (Cascading Style Sheet)” লেখা দু’টিতে হেডিং ২ ব্যবহার করার কারণে এটি ব্রাউজারে হেডিং ১ এর চাইতে কিছুটা ছোট আকারে প্রদর্শিত হচ্ছে।

তাহলে বন্ধুরা আমরা আজকের পর্বে এইটুকু জানলাম যে কীভাবে এইচটিএমএল এ হেডিং লিখতে হয় পরবর্তি পর্বে আমরা জানব কিভাবে হেডিং এলিমেন্ট এ এট্রিবিউট ব্যবহার করতে হয়।

আজকের পর্ব অনেক বড় হয়ে যাচ্ছে তাই আজকের মত বিদায় নিচ্ছি এখানেই।

আল্লাহ হাফেজ

HTML বাংলা টিউটোরিয়াল(পর্ব-৫)Elements in HTML.

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

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

মাইরেভিনিউয়ার্স এইচটিএমএল বাংলা টিউটোরিয়াল এর ৫ম পর্বে আপনাদের সবাইকে স্বাগতম ,সবাই কেমন আছেন আশা করি ভাল আছেন,আজকে আমাদের এইচটিএমএল টিউটোরিয়াল এর ৫ম পর্ব আর আজকের পর্বে আমরা আলোচনা করব এইচটিএমএল এর ইলিমেন্ট সম্পর্কে।তাহলে চলুন শুরু করে দেই আজকের আলোচনাঃ

১)এইচটিএমএল ইলিমেন্ট-

ইলিমেন্ট বলতে যখন এইচটিএমএল এর কোন ট্যাগ এর পরিপূর্ণ ব্যবহার হয়, তখন ঐ পুরো ট্যাগ এর ব্যবহারকে একটি
ইলিমেন্ট বলে। যেমন ঃ- <p> একটি ট্যাগ। যখন এই p ট্যাগটির সম্পূর্ণ ব্যবহার হবে, তখন পুরো বিষয়টি মিলে এটি হবে p ইলিমেন্ট।

<p> This is Paragraph Text </p>

১) এখানে <p> ওপেনিং ট্যাগ

২) ) This is Paragraph Text– হচ্ছে p ট্যাগ এর কনটেন্ট

৩) এবং </p> হচ্ছে ক্লোজিং ট্যাগ
এখন এই পুরো বিষয়টি মিলে এটিকে বলা হবে < p > ইলিমেন্ট।
নিচে আরো কিছু উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক –

ইলিমেন্ট এর গঠন

১) ওপেনিং ট্যাগ দিয়ে শুরূ হতে হবে
২) ক্লোজিং ট্যাগ ব্যবহার করে শেষ করতে হবে
৩) ওপেনিং এবং ক্লোজিং ট্যাগ এর ভিতর অন্যান্য ট্যাগ/ইলিমেন্ট অথবা কনটেন্ট থাকবে
৪) এম্পটি ইলিমেন্টকে (যেমন ঃ – hr, br, img ইত্যাদি) ওপেনিং ট্যাগ এর ভিতরই ক্লোজ করতে হবে (< hr/>, < br />,<img src=html.jpg” />)।
৫) প্রায় সকল ইলিমেন্ট এর মধ্যেই অ্যাট্রিবিউট ব্যবহার হতে পারে। যেমন ঃ- <body>, < img>, < a>< abbr > ইত্যাদি।

নেষ্টেড এইচটিএমএল ইলিমেন্ট

প্রতিটি এইচটিএমএল ডকুমেন্ট/পেইজ অসংখ্য ইলিমেন্ট এর সমন্বয়ে গঠিত। এইচটিএমএল এর প্রায় প্রতিটি ইলিমেন্ট অপর কোন ইলিমেন্টকে ধারণ করে এবং যখন কোন ইলিমেন্ট অপর কোন ইলিমেন্টকে ধারণ করে থাকে, তখন পুরো বিষয়টিকে Nested Element (একাধিক ইলিমেন্ট এর ব্যবহার) বলা হয়ে থাকে। নিচে কিছু উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।

এখানে <head> element <body>,h1 and <p> কে ধারন করেছে

এইচটিএমএল এর প্রধান ইলিমেন্টসমূহ

প্রতিটি এইচটিএমএল পেইজ তৈরিতে প্রধান চারটি ইলিমেন্ট ব্যবহৃত হয়, যেগুলো না হলেই নয়। এই ইলিমেন্টগুলো হলো ঃ

১-<html>

2-<head>

3-<title>

4-<body>

<html> Element

কোন এইচটিএমএল ডকুমেন্ট/পেইজ এর প্রধান ইলিমেন্ট হল এই < html > ইলিমেন্ট। এইচটিএমএল পেইজের সমস্ত ইলিমেন্ট/কনটেন্ট এই ইলিমেন্ট এর মধ্যে অবস্থান করে (! DOCTYPE বাদে)। এইচটিএমএল এর ওপেনিং ট্যাগকে সবার প্রথমে (! DOCTYPE এর পরে) এবং ক্লোজিং ট্যাগকে সবার শেষে লিখতে হয়। এক্ষেত্রে আমরা কোন ওয়েবপেজের সোর্স কোড ( Source Code) দেখেও বিষয়টি সম্পর্কে পরিস্কার হতে পারি।

source কোড দেখা

কোন ওয়েবপেজের সোর্স কোড দেখার জন্য প্রথমে ওয়েবপেজের যে কোন জায়গায় মাউসের ডান বাটন ক্লিক করূন।অতঃপর আগত অপশনগুলো থেকে “View Page Source” লেখাটির উপর ক্লিক করূন।

চিত্রঃ view page source এ ক্লিক করা

এবার আপনার সোর্চ কোড টি নিচের চিত্রের মত চলে আসবে।

চিত্রঃ ওয়েব পেইজ এর সোর্স কোড দেখা

< head> Element

কোন ওয়েবপেজের শিরোনাম, ওয়েবপেজ সংক্রান্ত বিভিন্ন তথ্যাবলি, বিভিন্ন CSS (Cascading Style Sheet) Style, Javascript কোড < head > ইলিমেন্ট এর ভিতর লিখতে হয়। < head > ইলিমেন্টকে <html> ওপেনিং ট্যাগ এর পরে-শুরূ এবং < body > এর ওপেনিং ট্যাগ শুরূ হওয়ার পূর্বে-শেষ করতে হয় এবং <head> ইলিমেন্ট এর ওপেনিং এবং ক্লোজিং ট্যাগ (<head>….<head> ) এর ভিতর <head> ইলিমেন্ট এর অন্যান্য ইলিমেন্ট,উপাদান(<title>, <meta>, < base> ইত্যাদি) লিখতে হয়। নিচে একটি উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক ঃ

চিত্রঃ <head> element এর ব্যবহার

হেড ইলিমেন্ট এর ভিত্রে ব্যবহৃত অন্যান্য এলিমেন্ট সমুহঃ

 <title>

 <style>

 <base>

 <link>

 <meta>

<script>

 <noscript>

<title>element

ওয়েবপেজ এর টাইটেল/শিরোনাম এর জন্য < title > ইলিমেন্টটি ব্যবহার করা হয়ে থাকে। টাইটেলকে (টাইটেল ইলিমেন্ট) কোন সম্পূর্ণ ওয়েবপেইজ উপস্থাপন করার মাধ্যম হিসেবেও আখ্যায়িত করা হয়। টাইটেল দেখে কোন একজন ভিজিটর বুঝতে পারেন যে, এটি আসলে কোন ধরণের ওয়েবসাইট। তাছাড়া, সার্চ ইঞ্জিন অপটিমাইজেশন (এসইও) এর ক্ষেত্রেও টাইটেল ইলিমেন্ট অত্যন্ত গুরূত্বপূর্ণ ভূমিকা পালন করে। ওয়েবপেজের টাইটেল ব্যবহারে বিভিন্ন কৌশল ব্যবহার করা যেতে পারে। আর ওয়েবসাইটে এমন বিভিন্ন কৌশল ব্যবহার করে ওয়েবসাইটকে সার্চ ইঞ্জিন রেজাল্টের শীর্ষে নিয়ে আসার জন্য আমাদের ‘‘সার্চ ইঞ্জিন অপটিমাইজেশন’’ টিউটোরিয়াল দেখে নিতে পারেন। কোন ওয়েবপেজের টাইটেল ব্রাউজারের সবার উপরে প্রদর্শিত হয়।

title element এর ব্যবহারঃ

Title ইলিমেন্টকে এইচটিএমএল পেইজের হেড সেকশন এর ভিতর লিখতে হয়।নিচে একটী চিত্রে দেখানো হল।

চিত্রঃuse of title element

চিত্রঃআউটফুট

<body>Element

আমরা কোন ওয়েবপেজের মধ্যে যা কিছু দেখতে পাই (ইমেজ, অডিও, ভিডিও, টেক্সট, লিংক ইত্যাদি), তা সব কিছুই এই < body > ইলিমেন্ট এর অন্তর্ভূক্ত। নিচে একটি উদাহরন এর মাধ্যমে বিষয়টি সম্পর্কে পরিস্কার হওয়া যাক –

চিত্রঃ<Body>ইলিমেন্ট এর উপাদানসমূহ


উপরের চিত্রে মার্ক করা প্রতিটি অংশ, অর্থাৎ কোন ওয়েবপেজে দৃশ্যমান সকল কিছুই < body > ইলিমেন্ট এর অন্তর্ভূক্ত।

< body >ইলিমেন্ট এর ব্যবহারঃ

< body > ইলিমেন্টকে এইচটিএমএল পেইজের < head > এর ক্লোজিং ট্যাগ (</head>) এর পরে-ওপেন এবং <html> এর ক্লোজিং ট্যাগ (</ html >) এর পূর্বে-ক্লোজ করতে হয় এবং ওয়েবপেজে প্রদর্শনের জন্য অন্যান্য সকল ইলিমেন্ট,কনটেন্টকে < body > ইলিমেন্ট এর ওপেনিং এবং ক্লোজিং ট্যাগ (<body> . . . . .</ body > ) এর ভিতর রাখতে হয়। নিচে একটি উদাহরণ এর মাধ্যমে বডি ইলিমেন্ট এর ব্যবহার দেখানো হলো ঃ

কোড বিশেষণ-

body ইলিমেন্ট এ অ্যাট্রিবিউট এর ব্যবহার

এইচটিএমএল এর বডি ইলিমেন্ট এ নিম্নোক্ত অ্যাট্রিবিউটগুলো ব্যবহৃত হয়ে থাকে।

 alink

 background

 bgcolor

 link

 text Ges

 vlink

alink

“active link” এর সংক্ষিপ্ত রূপ হচ্ছে “alink”. এই অ্যাট্রিবিউট ব্যবহার করে লিংকের কালার নির্ধারণ করে দেয়া হয়। ভিজিটর যখন ওয়েবপেজে ব্যবহৃত কোন লিংকের উপর ক্লিক করে, তখন এই অ্যাট্রিবিউটটি কাজ করে। অর্থাৎ,কোন লিংকের উপর ক্লিক করার সময় “alink” অ্যাট্রিবিউট এ ব্যবহার করা কালারটি প্রদর্শিত হবে।

Value :

alink অ্যাট্রিবিউটে value /মান হিসেবে Color নির্ধারণ করা হয়। এইচটিএমএল এ তিনভাবে কালার নির্ধারণ করা যায়।
১. Color name (কালার এর নাম ব্যবহার করে – যেমনঃ ” green “);
২. RGB (Red, Greeen & Blue) Code – RGB মান, যেমন ঃrgb (0,0,0) ) ব্যবহার করে
৩. . Hex (Hexadecimal) কোড ব্যবহার করে – যেমন ঃ- “#0000FF”।
এইচটিএমল কালার নিয়ে টিউটোরিয়াল পরবর্তীতে বিস্তারিত আলোচনা করা হবে।
লিখার নিয়ম ঃ
< body alink=”Color_name অথবা RGB_Code অথবা Hex_Code”>
নিচে alink অ্যাট্রিবিউট এর ব্যবহার দেখানো হলো ঃ

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

HTML বাংলা টিউটোরিয়াল(পর্ব-৪),এইচটিএমএল এর ব্যাসিক আলোচনা -৩

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

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

সবাই কেঅন আছেন ,আশাকরি ভাল আছেন আজকে আমি য়াপনাদের জন্য নিয়ে এসেছি HTML বাংলা টিউটোরিয়াল এর পর্ব ৪,চলুন আমরা দেখেনেই কী আছে আমাদের পর্ব ৪ এ-

১) HTML ফাইল এর ব্যাসিক গঠনঃ

এইচটিএমএল ফাইল এর একটি নিজস্ব বৈসশিষ্ট/গঠন পদ্ধতি রয়েছে। সেই গঠন/নিয়ম অনুসারে এইচটিএমএল ফাইল লিখতে হয়। এর বাইরে এইচটিএমএল ফাইল কাজ করবে না। নিচে একটি এইচটিএমএল ফাইল এর ব্যাসিক গঠন পদ্ধতি নিয়ে আলোচনা করা হল


চিত্র : HTML ফাইল এর ব্যাসিক গঠন।

HTML ফাইল শুরূ করতে হয় <HTML> ( HTML এর ওপেনিং ট্যাগ) দিয়ে, এবং শেষ করতে হয় <HTML>( html এর ক্লোজিং ট্যাগ) দিয়ে। এই html এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে আমাদের অন্যান্য সমস্ত ট্যাগ,কনটেন্ট থাকবে। html এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে প্রধান যে দু’টি সেকশন থাকবে, এগুলো হল ঃ head সেকশন এবং body সেকশন। head সেকশন এর ভিতর পেজ সম্পর্কে বিভিন্ন ইনফরমেশন, পেজ এর শিরোনাম,বিভিন্ন স্ক্রিপ্ট, স্টাইল ইত্যাদি বিষয়সমূহ যোগ করা হয়ে থাকে। head সেকশনকে body সেকশন শুরূ হওয়ার আগেই ক্লোজ করতে হবে। head সেকশন নিয়ে টিউটোরিয়াল এর পরবর্তীতে বিস্তারিত আলোচনা করা হবে। আর আমরা আমাদের ওয়েবপেজে যে সকল কিছু (টেক্সট, ইমেজ, ফ্ল্যাশ ইত্যাদি) দেখতে পাই, তার সবই body সেকশন এর মধ্যে উল্যেখ করতে হয়। এখানে আরো একটি বিষয় লক্ষ্যনীয় যে, যে ট্যাগ সবার আগে শুরূ হয়েছে, সেটি সবার পরে এসে শেষ
হয়েছে। এ সকল বিষয়গুলো আমরা টিউটোরিয়াল এর পরবর্তীতে প্র্যাকটিক্যালী দেখতে পাবো।

২) HTML এ প্রথম প্রোগ্রাম লেখাঃ

এতক্ষন আমরা এইচটিএমএল এর খুঁটিনাটি বিষয়গুলো সম্পর্কে জেনেছি। এখন এসকল বিষয়গুলো ব্যবহার করে
এইচটিএমএল এ আমরা আমাদের প্রথম প্রোগ্রাম লিখে তা ব্রাউজারে রান করে দেখবো। চলুন, তাহলে শুরূ করা যাক . .

খধাপ-১ ঃ নোটপ্যাড ওপেন কর

এজন্য প্রথমে আপনার কম্পিউটারের Start মেন্যু থেকে Run এ ক্লিক করূন।

চিত্রঃ Start >>>Run ক্লিক করা

অথবা, কী-বোর্ড থেকে ( win + r বাটন ) প্রেস করূন।

চিত্রঃ কিবোর্ড থেকে win+ r button press

এখন নিচের মতো একটি ডায়ালগ বক্স আসবে। এখন নিচের মতো একটি ডায়ালগ বক্স আসবে।

চিত্র : রান ডায়ালগ বক্স।

এবার Open এর পাশের টেক্সট ফিল্ডে ” notepad ” টাইপ করূন এবং Ok বাটনে ক্লিক করূন।

চিত্র : ২.৮.৪ (টেক্সট ফিল্ডে notepad টাইপ করে Ok বাটনে ক্লিক করা)।

তাহলে নিচের চিত্রের মতো একটি নোটপ্যাড ওপেন হবে।

চিত্রঃনোটপ্যাড ওপেন হওয়া

ধাপ- ২ ঃ এইচটিএমএল ফাইলে কোড লিখাঃ

এবার আগত নোটপ্যাডে নিচের মতো HTML কোড/ট্যাগ লিখি

চিত্রঃ Notepad এ HTML লিখা

ধাপ-৩ ঃ ফাইল সেভ করা

এবার ফাইলটিকে আমরা এইচটিএমএল ফরম্যাটে সেভ করবো। এজন্য প্রথমে ফাইল মেন্যু থেকে Save As……এ ক্লিক করি।

প্রথমে Save in এর পাশের ড্রপ-ডাউন লিস্ট থেকে এর লোকেশন, অর্থাৎ ফাইলটি কোথায় গিয়ে সংরক্ষিত হবে, তা ঠিক করে দিই। এবার ফাইলটির জন্য একটি নাম দিতে হবে এবং নামের শেষে অবশ্যই .html এক্সটেনশন ব্যবহার করতে হবে। নিচের মতো File name এর ঘরে আমাদের ফাইল এর জন্য একটি নাম লিখি।

চিত্রঃ html এক্সটেনশন ব্যবহারে করে এইচটিএমএল ফাইলের নাম লেখা।

এখানে একটি বিষয় লক্ষ্যনীয় যে, এইচটিএমএল ফাইল এর নামে কোন হোয়াইট স্পেস (” “) ব্যবহার করা যাবে না। হোয়াইট
স্পেস এর পরিবর্তে হাইফেন (“-“) অথবা আন্ডারস্কোর (“_”) ব্যবহার করতে পারেন।
এবার ঝধাব Save as type ফিল্ড হতে All Files সিলেক্ট করূন।

সবশেষে Save বাটনো ক্লিক করে ফাইলটি সেভ করূন।

ধাপ-৪ ঃ আউটপুট

এবার যে ফাইলটি কিছুক্ষন আগে সেভ করেছেন, সেটি কোন একটি ব্রাউজার দিয়ে ওপেন করূন। এজন্য ফাইলটির উপর মাউস এর ডান বাটন ক্লিক করূন। তারপর Open With এবং এখান থেকে আগত যে কোন একটি ব্রাউজার (যেমন ঃ- Internet Explorer, Mozilla Firefox, Google Chrome, Opera ইত্যাদি) এর নামের উপর ক্লিক করূন, যেগুলো আপনার কম্পিউটারে ইনস্টল করা আছে।
বি ঃ দ্রঃ এইচটিএমএল এর অনেক ট্যাগ, অ্যাট্রিবিউট-ব্রাউজার এর উপর নির্ভর করে কাজ করে। এ সম্পর্কে আমরার পরবর্তী পর্ব গুলোতে বিস্তারিত জানবো।

চিত্র :(এইচটিএমএল ফাইল এর আউটপুট দেখার জন্য ব্রাউজার সিলেক্ট করা )।

এবার নিচের মতো আপনার তৈরিকৃত এইচটিএমএল ফাইল এর আউটপুট ব্রাউজারে দেখতে পাবেন।

৩) ইনডেন্টেশন ( Indention )

প্রোগ্রাম লেখার সময় নির্দিষ্ট স্থানে ফাঁকা (আমি এখানে চারটি করে স্পেস ব্যবহার করেছি – এ কাজটি আপনি সহজে করার জন্য কী-বোর্ড থেকে Tab বাটন ব্যবহার করতে পারেন) রেখে রেখে প্রোগ্রামিংয়ে সৌন্দর্য/স্পষ্টতা বৃদ্ধি করাই হচ্ছে Indentation . যেমনঃ উপরের এইচটিএমএল ফাইলটিতে Indentation ব্যবহার করে ফাইলটি লিখেছি। আমি যদি ইনডেন্টেশন ব্যবহার নাও করতাম, তবুও আমার ফাইলটি কাজ করতো।

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

< html >

</ html >
কিন্তু, head এবং body সেকশন ব্যবহার এর সময় ইনডেন্টেশন ব্যবহার করেছি,কারণ এগুলো html এর এক একটি ইলিমেন্ট (অর্থাৎ, < html > এখানে প্রধান ইলিমেন্ট, আর < head > এবং < body > হচ্ছে < html > এর ইলিমেন্ট)।

<html>

<head>

</head>

<body>

</body>

</html>
আবার হেড সেকশন এর ভিতর টাইটেল ট্যাগটিকে আলাদা ইননেন্টশন ব্যবহার করে লিখেছি। কারণ,title হ‛েছ head এর ইলিমেন্ট। ইলিমেন্ট নিয়ে আমরা tutorial পরবর্তীতে বিস্তারিত আলোচনা করা করব।

<head>

< title > This is my first HTML Program;) </ title >

<head>
ঠিক তেমনি, < body > এর ভিতরের Hellow World!! লেখাটিতে ইনডেন্টেশন ব্যবহার করেছি। কারণ, Hellow World!! ! < body > এর কনটেন্ট।

< body > Hellow World!! < /body >

৪) এইচটিএমএল কমেন্টঃ

কমেন্টস এর কথা শুনলে হয়তো বা ফেসবুক কমেন্ট এর কথা মনে হতে পারে। বিষয়টি আসলে তা না। ফেসবুক কমেন্ট এর মতো এটি ব্রাউজারে প্রদর্শিত হয় না। এইচটিএমএল এ কমেন্ট ব্যবহার করবেন কেবল আপনার বুঝার সুবিধার্থে।মনে করূন, আজ আপনার তৈরি করা একটি এইচটিএমএল পেইজ/প্রোগ্রাম/ডকুমেন্ট-আজ থেকে আগামী ৬ মাস পর এর বিভিন্ন কোড এর ব্যবহার নাও বুঝতে পারেন। এক্ষেত্রে কোড এর পাশে কমেন্ট ব্যবহার করে এই সমস্যা থেকে মুক্তি পেতে পারেন।

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

কমেন্ট এর ব্যবহার

এইচটিএমএল এ কমেন্ট ব্যবহার করার জন্য কমেন্ট (!–) ট্যাগ ব্যবহৃত হয়।
যে লেখাকে কমেন্ট এর ভিতরে রাখতে চান, তার প্রথমে “<!–” এবং শেষে “–>”ব্যবহার করতে হয়। অর্থাৎ,

<!–This is a comment & will not be displayed in the browser –>

নিচে একটি উদাহরন এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।


চিত্র : (প্রোগ্রাম এ কমেন্ট এর ব্যবহার)।

কোড বিশেষণ ঃ
উপরে আমরা This is a comment. The Comment line(s) w ..লাইনটিকে কমেন্ট ট্যাগ এর ভিতরে রেখেছি,তাই এটি ব্রাউজারে প্রদর্শিত হবে না। কিন্তু নিচের লাইনটি ঠিকই ব্রাউজারে প্রদর্শিত হবে।

৫)ডকুমেন্ট টাইপ ডিক্লেয়ারেশন

কোন এইচটিএমএল পেইজে এর ডকুমেন্ট টাইপ ডিক্লেয়ার না করা হলে ব্রাউজার বুঝতে পারে না যে, এটি এইচটিএমএল এর কোন ভার্সনে তৈরি। সেক্ষেত্রে এইচটিএমএল সংক্রান্ত বিভিন্ন তথ্যই ব্রাউজার এর নিকট পৌঁছায় না। ডকুমেন্ট টাইপ ডিক্লেয়ার করা ছাড়া এইচটিএমএল পেইজ ভ্যালিডেশনও সম্ভব নয়। তাই যথাযথ ডকুমেন্ট টাইপ ডিক্লেয়ার করা জরূরী।

ডকুমেন্ট টাইপ ডিক্লেয়ার করার জন্য এইচটিএমএল এর <!DOCTYPE> ব্যবহৃত হয়। তবে, এটি এইচটিএমএলএর কোন ট্যাগ নয়। এটি এইচটিএমএল পেইজ এর শুরূতে (<এইচটিএমএল> ট্যাগ এর প্রথমে উল্যেক করতে হয়।

HMTL 5 ভার্সনে ডকুমেন্ট টাইপ ডিক্লেয়ার করাঃ

<! DOCTYPE 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 হল এট্রিভিউট এর ভ্যালু।

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

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

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