Tag Archives: tag

এইচ টি এম এল - ০০২ । HTML - 002

HTML এর tag সমূহ : HTML Tags

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

HTML এর tag সমূহ
নামঃ সাদিক
TAG ব্যবহার ধরন
<!--...--> মন্তব্য করার জন্য STF
<!DOCTYPE> Html ডকুমেন্টের ধরন নির্ধারনের জন্য STF
<a> লিংক দেওয়ার জন্য STF
<abbr> Abbreviation দেওয়ার জন্য STF
<acronym> Acronym দেওয়ার জন্য STF
<address> Html ডকুমেন্টের লেখক এর তথ্য দেওয়ার জন্য STF
<applet> Applet এম্বেড করার জন্য TF
<area/> Image-map এরিয়া করার জন্য STF
<b> লেখা bold করার জন্য STF
<base/> Specific the basic url/target for all
relative urls in a documant STF
<basefont> ফন্ট সাইজ ও কালার নির্ধারন করার জন্য TF
<bdo> Overrides the current text direction STF
<big> বড় লেখার জন্য TF
<blockquote> উক্তি /quotation দেওয়ার জন্য STF
<body> বডি দেওয়ার জন্য STF
<br/> লাইন ব্রেক করার জন্য STF
<button> বাটন আনার জন্য STF
<caption> ক্যপশন দেওয়ার জন্য STF
<center> লেখা মাঝখানে নেওয়ার জন্য TF
<cite> Defines a citation STF
<code> কোড শো করার জন্য STF
<coi/> টেবিলের মধ্যে কলাম নেয়ার জন্য STF
<colgroup> Spucifies a group of one or more
columns in a table for formating STF
<dd> Defines a description of an
item in a definition list STF
<del> কোন লেখা মুছার জন্য STF
<dfn> Defines a definition term STF
<dir> ডাইরেক্টরি লিস্ট আনার জন্য TF
<div> Defines a section in a document STF
<dl> Defines a definition list STF
<dt> Defines a term(an item) in a definition list STF

এইচটিএমএল HTML

এইচটিএমএল লিস্ট (HTML tag list)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

Tamim Ikbal

HTML List ট্যাগ কি এবং এটা কিভাবে HTML এ কাজ করে ?

একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।

Unordered List

এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে।

<html>

<head>

<title>your website name</title>

</head>

<body>

<ul>

<li>Bangla</li>

<li>English</li>

<li>Social Science</li>

<li>Mathemetaics</li>

</ul>

</body>

</html>

আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।

  • Bangla
  • English
  • Social Science
  • Mathemetaics

Ordered List

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

<html>

<head>

<title>your website name</title>

</head>

<body>

<ol start="10">

2.<li>iPad</li>

3.<li>iPhone</li>

4.<li>MacBook Air</li>

5.</ol>

</body>

</html>

আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।

  1. iPad
  2. iPhone
  3. MacBook Air

হয়তো ভাবছেন <ol start="10"> লিখার পর বাকি সব গুল 10,11,12 তালিকা কি করে করলাম । একটু লক্ষ করেন <ol start=" পর আমি “10” লিখছি যার কারনে 10 থেকে তালিকা শুরু হইছে । আর তিনটি তালিকা থাকার কারনে ১০,১১,১২ পর্যন্ত প্রদশন করছেন । আপনারা যদি <ol start=" লিখার পরে “49” দিন এবং ট্যাগ শেষ করেন তাহলে ৪৯ থেকেই আপনার তালিকা শুরু হবে ।

এইচটিএমএল HTML

এইচটিএমএল কমেন্ট (HTML Comment)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

রাজু (DU)

 

এইচ টি এম এল এ কমেন্ট করার জন্য কমেন্ট ট্যাগ <!-- এবং --> ব্যবহার করা হয়।

HTML Comment Tags এইচটিএমএল কমেন্ট ট্যাগ

HTML source  এ আপনি নিম্নোক্ত syntax ব্যাবহার করে comments করতে পারেনঃ

<!-- এখানে  আপনার Comment লিখুন -->

নোটঃ এখানে অবশ্যই মনে রাখতে হবে যে একটি  বিস্ময় সূচক চিহ্ন (!)  শুরুর ট্যাগ এ ব্যাবহার করা হয়েছে। কিন্তু সমাপ্তি ট্যাগ হিসেবে কোন (!) ব্যবহার করা হয়নি।

 

Comments গুলি browser এ প্রদর্শিত হয় না কিন্তু তারা HTML document এ সাহায্য করে থাকে।

Comments দ্বারা আপনি আপনার HTML এ  notifications and reminders ঠিক করে দিতে পারবেন।

উদাহরনঃ

<!-- এখানে  আপনার Comment লিখুন -->

<p>এখানে  আপনার paragraph লিখুন .</p>

<!-- কোন information মনে রাখার জন্য এখানে যোগ করুন -->

 

 

HTML debugging এর জন্য comment  অসাধারন কাজ করে, কেননা আপনি HTML code line এর বাইরে comment করতে পারেন এবং কমেন্ট দেখে ত্রুটি খুজে বের করতে পারবেন।

উদাহরনঃ

<!-- Do not display this at the moment

<img border="0" src="pic_mountain.jpg" alt="Mountain">

-->

 

 

Conditional Comments (শর্তাধীন Comment)

HTML এ Conditional Comment ব্যাবহারে আপনি বাধার সম্মুখীন হতে পারেনঃ

<!--[if IE 8]>

.... some HTML here ....

endif]-->

Conditional comment সংবলিত HTML tag কেবলমাত্র Internet Explorer দ্বারা ই কার্যকর হতে পারে।

 

Software Program Tags

HTML comment tag গুলি বিভিন্ন HTML software program দ্বারা তৈরি হতে পারে।

উদাহরণসরূপঃ  <!--webbot bot-->  tag টি  HTML comment এর ভিতরে FrontPage এবং Expression Web দ্বারা মোড়ান থাকে।

নিয়ম হিসেবে এইসব tag কে রেখে দেয়া হয় software টিকে সহায়তা করার জন্য, যা দ্বারা এটি তৈরি করা হয়েছে।

এইচটিএমএল HTML

এইচটিএমএল টিউটোরিয়াল পরিচিতি (HTML tutorial Introduction)

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

HTML পরিচিতি

HTML কি?

HTML হল একটি মার্কআপ ল্যাঙ্গুয়েজ যার মাধ্যমে একটি ওয়েব পেজের কন্টেন্ট গুলোকে বর্ণনা করা হয়।

  • HTML এর পূর্ণরূপ হল Hyper Text Markup Language
  • মার্কআপ ল্যাঙ্গুয়েজ হল অনেকগুলো মার্কআপ ট্যাগের সমষ্টি
  • HTML এর ডকুমেন্টস HTML ট্যাগ দ্বারা বর্ণনা করা হয়
  • প্রত্যেকটি HTML ট্যাগ ডকুমেন্টের ভিন্ন ভিন্ন কন্টেন্টকে বর্ণনা করে

উদাহরণ

<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>
</head><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>

ফলাফল :

My First Heading

My first paragraph.

উদাহরণের বর্ণনা

  • প্রথমের DOCTYPE ঘোষণা করে যে ডকুমেন্টটির প্রকার হচ্ছে : HTML
  • <html> এবং </html> এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টকে বর্ণনা করে
  • <head> এবং </head>এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টটি কি প্রকারের সেই তথ্য ধারণ করে
  • <title> এবং </title> এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টের টাইটেল ধারণ করে
  • <body> এবং </body> এই ট্যাগের ভিতরের টেক্সটগুলো ওয়েবপেজ ব্রাউজারে যেসব কন্টেন্ট শো করবে তা ধারণ করে
  • <h1> এবং </h1> এই ট্যাগের ভিতরের টেক্সট হেডিংকে বর্ণনা করে
  • <p> এবং </p>এই ট্যাগের ভিতরের টেক্সটগুলো প্যারাগ্রাফকে ডিক্লেয়ার করে

HTML ট্যাগ

HTML ট্যাগ হল এঙ্গেল বন্ধনী <> দ্বারা আবদ্ধ কতগুলো কীওয়ার্ড

  • HTML ট্যাগগুলো সাধারণত জোড়ায় জোরায় হয়ে থাকে, যেমন <p> এবং </p>
  • জোড়ার প্রথম অংশকে বলা হয় স্টার্ট ট্যাগ এবং শেষ অংশকে বলা হয় ইন্ড ট্যাগ
  • ইন্ড ট্যাগ স্টার্ট ট্যাগের মতই হয় শুধু ট্যাগ নেমের পূর্বে একটি অতিরিক্ত স্লেস (/) হয়

হিন্টসঃ স্টার্ট ট্যাগকে প্রায়ই ওপেনিং ট্যাগ বলা হয় এব ইন্ড ট্যাগকে বলা হয় ক্লোজিং ট্যাগ

ওয়েব ব্রাউজার

ওয়েব ব্রাউজার যেমন (Chrome, IE, Firefox, Safari) এগুলোর কাজ হচ্ছে HTML ডকুমেন্টসকে পড়া এবং তা ডিসপ্লে করা। ব্রাউজার কখনো HTML এর ট্যাগগুলোকে ডিসপ্লে করে না কিন্তু কোন কন্টেন্টকে কিভাবে ডিসপ্লে করতে হবে তার জন্য ট্যাগগুলোকে ব্যাবহার করে।

chrome

HTML পেজ স্ট্রাকচার

HTML পেজ কিভাবে ব্রাউজারে ডিসপ্লে হয় তার একটি স্ট্রাকচার নিচে দেয়া হল

<html>

<head>

<title>Page title</title>

</head>

 

<body>

<h1>This is a heading</h1>

 

<p>This is a paragraph.</p>

 

<p>This is another paragraph.</p>

</body>

</html>

শুধুমাত্র বডি এরিয়ার ভিতরে যা থাকে তাই ব্রাউজারে ডিসপ্লে হয়

<!DOCTYPE> ঘোষণা

<!DOCTYPE> ঘোষণা করলে ব্রাউজার ওয়েব পেজের উপাদানগুলো সঠিকভাবে প্রদর্শন করতে পারে।

ওয়েবসাইটে বিভিন্ন ধরনের ডকুমেন্টস থাকে।

ডকুমেন্টসগুলোকে সঠিকভাবে প্রদর্শন করার জন্য ব্রাউজারকে ডকুমেন্ট টাইপ এবং ভার্সন সম্পর্কে জানতে হয়।

ডিক্লেয়ারেশন কেস সেনসেটিভ হয় না, সকল ধরনের কেস এখানে গ্রহণযোগ্য।

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

কমন ডিক্লেয়ারেশনস

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

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

HTML ভার্সনস

ওয়েবের যুগের সূচনা থেকেই HTML এর অনেকগুলো ভার্সন বের হয়েছে:

ভার্সন সাল
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012