Showing posts with label HTML. Show all posts

Monday, February 27, 2017

How to remove blogspot footer credit?

Internet Tips Mirza Abdullah Al Noman 8:39 PM

Go to Blogger.com

Open your blog.

Select 'Template' > 'Edit HTML'

Now, search for 'footer' or 'credits' in template code.

Now you will see something.

Now, add style='visibility:hidden' where credits are written in image or your template.

You can add this code with that element id what you want to hide from the template

Click 'Save'.

Done!

Thursday, June 18, 2015

এইচটিএমএল টিউটোরিয়াল | ভূমিকা (HTML Tutorial in Bangla | Introduction)

HTML Mirza Abdullah Al Noman 6:54 PM

এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper Text Markup Language. এটা কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়, মার্কআপ ল্যাংগুয়েজ।
ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন। এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন
তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল। সবশেষে পিএইচপি + ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।

যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)

নোটপ্যাড। Notepad open করে তৈরী হোন। যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver. আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন। উইন্ডোজে বাই ডিফল্ট যে নোটপ্যাড টি থাকে সেটা দিয়ে কোড করে কোন মজা বা সুবিধা কিছুই পাবেননা। তবে এরকমই একটা হালকা নোটপ্যাড আছে নাম "Notepad++" এখানে প্রচুর সুবিধা পাবেন এবং এটা প্রফেশনাল কোড লেখার জন্য নি:সন্দেহে ব্যবহার করতে পারেন। এই যে ডাউনলোড লিংক
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-

এইচটিএমএল এলিমেন্ট (Element)
এইচটিএমএল ট্যাগ (Tag)
এইচটিএমএল অ্যাট্রিবিউট (Attribute)

এ শব্দগুলি সবসময় আসবে এবং এগুলির পরিষ্কার ধারনা থাকতে হবে।
HTML, XHTML এবং HTML5
HTML এর সর্বশেষ ভার্সন হচ্ছে HTML5। এইচটিএমএল ৫ এ এক্সএইচটিএমএল সকল নিয়ম অনুসরন করা হয়। কাজেই HTML 5 শিখলেই আগের ভার্সনগুলি অটোমেটিক শেখা হয়ে যাবে। তাই আমরাও ঐভাবে টিউটোরিয়ালগুলি দেব।
* W3C নামের এই সংস্থাটি HTML তৈরী এবং ম্যানেজমেন্ট করে।
* HTML 5 মুলত HTML ই তবে এখানে নতুন নতুন অনেক ট্যাগ এবং নিয়ম যুক্ত হয়েছে যেগুলির বর্ননা আমরা পরবর্তী টিউটোরিয়ালগুলিতে প্রয়োজন অনুসারে দিয়ে দেব।

এইচটিএমএল ডকুমেন্ট DOC type টিউটোলিয়াল (HTML document - DOC type Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:53 PM

নিচে একটা সাধারন এইচটিএমএল ডকুমেন্ট দেয়া হল এবং এর প্রতিটি অংশের বিস্তারিত বর্ননা করা হচ্ছে

<!DOCTYPE html>
<html>
<head>
<!--- JS/CSS file is to be added here -->
 
</head>
<body>
 
<h1>Webcoachbd demo heading</h1>
 
<p>demo content goes here.</p>
 
</body>
</html>

প্রথম লাইনটি <!DOCTYPE html> হচ্ছে ডকুমেন্টটি কি ধরনের তা বোঝানোর (ব্রাউজারকে) জন্য দেয়া হয়। এইচটিএমএল এর কোন ভার্সন ব্যবহার করবেন সেটার উপর ভিত্তি করেই এই ডিক্লেয়ারেশন টি দেয়া হয়। যেমন উপরের ডকুমেন্ট টি এইচটিএমএল ৫ এর একটি ডকুমেন্ট । এরুপ যদি এটা XHTML এর ১.০ ভার্সন হতো তাহলে ডিক্লেয়ারেশনটি দিতে হতো এভাবে

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

এটা হচ্ছে ট্রানজিশনাল অর্থ্যাৎ এইচটিএমএল এর সকল কিছু এই্ ডকুমেন্টে লেখা যাবে সাথে সাথে deprecated এলিমেন্টগুলিও ব্যবহার করা যাবে যেমন font। ফ্রেমসেট ব্যবহার করা যাবেনা।
যাইহোক এভাবে "xhtml1-transitional.dtd" এর জায়গায় "xhtml1-strict.dtd" দিলে deprecated এলিমেন্টগুলি ব্যবহার করা যাবেনা।

** এখন HTML5 আসার পর এগুলি আর সাধারনত ব্যবহার করেনা। HTML 5 এর ডিক্লেয়ারেশন দেয়া হয়।

1.<!DOCTYPE html>

যাইহোক এটা খুব গুরত্বপূর্ন কিছু নয়। কপি করে (X)HTML ডকুমেন্ট লেখার শুরুতে পেস্ট করে দিলেই চলবে। তবে দিতে হবে কেননা না দিলে কিছু কিছূ ব্রাউজারে ঠিকমত আউটপুট আসেনা যেমন ইন্টারন্টে এক্সপ্লোরার (IE)।
বর্তমানে XHTML এই বেশি ব্যবহৃত হচ্ছে তাই এই সাইটেও HTML এর মুরব্বি XHTML এরই টিউটোলিয়াল দেয়া হচ্ছে, যদিও উচ্চারন করছি HTML আসলে সব এইচটিএমএল এর টিউটোলিয়ালগুলিতে আমরা XHTML এরই নিয়ম অনুসরন করেছি। আর একটা দরকারী কথা, HTML এর সর্বশেষ ভার্সন HTML 5 আসার পর এখনতো এটাই বেশি ব্যবহার করা হচ্ছে বিশ্বের ওয়েবজুড়ে।
আমরা এইচটিএমএল ৫ এরও মুল বিষয়াদি পাশাপাশি আলোচনা করে যাব।

এইচটিএমএল এলিমেন্ট টিউটোরিয়াল (HTML Element Tutoral in Bangla)

HTML Mirza Abdullah Al Noman 6:52 PM

এর আগে এইচটিএমএল ট্যাগ নিয়ে আলোচনা করলাম। একটা start tag (যেমন <div>) এবং end tag (যেমন </div>) এর মাঝে যা থাকে তা সহ পুরোটি একটা এলিমেন্ট। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা একাধিক এলিমেন্ট থাকতে পারে বা থাকে (এটাকে nested এলিমেন্ট বলে)। নিচের উদাহরনটি দেখুন

<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
 
<h1>Webcoachbd demo heading</h1>
 
<p>demo content goes here.</p>
 
</body>
</html>

এখানে <html> </html> এর ভিতর যত কিছু আছে সব নিয়ে এটা একটা html এলিমেন্ট এরুপ body একটা এলিমেন্ট। একইভাবে বাকিগুলিও এক একটি এলিমেন্ট।
এলিমেন্টের ভিতর এলিমেন্ট থাকতে পারে আবার যেমন <h1></h1> এর ভিতর কোন এলিমেন্ট নেই, যে লেখাটি আছে সেটি হচ্ছে এর কনটেন্ট। তাই <h1></h1> এর ভিতরের লেখাটিসহ এটা h1 এলিমেন্ট।
এই উদাহরনটি DOC type এও দেয়া আছে, আমাদের অনলাইন এডিটরে কোডটি পেস্ট করে দেখতে পারেন বা নোটপ্যাডে লিখে .html এক্সটেনশন (যেমন index.html বা test.html) দিয়ে সেভ করে ব্রাউজারে খুলুন, এটিই হচ্ছে আউটপুট, একটা বেসিক এইচটিএমএল ডকুমেন্ট বা একটা ওয়েব পেজ।

এই উহরনটিতে মোট ৫টি এলিমেন্ট আছে html এলিমেন্ট, head এলিমেন্ট, body, h1 এবং p এলিমেন্ট।

* ট্যাগের মত এখানে html এলিমেন্টের চাইল্ড এলিমেন্ট হচ্ছে বাকি সবগুলি এলিমেন্ট। আবার body হচ্ছে প্যারেন্ট এবং এর চাইল্ড হচ্ছে h1 ও p এলিমেন্ট। যে এলিমেন্টের ভিতর অন্য এলিমেন্ট থাকে সেটা হচ্ছে প্যারেন্ট এবং ভিতরের গুলি চাইল্ড এলিমেন্ট।

* ট্যাগগুলির শব্দগুলি ছোটহাতের অক্ষরে লিখতে হবে, যেমন <body> এভাবে না দিয়ে <BODY> এভাবে দিলে এটা একটা গ্রামাটিকাল ভুল। সাথে সাথে end tag টিও দিতে হবে নাহলে একই ভুল হবে।

** যত এলিমেন্ট লেখি না কেন সব body এলিমেন্টের ভিতরই লিখতে হবে, বাকি এলিমেন্ট যেমন head ইত্যাদির ভিতর শুধু নির্দিষ্ট কিছু এলিমেন্ট লেখা যায়। ব্রাউজারে শুধু ঐটুকুরই আউটপুট আসে যেটা body এলিমেন্টের ভিতর থাকে।

ব্লক লেভেল এবং ইনলাইন এলিমেন্ট
=========================
দুই ধরনের এলিমেন্ট আছে
ব্লকলেভেল এলিমেন্ট : যে এলিমেন্টগুলি বাই ডিফল্ট তার ডানে বামে পুরো জায়গা দখল করে থাকে সেগুলিকে ব্লক লেভেল এলিমেন্ট বলে। অন্যভাবে বলা যায় যে, যে এলিমেন্টগুলি শুরু হয় নতুন লাইনে (যখন ব্রাউজারে প্রদর্শন করবে) সেগুলি ব্লক লেভেল এলিমেন্ট।
div, p, h1, ul, li ইত্যাদি ব্লকলেভেল এলিমেন্ট।

ইনলাইন এলিমেন্ট : যে এলিমেন্টগুলির কারনে নতুন লাইন শুরু হয়না সেগুলি ইনলাইন এলিমেন্ট।
a, i, b, span, strong ইত্যাদি ইনলাইন এলিমেন্ট।

<!DOCTYPE html>
<html>
<head>
 
</head>
<body>
 
<h1>I am a block level element</h1>
 
<p>I am block level element too</p>
 
<strong>I am inline element</strong>
<a href="http://www.webcoachbd.com">"a" is a inline element </a>
 
</body>
</html>

এইচটিএমএল ট্যাগ টিউটোরিয়াল (HTML Tag Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:51 PM

আমরা যেকোন একটা এইচটিএমএল ডকুমেন্ট দেখি সেখানে অবশ্যই ট্যাগ থাকে। যেমন নিচের ডকুমেন্ট টি দেখুন এখানে <html>, <head>, </head>, <body> ইত্যাদি এক একটি ট্যাগ।
সোজা কথায় less than (<) চিহ্ন এবং greater than (>) চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা এইচটিএমএল অনুমোদিত) ট্যাগ বলে। যেমন html শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML ডকুমেন্টে লিখি তখন এটার নাম html ট্যাগ। এরুপ শত শত ট্যাগ আছে এইচটিএমএল এ। যেমন প্যারাগ্রাফ ট্যাগ <p></p>, হেডিং <h1></h1> ট্যাগ ইত্যাদি।

<!DOCTYPE html>
<html>
<head>
<title>HTML Tag tutorial in Webcoachbd</title>
 
</head>
<body>
 
<h1>Webcoachbd demo heading</h1>
 
<p>demo content goes here.</p>
 
</body>
</html>

প্রায় সব ট্যাগেরই একটা সমাপ্তি ট্যাগ থাকে যেমন উপরে <html> ট্যাগটির সমাপ্তি ট্যাগ (closing tag বলা হয়) হচ্ছে </html> আবার <h1> এর ক্লজিং ট্যাগ হল </h1> এভাবে বাকি সবগুলি।
টেকনিকাল শব্দ যেটা ব্যবহৃত হয় সেটা হচ্ছে শুরুর ট্যাগটিকে বলে opening tag বা start tag আর শেষের ট্যাগটিকে বলে closing tag বা end tag. দুটোই একই শুধু ক্লজিং ট্যাগে একটা ব্যাকস্লাস (/) চিহ্ন বেশি থাকে।
এই ওপেনিং এবং ক্লজিং ট্যাগের ভিতর কনটেন্ট দিতে হয়। যেমন উপরে দিয়েছি।

** এই ট্যাগই হচ্ছে এইচটিএমএল এর মুল জিনিস। শত শত ট্যাগ আছে, যত বেশি মনে রাখতে পারবেন ততই দ্রুত কাজ করতে পারবেন। তবে অনেকদিন ধরে কাজ করলে বেশিরভাগ প্রয়োজনীয় ট্যাগগুলি মুখস্থই থাকে।

** কিছু কিছু ট্যাগ আছে এগুলির ক্লজিং ট্যাগ নেই যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ ইত্যাদি। এই ট্যাগগুলি সামান্য একটু ভিন্ন।

1.<img src="/path/to/image.jpg" alt="an_image"/>
2.<input type="submit" value="Save"/>

দেখুন ইমেজ ট্যাগ শুরু হয়েছে <img এভাবে আর শেষ হয়েছে /> এই চিহ্ন দিয়ে। ইনপুট ট্যাগটিও তদ্রুপ। আর মাঝে যে জিনিসগুলি দেখছেন (src, type ইত্যাদি) এগুলি সংশ্লিষ্ট ট্যাগটির এট্রিবিউট।
* প্রতিটি ট্যাগেই নানান ধরনের এট্রিবিউট ব্যবহার করা যায়।

* প্রত্যেকটি ট্যাগরই কাজ নির্দিষ্ট করা আছে যেমন আপনার এইচটিএমএল ডকুমেন্টে আপনি যদি প্যারাগ্রাফ দিতে চান তখন <p></p> ট্যাগের ভিতর তা দিতে হবে, হেডিং দিলে <h1></h1> ট্যাগের ভিতর দিতে হবে (বড় ফন্টের হেডিং হলে <h1>, সাইজ অনুযায়ী <h6> পর্যন্ত আছে)। টেক্সট ফিল্ড দিতে হলে input ট্যাগ, ছবি দিতে চাইলে <img ট্যাগ, ব্রাউজারের টাইটেল বারে দেখানোর জন্য আছে <title></title> ট্যাগ ইত্যাদি।

* উপরে যে ডকুমেন্টটি দিয়েছি সেখানে <html></html> কে বলে প্যারেন্ট ট্যাগ পুরো ডকুমেন্ট টির জন্য কেননা পুরো ডকুমেন্টে যত ট্যাগ আছে সবগুলি এর ভিতরে রাখা হয়েছে। ভিতরের ব্যবহৃত ট্যাগগুলি হল এর চাইল্ড ট্যাগ। একইভাবে head ট্যাগের চাইল্ড ট্যাগ হল title ট্যাগ কিন্তু title ট্যাগের কোন চাইল্ড ট্যাগ নেই। আবার দেখুন body হল প্যারেন্ট ট্যাগ এবং এর চাইল্ড ট্যাগ এখানে p এবং h1

এইচটিএমএল এট্রিবিউট টিউটোরিয়াল (HTML Attribute tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:50 PM

এইচটিএমএল এর প্রতিটি এলিমেন্ট ব্রাউজারকে এক একটা নির্দেশনা দেয় যে তার ভিতরে থাকা কনটেন্টকে কিভাবে প্রদর্শন করবে। যেমন <hr/> এলিমেন্ট ব্রাউজারকে বলে একটা আড়াআড়ি লাইন দেখাও। আবার <h1></h1> বলে একটা বড় ফন্টের শিরোনাম তৈরী কর ইত্যাদি।
অনেক এলিমেন্ট আছে যারা ব্রাউজারকে যেটা বলে সেটার সাথে আরো নতুন কিছু যোগ করে দেয়া যায়। এই যে একটা এলিমেন্টে নতুন তথ্য যোগ করলেন এটাকে সেই এলিমেন্টের এট্রিবিউট বলে। h1 এলিমেন্ট যখন ব্রাউজারকে বড় ফন্টের শিরোনাম প্রদর্শন করতে বলবে তখন এট্রিবিউট দিয়ে সেই শিরোনামটির রং কি হবে তাও বলে দিতে পারেন। যেমন

1.<h1 style="color:yellow;">HTML Attribute tutorial</h1>

অনলাইন এডিটর এখানে গিয়ে কোডটুকু দিয়ে "Edit and Hit" বাটনে ক্লিক করুন দেখবেন হলুদ রংয়ের শিরোনাম আউটপুট আসবে। এখানে "style" হচ্ছে একটা এট্রিবিউট এবং "color:yellow;" হচ্ছে এট্রিবিউটটির মান। যদি এট্রিবিউটটি ব্যবহার না করেন তাহলে কিন্তু শিরোনামটির রং পরিবর্তন হতনা বাই ডিফল্ট কালো থাকতো।
অধিকাংশ ট্যাগেই এরুপ অনেক ধরনের এট্রিবিউট যোগ করা যায়।

** এট্রিবিউট লেখার নিয়ম হচ্ছে প্রথমে এট্রিবিউটটির নাম এরপর সমান চিহ্ন (=) দিয়ে কোটেশনের ("" বা '') ভিতর এর মান। (সব ছোট হাতের অক্ষরে)

মুলত ৩ ধরনের এট্রিবিউট গ্রপ আছে যেগুলি একটা এলিমেন্টে থাকতে পারে। এর মধ্যে কোর এট্রিবিউট (core attribute) এর ব্যবহার সবচেয়ে বেশি দেখবেন।

id, class, title, style হল কোর এট্রিবিউট। এরপর থেকে পরের টিউটোরিয়ালগুলিতে এই এট্রিবিউটগুলিকে গ্লোবাল এট্রিবিউট বলা হবে। HTML 5 এ বেশকিছু নতুন এট্রিবিউট এসেছে যেমন contenteditable, contextmenu, draggable, dropzone ইত্যাদি নিয়ে পরে বিস্তারিত আলোচনা হবে। এখানে মনে রাখুন গ্লোবাল এট্রিবিউট কয়েকটি HTML এলিমেন্ট ছাড়া সব এলিমেন্টে ব্যবহার করা হয় বা যায়।

ইন্টারন্যাশলাইজেশান এট্রিবিউট হচ্ছে dir, lang এগুলি

এবং UI event এট্রিবিউট আছে যেমন onclick, ondoubleclick, onmouseout, onkeypress ইত্যাদি। এর থেকে সব টিউটোরিয়ালে এগুলিকে ইভেন্ট এট্রিবিউট বলা হবে। তবে একটা জিনিস মনে রাখুন যে ইভেন্ট এট্রিবিউটগুলি শুধু জাভাস্ক্রিপ্ট এর কাজ এর জন্য ব্যবহৃত হয়।

id, class দিয়ে এলিমেন্টের নাম দেয়া যায় পরে সেই নাম ধরে সিএসএস স্টাইলিং করা হয়। এগুলি সিএসএস টিউটোরিয়ালে আছে।

title এট্রিবিউট কোন এলিমেন্টের দিলে এটা দিয়ে টুলটিপ আকারে তথ্য প্রদর্শন করা যায় যেমন

1.<h2 title="Hello Webcoachbd">Bangladesh is a country of natural beauty</h2>

প্রদর্শন

Bangladesh is a country of natural beauty

এর উপরে মাইস নিয়ে যান তাহলে "Hello Webcoachbd" লেখাটি টুলটিপ আকারে দেখতে পাবেন।

style এট্রিবিউটতো প্রথম উদাহরনেই দেখালাম, এখানে শুধু রং পরিবর্তন করেছি আপনি চাইলে আর অনেক সিএসএস প্রোপার্টিজ ব্যবহার করতে পারেন।
অন্যান্য এট্রিবিউটগুলি নিয়ে আলোচনা করলাম না কিন্তু যখনি কোন টিউটোরিয়ালে ব্যবহার করব, আলোচনা করে দেব।

এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (HTML Paragraph Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:48 PM

ওয়েব পেজে কোন লেখা প্রকাশ করতে চাইলে p ট্যাগ ব্যবহার করা হয়। <p> হচ্ছে এর start tag এবং </p> হচ্ছে এর end tag. এই start এবং end ট্যাগের ভিতর যেকোন লেখা দিতে পারেন। এই লেখা প্যারাগ্রাফ আকারে ব্রাউজারে দেখাবে।

যেমন

1.<p>When  encountering a new paragraph "<p>" tag, the browser typically  inserts one blank line plus some extra vertical space into the display  before starting the new paragraph.</p>

এই ট্যাগে এট্রিবিউট ব্যবহার করা যায় যেমন নিচের এট্রিবিউটগুলি বেশি ব্যবহৃত

align, class, id, style, title এছাড়া ইভেন্ট এট্রিবিউট onmouseover, onclick ইত্যাদি ব্যবহার করা যায়।

class এবং id এট্রিবিউট ব্যবহার করে শুধু এই p এলিমেন্ট নয় বরং প্রায় সব এলিমেন্টে নাম দেয়া যায় পরে সেই নাম ধরে সিএসএস স্টাইল করা হয়। সিএসএস টিউটোরিয়ালে আরো বিস্তারিত দেখতে পাবেন। এখানে align, title এবং style এট্রিবিউটের কিছু প্রয়োগ দেখানো হল

<p align="right">Most browsers automatically left-justify a new paragraph.</p>
 
<p  align="center">To change this behavior, the align attribute for the  "<p>" tag and provide four kinds of content justification: left,  right, center, and justify.</p>
 
<p  style="background-color:#f00;" title="This is tooltip tile">You may  specify a paragraph only within a block, along with other paragraphs,  lists, forms, and preformatted text</p>

প্রদর্শন

Most browsers automatically left-justify a new paragraph.

To change this behavior, the align attribute for the

tag and provide four kinds of content justification: left, right, center, and justify.

You may specify a paragraph only within a block, along with other paragraphs, lists, forms, and preformatted text

title এট্রিবিউটের প্রভাব দেখতে শেষের লাইনরে উপর মাউস নিয়ে যান। এখানে লক্ষ করুন একসাথে একাধিক এট্রিবিউট একটা এলিমেন্টে ব্যবহার করেছি। আপনি চাইলে আরো বেশি ব্যবহার করতে পারেন।

এইচটিএমএল হেডিং টিউটোরিয়াল (HTML Heading Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:45 PM

শিরোনাম বা হেডিং আকারে বড় ফন্টের লেখা ব্রাউজারে প্রদর্শনের জন্য এইচটিএমএল এ রয়েছে ৬ ধরনের হেডিং ট্যাগ। এর মধ্যে সবচেয়ে বড় হচ্ছে <h1></h1> এভাবে <h2></h2>, <h3></h3>... h1 পর্যন্ত
যেমন

<h1>A long flow of text</h1>
<h2>unbroken by title,</h2>
<h3subtitles, and other headers, </h3>
<h4>crosses  the eyes and numbs the mind</h4>
<h5>not to mention the fact that</h5>
<h6>it makes it nearly impossible to scan the text for a specific topic</h6>

** আবারো বলে রাখি যেটা প্যারাগ্রাফ টিউটোরিয়ালে বললাম - এখানে শুধু জায়গা এবং সময় বাচানোর জন্য শুধুমাত্র h1 এলিমেন্ট দেয়া হল আসলে বাস্তবে <body></body> এর ভিতর এইসব এলিমেন্ট থাকবে এবং অবশ্যই ডকুমেন্টের পূর্ন স্ট্রাকচার অনুসরন করতে হবে। অর্থ্যাৎ একটা পূর্নাঙ্গ ডকুমেন্টের ভিতরেই এগুলি রাখতে হবে। যেমন Doc Type টিউটোরিয়ালে রেখেছি
প্রদর্শন:

A long flow of text

unbroken by title,

crosses the eyes and numbs the mind

not to mention the fact that

it makes it nearly impossible to scan the text for a specific topic

** এখানে আমাদের এই সাইটের সিএসএস ইফেক্ট করার কারনে সাইজ এবং রং একটু ভিন্ন দেখাচ্ছে আপনি এটা সেভ করে ব্রাউজারে রান করালে একদম আসল আউটপুট টি দেখতে পাবেন।

p ট্যাগের মতই এখানেও align, class, dir, id, lang, onlick, onkeydown, onkeypress, style, title ইত্যাদি এট্রিবিউট ব্যবহার করতে পারেন।

হেডিং (<h1></h1>) এবং প্যারাগ্রাফ (<p></p>) এলিমেন্ট ব্যবহার করে একটা
উদাহরন

<!DOCTYPE html>
<html>
<head>
<title>Webcoachbd HTML Tutorials</title>
 
</head>
<body>
 
<h1>Webcoachbd is the largest Bengali tutorial site</h1>
 
<p>To learn Web developemnt and design please visit 
<a href="http://www.webcoachbd.com">Webcoachbd</a>
</p>
 
</body>
</html>

এটা একটা পূর্নাঙ্গ উদাহরন। .html এক্সটেনসন দিয়ে সেভ করে (যেমন index.html test.html) ব্রাউজারে রান করান বা আমাদের অনলাইন এডিটরে দেখুন।

এইচটিএমএল লিস্ট টিউটোরিয়াল (HTML List Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:44 PM

ওয়েব পেজে যদি তালিকা বা লিস্ট প্রদর্শন করাতে চান তখন এইচটিএমএল এ ৩ ধরনের লিস্ট করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করতে পারেন।
Unordered List :
এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে। যেমন

<ul>
<li>Bangla</li>
<li>English</li>
<li>Social Science</li>
<li>Mathemetaics</li>
</ul>

প্রদর্শন:

Bangla
English
Social Science
Mathematics

আপনি ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দিতে পারেন এগুলি সিএসএস এ আলোচনা হবে।

Ordered List:
কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন যেমন

<ol>
<li>iPad</li>
<li>iPhone</li>
<li>MacBook Air</li>
</ol>

প্রদর্শন

iPad
iPhone
MacBook Air

ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করে কত থেকে শুরু হবে এটা ঠিক করা যায় যেমন উপরের লিস্ট টি যদি ১০ থেকে দেখাতে চান তাহলে

<ol start="10">
<li>iPad</li>
<li>iPhone</li>
<li>MacBook Air</li>
</ol>

প্রদর্শন

iPad
iPhone
MacBook Air

li তে value নামের একটা এট্রিবিউট ব্যবহার করে যেকোন আইটেমের নাম্বার পরিবর্তন করা যায় যেমন

<ol>
<li value="5">iPad</li>
<li value="10">iPhone</li>
<li value="15">MacBook Air</li>
</ol>

প্রদর্শন

iPad
iPhone
MacBook Air

Definition list নামে আরেকটা লিস্টিং ট্যাগ আছে এটা খুব ব্যবহার হয়না, এটা দিয়ে একটু ভিন্নভাবে তালিকা দেখানো যায় যেমন

<dl>
<dt>Preliminary analysis</dt>
<dd>  in this step, you need to find out the organization's objectives and  the nature and scope of the problem under study. Even if a problem  refers only to a small segment of the organization itself then you need  to find out what the objectives of the organization itself are. Then you  need to see how the problem being studied fits in with them</dd>
<dt>Systems analysis, requirements definition</dt>
<dd>Defines  project goals into defined functions and operation of the intended  application. Analyzes end-user information needs</dd>
<dt>Systems design</dt>
<dd>Describes  desired features and operations in detail, including screen layouts,  business rules, process diagrams, pseudocode and other  documentation.</dd>
<dt>Development</dt>
<dd>The real code here</dd>
</dl>

প্রদর্শন

Preliminary analysis: in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them
Systems analysis, requirements definition: Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs
Systems design: Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.
Development: The real code here

এইচটিএমএল কালার কোড টিউটোরিয়াল (HTML Color code)

HTML Mirza Abdullah Al Noman 6:43 PM

Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়।নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।

১৬টি মৌলিক কালার:

Black	Gray	Silver	White
Yellow	Lime	Aqua	Fuchsia
Red	Green	Blue	Purple
Maroon	Olive	Navy	Teal

এইচটিএমএল-রং পদ্ধতি আরজিবি মান (HTML- Coloring system: rgb value)

আমি আপনাদেরকে নিরাপদ web design এর জন্য HTML rgb ব্যবহারের পরামর্শ দেব না কারন Non-IE browser, HTML rgb সাপোর্ট করে না। আপনারা যদি CSS শিখতে চান তাহলে আপনাদের উচিত এই বিষয় সম্বন্ধে জানা।
Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে rgb । প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)। rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)।

Red, Green এবং Blue এর মান:

bgcolor="rgb(255,255,255)"	White
bgcolor="rgb(255,0,0)"	Red
bgcolor="rgb(0,255,0)"	Green
bgcolor="rgb(0,0,255)"	Blue

এইচটিএমএল-রং পদ্ধতি:হেক্সাডেসিমাল (HTML- Coloring system: Hexadecimal)

প্রথম প্রথম Hexadecimal system বুঝতে একটু কারন এই system একটু জটিল ও কঠিন। practice করার মাধ্যমে বিষয়টি অনেক সহজ হয় যাবে। এই Hexadecimal system সকল ক্ষেত্রে গ্রহনযোগ্য এবং বহুল ব্যবহৃত। Hexadecimal system টি ইন্টারনেটের standard color।
Hexadecimal হল ৬ digit কালারের উপস্থাপন। প্রথম দুটি digit(RR), Red value নির্দেশ করে পরবর্তি দুটি digit(GG), Green value নির্দেশ করে এবং সর্বশেষ দুটি digit(BB), Blue value নির্দেশ করে।

এইচটিএমএল হেক্সাডেসিমাল রং

bgcolor="#RRGGBB"

এইচটিএমএল -রং কোড (HTML- Color code: breaking the code)

নিচে টেবিলে দেখানো হয়েছে কিভাবে বর্ণ Hexadecimal system এর Numbering system কে বর্ধিত করে ১৬ digit এ উন্নীত করে।

Decimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Hexadecimal	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

তাই বর্ণকে নম্বর হিসাবে ব্যবহার করা হয়। এই বর্ণকে পরে নম্বরে রুপান্তর করা হয়।নিচে একটি উদাহরন দেয়া হলো।

একটি বাস্তব হেক্সাডেসিমাল:

bgcolor="#FFFFFF"
এখানে "F" হচ্ছে সবোর্চ্চ পরিমান এবং এই কালারটি ("#FFFFFF") সাদা কালার নিদের্শ করে। নিচে বিষয়টি বিস্তারিত আলোচনা করা হয়েছে।

হেক্সাডেসিমাল সূত্র:

(15 * 16) + (15) = 255
উপরের সূত্রটি বাস্তব। প্রথমে F এর মান(১৫) কে ১৬ দ্বারা গুন করে পরবর্তি মানের সাথে যোগ করতে হবে। ২৫৫ মানটি যেকোন প্রাথমিক কালারের মানের ক্ষেত্রে সর্বোচ্চ।নিচে আরও উদাহরন দেয়া হলো।
উদাহরন:

bgcolor="#CC7005"

CC(RR - Red)
(12 * 16) + (12) = 204
70(GG - Green)
(7 * 16) + (0) = 112
05(BB - Blue)
(0 * 16) + (5) = 5

এইচটিএমএল ফন্ট টিউটোরিয়াল (HTML Font Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:41 PM

<font> ট্যাগ ব্যাবহার করে ওয়েব সাইটের টেক্সটের স্টাইল, সাইজ এবং কালার যোগ করা হয়। size, color এবং face attributes ব্যাবহার করে আপনি ফন্ট কে কাস্টমাইজ করতে পারি।<basefont> ট্যাগ ব্যাবহার করে পেজের সকল টেক্সটকে একই স্টাইল, সাইজ এবং কালার এ সেট করা যায়।
<font> এবং <basefont> ট্যাগ ব্যাবহার না করে সিএসএস(সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যাবহার করা উচিত।

ফন্ট আকার (Font size)

Size attribute এর সাহায্যে ফন্ট এর সাইজ ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য মান হচ্ছে ১(সবচেয়ে ছোট) হতে ৭(সবচেয়ে বড়)। ফন্ট এর ডিফল্ট আকার হচ্ছে ৩।

<p>
<font size="5">Here is a size 5 font</font>
</p>{}

প্রদর্শন:
Here is a size 5 font.

ফন্ট রং (Font color)

কালার attribute এর সাহয্যে font এর color সেট করা হয়।

<font color="#990000">This text is hexcolor #990000</font>
<br />
<font color="red">This text is red</font>

প্রদর্শন:

This text is hexcolor #990000
This text is red

ফন্ট ফেস (Font face)

ফন্ট face এর ক্ষেত্রে সতর্ক হওয়া উচিত কারন আপনার সিস্টেম এ নির্ধারিত ফন্ট টি ইনস্টল দেয়া না থাকে তাহলে আপনি ঐ ফন্ট টি দেখতে পাবেন না এবং তার পরিবর্তে ডিফল্ট হিসাবে Times New Roman ফন্ট টি দেখতে পাবেন।

<p>
<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
has had its font...</font>
</p>

প্রদর্শন:

This paragraph has had its font formatted by the font tag!

বেসফন্ট (Basefont)

Basefont ট্যাগ এর সাহায্যে আপনি ওয়েব পেজের ডিফল্ট ফন্ট সেট করতে পারেন।নিচে basefont ব্যাবহার করার সঠিক পথ দেখানো হল।

<html>
<body>
<basefont size="2" color="green">
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
<p>This paragraph has had its font...</p>
</basefont>
</body>
</html>

প্রদর্শন:
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!
This paragraph has had its font formatted by the basefont tag!

শেষে বলতে চাই font বা basefont ব্যাবহার না করে সিএসএস (সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যবহার করা ভালো।
Attributes: Review

Attribute=	"Value"	Description
size=	"Num. Value 1-7"	Size of your text, 7 is biggest
color=	"rgb,name,or hexidecimal"	Change font color
face=	"name of font"	Change the font type

প্রথম অক্ষরের সুন্দর স্টাইল:

ফন্ট কে কাস্টমাইজ করে যেকোন ধরনের স্টাইল করা যায়।

1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize
2.your font to achieve a desired look.</p>

প্রদর্শন:

Customize your font to achieve a desired look.

এইচটিএমএল লিংক টিউটোরিয়াল (HTML Link Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:40 PM

আপনি চাইলে আপনার সাইটের কোন টেক্সটের উপর লিংক তৈরী করে দিতে পারেন যেখানে ক্লিক করলে অন্য পেজ/সাইট আসবে। anchor tag এর সাহায্যে লিংক তৈরী করা হয়। শুধু টেক্সট নয় আপনি চাইলে একটা মেইল এড্রেসের উপর লিংক দিতে পারেন, একটা ছবির উপর লিংক দিতে পারেন, বড় কোন ওয়েব পেজের সুচিপত্র তৈরী করে এর আইটেমগুলিতে লিংক দিতে পারেন (এসব লিংকে ক্লিক করলে পেজেরই ঐ অংশে যাবে যেখান থেকে আইটেমটি শুরু হয়েছে)।

হাইপারটেক্সক্ট রেফারেন্স(href)

href এট্রিবিউট নিদের্শ করে যে ইউজার ক্লিক করে কোথায় যাবে।
Hypertext reference হতে পারে Internal, Local, Global ।
ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে।
লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে।
গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে।
ইন্টারনাল- href="#anchorname"
লোকাল- href="/webcoachbd/../pics/picturefile.jpg"
গ্লোবাল- href="http://www.tizag.com/"

এইচটিএমএল লিংক (টেক্সক্ট) যেভাবে তৈরী করবেন

<a> এবং </a> tag দ্বারা যথাত্রুমে লিংক শুরু এবং শেষ বোঝায়। href এট্রিবিউট এর সাহায্যে কোন ধরনের লিংক স্থাপিত হবে তা নির্ধারিত হয়। href এট্রিবিউটকে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে কোন লেখা থাকলে, তা পরে web পেজে লিংক হিসাবে দেখা যাবে।যেমন

<a href="http://www.webcoachbd.com/" target="_blank" >Webcoachbd Home</a>
<a href="http://www.google.com/" target="_blank" >Google Home</a>
 
<a href="http://www.yahoo.com/" target="_blank" >Yahoo Home</a>

প্রদর্শন: গ্লোবাল লিংক
BD TopTips Home Google Home Yahoo Home

এইচটিএমএল লিংক টার্গেট (HTML-link Target)

a ট্যাগে target এট্রিবিউট দিয়ে ঠিক করা যায় যে লিংকটি কিভাবে খুলবে যেমন "_blank" দিলে নতুন উইন্ডোতে আবার "_self" দিলে উক্ত পেজেই লিংকটি লোড হবে।

1.<a href="http://www.webcoachbd.com/html-tutorials/html-radio-check" target="_blank">Radio button tutorial</a>

প্রদর্শন
Radio button tutorial

এখানে ক্লিক করুন নতুন একটি উইন্ডোতে (ট্যাবে) পেজটি খুলবে।

এইচটিএমএল ইমেইল লিংক

টেক্সট লিংক উপরে যেভাবে তৈরী করলেন ইমেইল লিংকও সেভাবে করতে হবে শুধু href এট্রিবিউটের ভিতর ইনভার্টেড কমার মধ্যে আগে ওয়েব সাইটের ঠিকানা ছিল আর এবার ইমেইল ঠিকানা দিবেন।যেমন
<a href= "mailto:abc@mail.com" >Email Example</a>
প্রদর্শন:
Email Example
এই লিংকের উপর মাউস নিয়ে যান, নিচে স্টাটাসবারে mailto:abc@mail.com লেখা দেখাবে। এখানে ক্লিক করলে আপনার ব্রাউজার abc@mail.com নামের একটি মেইল ঠিকানায় মেইল পাঠানোর ক্ষেত্র প্রস্তুত করবে।আরও সহজভাবে বলি, ধরুন আপনি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করছেন, আপনি যদি Tools>Options>Applications এ গিয়ে mailto এর জায়গায় ড্রপডাউন মেনু থেকে Use Yahoo mail সিলেক্ট করে দেন তাহলে Email Example লিংকে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To ফিল্ডের জায়গায় abc@mail.com লেখা উঠবে।
আপনি চাইলে ইমেইল লিংকে subject এবং body ঠিক করে দিতে পারেন যেমন
<a href= "mailto: a@b.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a>
প্রদর্শন:
2nd Email Example
এখানে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To এর জায়গায় a@b.com আর Subject এর জায়গায় Web Page Email ও Body তে This email from your site এগুলি গিয়ে অটোমেটিক বসবে।

ইন্টারনাল লিংক

নিচে লিংকগুলিতে ক্লিককরে দেখুন এই পেজেরই বিভিন্ন অংশে এই লিংকগুলি নিয়ে যাবে।এটা হচ্ছে ইন্টারনাল লিংক।পেজ বড় হলে সুচিপত্র তৈরী করে এভাবে লিংক দিতে পারেন।

"পেজের উপরে যান" এখানে ক্লিক করলে পেজের কোথায় যাবে তা আগেই ঠিক করে রাখতে হবে এভাবে
<h3>হাইপারটেক্সক্ট রেফারেন্স(href)<a name="top"></a></h3>
পরের লিংকটিও এভাবে করে নিতে হবে (এখানে name="text")
শেষে "পেজের উপরে যান" এর উপর লিংক দিয়েছি এভাবে
<a href="#top">পেজের উপরে যান</a>
এবং
<a href="#text">টেক্সট লিংক</a>

এইচটিএমএল এনটাইটিজ টিউটোরিয়াল (HTML Entities Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:37 PM

এইচটিএমএল এ কিছু বিশেষ ক্যারেক্টার আছে যেগুলি ডকুমেন্টে ব্যবহার করলে সমস্যা হয়। যেমন less than, greater than চিহ্ন ইত্যাদি। কেননা এগুলি ব্রাউজারকে বিশেষ ইঙ্গত দেয় যার ফলে এটা প্রদর্শন করার পরিবর্তে ঐ নির্দেশনা/ইঙ্গিত অনুসারে কাজ করে।এখন যদি এই ধরনের কোন চিহ্ন আপনি ওয়েব পেজে দেখাতে চান তাহলে এইচটিএমএল এনটাইটি ব্যবহার করে দেখাতে পারবেন। এছাড়াও বিভিন্ন চিহ্ন যেমন কপিরাইট, ট্রেডমার্ক ইত্যাদি ওয়েব পেজে দেখানো যায়।
প্রত্যেক এনটাইটি এমপারসেন্ড (&) চিহ্ন দিয়ে শুরু হয় এরপর তার নাম এবং শেষে সেমিকোলন (;) দিয়ে পূর্ন করা হয়।

এনটাইটি নাম দিয়েও প্রকাশ করা যায় আবার বিকল্প হিসেবে প্রত্যেকটি এনটাইটির একটা নাম্বার আছে সেটা দিয়েও প্রকাশ করতে পারেন। নিচের কিছু নামভিত্তিক এনটাইটি দেয়া হল
কয়েকটি বহুল ব্যবহৃত এনটাইটি:

&copy;
&reg;
&trade;
&nbsp;
&dollar;
&lt;
&gt;

এগুলির নাম্বার যথাক্রমে

&#169;
&#174;
&#8482;
&#32;
&#36;
&#60;
&#62;

প্রদর্শন
© ® ™ $ < >
p ট্যাগে বা যেকোন জায়গায় স্পেস দিতে চাইলে কয়েকটা স্পেস এনটাইটি বসিয়ে দিন হয়ে যাবে। ৪ নম্বরে যেটা আছে।

আমরা এইচটিএমএল এ লেস দেন এবং গ্রেটার দেন চিহ্ন ব্যবহার করে ট্যাগ তৈরী করি। এসব চিহ্ন ওয়েব পেজ এ দেখাতে চাইলে এনটাইটি ব্যবহার করতে হবে।

<p>
Less than - &lt; <br />
Greater than - &gt; <br />
Body tag - &lt;body&gt;
</p>

প্রদর্শন:
Less than - <
Greater than - >
Body tag - <body>

এইচটিএমএল ছবি টিউটোরিয়াল (HTML Images Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:36 PM

<img /> ট্যাগ ব্যবহার করে ওয়েব পেজে যেকোন ছবি প্রদর্শন করতে পারবেন। যেমন

1.<img src="/sunset.gif" alt="Sunset" />

প্রদর্শন

এখানে src এবং alt হচ্ছে img ট্যাগের দুটি এট্রিবিউট। src দিয়ে ছবিটির অবস্থান দেখিয়ে দিতে হবে এবং alt এর মধ্যে ছবিটির কোন বর্ননা দিতে পারবেন। ছবি লোড হতে দেরি হলে ততক্ষন alt এর ভিতর লেখাটি দেখায়।
src এর ভিতর ছবিটির উৎস দুভাবে দিতে পারেন। absolute path অথবা relative path যেমন আমরা রিলেটিভ পাথ দিয়েছি। আপনি চাইলে absolute path (পুরো ঠিকানা) দিতে পারেন। http://www.webcoachbd.com/images/stories/imagel.jpg

এছাড়া আছে height এবং width নামে দুটি এট্রিবিউট। নাম দেখেই আন্দাজ হচ্ছে যে এদুটি দিয়ে কি করা যাবে। ছবির দৈর্ঘ্য এবং প্রস্থ নির্ধারন করে দিতে পারেন।

** width="100" বা height="200" এভাবে দিলেই হবে। 100px এভাবে দিতে হবেনা।

** যেকোন একটি দিলে একটা সুবিধা হচ্ছে ব্রাউজার আপরটি অটোমেটিক খাপ খাইয়ে নেয় ফলে ছবির আনুপাতিক আকার ঠিক থাকে। এত করে ছবিটি দেখতে সামন্জস্যপূর্ন হয়।

আরো এট্রিবিউট আছে যেমন align, valign এগুলি দিয়ে ছবির এলাইনমেন্ট ইচ্ছে মত দেয়া যায়
align এর মান হতে পারে right, center, left
আর valign এর মান হতে পারে top, bottom, center

<p>Lorem  ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy  nibh euismod tincidunt ut laoreet dolore magna aliquam erat  volutpat.</p>
<img align="right" src="/images/stories/imagel.jpg" alt="sunset"/>
 
<p> Ut wisi enim </p>

এইচটিএমএল টেবিল টিউটোরিয়াল (HTML Tables Tutorial in Bangla)

HTML Mirza Abdullah Al Noman 6:35 PM

বিভিন্ন ওয়েব সাইটে টেবিল ভিত্তিক ডেটা দেখেছেন নিশ্চয়ই। বিশেষ করে খেলাধুলার সাইটের খেলোয়ারদের স্কোর, প্রোফাইল, সময়সূচি, শেয়ার বাজারের হিসাব ইত্যাদি কাজে টেবিল লাগে। টেবিলভিত্তিক ডেটা দেখানোর জন্য এইচটিএমএল এর বেশকিছু ট্যাগ আছে যেগুলি দিয়ে নানন ধরনের টেবিল তৈরী করা যায়। একটা টেবিল তৈরীতে প্রাথমিকভাবে ৩টি ট্যাগ লাগে
১. <table></table>
২. <tr></tr> (tr তে table row)
৩. <td></td> (td তে table data)
এই ৩টি ট্যাগ দিয়ে একটা টেবিল বানাতে পারবেন। পুরো grid সিস্টেম বানানো যাবে। row এবং column দিয়ে
tr দিয়ে row বা সারি এবং td দিয়ে column বা স্তম্ভ বানানো হয়। একটা সাধারন টেবিল

<table>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
 
</tr>
</table>

প্রদর্শন:

HTML	JS	SQL
CSS	PHP	MySQL

আমি দুটি row এবং ৩টি করে কলাম ব্যবহার করেছি আপনি ইচ্ছে মত row ব্যবহার করতে পারবেন।

টেবিল শিরোনাম
<th> নামে একটা ট্যাগ আছে এটা দেয়া টেবিলের হেডার বানানো যায় যেমন

<table>
<tr>
<th>Markup</th>
<th>Programming</th>
<th>Database</th>
</tr>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
</tr>
 
</table>

প্রদর্শন

Markup	Programming	Database
HTML	JS	SQL
CSS	PHP	MySQL

দেখুন th এলিমেন্টের লেখাগুলি হেডিং আকারে দেখাচ্ছে।
তবে টেবিল দেয়ার উপযুক্ত নিয়ম হচ্ছে টেবিলের হেডার, বডি এবং ফুটার সহ দেয়া। এজন্য কিছু ট্যাগ আছে এগুলি ব্যবহার করলে গ্রামাটিকালি টেবিলটি সঠিক হয় এরুপ একটি উদাহরন

<table>
<thead>
 
<tr>
<th>Markup</th>
<th>Programming</th>
<th>Database</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Easy</td>
<td>Tough</td>
<td>Tough</td>
</tr>
 
</tfoot>
<tbody>
 
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
</tr>
</tbody>
 
</table>

প্রদর্শন (টেবিল C)

Markup	Programming	Database
Easy	Tough	Tough
HTML	JS	SQL
CSS	PHP	MySQL

<tfoot> ট্যাগ <tbody> এর আগে দেয়া হয়েছে, আর এভাবেই ব্রাউজার সঠিকভাবে দেখাতে পারে।(দেখুন tfoot এর ডেটা নিচেই দেখাচ্ছে)

উপরের টেবিলগুলিতে বর্ডার না দেয়াতে ভাল দেখাচ্ছে না এজন্য <table> এলিমেন্টে বেশ কয়েকটি এট্রিবিউট আছে যেগলি দিয়ে টেবিল সুন্দর সাজানো যায়। যেমন টেবিলে বর্ডার দিতে চাইলে <table border="1"> এভাবে দিবেন ফলে টেবিলটি কিছুটা সুন্দর লাগবে আবার আছে cellpadding এবং cellspacing এদুটি দিয়ে cell বা অংশগুলির মধ্যে যথাক্রমে প্যাডিং (কনটেন্ট থেকে বর্ডারের দুরত্ব) এবং দুরত্ব বাড়ানো যায় যেমন উপরের টেবিলে <table border="1" cellpadding="10"> এটা যোগ করে আমাদের অনলাইন এডিটরে রান করিয়ে দেখাতে পারেন।

rowspan এবং colspan
td, th এ rowspan এবং colspan এট্রিবিউট দুটি ব্যবহার করে জটিল ধরনের টেবিল বানানো যায়্। rowspan এর সংখ্যাত্নক মান দিয়ে ঠিক করা যায় cell টি কতটি row এর সমান হবে যেমন

<table border="1">
<tr>
<th rowspan="2">Web Language</th>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>PHP</td>
<td>JS</td>
</tr>
<tr>
<th>Framework</th>
<td>CI</td>
<td>Bootstrap</td>
</tr>
</table>

প্রদর্শন:

Web Language	HTML	CSS
Web Language	PHP	JS
Framework	CI	Bootstrap

কোথায় th, td ইত্যাদি দিয়েছি ভালভাবে লক্ষ্য করুন নাহলে কিছুই বুঝবেননা। দেখুন দুটি row এর জায়গা কিভাবে একটি cell th(Web Language) দিয়ে দখল করা হয়েছে, rowspan দিয়ে।
colspan দিয়ে কলাম দখল করা যায় যেমন উপরের টেবিল C দেখুন সেখানে Tough দুটি কলামে রাখা হয়েছে যেটা অপ্রয়োজনীয়, ইচ্ছে করলে colspan ব্যবহার করে একটি কলামকেই দুটির সমান করে দিতে পারি। যেমন ঐ উদাহরনটির ১৩ এবং ১৪ নম্বর লাইনদুটি বাদদিয়ে নিচের লাইনটি দিন

1.<td colspan="2"></td>

ব্যাস এবার রান করিয়ে দেখুন একটি কলামেই কাজ হয়ে গেছে।
** একটা cell এর ভিতর (td এর ভিতর) যেকোন এইচটিএমএল এলিমেন্ট রাখতে পারেন। img, p বা যেকোন কিছু।
** গুরত্বপূর্ন এট্রিবিউটগুলিই শুধু আলোচনা করা হচ্ছে, এগুলি ছাড়াও align, bgcolor ইত্যাদি কমন এট্রিবিউটগুলি ব্যবহার করা যাবে।

M.A Al-Noman

Dhaka, bangladesh

Get Update on our recent Tips & Posts

Monday, February 27, 2017

Thursday, June 18, 2015

Bangladesh is a country of natural beauty

A long flow of text

unbroken by title,

crosses the eyes and numbs the mind

not to mention the fact that

it makes it nearly impossible to scan the text for a specific topic

১৬টি মৌলিক কালার:

এইচটিএমএল-রং পদ্ধতি আরজিবি মান (HTML- Coloring system: rgb value)

Red, Green এবং Blue এর মান:

এইচটিএমএল-রং পদ্ধতি:হেক্সাডেসিমাল (HTML- Coloring system: Hexadecimal)

এইচটিএমএল হেক্সাডেসিমাল রং

এইচটিএমএল -রং কোড (HTML- Color code: breaking the code)

একটি বাস্তব হেক্সাডেসিমাল:

হেক্সাডেসিমাল সূত্র:

ফন্ট আকার (Font size)

ফন্ট রং (Font color)

ফন্ট ফেস (Font face)

বেসফন্ট (Basefont)

প্রথম অক্ষরের সুন্দর স্টাইল:

হাইপারটেক্সক্ট রেফারেন্স(href)

এইচটিএমএল লিংক (টেক্সক্ট) যেভাবে তৈরী করবেন

এইচটিএমএল লিংক টার্গেট (HTML-link Target)

এইচটিএমএল ইমেইল লিংক

ইন্টারনাল লিংক

Like on Facebook

Labels

Join Our Newsletter