পপুলার হোস্ট বিডি প্রোফেশনাল বাংলা ফ্রিল্যান্সিং ব্লগ ।। POPULAR HOST BD
HTML এর বিভিন্ন ট্যাগ ও এট্রিবিউট এর ব্যাবহার
- এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper Text Markup Language.এটা কোন প্রোগ্রামিংল্যাংগুয়েজ নয়,মার্কআপ ল্যাংগুয়েজ।
- ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
- এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন।এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন
- তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েবপেজটি ডাইনামিক হওয়া শূরু হল।সবশেষে পিএইচপি+ ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।
যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)
নোটপ্যাড। Notepad open করে তৈরী হোন।যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সডএডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন।
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
- এইচটিএমএল এলিমেন্ট (Elements)
- এইচটিএমএল ট্যাগ (Tag)
- এইচটিএমএল অ্যাট্রিবিউট (Attribute)
এলিমেন্টস(Elements): এলিমেন্টস হল HTML এর মুল কেন্দ্রবিন্দু।তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান।সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার,নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।
একটি এলিমেন্ট(Element) মুল তিনটি অংশ নিয়ে গঠিত। শুরু করার ট্যাগ(opening tag) ,এলিমেন্ট এর ধারনকৃত অংশ এবং শেষে বন্ধ করার ট্যাগ(closing tag) ।
- <p> – opening paragraph tag
- Element Content – paragraph words
- </p> – closing tag
প্রত্যেক Web page এর অতিব প্রয়োজনীয় চারটি এলিমেন্ট(Element) থাকে এগুলো হলো্: HTML,head, title এবংbody elements । এগুলো বিষয়ে নিচে আলোচনা করা হয়েছে।
<html> Element…</html>
সবার প্রথমে HTML লেখার শুরুতে HTML শব্দের প্রথমে এবং শেষে less than ও greater than ( < >) চিহ্ন দিতে হয়। যেমন: <html> । কোন কিছু লেখার পর শেষে </html> ট্যাগটি দিতে হবে। অর্থাৎ <html> Welcome to Bangladesh </html>। Welcome to Bangladesh এই লেখাটি Web page এ প্রদশিত হবে।আমরা খুব সহজেNotepad এ লিখে Web page তৈরী করতে পারি। এজন্য আমদের Notepad Open করতে হবে। প্রথমে
start মেনু All Programs > Accessories >Notepad
তারপর Notepad হবার পর নিম্নের কোডটি লিখবো
view source
print?
1.<html>
2.Welcome to Bangladesh
3.</html>
এভাবে লেখার পর Notepad এর ফাইল মেনু হতে save এ ক্লিক করব তারপর index.html নামে save করব।
সেভ করা ফাইলটিকে Double click করে open করবো । দেখবো যে লেখাটি Browser এ open হয়েছে। খুব সহজে একটা web Page তৈরী হয়ে গেলো।
<head> element
একটি ডকুমেন্ট head, ডকুমেন্ট সস্বন্ধে মৌলিক ধারনা দেয়। <head> elements যা পেজের header নির্দেশ করে।head elements এর মধ্যে রাখা ট্যাগ সরাসরি ব্রাউজারে প্রদর্শিত হয় না। আমরা টাইটেল এলিমেন্ট এর মাধ্যমে প্রকাশ করতে পারি।
<title> element
<head> এলিমেন্ট এর মাঝে <title> এলিমেন্ট রাখতে হয়। যেই শব্দগুলো title elements এর opening (<title>)এবংclosing(</title>) tag এর মধ্যে লেখা হয় তা browser এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়।
view source
print?
1.<html>
2.<head>
3.<title> My WebPage!</title>
4.</head>
5.</html>
<body> element
body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়।
view source
print?
1.<html>
2.<head>
3.<title>My WebPage!</title>
4.</head>
5.<body>
6.Hello World! All my content goes here!
7.</body>
8.</html>
এই কোডগুলি নোটপ্যাডে কপি পেস্ট করে .html extension দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী প্রথম ওয়েব পেজ দেখুন।
যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
ট্যাগ এর প্রধান তিনটি অংশ আছে
ক. শুরু করার ট্যাগ(opening tag)
খ.ধারনকৃত অংশ(contents)
গ.শেষ করার ট্যাগ (closing tag)।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।
view source
print?
1.<p>A Paragraph Tag</p>
ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো।
view source
print?
1.<body> Body Tag (acts as a content shell)
2.<p>Paragraph Tag</p>
3.<h2>Heading Tag</h2>
4.<b>Bold Tag</b>
5.<i>Italic Tag</i>
6.</body>
Closing ট্যাগ ছাড়া ট্যাগ:
কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।
আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।
view source
print?
1.<img src=”/../mypic.jpg” /> — Image Tag
2.<br /> — Line Break Tag
3.<input type=”text” size=”12″ /> — Input Field
প্রদর্শন:
–Line Break–
ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি আমরা একটি টেবিল তৈরী করি তবেattributes ব্যাবহার করে টেবিল এর প্রস্থ, উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ওউচ্চতার মান দিতে পারি।
view source
print?
1.<tag attributes =”value” attributes =”value”>
view source
print?
1.<table width=”150″ height=”100″>
Class বা id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। Class বা id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট ,সিএসএস (এগুলো সম্পর্কে পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে।
view source
print?
1.<p>Paragraph type 1 Italics</p>
2.<p>Paragraph type 2 Bold</p>
প্রদর্শন
Paragraph type 1 Italics
Paragraph type 2 Bold
এইচটিএমএল নেম এট্রিবিউট (HTML Name Attribute)
Name attribute টি Class বা id attribute হতে ভিন্ন। Name attribute টি প্রায়ই র্ফম বা অন্যান্য ইনপুট ইলিমেন্টের সাথে দেখা যায়।
view source
print?
1.<input type=”text” name=”TextField” />
প্রদর্শন:
এই attribute টি TextField প্রদর্শনের বিষয়ে ভুমিকা নেই তবে পর্দার অন্তরালে এর অনেক বেশি অবদান(javascript , css)
এইচটিএমএল টাইটেল এট্রিবিউট (HTML- Title attributes)
এই attribute টি কোন এইচটিএমএল এলিমেন্ট এর শিরোনাম এবং ছোট popup টেক্স যুক্ত করে এমন ভাবে যুক্ত করে যখন ওয়েব পেজে ঐ শিরোনামের উপর মাউস রাখা হয় তখন ছোট popup টেক্সটি প্রদর্শন করে।
<h2 title=”Hello There!”>Titled Heading Tag</h2>
প্রদর্শন
Titled Heading Tag
এইচটিএমএল এলাইন এট্রিবিউট (HTML- align attributes)
যদি আপনি এলিমেন্টের সমান্তরাল অবস্থান পরিবর্তন করতে চান তবে তা align attribute দিয়ে করতে পারেন।align বিভিন্ন ভবে করা যায় যেমন left, right & center । ডিফল্ট হিসাবে left align টি নির্বাচিত থাকে।
view source
print?
1.<h2 align=”center”>Centered Heading</h2>
Centered Heading
view source
print?
1.<h2 align=”left”>Left aligned heading</h2>
2.<h2 align=”center”>Centered Heading</h2>
3.<h2 align=”right”>Right aligned heading</h2>
Left aligned heading
Centered heading
Right aligned heading
Generic attributes:
Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেকHTML Tag এর সাথে সহজে ব্যবহার করা যায়।
Attribute
Options
Function
align
right, left, center
সমান্তাল (Horizontally) aligns tags
valign
top, middle, bottom
উলম্ব(Vertically) aligns tags
bgcolor
numeric, hexadecimal, RGB values
Element এর background color নিদের্শ করে।
background
URL
Background image উপর element নিদের্শ করে।
id
ব্যবহারকারীর নির্দেশ অনুযায়ী
Element এর Name যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।
class
ব্যবহারকারীর নির্দেশ অনুযায়ী
Element এর শ্রেনীবিন্যাস যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।
width
Numeric Value
Tables, images, or table cells এর width নির্দেশ করে ।
height
Numeric Value
Tables, images, or table cells এর height নির্দেশ করে ।
title
ব্যবহারকারীর নির্দেশ অনুযায়ী
আপনার elements এর “Pop-up” title ।
এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (HTML Paragraph Tutorial in Bangla)
কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।
<p> ট্যাগ দারা অনুচ্ছেদ (প্যারাগ্রাফ) নিদের্শ করা হয়। এই ট্যাগ ব্যবহার করার ফলে প্যারাগ্রাফ টেক্সের উপরে নিচে অটোমেটিক ফাকা লাইন সৃষ্টি হয়।
view source
print?
1.<p>Avoid losing floppy disks with important school…</p>
2.<p>For instance, let’s say you had a HUGE school…</p>
প্রদর্শন:
Avoid losing floppy disks with important school/work projects on them. Use the web
to keep your content so you can access it from anywhere in the world. It’s also a quick
way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far)it is easy.
For instance, let’s say you had a HUGE school or work project to complete. Off hand,
the easiest way to transfer the documents from your house could be a 3.5″ floppy disk.
However, there is an alternative. Place your documents, photos, essays, or videos onto
your web server and access them from anywhere in the world.
এইচটিএমএল প্যারাগ্রাফ-জাস্টিফিকেশন (HTML paragraph –justification)
ওয়ার্ড ডকুমেন্টে এ আমরা যেভাবে কোন লেখাকে justify করে সবদিকে সমান করতাম তেমনি ভাবে এইচটিএমএল এjustify ব্যবহার করে একই কাজ করতে পারি।
view source
print?
1.<p align=”justify”>For instance, let’s say you had a HUGE school or work…</p>
প্রদর্শন:
For instance, let’s say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5″ floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.
এইচটিএমএল প্যারাগ্রাফ-মাঝামাঝি (HTML paragraph –centering)
ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর মধ্যে অবস্থান করবে।
view source
print?
1.<p align=”center”>For instance, let’s say you had a HUGE school or work…</p>
প্রদর্শন:
For instance, let’s say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5″ floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.
এইচটিএমএল প্যারাগ্রাফ-এলাইন ডানে (HTML paragraph –align right)
ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর ডানপাশে অবস্থান করবে।
view source
print?
1.<p align=”right”>For instance, let’s say you had a HUGE school or work…</p>
প্রদর্শন:
For instance, let’s say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5″ floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.
এইচটিএমএল হেডিং টিউটোরিয়াল (HTML Heading Tutorial in Bangla)
এইচটিএমএল এ হেডিং বা শিরোনাম সাধারনত টাইটেল বা সাবটাইটেল হিসাবে দেখা যায়। হেডিং ট্যাগ এর মধ্যে রাখাটেক্স bold হিসাবে প্রদর্শিত হয় এবং আকার যা হেডিং এর নম্বরের উপর নির্ভর করে। হেডিং নম্বর গুলো ১ হতে ৬ এরমধ্যে সীমাবদ্ধ। এখানে ১ সবচেয়ে বড় এবং ৬ সবচেয়ে ছোট হেডিং
view source
print?
1.<body>
2.<h1>Headings</h1>
3.<h2>are</h2>
4.<h3>great</h3>
5.<h4>for</h4>
6.<h5>titles</h5>
7.<h6>and subtitles</h6>
8.</body>
Headings
are
great
for
titles
and subtitles
লক্ষ করার বিষয় এইযে প্রতিটি হেডিং এর নিজস্ব লাইন ব্রেক option আছে । এটা হেডিং এর built in attribute ।হেডিং লেখার সময় অটোমেটিক লাইন ব্রেক হয়ে যায়।
হেডিং এবং প্যারাগ্রাফ এর একত্রে ব্যবহার:
আমরা হেডিং এবং paragraph একসাথে ব্যবহার করতে পারি। নিচে উদাহরন দেয়া হল।
view source
print?
1.<h1 align=”center”>Essay Example</h1>
2.<p>Avoid losing floppy disks with important school/work projects…</p>
3.<p>For instance, let’s say you had a
4.HUGE school or work project to complete. Off …</p>
প্রদর্শন:
Essay Example
Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It’s also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far by now) it is easy.
For instance, let’s say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5″ floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.
এইচটিএমএল লাইন ব্রেক টিউটোরিয়াল
আমরা আগে দেখেছি লাইন ব্রেক ট্যাগটি অন্যান্য হতে একটু ভিন্ন। লাইন ব্রেক ট্যাগটি একটা লাইন শেষ করে আপনাকে অন্য লাইন হতে লেখা শুরু করতে সাহায্য করবে। এইচটিএমএল এ ট্যাগ দ্বারা লাইন ব্রেক চিহ্নিত করা হয়।মাইক্রোসফটওয়ার্ডে যেমন Enter দিলে নিচের লাইনে চলে যায়,এটার কাজ ঠিক তেমনই।
view source
print?
1.<p>
2.Will Mateson<br />
3.Box 61<br />
4.Cleveland, Ohio<br />
5.</p>
প্রদর্শন:লাইন ব্রেক এর সাহায্যে চিঠির address তৈরী করতে পারি।
Will Mateson
Box 61
Cleveland, Ohio
আবার চিঠির সমাপ্ত ঘোষনা করতে পারি।
view source
print?
1.<p>Sincerely,<br />
2.<br />
3.<br />
4.Kevin Sanders<br />
5.Vice President</p>
প্রদর্শন:
Sincerely,
Kevin Sanders
Vice President
আরও একটা বিষয় মনে রাখা প্রয়োজন যে লাইন ব্রেক ট্যাগ এর কোন closing tag এর প্রয়োজন নেই।
HTML horizontal rule:
Horizontal rule কে
ট্যাগ দারা প্রকাশ করা হয়।
ট্যাগটি ব্যবহার করে screen এর উপর সমান্তরাল লাইন প্রদর্শন করে। line break tag এর মত Horizontal rule tagএর কোন closing tag নেই।
view source
print?
1.<hr>
2.Use
3.<hr><hr>
4.Them
5.<hr>
6.Sparingly
7.<hr>
প্রদর্শন:
Use
Them
Sparingly
Horizontal rule কোন গ্রন্থপঞ্জি বা কোন টেবিলের বিষয় সমুহ প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়।
1.<hr>
2.1. “The Hobbit”, JRR Tolkein.
3.
4.2. “The Fellowship of the Ring” JRR Tolkein.
প্রদর্শন:
1. “The Hobbit”, JRR Tolkein.
2. “The Fellowship of the Ring” JRR Tolkein.
এইচটিএমএল লিস্ট টিউটোরিয়াল (HTML List Tutorial in Bangla)
তিন প্রকারের এইচটিএমএল লিস্ট বিদ্যমান। <ol> tag দিয়ে শুরু করে ধারাবাহিক লিস্ট(ordered list), <ul> ট্যাগ দিয়ে শুরু করে ধারাবাহিকতা হীন লিস্ট(unordered list), <dl> ট্যাগ দিয়ে শুরু করে সংজ্ঞামূলক লিস্ট(definition list)।
<ul> – unordered list; বুলেট
<ol> – ordered list; নম্বর
<dl> – definition list; অভিধান
এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists)
<ol> ট্যাগ দিয়ে ক্রমিক লিস্ট(ordered list) শুরু করা হয়। <li> ট্যাগ দ্বারা দ্রব্যের তালিকা (list item) বোঝায়।তালিকাতৈরীর জন্য <li> ট্যাগ কে আপনার opening (<ol>) এবং closing (</ol>) tag এর মধ্যে রাখতে হয়। ক্রমিক (ordered) অর্থ হচ্ছে নম্বর যেমন ১, ২, ৩ ইত্যাদি।
view source
print?
1.<h4 align=”center”>Goals</h4>
2.<ol>
3.<li>Find a Job</li>
4.<li>Get Money</li>
5.<li>Move Out</li>
6.</ol>
প্রদর্শন:
Goals
- Find a Job
- Get Money
- Move Out
Start attributes দিয়ে নিজের ইচ্ছানুযায়ী নম্বর হতে লিস্ট শুরু করা যায়।
view source
print?
1.<h4 align=”center”>Goals</h4>
2.<ol start=”4″ >
3.<li>Buy Food</li>
4.<li>Enroll in College</li>
5.<li>Get a Degree</li>
6.</ol>
প্রদর্শন:
Goals
4.Buy Food
5.Enroll in College
6.Get a Degree
