টপিকসমূহঃ
- এইচটিএমএল সিনট্যাক্স (HTML syntax)
- এইচটিএমএল ডকুমেন্টের মৌলিক কাঠামো।
- অ্যাট্রিবিউট এর ব্যবহার।
আমি গত পর্বে আলোচনা শেষ করেছিলাম এইচটি এমএল অ্যাট্রিবিউট টপিক টা দিয়ে। আমি জানি গত পর্ব ভালো হয়নি কারন কেনো হয়নি তাও জানি না। কিন্তু আজকের পর্ব থেকে ভালো করে এবং ছোট করে লেখার চেষ্টা করবো। চেষ্টা করবো সহজ ভাষায় গুছিয়ে লেখার। তো কথা বাড়াতে চাইনা শুরু করা যাক।
পড়ুনঃ এইচটিএমএল শর্ট কোর্স পর্ব-০০
গত পর্বে এইচটিএমএল অ্যাট্রিবিউট এর কিছু অপূর্ণ তা ছিলো। যা এখনি ক্লিয়ার করে দিচ্ছি।
এইচটিএমএল এট্রিবিউটঃ
এট্রিবিউট মানে ধর্ম, গুন, চিহ্ন ইত্যাদি। অর্থাৎ কনো কিছুর বৈশিষ্ট্য নির্ধারক নির্দেশ। ধরুন আপনি কয়েক জন চিত্রশিল্পীদের আমন্ত্রণ করেছেন আপনার বিল্ডিং এর দেওয়ালে কিছু লেখার জন্য বা সুন্দর সুন্দর চিত্র অংকনের জন্য। তো প্রথমত আপনি কেমন ডিজাইন চান সেই সম্পর্কে তাদের সুন্দর করে জানানো। তারপর আপনার দেওয়া নির্দেশনা অনুযায়ী তারা কাজ করবে। এখন তারা কাজ শুরু করবে, কাজের সকল প্রয়োজনীয় হাতিয়ার, উপাদান প্রস্তুত করছেন। এর ফাঁকে আপনি তাদের বলতেছেন সবার উপরে আপনার নাম খুব স্টাইলিশ ভাবে এবং বোল্ড করে সাথে লাল রং ব্যবহার করার কথাও বলেছেন। তারা কাজে নেমে গেলো। এখন তাদের কাজ শেষ।তো দেখুন উপরক্ত উদাহরণ এট্রিবিউট টা কি? অবশ্যই এট্রিবিউটনেম হবে স্টাইল। কেনোনা আপনি দেওয়ালে সবার উপরের লেখার রং আকার আকৃতি স্টাইলিশ করতে চেয়েছেন। উপরক্ত উদাহরণে এট্রিবিউট নেম নির্ধারণ করলাম এখন তার ভ্যালু কি তা বের করি। আমরা এট্রিবিউট নেম বের করলাম স্টাইল এখন বের করবো এর ভ্যালু। তার আগে আপনিই বলুন লেখা স্টাইলিশ করতে কি ব্যবহার করা দরকার। নিশ্চয়ই রং, তারপর সুন্দর ফোন্টে বড় সাইজের করে লেখা সো, এখানে ভ্যালু হবে রং, ফন্টের সাইজ, আকৃতি ইত্যাদি। আমরা তো দেখলাম বিল্ডিংয়ের দেওয়াল রং করা। মূলত এইচটিএমএল এট্রিবিউট ব্যাবহার করে ওয়েবপেজের যেকোনো লেখার আকার আকৃতি নির্ধারণ করতে হয়। এক কথায় কন্টেন্ট এর আকার, আকৃতি, অবস্থান নির্ধারণ করতে এইচটিএমএল এট্রিবিউট ব্যাবহার করা হয়। আশা করি বিষয় টা ক্লিয়ার।
এতক্ষন তো উদাহরণ দিলাম এখন আমরা বাস্তব এ এইচটিএমএল ব্যাবহার করে দেখবো।
<div style="color:green; font-size:large;">Sirajganj Police Lines School & Collage</div>Output:
Sirajganj Police Lines school & collage
উপরক্ত কোড এর ব্যাখ্যাঃ
- div টা হলো ট্যাগ নেম div দ্বারা Division বোঝায়
- style="color:green; font-size:large;" এর ক্ষেত্রে style = এট্রিবিউট নেম।
- "color:green; font-size:large;" =এট্রিবিউট ভ্যালু।
- Sirajganj Police Lines school & Collage লেখাটুকু কন্টেন্ট ( আপনার ইচ্ছামত লিখবেন)
- </div> = ক্লজিং ট্যাগ
এতক্ষন গত পর্বের অপূর্নতা আলোচনা করলাম। এখন আলোচনার বিষয় এইচটিএমএল সিনট্যাক্স।
এইচটিএমএল সিনট্যাক্স (HTML syntax)
যেকোনো ভাষার ক্ষেত্রেই একটি নির্দিষ্ট নিয়ম রীতি থাকে। যেগুলো অনুসরণ করে ভাষা গঠন করতে হয়, আর এই নিয়ম রীতি কে বলা হয় ভাষা ব্যাকরণ। যা ভাষা ভেদে ভিন্নতর হয়ে থাকে। যেমনঃ আপনি ইংরেজি ভাষাকে বাংলায় বা বাংলা ভাষা ইংরেজিতে রুপান্তর করতে যান কিছু নিয়ম রীতি অনুসরণ করতে হয়। I learn HTML - আমি এইচটিএমএল শিখি, এই বাক্যটা ইংরেজি থেকে বাংলায় রুপান্তর করতে একটা ব্যাকরণিক রীতি অনুসরণ করতে হয়েছে (Sub + verb + object) এমনিতেই রুপান্তর করা যায় না। তেমনি এইচটিএমএল ল্যাংগুয়েজ এর ক্ষেত্রে ও নির্দিষ্ট নিয়ম রীতি অনুসরণ করতে হয় যা এইচটিএম এল সিনট্যাক্স নামে পরিচিত। ওয়েবপেজে কনো লেখাকে বোল্ড করার জন্য <b>.....</b> ট্যাগ ব্যবহার করতে হয়। যেমনঃ <b> Sirajganj</b> এখানে Sirajganj লেখাটি বোল্ড হয়ে যাবে। আর উক্ত ট্যাগ সহ উক্ত লেখাটি কে সিনট্যাক্স বলা হয়।
এইচটিএমএল ডকুমেন্টের মৌলিক কাঠামো
এইচটিএমএল এর মৌলিক কাঠামো, এইচটিএমএল ডকুমেন্ট ট্যাগ এর সমন্বয়ে গঠিত, যা ওয়েবপেজ প্রদর্শন নির্দিষ্ট করে। এইচটিএমএল ডকুমেন্ট এ কন্টেইনার ট্যাগ( ক্লোজিং ট্যাগ সমৃদ্ধ ট্যাগ) দিয়ে গঠিত।ওয়েবপেজের শুরুঃ
যেকোনো এইচটিএমএল ডকুমেন্ট শুরু করার আগে <html> এবং শেষ করার সময় </html ব্যাবহার করতে হয়। অর্থাৎ head,title,body সবকিছুই <html> </html> এর মধ্যে থাকবে।যেমনঃ <html> সবকিছু</html>
পেজের head :
ওয়েব পেজের হেডিং অংশটা সবচেয়ে গুরুপূর্ন যা ভাষায় প্রকাশ করতে পারবো না। আপনার ওয়েব পেজের কিওয়ার্ড, টাইটেল, ডিস্ক্রিপশন - ব্রাউজার কোনো পেজ ওপেন করার আগে পরে নেয়। হেডিং ট্যাগ <head> </head>পেজের Title:
ওয়েবপেজের এই অংশ দ্বারা কোনো পেজের টাইটেল নির্ধারণ করে দেওয়া হয়। টাইটেল ট্যাগ টা <title></title> এই রকম হয়ে থাকে। অর্থাৎ আমি যদি উদাহরণ দিয়ে বলতে যাই - আপনি একটা ওয়েব পেজ তৈরি করেছেন বিজ্ঞানীদের আবিস্কারের একটা লিস্ট নিয়ে এখন আপনি আপনার তৈরিকৃত পেজের টাইটেল নির্ধারণ করেছেন- বিজ্ঞানীদের আবিষ্কার - তাহলে আমরা টাইটেল টা ওয়েব পেজে বসবো এইভাবে <title>বিজ্ঞানীদের আবিষ্কার</title>এই টাইটেল টা হেড ট্যাগ এর ভিতরে বসাতে হয় অর্থাৎ <head> এর নিচে।
যেমন:<head><title>বিজ্ঞানীদের আবিস্কার</title></head>
পেজের body:
এই অংশে ওয়েবপেজের কন্টেন্ট, ইমেজ, টেক্সট, লিংক ইত্যাদি থাকে। ব্রাউজার এই অংশের সবকিছুই ওয়েবপেজে প্রদর্শন করবে। এই অংশের ট্যাগ <body> </body> এই রকম হয়ে থাকে। উপরের উদাহরনে বলেছিলাম আপনি একটা ওয়েব পেজ তৈরি করলেন বিজ্ঞানীদের আবিষ্কার এর একটা লিস্ট নিয়ে ওই লিস্টটা এখানেপ্রদর্শন করাবে। প্রশ্ন কে প্রদর্শন করাবে?
উত্তরঃ ব্রাউজার আগে এইচটিএমএল কোড থেকে সবকিছু পড়ে ফেলবে তারপর <body> থেকে </body> পর্যন্ত সবকিছুই প্রদর্শন করাবে। নিচের কাঠামো টা দেখুন সবকিছু বুঝতে ক্লিয়ার হয়ে যাবে।
<html> ---------html পেজ শুরু নির্দেশ করেছে।
<head>----হেডিং শুরু নির্দেশ করেছে
<title>Title goes here</title>-- পেজের টাইটেল
</head>---হেডিং শেষ নির্দেশ করেছে।
<body>---কন্টেন্ট শুরু
content goes here.
</body>---কন্টেন্ট শেষ
</html>-----html ওয়েবপেজ টি শেষ হয়েছে তা নির্দেশ করেছে।
মনে রাখুনঃ
টাইটেল হেডিং এর ভিতরে লিখতে হয়। আর এড্রেস বারের উপরে প্রদর্শন করে।বডি হেডিং এর নিচে থাকে থাকে যা কনো ওয়েবপেজে কন্টেন্ট রূপে প্রদর্শন করে।
এইচটিএমএল এট্রিবিউট এর ব্যাবহারঃ
এইচটিএমএল এট্রিবিউট কি? কেমন এবং কি করে খায় না মাথায় দেয় সেই সম্পর্কে ইতোমধ্যে জেনে ফেলেছেন আশা করি। তো এখন এর ব্যবহার শিখবো। তার আগে কিভাবে এন্ড্রয়েড দিয়ে এইচটিএমএল ট্রাই করবেন তার একটা টিউটোরিয়াল লিখেছি আপনারা না জানলে অবশ্যই ২মিনিট সময় নিয়ে দেখে আসবেন সেখানে স্ক্রিনশট সহ বুঝিয়ে দেওয়া আছে সাথে আছে তিনটা অসাধারণ এইচটিএমএল এডিটর প্রিমিয়াম ভার্সনসহ।
পড়ুনঃ এইচটিএমএল লিখুন এন্ড্রয়েড ফোনে। সাথে অসাধারণ তিনটা কোড এডিটর।পড়া শেষ হয়ে গেলে শুরু করি। নিচের দেওয়া কোড টা লিখুন।
<html>উপরে সাধারণ একটা এট্রিবিউট ব্যাবহার করলাম এখন গুরুত্বপূর্ণ কিছু এট্রিবিউট এর লিস্ট দেবো।
<head>
<title>এট্রিবিউট ব্যাবহার করছি</title>
</head>
<body>
<p style="color:red;"> কালার রেড ব্যাবহার করেছি</p>
</body>
</html>
style,size,align,color,face
style=""> ____________ এই এট্রিবিউট দিয়ে কন্টেন্ট এ বিভিন্ন ডিজাইন করা যায়। বলতে গেলে,, না বললাম না, অনেক ডিজাইন অনেক।
align="">_____ কন্টেন্ট কথায় অবস্থান করবে তা নি
| এট্রিবিউট | বর্ননা |
|---|---|
| border | টেবিল বর্ডার তৈরি করর জন্য। |
| width | টেবিলের প্রশস্ততা নির্ধারন করার জন্য |
| align | ব্রাউজার উইন্ডোতে টেবিল এর কন্টেন্ট কোথায় বসবে তা নির্ধারণ করে। অর্থাৎ আমরা এইএট্রিবিউট ব্যাবহার করে টেবিলের ভিতরে লেখাকে ডানে বামে বা মাঝে নির্দিষ্ট করতে পারি। |
| cellspacing | টেবিল সেলের মধ্যে ফাকা নির্ধারন করার জন্য |
| cellpadding | টেবিলের সেলের মধ্যে কন্টেন্ট থেকে উচ্চতা এবং প্রস্থ কম বেশি করতে এই এট্রিবিউট ব্যাবহার করা হয় |
| bgcolor | টেবিলের ব্যাকগ্রাউন্ড কালার নির্ধারন করার জন্য এই এট্রিবিউট ব্যাবহার করা হয়। |
| type | ইনপুট ফল্ড কেমন হবে তা নির্ধারণ করে |
| color | ফন্টের কালার নির্ধারণ করার জন্য |
| size | লেখা কতবড় হবে তা নির্ধারণ করা যায় |
| face | কি ধরনের ফন্ট ব্যাবহার করে লেখা প্রদর্শন করাতে চান তা নির্ধারণ করার জন্য |
| style | যেকোনো কন্টেন্ট স্টাইলিশ করার জন্য |
| rowspan | টেবিলের একটি সারি কয়াটা কলামের জায়গায় দখল করবে তা নির্ধারণ করে |
| colspan | একটা কলাম কয়টা সারির জায়গা দখল করবে তা নির্ধারণ করে। |
উপরের টেবিলে শুধু এট্রিবিউট লিখেছি এবং সেগুলো দিয়ে কি কাজ হয় তা বলেছি এখন দেখবো তার একটু বিস্তারিত। প্রথমেই দেখবো প্যারাগ্রাফ ট্যাগ এর সকল এট্রিবিউট, ব্যাবহার এবং বিস্তারিত।
প্যারাগ্রাফ ট্যাগে এট্রিবিউট এর ব্যাবহারঃ
এইচটিএমএল ডকুমেন্ট এর ভিতরে প্যারাগ্রাফ লিখতে <p> প্যারাগ্রাফ </p> এই ট্যাগ অনুসরণ করতে হয়। এই ট্যাগ এর ভিতরে যা লিখবেন তার শেষে একলাইন ফাকা হয়ে যাবে। আর আপনি যদি মনে করেন দুই লাইন ফাকা রাখবেন তাহলে একটা এম্পটি ট্যাগ ব্যাবহার করতে হবে। যেমনঃ <br/>
আরো এম্পটি ট্যাগ রয়েছে একটু নিচে সেগুলো আলোচোনা করা হয়েছে।
<p> ট্যাগ এর কিছু এট্রিবিউটঃ
align="right/left/center - ইচ্ছা মত একটা "
style="background-color: কালার নেম/কালার ভ্যালু বা কোড; color:লেখার কালার/লেখার কালার কোড (ভ্যালু); padding: লেখার চার দিকে কতটুকু ফাকা রাখতে চান px; margin: pedding-কতটুকু কমাবেন px; "
উদাহরণঃ নিচের কোড টা এইচটিএমএল এডিটর এ লিখে ফেলুন। অবশ্যই এইচটিএমএল মৌলিক কাঠামো অনুযায়ী লিখবেন। আমি শুধু মূল কোড টুকু লিখেছি।
<p align="right" style="background-color: red; color:green; padding:9px; margin:5px;"> প্রথম চেষ্টা করে এই ফল পেলাম</p>আউটপুটঃ
প্রথম চেষ্টা করে এই ফল পেলাম
এখন আপনি আপনার ক্রিয়েটিভিটিকে কাজে লাগান এবং কোড এর ভিতরে ইচ্ছা মত পরিবর্তন করে প্রিভিউ করুন তাহলে বিষয়টা আরো ভালো ভাবে বুঝতে পারবেন।
4 Comments
অসাধারন!!!
ReplyDeleteThank you...
DeleteEasy "water hack" burns 2 lbs OVERNIGHT
ReplyDeleteOver 160000 men and women are losing weight with a easy and secret "liquid hack" to lose 1-2lbs each and every night in their sleep.
It's scientific and it works all the time.
Just follow these easy step:
1) Grab a clear glass and fill it up half full
2) And now learn this weight losing HACK
and become 1-2lbs skinnier the next day!
This comment has been removed by a blog administrator.
ReplyDelete