Home
Events
Search
Latest images
Register
Log in
AdminAdmin- Posts : 24
Join date : 2018-05-15 
HTML শেখা পর্ব ৪। #HTML
Tue May 29, 2018 8:50 pm
স্বাগতম প্রিয় মিনিল্যাব মেম্বার ও অতিথিরা। আমি আপনাদের শুরুতেই রিকোয়েস্ট করব আমাদের ফোরামে সাইন আপ করতে, এটি ফ্রি ও খুব সোজা। আপনি সাইনাপ করার পর ফোরামে রিপ্লাই, টপিক পোস্ট করা সহ আরো অনেক কিছু করতে পারবেন।
যাই হোক, আজকের পর্ব নম্বর ৪ , এবং এই পর্বে আমি লিখছি মাহাবুব হাসান। নিচে দিয়ে দিচ্ছি গুরুত্বপূর্ন কিছু লিংক এবং শুরু করছি আজকের পর্ব।
লিংকসঃ
* প্রথম পর্ব
* ফেইসবুক গ্রুপ
* লাইভ চ্যাটের জন্যে পাশে ম্যাসেজ বা নিড হেল্প বাটনে প্রেস করুন। আমি আছি সকাল ১০ টা থেকে রাত ১০ টা।
কালকে যা যা শিখলামঃ
১। এইচটিএমএল এর হেড ও বডি
২। হেডিং ও প্যারাগ্রাফ
৩। কোড লেখাঃ আমার পরিচয়
৪। এইচটিএমএল লেখার সময় ত্রুটি ও এর সমাধান
আজকে যা যা শিখবোঃ
১। ডকুমেন্ট ফর্মেটিং বা সাজসজ্জা।
২। এইচটিএমএল কমেন্ট বা মন্তব্য।
৩। এইচটিএমএল এংকর ট্যাগ ও লিংক।
৪। এইচটিএমএল লাইন ব্রেক ও হরিজন্টাল লাইন।
ডকুমেন্ট সাজসজ্জা বলতে আমরা বুঝি ডকুমেন্টের সৌন্দর্য ও অর্থবোধক করে তুলতে ট্যাগের সহায়তায় কিছু পরিবর্তন ঘটানো। ডকুমেন্ট সাজসজ্জায় আমরা হরফ মোটা, ইটালিক বা নিচে দাগ টেনে দিই।
ডকুমেন্টে কোন কিছুতে ফোকাস বা গুরুত্বপূর্ন বোঝাতে তা মোটা করে দিতে হয়। আর কোন ব্যাক্তির নাম ইটালিক বা বাকা করে দিতে হয়। বিশেষ কিছু ক্ষেত্রে আন্ডারলাইন বা নিচে দাগ দেয়া হয়। আমরা ডকুমেন্ট সাজসজ্জা শিখবো এখন।
সাজসজ্জায় ব্যাবহৃত ট্যাগ গুলিঃ
সেকশনঃ ১
ডকুমেন্ট সাজসজ্জা।
ডকুমেন্ট সাজসজ্জা বলতে আমরা বুঝি ডকুমেন্টের সৌন্দর্য ও অর্থবোধক করে তুলতে ট্যাগের সহায়তায় কিছু পরিবর্তন ঘটানো। ডকুমেন্ট সাজসজ্জায় আমরা হরফ মোটা, ইটালিক বা নিচে দাগ টেনে দিই।
ডকুমেন্টে কোন কিছুতে ফোকাস বা গুরুত্বপূর্ন বোঝাতে তা মোটা করে দিতে হয়। আর কোন ব্যাক্তির নাম ইটালিক বা বাকা করে দিতে হয়। বিশেষ কিছু ক্ষেত্রে আন্ডারলাইন বা নিচে দাগ দেয়া হয়। আমরা ডকুমেন্ট সাজসজ্জা শিখবো এখন।
সাজসজ্জায় ব্যাবহৃত ট্যাগ গুলিঃ
মোটা অক্ষরঃ <b> = নমুনা
বাকা অক্ষর ঃ <i> = নমুনা
নিচে দাগ ঃ <u> = নমুনা
কাটা দাগ ঃ <strike> =নমুনা
এইচটিএমএল মন্তব্য ব্রাউজারে দেখায় না। এটি কম্পাইল করার সময় বাদ দিয়ে দেয় ব্রাউজার। কিন্তু কোডার দের জন্যে এটি খুবই গুরুত্বপূর্ন একটি বিষয়। অনেক লম্বা কোড লেখার সময় নিজেকে ঐ কোড কোন অংশের বা কাজের তা দেখা মাত্র বোঝাতে কমেন্ট ব্যাবহার করা হয় । আমি অনেক সময় ছোট কোডেই এটি ব্যাবহার করি অন্যকে শেখাতে। কোডে লাইভ ইন্সট্রাকশনের মতো কাজ করে এই কমেন্ট বা মন্তব্য।
মন্তব্য লেখার জন্যে আমরা <!-- দিয়ে শুরু করি ও --> দিয়ে শেষ করি। এর মাঝে থাকা সকল কিছু কমেন্ত বা মন্তব্য হিসেবে নির্ধারিত হয়। আপনারা এটি যথাযথ ব্যাববহার শুরু করবেন যখন আপনি অনেক কোডের বা অনেক কঠিন কোন কোড বা সোর্সে কাজ করবেন! সবাইই এটাই করে অবশ্য।
সংযুক্তি বা লিংক এর উদাহরনের অভাব হবে না আশা করি। তবে সহজ কথায় লেখা, ছবির মাধ্যমে কোন পেইজের সাথে অন্য কোন পেইজের সংযুক্তি ঘটানোকে লিংক বা সংযুক্তি বলে।
যেমন ঃ এখানে ক্লিক করলে আপনি আমাদের ফেইসবুক গ্রুপে চলে যাবেন।
এই এখানে একটি লেখা যা এংকর বা লিংক করার ট্যাগ দ্বারা একটি ওয়েব ঠিকানা জুড়ে দিয়েছি যাতে আপনি ক্লিক করলেই ওখানে চলে যেতে পারেন। এখন আমরা শিখবো কিভাবে লিংক বা সংযুক্তি করা হয়।
লিংক যোগ করতে <a> এবং এর সাথে কিছু এট্রিবিউট ব্যাবহার করা হয়। এট্রিবিট কি তা আমরা দ্বিতীয় পর্বে শিখেছি। এখন আমরা একটা লিংক তৈরী করব যেটায় ফেইসবুক লেখার ওপর ক্লিক করা মাত্র আমাদের ফেইসবুক গ্রুপে নিয়ে যাবে।
রেজাল্ট
এখানে এংকর বা <a> ট্যাগের সাথে href এট্রিবিউট যোগ করেছি। href এট্রিবিউটে ভ্যালু হিসেবে আমরা দিয়েছি আমাদের গ্রুপের ওয়েব ঠিকানা। এখন ওই ফেইসবুক লেখায় ক্লিক করলেই আমরা মিনিল্যাব ফেইসবুক গ্রুপে চলে যাবো। আমরা চাইলে এই লিংক অন্য ট্যাবে ওপেন করাতে পারি। অথবা নোফলো এড করতে পারি যাতে ব্রাউজার এই লিংক ফলো না করতে পারে!
ট্যাব ওপেন করার জন্যে আমরা target এট্রিবিউটে _blank যোগ করব। যেমনঃ <a href="https://www.facebook.com/groups/minilabtechnology" target="_blank"> Facebook </a> ।
নোফলো লেখার জন্যে আমরা ব্যাবহার করি rel এট্রিবিউট যাতে ভ্যালু nofollow । যেমনঃ <a href="https://www.facebook.com/groups/minilabtechnology" target="_blank" rel="nofollow"> Facebook </a>
একটু প্যাচগোচালো লাগছে? এট্রিবিউট সম্পর্কে আবার পড়ুন ও সবগুলি কোড রান করে চেষ্টা করুন।
লাইন ব্রেক হলো এক লাইন নিচে থেকে শুরু করা যা আমরা এন্টার বাটন চেপে করে থাকি। কিন্তু আমরা এইচটিএমল এর ক্ষেত্রে এটি করতে পারবো না। কারন কোডগুলি ডকুমেন্টে রুপান্তর করার সময় সাধারন এন্টার বাদ দিয়ে দেয়। অর্থাৎ এন্টার চাপলেও ব্রাউজার তা এক লাইন নিচে নামিয়ে দেয় না। তাই আপনাকে সবসময় কোড ইউজ করে লাইন ব্রেক করতে হয়। লাইন ব্রেকের জন্যে আমরা ব্যাবহার করি <br/> ট্যাগ। লক্ষ্য করুন! এই ট্যাগের কোন শেষ ট্যাগ নেই। আর এতে "/" চিনহ টি শুরুতে না থেকে শেষে থাকে। আমরা এর ব্যাবহার দেখে নেই।
বাকা অক্ষর ঃ <i> = নমুনা
নিচে দাগ ঃ <u> = নমুনা
কাটা দাগ ঃ <strike> =
সেকশনঃ ২
এইচটিএমএল কমেন্টিং বা মন্তব্য
এইচটিএমএল মন্তব্য ব্রাউজারে দেখায় না। এটি কম্পাইল করার সময় বাদ দিয়ে দেয় ব্রাউজার। কিন্তু কোডার দের জন্যে এটি খুবই গুরুত্বপূর্ন একটি বিষয়। অনেক লম্বা কোড লেখার সময় নিজেকে ঐ কোড কোন অংশের বা কাজের তা দেখা মাত্র বোঝাতে কমেন্ট ব্যাবহার করা হয় । আমি অনেক সময় ছোট কোডেই এটি ব্যাবহার করি অন্যকে শেখাতে। কোডে লাইভ ইন্সট্রাকশনের মতো কাজ করে এই কমেন্ট বা মন্তব্য।
মন্তব্য লেখার জন্যে আমরা <!-- দিয়ে শুরু করি ও --> দিয়ে শেষ করি। এর মাঝে থাকা সকল কিছু কমেন্ত বা মন্তব্য হিসেবে নির্ধারিত হয়। আপনারা এটি যথাযথ ব্যাববহার শুরু করবেন যখন আপনি অনেক কোডের বা অনেক কঠিন কোন কোড বা সোর্সে কাজ করবেন! সবাইই এটাই করে অবশ্য।
সেকশনঃ ৩
এইচটিএমএল লিংক বা সংযুক্তি।
সংযুক্তি বা লিংক এর উদাহরনের অভাব হবে না আশা করি। তবে সহজ কথায় লেখা, ছবির মাধ্যমে কোন পেইজের সাথে অন্য কোন পেইজের সংযুক্তি ঘটানোকে লিংক বা সংযুক্তি বলে।
যেমন ঃ এখানে ক্লিক করলে আপনি আমাদের ফেইসবুক গ্রুপে চলে যাবেন।
এই এখানে একটি লেখা যা এংকর বা লিংক করার ট্যাগ দ্বারা একটি ওয়েব ঠিকানা জুড়ে দিয়েছি যাতে আপনি ক্লিক করলেই ওখানে চলে যেতে পারেন। এখন আমরা শিখবো কিভাবে লিংক বা সংযুক্তি করা হয়।
লিংক যোগ করতে <a> এবং এর সাথে কিছু এট্রিবিউট ব্যাবহার করা হয়। এট্রিবিট কি তা আমরা দ্বিতীয় পর্বে শিখেছি। এখন আমরা একটা লিংক তৈরী করব যেটায় ফেইসবুক লেখার ওপর ক্লিক করা মাত্র আমাদের ফেইসবুক গ্রুপে নিয়ে যাবে।
- Code:
<html>
<head>
<title> Lets try link </title>
</head>
<body>
<a href="https://www.facebook.com/groups/minilabtechnology"> Facebook </a>
</body>
</html>
রেজাল্ট
 |
| ফেইসবুক এ যাওয়ার লিংক তৈরী করলাম |
এখানে এংকর বা <a> ট্যাগের সাথে href এট্রিবিউট যোগ করেছি। href এট্রিবিউটে ভ্যালু হিসেবে আমরা দিয়েছি আমাদের গ্রুপের ওয়েব ঠিকানা। এখন ওই ফেইসবুক লেখায় ক্লিক করলেই আমরা মিনিল্যাব ফেইসবুক গ্রুপে চলে যাবো। আমরা চাইলে এই লিংক অন্য ট্যাবে ওপেন করাতে পারি। অথবা নোফলো এড করতে পারি যাতে ব্রাউজার এই লিংক ফলো না করতে পারে!
ট্যাব ওপেন করার জন্যে আমরা target এট্রিবিউটে _blank যোগ করব। যেমনঃ <a href="https://www.facebook.com/groups/minilabtechnology" target="_blank"> Facebook </a> ।
নোফলো লেখার জন্যে আমরা ব্যাবহার করি rel এট্রিবিউট যাতে ভ্যালু nofollow । যেমনঃ <a href="https://www.facebook.com/groups/minilabtechnology" target="_blank" rel="nofollow"> Facebook </a>
একটু প্যাচগোচালো লাগছে? এট্রিবিউট সম্পর্কে আবার পড়ুন ও সবগুলি কোড রান করে চেষ্টা করুন।
সেকশনঃ ৪
এইচটিএমএল লাইনব্রেক ও হরিজন্টাল লাইন
লাইন ব্রেক হলো এক লাইন নিচে থেকে শুরু করা যা আমরা এন্টার বাটন চেপে করে থাকি। কিন্তু আমরা এইচটিএমল এর ক্ষেত্রে এটি করতে পারবো না। কারন কোডগুলি ডকুমেন্টে রুপান্তর করার সময় সাধারন এন্টার বাদ দিয়ে দেয়। অর্থাৎ এন্টার চাপলেও ব্রাউজার তা এক লাইন নিচে নামিয়ে দেয় না। তাই আপনাকে সবসময় কোড ইউজ করে লাইন ব্রেক করতে হয়। লাইন ব্রেকের জন্যে আমরা ব্যাবহার করি <br/> ট্যাগ। লক্ষ্য করুন! এই ট্যাগের কোন শেষ ট্যাগ নেই। আর এতে "/" চিনহ টি শুরুতে না থেকে শেষে থাকে। আমরা এর ব্যাবহার দেখে নেই।
- Code:
<html>
<head>
<title> Line break </title>
<body>
HI
Im teddy Hello Hello
Summer Summer
</body>
</html>
আমরা এই কোডে কিবোর্ড এন্টার ব্যাবহার করেছি। এবং এর রেজাল্ট এমনঃ
 |
| লাইন ব্রেক ট্যাগ ছাড়া। |
এখন আমরা লাইন ব্রেক ব্যাবহার করে দেখবো ঃ
- Code:
<html>
<head>
<title> Line break </title>
<body>
HI <br/> Im teddy Hello Hello <br/> Summer Summer <br/>
</body>
</html>
এখন আমরা রেজাল্ট দেখবোঃ
 |
| এবার আমরা লাইনব্রেক ব্যাবহার করেছি। |
আমরা এবার আমাদের চাহিদার রেজাল্ট পেয়েছি। আমরা এবার শিখবো আরেকটি ট্যাগ যা লাইন ব্রেকের মতোই, তবে তা ব্রেক এর বদলে একটি দা টেনে দেয় পুরো পেইজের প্রস্থ জুড়ে। তা হলো <hr/> ট্যাগ। কোডটি নিজে চেষ্টা করে দেখুন।
বিদায় নোট
ধন্যবাদ আমাদের আর্টিকেল পড়ার জন্যে। কালকের পর্বে আমরা আরো অনেক কিছু শিখবো। কালকে আমরা যা যা শিখবোঃ
১। ছবি বসানো
২। ডিভ ও স্প্যান ট্যাগ
৩। এইচটিএমএল টেবিল
৪। এইচটিএমএল কালার ও স্টাইলিং
আজকের মতো এই পর্যন্ত কাল আবার দেখা হবে মিনিল্যাবে। আবারো ধন্যবাদ। ও শুভ বিদায়
tarek_monowar- Posts : 7
Join date : 2018-05-16
Re: HTML শেখা পর্ব ৪। #HTML
Tue May 29, 2018 10:27 pm
Go ahead Minilab.! <3
- tarek_monowar
- Posts : 7
Join date : 2018-05-16
Re: HTML শেখা পর্ব ৪। #HTML
Tue May 29, 2018 10:29 pm
পরের পর্ব viewport ও এড করিয়েন..
- AdminAdmin
- Posts : 24
Join date : 2018-05-15
Re: HTML শেখা পর্ব ৪। #HTML
Tue May 29, 2018 10:59 pm
করব ভাই <3tarek_monowar wrote:পরের পর্ব viewport ও এড করিয়েন..
Permissions in this forum:
You cannot reply to topics in this forum|
|
|