Bangladesh internet Club: * ওয়েব ডেভেলপিং

বৃহস্পতিবার, ১২ জুলাই, ২০১২

@@ HTML টিউটোরিয়াল: দ্বিতীয় পর্ব (হেডার ট্যাগ পরিচিতি)

ট্যাগ বা ট্যাগিং বলতে আমরা সাধারনত বুঝি একটি বস্তুর সাথে অন্য কোন বস্তুকে ঝুলিয়ে দেয়া। যেমনটা আমরা অনেকেই ফেসবুকে কোন ছবিকে আমদের বন্ধুদেরকে ট্যাগ করি ঠিক তেমটাই।

ভাষাগত দিকে থেকে একই হলেও HTML হেডার ট্যাগ গুলো কিছুটা ভিন্নতা প্রকাশ করে। যেমন, HTML এ <header> </header> একটি সেকশন ট্যাগ আছেই তারপরেও স্বতন্ত্র HTML এ header ট্যাগ আছে ছয়টি যেগুলো শুধু মাত্র <body> </body> সেকশনে ব্যবহার করা যায়: h1, h2, h3, h4, h5, h6। ট্যাগ গুলোর ব্যবহার একটু বিস্তারিত আলোচনাতে আসি –

হেডার ওয়ান ট্যাগ: সবচেয়ে বড় হেডার ট্যাগ। লিখাগুলোর সাইজ ৩৬ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।

<h1>This is H1 tag example</h1>

হেডার টু ট্যাগ: হেডার ওয়ান থেকে একটু ছোট। লিখাগুলোর সাইজ ৩০ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h2>This is H2 tag example </h2>

হেডার থ্রী ট্যাগ: হেডার টু থেকে একটু ছোট। লিখাগুলোর সাইজ ২৪ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h3>This is H3 tag example </h3>

হেডার ফোর ট্যাগ: হেডার থ্রী থেকে একটু ছোট। লিখাগুলোর সাইজ ১৮ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h4>This is H4 tag example </h4>

হেডার ফাইভ ট্যাগ: হেডার ফোর থেকে একটু ছোট। লিখাগুলোর সাইজ ১৬ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h5>This is H5 tag example </h5>

হেডার সিক্স ট্যাগ: হেডার ফাইভ থেকে একটু ছোট এবং সবচেয়ে ছোট ট্যাগ। লিখাগুলোর সাইজ ১৪/১২ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h6>This is H6 tag example </h6>

নোট প্যাডে লিখবেন যেভাবে-
<html>
<head>
<title>This is Header Tag Tutorial</title>
</head>
<body>
<h1>This is H1 tag example</h1>
<h2>This is H2 tag example </h2>
<h3>This is H3 tag example </h3>
<h4>This is H4 tag example </h4>
<h5>This is H5 tag example </h5>
<h6>This is H6 tag example </h6>
</body>
</html>

লিখাগুলো নোটপ্যাডে কপি পেষ্ট করে tag.html ফরমেটে সেভ করুন। তার পর tag.html ডকুমেন্টটি ডাবল ক্লিক করে ব্রাউজারে প্রদর্শণ করান। কোথায় কোন ভুল না থাকেলে অবশ্যই ফলাফল প্রদর্শণ করতে ভালভাবে।

আর সমস্যা হলে মন্তব্যে জানাবেন জানাবেন।

ধন্যযোগ সকলকে!

@@ HTML টিউটোরিয়াল: পরিচিতি পর্ব!

**টিউটোরিয়াল শুরু করার পূর্বে জেনে নিই: HTML কি এবং কিভাবে কাজ করে?

HTML মানে Hyper Text Markup Language. HTML মূলত কোন প্রোগ্রামিং Language নয়। এটি একটি Markup Language. Markup Language হলো Markup Tags এর সমন্বিত রুপ।Markup Tags গুলোই বলে দেয় ওয়েব পেইজটির ছবি, বর্ণনা, শব্দ বা ভিডিও কিভাবে বর্ণনা করবে বা শো করবে বা কাজ করবে।সুতরাং, বলা যায় Markup Tags বা Html Tags- ই হলো ওয়েবের প্রাণ শক্তি।

HTML ডকুমেন্ট পরিচিতি:

একটি HTML ডকুমেন্ট এর ফাইল এক্সটেনশন হয় .html. মনে করুন, ফাইলের নাম Contact সুতরাং HTML ফাইল হিসাবে এর এক্সটেনশন হবে .html, তাহলে ফাইলটির পুরো নাম হবে Contact.html.

ক)একটি HTML ডকুমেন্ট এর প্রধানত দুটি অংশ থাকে; ১. হেড/হেডার(head) এবং ২. বডি(body)।
খ) সম্পূর্ণ HTML ডকুমেন্ট ফরমেটটি ঠিক এরকম-

<html>

<head>
<link rel=”stylesheet” type=”text/css” href=”#” />
<title> HTML Tutorial on WordPress Group</title>
</head>

<body>
<p>Hello! World, This Is My First HTML Tutorial!</p>
</body>

</html>

গ) বর্ননা: একটি HTML ডকুমেন্ট এর একদম শুরুতে <html> একদম শেষে </html> লিখতে হয়। এটা W3 Consortium এর নিয়ম। আপনি যদি অন্য ফরমেটের ডকুমন্টে করতে চান তবে সেক্ষেত্রেও একই নিয়ম হতে হবে। যেমন PHP এর ফরমেট শুরুতে <?php এবং শেষে ?>

HTML এর কিছু ট্যাগ বাদে প্রায় সব গুলোরই শুরু(Staring) এবং শেষ(Ending) ট্যাট আছে। সেরকম হেডার ট্যাগ এর শুরু <head> এবং শেষ </head>, তবে টাইটেল প্রদর্শন করবে ব্রাউজারের টাইটেল বারে। এই শুরু এবং শেষের মাঝে আরো অনেক নেস্টেড(যারা অন্য তথ্য বহন করে) ট্যাগ আসবে। এগুলোর ইলিমেন্ট গুলো কখনই ফ্রন্টইন্ড এ প্রদর্শন করবে না। তবে, বডি শুরু <body> এবং শেষ </body> এর মাঝে যেকোন লিখা, ইমেজ, ভিডিও মার্কাপ এর নিয়ম অনুযায়ী যেভাবেই লিখবেন সেভাবেই এগুলো ফ্রন্টইন্ডে প্রদর্শন করবে। যেমনটা আমি লিখেছি বডি এর প্যারাগারাফ ট্যাগ এর মধ্যে:

<p> Hello! World, This Is My First HTML Tutorial! </p>

উপরের খ) নম্বর এর অংশটুকু নোটপ্যাডে কপি পেষ্ট করে সেভ করুন example.html বা অন্য যে নামে আপনার ইচ্ছা। তবে ফাইল টাইপ .html অবশ্যই লিখতে বা নির্বাচন করতে হবে।

চেষ্টা করুন না পারলে, মন্ত্যবে জানান।

ধন্যযোগ সবাইকে!

Bangladesh internet Club