ব্লগিংয়ের জন্য এইচটিএমএল শেখার ক্লাস – কে কে হাজির? [টিউটোরিয়াল - পর্ব ১]

by জিন্নাত উল হাসান on February 12, 2010 · 41 comments

in ওয়েবসাইট,ওয়ার্ডপ্রেস,ওয়েবসাইট,টিউটোরিয়াল

ব্লগিংয়ের জন্য এইচটিএমএল শেখার ক্লাস - কে কে হাজির? [টিউটোরিয়াল - পর্ব ১]

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

আজ থেকে ছোট ছোট পোষ্টের মাধ্যমে HTML, CSS শেখানোর চেষ্টা করব।

যারা ব্লগের কোড বসাতে চান, তারা একটা জিনিস সবসময় খেয়াল রাখবেন। আমরা বেশিরভাগই ব্লগার.কম কিংবা ওয়ার্ডপ্রেসের ভিজুয়াল এডিটর ব্যবহার করি। এখানে কোড বসালে কাজ করবে না। তাই যখনই কোনো কোড বসাতে চাইবেন, তখনই HTML এডিটরে গিয়ে কোডটুকু বসিয়ে আবার ভিজুয়াল এডিটরে ফেরত আসতে হবে।

আজকের পাঠশালা

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

<strong>আমার নাম হাসান</strong>

ফলাফল: আমার নাম হাসান

<u>আমার নাম হাসান</u>

ফলাফল: আমার নাম হাসান

<i>আমার নাম হাসান</i>

ফলাফল: আমার নাম হাসান

<font style = "font-size:1.8em; ">আমার নাম হাসান</font>

ফলাফল: আমার নাম হাসান (১.৮ গুন বড়)

<font style = "color:#880000; ">আমার নাম হাসান</font>

ফলাফল: আমার নাম হাসান (রংয়ের কোডের জন্য এই পোষ্টটি পড়ুন)

আমার নাম <strike>হাসন</strike> হাসান

ফলাফল: আমার নাম হাসন হাসান

<a href = "http://bn.jinnatulhasan.com/blog" >আমার ব্লগের ঠিকানা</a>

ফলাফল: আমার ব্লগের ঠিকানা (dofollow link)

<a href = "http://bn.jinnatulhasan.com/blog"  rel = "nofollow" >আমার ব্লগের ঠিকানা</a>

ফলাফল: আমার ব্লগের ঠিকানা (nofollow link)

<ul>
<li>গুগল</li>
<li>মাইক্রোসফট</li>
<li>ফেসবুক</li>
<li>টুইটার</li>
<li>ওয়ার্ডপ্রেস</li>
</ul>

ফলাফল:

  • গুগল
  • মাইক্রোসফট
  • ফেসবুক
  • টুইটার
  • ওয়ার্ডপ্রেস
<ol>
<li>গুগল</li>
<li>মাইক্রোসফট</li>
<li>ফেসবুক</li>
<li>টুইটার</li>
<li>ওয়ার্ডপ্রেস</li>
</ol>

ফলাফল:

  1. গুগল
  2. মাইক্রোসফট
  3. ফেসবুক
  4. টুইটার
  5. ওয়ার্ডপ্রেস

আজকের মতো এতটুকুই, আগামীকাল <table> নিয়ে আলোচনা করব।

ততক্ষন পর্যন্ত সাথে থাকুন, ভাল থাকুন।

শুভ কামনা রইল।

এ ধরনের আরও কিছু পোষ্ট:

{ 40 comments… read them below or add one }

মহিদুল July 17, 2010 at 11:59 am

পাঠশালায় নতুন টিউটোরিয়াল সংযোজন করতে হবে।

Reply

রাজু February 25, 2010 at 12:58 pm

লেখার পাশে অন্য সিম্বল দিতে কি করতে হবে, কত রকম সিম্বল ব্যবহার করা যায়?
আর কেন লেখাকে একসাথে ইটালি,বোল্ট,আন্ডার লাইন করতে কিভাবে কোড লিখতে হবে?

Reply

রাজু February 25, 2010 at 1:02 pm

রংয়ের কোডের ক্ষেত্রে কালার কোড ও কালার নেম দুটোই কি HTML এ ব্যবহার করা যায়?
কোন টা ব্যবহার করা ভাল?

Reply

Mayakanon February 26, 2010 at 2:21 am

কালার কোড ও কালার নেম দুটোই ব্যবহার করতে পারবেন। তবে কোড ব্যবহার করাই ভাল। তাতে সুনির্দিষ্ট রংটি আপনার ফলাফলে দেখতে পারবেন।

Reply

Mayakanon March 1, 2010 at 6:27 am

একসাথে ইটালিক,বোল্ড ও আন্ডারলাইল লিখতে এইরকম কোডিং ব্যবহার করুন:
<u><b><i>মায়াকানন</i></b></u>
ফলাফল মায়াকানন

Reply

golam maula dolar February 17, 2010 at 2:46 pm

আপনার ব্লগের পোষ্টগুলি যেমন শিক্ষনীয়, তেমনই আপনার ব্লগের বিভিন্ন জনের বিভিন্ন মন্তব্যগুলিও ঠিক তেমনই শিক্ষনীয়। ধন্যবাদ আপনার এই ধরনের উদ্দোগের জন্য।

Reply

Mohit February 16, 2010 at 11:33 am

ধন্যবাদ ভাইয়া এই রকম পোস্ট দেয়ার জন্য, যাতে না থেমে যায়

[অপ্রয়োজনীয় লিংক ডিলিট করে দেয়া হল - হাসান]

Reply

EBRAHIM SHAH February 15, 2010 at 10:16 pm

ভালই লাগছে ভাই। চালিয়ে যান সঙ্গে আছি আমরা।

Reply

jeweludoy February 14, 2010 at 11:11 pm

ভাই আমি দুইদিন পর হাজির হলাম। HTML শেখার ইচ্ছে অনেক দিনের। চেষ্টা করব শেখার। পোষ্টটি-র জন্য অনেক ধন্যবাদ।

Reply

rumma February 14, 2010 at 6:28 pm

ওয়াও

Reply

Enameos February 14, 2010 at 3:23 am

অসাধারন একটা উদ্যোগ !!! ধন্যবাদ হাসান ভাই।
.-= Enameos এর সর্বশেষ পোষ্ট >> “A Reliable Wife” by Robert Goolrick – Book Reviews =-.

Reply

Noor February 14, 2010 at 12:38 am

HTML শেখার জন্য http://www.w3schools.com ওয়েবসাইটটি এক কথায় দারুন। আগ্রহীরা একবার ঢু মেরে দেখতে পারেন।
.-= Noor এর সর্বশেষ পোষ্ট >> Check your downloaded file and make sure downloaded file is virus free ! =-.

Reply

nayon February 13, 2010 at 8:24 pm

খুবই, দরকারী পোস্ট .. হাসান ভাই Div Tag এ আমার একটু সমস্যা আছে। এটা নিয়ে একটু আলোচনা চাই।
.-= nayon এর সর্বশেষ পোষ্ট >> Roger Federer vs Andy Murray live Australian Open tennis 2010 =-.

Reply

সেলিম রাজ February 13, 2010 at 8:05 pm

আমিও আছি।
দারুন কাজের উদ্যোগ ভাই। অনেক উপকারে আসবে ভাই।

Reply

Rafiur February 13, 2010 at 7:45 pm

anchor ট্যাগ এ যদি rel ব্যবহার না করি তবে কি তা Dofollow লিঙ্ক হবে?

Reply

জিন্নাত উল হাসান February 13, 2010 at 7:59 pm

জ্বি, ঠিক ধরেছেন। ট্যাগ ব্যবহার না করলে ডুফলো হয়ে যাবে।

Reply

তন্ময় February 13, 2010 at 8:21 pm

আমার জানা মতে ওয়ার্ডপ্রেস অটোমেটিকালি rel ছাড়া লিঙ্ক গুলোকেও no-follow করে দেয়। ওয়ার্ডপ্রেস ব্যাবহারে কত সুবিধা :)

Reply

Monir February 13, 2010 at 2:37 pm

নি:সন্দেহে খুবই ভাল উদ্যোগ।
হাসান ভাই যেখানে HTML গুলো লিখেছেন সেখানে Background এর রং ভিন্ন এটা কিভাবে করেছেন ?
.-= Monir এর সর্বশেষ পোষ্ট >> Flash tag cloud plugin =-.

Reply

তন্ময় February 13, 2010 at 8:24 pm

নরমালি এটা থিমের css এ থাকা কিছু কোডের ফলাফল। code অথবা pre ট্যাগ ব্যাবহার করে এটা করা যেতে পারে।
.-= তন্ময় এর সর্বশেষ পোষ্ট >> Openning Offer =-.

Reply

মামুন সৃজন February 13, 2010 at 1:29 pm

দারুন উদ্যোগ। আমার মনে হয়না এমন কেউ আছে যে, এ ধরনের পোস্টগুলো কখনো তার কাজে আসবে না।
.-= মামুন সৃজন এর সর্বশেষ পোষ্ট >> গুগল বাজের যন্ত্রনায় অস্থির? =-.

Reply

সাম্য February 13, 2010 at 1:18 pm

নাহ এইবার এইচ টি এম এল এর পড়ালেখা টা শিখতেই হবে। :P

Reply

Rajibul February 13, 2010 at 11:25 am

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

Reply

Rafiur February 13, 2010 at 7:23 pm

হাসান ভাই আমিও একমত আমাজান এফিলিয়েটের ২য় লিখাটার জন্য আধীর আগ্রহে অপেক্ষা করছি।

Reply

blues February 13, 2010 at 10:55 am

কাজের পোস্ট নি:সন্দেহে। মাঝে মাঝে ট্যাগ ভুলে যাই; এখন থেকে ভুলে গেলেই এখানে হাজির হবো।
.-= blues এর সর্বশেষ পোষ্ট >> Scholarship for High School Seniors and College Students =-.

Reply

Adnan February 13, 2010 at 10:20 am

হাসান ভাই,আমার বিবেচনায় এই সিরিজটা এই ব্লগের জন্য আপনার নেওয়া অন্যতম সেরা উদোগ।আর ভাইয়া, ফেব্রুয়ারি ২০০৯ থেকে আজ ফেব্রুয়ারি ২০১০, বর্ষপূর্তি হয়ে গেল কিন্তু আগে ঘোষনামতো কোন বিশেষ প্রতিযোগীতা বা অন্য কিছু হচ্ছে না কেন?আশা করি আপনার মাথায় আছে।আবারো অনেক অনেক ধন্যবাদ জানাচ্ছি এই সিরিজটার জন্য।ব্যাক্তিগতভাবে আমার প্রচন্ড কাজে লাগবে।

**ভাইয়া ইমেইল করেছিলাম…**

Reply

Limon (uralpakhi) February 13, 2010 at 9:36 am

চালিয়ে যান গুরু আমরা আছি আপনার সাথে…

মাঝে মাঝে আমাদের পরীক্ষার ব্যাবস্থা রাইখেন।
.-= Limon (uralpakhi) এর সর্বশেষ পোষ্ট >> Rules been tighten for Uk student visa =-.

Reply

ঊর্মি February 13, 2010 at 9:02 am

পুরো একটি ওয়েবসাইট তৈরি করার জন্য ধারাবাহিক টিউটরিয়াল দেয়া যেতে পারে কি?
.-= ঊর্মি এর সর্বশেষ পোষ্ট >> Set Background Color in CSS =-.

Reply

তন্ময় February 13, 2010 at 8:25 pm

বিশাল চাহিদা :)
.-= তন্ময় এর সর্বশেষ পোষ্ট >> Openning Offer =-.

Reply

কবীর February 14, 2010 at 1:35 am

বিশাল চাহিদতো বটেই কিন্তু এটা করলে কিন্তু পাঠকের বিশাল উপকার হবে।
আমার জানা মতে তন্ময় ভাই ওয়ার্ডপ্রেস থিম কাষ্টমাইজেশনে অনেক পটু।
হাসান ভাইয়ের সাথে তন্ময় ভাই মিলে এরকম কিছু করেন।
যে কোন একটা থিম কিভাবে কাষ্টমাইজেশন করে সুন্দর ভাবে ফুটানো যায় তা আমরা দেখতে চাই।
.-= কবীর এর সর্বশেষ পোষ্ট >> 3 Techniques to Get More Reader in Your Blog =-.

Reply

Adnan February 14, 2010 at 2:30 am

পুরো একটি ওয়েব সাইট তৈরী করার টিউটোরিয়াল লেখা ঠিক হবে না।কেননা ওয়েব সাইট বানানো তো আর সহজ কোন কাজ না।ধরে নিলাম হাসান ভাই একভাবে হয়তো একটা সাইট বানানো দেখালেন তারপর কি হবে? আপনি নিজে আরেকটা বানাতে গেলেই আপনার প্রোগ্রামিং জ্ঞান লাগবেইইই।অনেক দক্ষতা আর জ্ঞানের সমন্বয়ে একটি ওয়েব সাইট তৈরী করা হয় যা সীমিত পরিসরে লেখা/বুঝানো অসম্ভব।আর আপনি ধাপে ধাপে থিম বানানো শিখতে চাইলে এই প্রিমিয়াম টিউটোরিয়ালটা দেখেন।নিজেই বিবেচনা করে দেখুন কতটুকু বুঝলেনঃ http://www.mediafire.com/?vzyytienr2y

Reply

ঊর্মি February 13, 2010 at 8:37 am

আমি শিখতে আগ্রহী ।

Reply

রিয়া February 13, 2010 at 4:39 am

বাঃ! বেশ বেশ :) খুব কাজে দেবে।
.-= রিয়া এর সর্বশেষ পোষ্ট >> চালু হলো ওয়ার্ডপ্রেসের স্বয়ংক্রিয় পিং সার্ভিস =-.

Reply

অনুপ February 13, 2010 at 12:56 am

dofollow link আর nofollow link এই দুইটা কি? একটু বিস্তারিত বলবেন?
.-= অনুপ এর সর্বশেষ পোষ্ট >> HTML পরিচিতি =-.

Reply

রিয়া February 13, 2010 at 4:36 am

এই দুটি দিয়ে সার্চ ইঞ্জিন রোবটকে জানানো হয় যে আমরা যেসব লিঙ্ক পোস্ট করছি সেইগুলিকে অনুসরণ করে সেই লিঙ্কে রোবট যাবে কিনা। dofollow=অনুসরণ করো, nofollow=অনুসরণ কোরোনা।
.-= রিয়া এর সর্বশেষ পোষ্ট >> চালু হলো ওয়ার্ডপ্রেসের স্বয়ংক্রিয় পিং সার্ভিস =-.

Reply

কবীর February 13, 2010 at 12:33 am

হাসান ভাই এটা খুবই ভাল উদ্যোগ।
চালিয়ে যান, আমরা না জানা অনেক কিছুই এখান থেকে চুপি চুপি শিখে যাব।
.-= কবীর এর সর্বশেষ পোষ্ট >> 3 Techniques to Get More Reader in Your Blog =-.

Reply

mAmun_bangladeshi February 12, 2010 at 11:34 pm

হাসান ভাই এমনি HTML জানি কিন্তু আপনার পোস্ট পড়ে খুটিনাটি অনেক কিছু জানলাম

Reply

mAmun_bangladeshi February 12, 2010 at 11:29 pm

হাসান ভাই আমি হাজির ।ভালো লাগলো চালিয়ে যান।

Reply

হাসিব February 14, 2010 at 4:14 pm

বস যেখানে শিষ্য সেখানে, মামুন ভাই আমিও আছি।

Reply

anupdebnath February 12, 2010 at 9:20 pm

হুম অনেক কিছু আগে জানতাম আজকে কিছু নতুন জিনিস জানলাম।

অট: আপনার ব্লগের হোম পেজ আর ব্লগ কিভাবে আলাদা করেছেন একটু জানাবেন। আমি আমার ব্লগে করতা পারছি না।

Reply

জিন্নাত উল হাসান February 12, 2010 at 9:43 pm

Leave a Comment

{ 1 trackback }

Previous post:

Next post: