নুতুন আর একটা প্রোজেক্ট নিয়ে আসা যাক। মনে করেন কোন Buyer বলল যে আপনাকে তার আর্টিকেল সমূহ তার ওয়েব সাইট পোস্ট করতে হবে।টা কিছু টা এডিট ও করতে হবে। সাধারনত এই ধরনের কাজ বিভিন্ন “সি ম এস” জন্য প্রযোজ্য হয়ে থাকে। “সি ম এস” এর সম্পূর্ণ অর্থ = Content Management System. বর্তমানে সবচেয়ে প্রচলিত “সি ম এস” গুলা হল যেমনঃ Wordpress,Joomla,Drupal etc. যাহক এইগুলা করতে হলে প্রথমে কিছু basic HTML এবং এইসব HTML ব্যবহার করার জন্য একটু সি ম এস সম্পর্কে জানা লাগবে। এবার শুরু করলাম তার সম্পর্কে আলোচনা।
প্রথমেই শুরু করা যাক এইচটিএমএল সম্পর্কেঃ
HTML = Hypertext Markup Language
এইটা আসলে ওয়েবসাইট তৈরির এক ধরনের coding.এর মাধ্যমে আর্টিকেল সাজানর জন্য আপনাকে কিছু coding আপনাদের জানা লাগবে তার সম্পর্কে এখানে আলোচনা।
<tagname>content</tagname>
#এইচটিএমএল কোড আসলে এক ধরনের কী ওয়ার্ড যা অ্যাঙ্গেল ব্রাকেট দ্বারা সীমাবদ্ধ করা থাকে।
# সাধারনত এই কোড গুলা জোরা জোরা হয়ে থাকে।
# এই জোড়া ট্যাগের প্রথম টার নাম “start tag” বা “opening tags” অ্যান্ড ২য় ট্যাগের নাম “end tag” বা “closing tags”
এবার কোড নিয়ে আসা যাক।
Simple Exam:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
এই টা একটা উদাহরণ।
<p>This is a paragraph.</p>
এইখানে p হল paragraph ট্যাগ। অর্থাৎ কোন paragraph শুরু ক্ষেত্রে এবং শেষ এর ক্ষেত্রে এই ট্যাগ ব্যবহার করা হই।
<br/> এই টা ব্রেক ট্যাগ। কোন লাইন শেষে আর একটা লাইন এর মাজখানে ফাকা রাখতে হলে এই ব্রেক ট্যাগ ব্যবহার করতে হই।
এবার হল HEADER TAG। অর্থাৎ কোন কিছু হেড এর লাম লিখার জন্য এই ট্যাগ গুলা ব্যবহার করতে হই।
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
এইগুলা দেখাবে এইরকমঃ
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Header Tag ৬ টা হয়। অথএব আমরা কোন Heading এর জন্য এই ৬ টা ব্যবহার করতে পারব।
এবার আমরা MS word এর ক্ষেত্রে সাধারণত লেখা ব্লোড , ঈটালীক করতে চাইলে আমরা নরমালি করতে পারি। কিন্তু ওয়েবসাইট করতে হলে কিছু কোড ব্যবহার করতে হই। সেইগুলা নিচে দেওয়া হলঃ
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
এইগুলা দেখাবে এমনঃ
This text is bold
This text is strong
This text is big
This text is italic
This text is emphasized
This is computer output
This is subscript and superscript
এবার দেখানো হবে যদি কোন ওয়েবসাইট এ কিছুর লিস্ট করতে চাইলে কি কোড ব্যবহার করতে হবে।
সাধারণত লিস্ট ২ প্রকারঃ
১.Ordered List
2. Unordered List
Ordered list এর জন্য কোড ঃ
<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
দেখাবেঃ
Numbered list:
- Apples
- Bananas
- Lemons
- Oranges
Letters list:
- Apples
- Bananas
- Lemons
- Oranges
Lowercase letters list:
- Apples
- Bananas
- Lemons
- Oranges
Roman numbers list:
- Apples
- Bananas
- Lemons
- Oranges
Lowercase Roman numbers list:
- Apples
- Bananas
- Lemons
- Oranges
Unordered List এর কোড ঃ
<h4>Disc bullets list:</h4>
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
দেখাবেঃ
Disc bullets list:
- Apples
- Bananas
- Lemons
- Oranges
Circle bullets list:
- Apples
- Bananas
- Lemons
- Oranges
Square bullets list:
- Apples
- Bananas
- Lemons
- Oranges
আর একটু হল A nested List:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
দেখাবেঃ
A nested List:
- Coffee
- Tea
- Black tea
- Green tea
- Milk
Anchor Text: এবার যে ট্যাগ নিয়ে বলব তার নাম anchor text বা Hyperlink. এই কোড এর কাজ কোন কিওয়ার্ড পিছনে কোন লিঙ্ক লুকিয়ে রাখা। অর্থাৎ কোন কিওয়ার্ড কে ক্লিককেবল তৈরি করা। এবার দেখানো হলঃ
<a href="http://www.medsit.net/">Visit Meds IT</a>
এইখানে কিওয়ার্ড হল “Visit Meds IT” এবং লিঙ্ক হল http://www.medsit.net/।
আর লিঙ্ক টা এমন ভাবে দেওয়া হল যাতে ওঁই কিওয়ার্ড ক্লিক করলে অন্য tab ওপেন হয়ে লিঙ্ক টা ওপেন হবে।
<a href="http://www.medsit.net/" target="_blank">Visit Meds IT</a>
HTML Images
এবার দেখানো হবে কোড এর মাধ্যমে কিভাবে ইমেজ সেট করা হইঃ<img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Blue hills.jpg" alt="Pulpit rock" width="304" height="228" />
এইখানে ওঁই লিঙ্ক আসলে কোন ফোল্ডার এর যে ছবি টা নেওয়া হয়েছে এটা তার লিঙ্ক।
এটাই BASIC HTML.
এবার চলুন শুরু করি HTML দিয়ে ওয়েভ ডিজাইনিং প্রথম আপনার পিসির Notepad অথবা Notepad++ অপেন করে নিচের কোডটির মত লিখব অথবা কোডটি কপি করে পেস্ট করুন ..
<html>
<b><i><u>This is my first web page</b></i></u>
</html>
এবার Notepad এর ফাইল এক্সটেন্সান পরিবর্তন করে অর্থাৎ .txt কে পরিবর্তন করে .html লিখি।
এবার এটাকে webpage.html নামে সেভ করুন এবার সেভ করা ফাইলটি অন করুন দেখুন This is my first web page এই লেখাটি Bold, Italic, Underline এবং Center হয়ে সো করছে….
এছারা সবচেয়ে ভাল হয় যদি আপনি Blogger.com বা wordpress.com অ্যাকাউন্ট খুলে এইখানে এই এইচটিএমএল গুলা প্রয়োগ করলে। Blogger.com অ্যাকাউন্ট খুলতে গেলে শুধু জিমেইল হলে হবে।
fine thank you.
ReplyDeleteI just wanted to make a quick comment to say GREAT blog!….. I’ll be checking in on a regularly now….Keep up the good work
ReplyDeleterestaurant in south delhi