Notes
Notes - notes.io |
https://0.facebook.com/notes/আর-আর-ফাউন্ডেশন-অফিসিয়াল-গ্রুপ/html-এর-বিভিন্ন-ট্যাগ-ও-এট্রিবিউট-এর-ব্যাবহার/229873203803827/?refid=18
এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper
Text M arkup L anguage.এটা কোন
প্রোগ্রামিং ল্যাংগুয়েজ
নয়,মার্কআপ ল্যাংগুয়েজ।
ওয়েব ডেভেলপার হতে হলে এই
ল্যাংগুয়েজ টি সবার
আগে ভালভাবে শিখতে হবে।
তবে এটা শেখা খুব সহজ।
এটা শিখলেই আপনি একটা ওয়েব
পেজ তৈরী করতে পারবেন।এরপর
যদি সিএসএস শেখেন তাহলে ঐ
পেজটিতে আরেকটু প্রান
দিতে পারবেন
তারপর জাভাস্ক্রিপ্টের পালা,
জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন
করলে আপনার ঐ ওয়েব
পেজটি ডাইনামিক হওয়া শূরু হল।
সবশেষে পিএইচপি+ ডেটাবেস
শিখলে আপনি পূর্নাঙ্গ ডেটাবেস
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
এইচটিএমএল ক্রমিক লিস্ট (HTML ordered
lists continued)
আরও চার প্রকারের ধারাবাহিক লিস্ট
(ordered list) রয়েছে। এগুলো সাধারন
১,২,৩ নম্বরের পরিবর্তে রোমান নম্বর
বা বর্ণ হতে পারে তা বড় হাতের
বা ছোট হাতের। type attribute ব্যবহার
করে নম্বর পরিবর্তন করা হয়।
1.<ol type="a">
2.<ol type="A">
3.<ol type="i">
4.<ol type="I">
Ordered List Types:
Lower-Case Letters
Upper-Case Letters
Lower-Case Numerals
Upper-Case Numerals
Find a Job
Get Money
Move Out
Find a Job
Get Money
Move Out
Find a Job
Get Money
Move Out
Find a Job
Get Money
Move Out
এইচটিএমএল বিনাক্রম লিস্ট (HTML
unordered lists)
<ul> ট্যাগ সাহায্যে বুলেট লিস্ট
তৈরী করা হয়। বুলেট লিস্ট আবার তিন
প্রকার যেমন ১. squares ২.discs ৩.circles ।
default হিসাবে সাধারনত full discs
ব্যাবহার করা হয়।
1.<h4 align="center">Shopping List</h4>
2.<ul>
3.<li>Milk</li>
4.<li>Toilet Paper</li>
5.<li>Cereal</li>
6.<li>Bread</li>
7.</ul>
প্রদর্শন:
Shopping List
Milk
Toilet Paper
Cereal
Bread
আমরা type attributes ব্যবহার করে unordered
list এর অন্যান্য বুলেট ব্যবহার
করতে পারি।
<ul type="square">
<ul type="dics">
<ul type="circle">
type="square"
type="disc"
type="circle"
Milk
Toilet Paper
Cereal
Bread
Milk
Toilet Paper
Cereal
Bread
Milk
Toilet Paper
Cereal
Bread
এইচটিএমএল ডেফিনেশন লিস্ট (HTML
definition lists)
Definition list এর ব্যবহার সাধারনত
অভিধানে দেখতে পাই। <dl> tag
ব্যাবহার করে Definition list
তৈরী করা হয়। যাকে Define অর্থ্যাৎ
সংজ্ঞায়িত করতে চাই তাকে bold
আকারে দেখানো উচিত। Definition list
tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত
সেগুলো হলো ১. <dt> ২. <dd> ।
<dl> tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার
করা হয় ।
<dt> tag: যাকে সংজ্ঞায়িত(Define)
করবো এই ট্যাগ ব্যবহার করে তার নাম
লেখা হয়।
<dd> tag: <dt> tag এ যে নাম
লেখা হয়েছে তার
সম্পর্কে এখানে আলোচনা হয় ।
1.<dl>
2.<dt><b>Fromage</b></dt>
3.<dd>French word for cheese.</dd>
4.<dt><b>Voiture</b></dt>
5.<dd>French word for car.</dd>
6.</dl>
প্রদর্শন:
Fromage
French word for cheese.
Voiture
French word for car.
এইচটিএমএল কালার কোড
টিউটোরিয়াল (HTML Color code)
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Hexadecimal
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)
<font> ট্যাগ ব্যাবহার করে ওয়েব
সাইটের টেক্সটের স্টাইল, সাইজ
এবং কালার যোগ করা হয়। size, color
এবং face attributes ব্যাবহার
করে আপনি ফন্ট কে কাস্টমাইজ
করতে পারি।<basefont> ট্যাগ ব্যাবহার
করে পেজের সকল টেক্সটকে একই স্টাইল,
সাইজ এবং কালার এ সেট করা যায়।
<font> এবং <basefont> ট্যাগ ব্যাবহার
না করে সিএসএস(সিএসএস
টিউটোরিয়ালে আলোচনা করা
হয়েছে) ব্যাবহার করা উচিত।
ফন্ট আকার (Font size)
Size attribute এর সাহায্যে ফন্ট এর সাইজ
ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য
মান হচ্ছে ১(সবচেয়ে ছোট)
হতে ৭(সবচেয়ে বড়)। ফন্ট এর ডিফল্ট
আকার হচ্ছে ৩।
1.<p>
2.<font size="5">Here is a size 5 font</font>
3.</p>{}
প্রদর্শন:
Here is a size 5 font.
ফন্ট রং (Font color)
কালার attribute এর সাহয্যে font এর color
সেট করা হয়।
1.<font color="#990000">This text is hexcolor
#990000</font>
2.<br />
3.<font color="red">This text is red</font>
প্রদর্শন:
This text is hexcolor #990000
This text is red
ফন্ট ফেস (Font face)
ফন্ট face এর ক্ষেত্রে সতর্ক হওয়া উচিত
কারন আপনার সিস্টেম এ নির্ধারিত
ফন্ট টি ইনস্টল
দেয়া না থাকে তাহলে আপনি ঐ ফন্ট
টি দেখতে পাবেন না এবং তার
পরিবর্তে ডিফল্ট হিসাবে Times New
Roman ফন্ট টি দেখতে পাবেন।
1.<p>
2.<font face="Bookman Old Style, Book Antiqua,
Garamond">This paragraph
3.has had its font...</font>
4.</p>
প্রদর্শন:
This paragraph has had its font formatted by the
font tag!
বেসফন্ট (Basefont)
Basefont ট্যাগ এর
সাহায্যে আপনি ওয়েব পেজের
ডিফল্ট ফন্ট সেট করতে পারেন।
নিচে basefont ব্যাবহার করার সঠিক পথ
দেখানো হল।
01.<html>
02.<body>
03.<basefont size="2" color="green">
04.<p>This paragraph has had its font...</p>
05.<p>This paragraph has had its font...</p>
06.<p>This paragraph has had its font...</p>
07.</basefont>
08.</body>
09.</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
Prothom okkhorer shundor style :
ফন্ট কে কাস্টমাইজ করে যেকোন ধরনের
স্টাইল করা যায়।
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.
এইচটিএমএল লিংক টিউটোরিয়াল
লেখক রেজয়ানুল আলম+ফেরদৌস আলম
আপনি চাইলে আপনার সাইটের কোন
টেক্সটের উপর লিংক
তৈরী করে দিতে পারেন
যেখানে ক্লিক করলে অন্য পেজ/সাইট
আসবে। 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 পেজে লিংক
হিসাবে দেখা যাবে।যেমন
1.<a href=" http://www.webcoachbd.com/ "
target="_blank" >Webcoachbd Home</a>
2.<a href=" http://www.google.com/ "
target="_blank" >Google Home</a>
3.
4.<a href=" http://www.yahoo.com/ "
target="_blank" >Yahoo Home</a>
প্রদর্শন: গ্লোবাল লিংক
Webcoachbd Home Google Home
Yahoo Home
এইচটিএমএল লিংক টার্গেট (HTML-link
Target)
Target এট্রিবিউট দ্বারা বোঝায়, হয়
পেজ খুলতে হবে পৃথক window
তে অথবা লিংক খুলতে হবে একই browser
window তে ।
target="
_blank"
নতুন browser window তে page খোলা ।
_self"
current window তে page Load নেয়া।
_parent"
Loads new page into a frame that is superior to
where the link lies
_top"
সব frames cancel করে, current browser window
নতুন page Load নেয়া।
এইচটিএমএল ইমেইল লিংক
টেক্সট লিংক
উপরে যেভাবে তৈরী করলেন ইমেইল
লিংকও সেভাবে করতে হবে শুধু href
এট্রিবিউটের ভিতর ইনভার্টেড কমার
মধ্যে আগে ওয়েব সাইটের
ঠিকানা ছিল আর এবার ইমেইল
ঠিকানা দিবেন।যেমন
<a href= "mailto:[email protected]" >Email
Example</a>
প্রদর্শন:
Email Example
এই লিংকের উপর মাউস নিয়ে যান,
নিচে স্টাটাসবারে mailto:abc@mail.
com লেখা দেখাবে।এখানে ক্লিক
করলে
আপনার ব্রাউজার [email protected] নামের
একটি মেইল ঠিকানায় মেইল
পাঠানোর ক্ষেত্র প্রস্তুত করবে।আরও
সহজভাবে বলি,ধরুন
আপনি মজিলা ফায়ারফক্স ব্রাউজার
ব্যবহার করছেন,আপনি যদি Tools>Options>
Applications এ গিয়ে mailto এর জায়গায়
ড্রপডাউন মেনু থেকে Use Yahoo mail
সিলেক্ট করে দেন তাহলে Email Example
লিংকে ক্লিক করলে আপনার ইয়াহু
মেইল খুলবে এবং To ফিল্ডের জায়গায়
[email protected] লেখা উঠবে।
আপনি চাইলে ইমেইল লিংকে subject
এবং body ঠিক করে দিতে পারেন
যেমন
<a href= "mailto: [email protected]?subject=Web Page
Email&body=This email is from your website" >
2nd Email Example</a>
প্রদর্শন:
2nd Email Example
এখানে ক্লিক করলে আপনার ইয়াহু
মেইল খুলবে এবং To এর জায়গায়
[email protected] আর 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>
এনটাইটি হল symbol এর কাল্পনিক বিষয়।
অনেক symbol যেমন ট্রেডমার্ক,
কপিরাইট, বৈদেশিক মুদ্রা প্রতিক
ইত্যাদি ওয়েব পেজ প্রদর্শন
করতে হলে এনটাইটি বিষয়ে জানতে
হবে।
প্রত্যেক এনটাইটি এর তিনটি অংশ
থাকে যেমন:
১.প্রত্যেক Entity এমপারসেন্ড (ampersand)
দিয়ে শুরু হয়- &
২.তারপর Entity এর নাম – copy
৩.শেষে semicolon যোগ করতে হয়-;
কপিরাইট
©একত্রে লিখে তা তৈরী করে ©
- Copyright symbol.
অতিরিক্ত স্পেস
আমরা প্যারাগ্রাফ ট্যাগ
এরং হেডিং ট্যাগ এর
মধ্যে দেখেছি ব্রাউজার শুধু
দুটি শব্দের মধ্যে একটি স্পেস
চিনতে পারে এর বেশি পারে না।
আমরা এনটাইটি ব্যবহার করে অতিরিক্ত
স্পেস দিতে পারি। নিচে উদাহরন
দেয়া হলো।
1.<p>Everything that goes up, must come
down!</p>
প্রদর্শন:
Everything that goes up, must come down!
আমরা এইচটিএমএল এ লেস দেন
এবং গ্রেটার দেন চিহ্ন ব্যবহার
করে ট্যাগ তৈরী করি। এসব চিহ্ন ওয়েব
পেজ এ
দেখাতে চাইলে এনটাইটি ব্যবহার
করতে হবে।
1.<p>
2.Less than - < <br />
3.Greater than - > <br />
4.Body tag - <body>
5.</p>
প্রদর্শন:
Less than - <
Greater than - >
Body tag - <body>
কমেন্ট আপনাকে ওয়েব ডেভেলপার
হিসাবে এমন একটি পথ
দেখাবে যেটা দ্বারা আপনি এটা
নিয়ন্ত্রন করতে পারবেন যে কোন্ কোন্
লাইন ব্রাউজার দ্বারা নিস্ক্রিয়
করা হবে।
তিনটি কারনে আমরা কোডকে ignore
করি।
১. এইচটিএমএল ডকুমেন্ট এর ভিতরে note
লিখে বা নিজের জন্য reminder লিখে
২.স্ক্রিপ্টিং ল্যাংগুয়েজ যেমন
জাভাস্ক্রিপ্ট এর কিছু কমেন্ট বা মন্তব্য
প্রয়োজন। .
৩.Temporarily comment প্রয়োজন যতক্ষন
পর্যন্ত এইচটিএমএল এলিমেন্ট অসম্পুর্ন
থাকে।
<!--Note to self: This is my banner image! Don't
forget --><img src=" http://
www.webcoachbd.com/pics/
ferdousSugar.jpg " height="100" width="200"/>
অন্যান্য ট্যাগ মত কমেন্ট এরও opening tag
এবং closing tag আছে।
<!-- Opening Comment
-- > Closing Comment
এইচটিএমএল - <!-- এই লেখাটি কমেন্ট
হয়ে থাকবে -->:
ওয়েব ডেভেলপার
হিসাবে আপনি অনেক কাজ অসম্পুর্ন
রাখতে পারেন সেক্ষেত্রে অসম্পুর্ন
কাজটিকে <!— -- > কমেন্ট ট্যাগ এর
ভিতর রাখতে পারেন।
<!-- <input type="text"> size="12" /> --
Input Field -->
যখন এইচটিএমএল ইলিমেন্টকে প্রদর্শন
করতে চান তখন কমেন্ট
ট্যাগটি উঠিয়ে দিবেন।
<input type="text" size="12" />
প্রদর্শন: Input Field:
এইচটিএমএল ছবি টিউটোরিয়াল (HTML
Images Tutorial in Bangla)
ছবি একটা গুরুত্বপুর্ন বিষয় এর সঠিক
ব্যবহার আমাদের জানতে হবে। <img/>
ট্যাগ ব্যবহার করে আমরা ওয়েব পেজ এ
ইমেজ নিয়ে আসতে পারি।
view source
print?
1.<img src="/sunset.gif" />
প্রদর্শন:
এইচটিএমএল-ছবি src:
Src attribute গুরুত্বপুর্ন বিষয়। Src এর অর্থ
সোর্স(source) অর্থাৎ ইমেজের উৎস
বা যেখানে picture file টি অবস্থিত।
দুটি উপায়ে আমরা ইমেজের সোর্স
নির্দিস্ট করতে পারি।
১. Standard URL ব্যবহার করে
(src=http://www. webcoachbd.com/pics/htmlT/
sunset.gif )
২. web server এ file কপি বা আপলোড করে
(src="/../sunset.gif")
এই picture file এর location এর
সাথে .এইচটিএমএল file এর location এর
সম্পর্ক আছে।
URL Types:
Local Src
Location Description
src="/sunset.gif"
picture file এবং .html file একই directory
তে অবস্থান বরে।
src="/../sunset.gif"
picture file পুর্ববতি directory তে অবস্থান
করে .html file মত।
src="/../pics/sunset.gif"
pic directory এর picture file পুর্ববতি directory
তে অবস্থান করে .html file এর মত।
এইচটিএমএল-alternative attribute:
Alt attribute নির্দিস্ট করে অলটারনেটিভ
টেক্সট অর্থ্যাৎ যখন ইমেজ প্রদশির্ত হয়
না তখন অলটারনেটিভ
টেক্সটি প্রদশির্ত হয় । ইমেজ প্রদশির্ত
না হওয়ার কারন
হতে পারে ফাইলটি নষ্ট
হয়ে গেছে বা browser ইমেজ
ফাইলটি খুজে পাচ্ছে না।
view source
print?
1.<img src=" http://example.com/brokenlink/
sunset.gif " alt="Beautiful Sunset" />
প্রদর্শন:
এইচটিএমএল-ছবি height এবং width:
ইমেজের height এবং width ঠিক করার জন্য
height এবং width attribute ব্যাবহার
করা হয়।
view source
print?
1.<img src="/sunset.gif" height="50"
width="100">
প্রদর্শন:
এইচটিএমএল-Vertically এবং Horizontally align
ছবি:
Align এবং valign attribute ব্যবহার ইমেজের
অবস্থান নির্ধারন করতে পারি।
align (Horizontal)
right
left
center
valign (Vertical)
top
bottom
center
নিচে উদাহরন দেয়া হলো
1.<p>This is paragraph 1, yes it is...</p>
2.<p>
3.<img src="/sunset.gif" align="right">
4.The image will appear along the...isn't it?
5.</p>
6.<p>This is the third paragraph that appears...</
p>
প্রদর্শন:
This is paragraph 1, yes it is. I think this
paragraph serves as a nice example to show how
this image alignment works. The image will
appear along the right hand side of the
paragraph. As you can see this is very nice for
adding a little eye candy that relates to the
specified paragraph. If we were talking about
beautiful tropical sunsets, this picture would be
perfect. But we aren't talking about that, so it's
rather a waste, isn't it? This is the third
paragraph that appears below the paragraph with
the image!
এইচটিএমএল-ইমেজকে লিংক
হিসাবে ব্যবহার:
ইমেজকে লিংক হিসাবে ব্যবহার
করা যায়।
1.<a href=" http://www.webcoachbd.com/ ">
2.<img src="/sunset.gif">
3.</a>
প্রদর্শন:
এইচটিএমএল- Thumbnails:
Thumbnails হল ছোট সাইজের ইমেজ
যা বড়, ভাল মানের ইমেজের
সাথে লিংক করে। এই লিংক
মাধ্যমে picture quality রক্ষা করা যায়।
Thumbnails একটা নিম্ন মানের ইমেজ
যা ইমেজ লিংক হিসাবে কাজ করে।
1.<a href="/sunset.gif">
2.<img src="/thmb_sunset.gif">
3.</a>
এইচটিএমএল টেবিল টিউটোরিয়াল
(HTML Tables Tutorial in Bangla)
টেবিল হল Horizontal সারি এবং vertical
কলামের বিন্যাস। এটা tabular data
প্রদর্শনের ক্ষেত্রে অনেক গুরুত্বপুর্ন।
ডকুমেন্টের এলিমেন্ট নিয়ন্ত্রনের জন্য
ওয়েব ডিজাইনারদের
কাছে এটা আরো বেশি গুরুত্বপুর্ন ।
সারি এবং কলামের
ইন্টারসেকশনকে cell বলে। সকল
এইচটিএমএল টেবিল <table> ট্যাগ
দিয়ে শুরু হয় এবং </table> ট্যাগ
দিয়ে শেষ হয়।
১.<tr> ট্যাগ Horizontal সারি নিদের্শ
করে।
২ <td> ট্যাগ ঐ Horizontal সারির data cell
নিদের্শ করে।
৩ <th> ট্যাগ data cell এর টেবিল heading
হিসাবে কাজ করে।
৪ <tfoot> ট্যাগ টেবিলের footer যোগ
করার জন্য ব্যবহার হয়।
1.<table border="1">
2.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</
td></tr>
3.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</
td></tr>
4.</table>
প্রদর্শন:
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
অনেকগুলো সারি এবং কলামের
বিস্তার:
Rowspan ব্যাবহার
করে অনেকগুলো সারির বিস্তার
এবং colspan ব্যাবহার
করে অনেকগুলো কলামের বিস্তার
করা হয়। আপনি যদি কলামের header
দিতে চান তাহলে <th> ট্যাগ ব্যাবহার
করতে হবে। <th> ট্যাগ ব্যাবহার
করলে default হিসাবে header টি বোল্ড
আকারে দেখাবে।
01.<table border="1">
02.<tr>
03.<th>Column 1</th>
04.<th>Column 2</th>
05.<th>Column 3</th>
06.</tr>
07.<tr><td rowspan="2">Row 1 Cell 1</td>
08.<td>Row 1 Cell 2</td><td>Row 1 Cell 3</
td></tr>
09.<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</
td></tr>
10.<tr><td colspan="3">Row 3 Cell 1</td></tr>
11.</table>
প্রদর্শন:
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
Cell padding এবং spacing
এখানে cellpadding বলতে বোঝায়
টেবিলের বর্ডার এবং টেবিলের
মধ্যে ধারনকৃত অংশ (লেখা, সংখ্যা) এর
মধ্যে স্পেস (space) বা ফাকা অংশ
এবং cellspacing বলতে বোঝায়
টেবিলের দুটি cell এর মধ্যে স্পেস
(space) বা ফাকা অংশ ।
01.<table border="1" cellspacing="10"
02.bgcolor="rgb(0,255,0)">
03.<tr>
04.<th>Column 1</th>
05.<th>Column 2</th>
06.</tr>
07.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</
td></tr>
08.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</
td></tr>
09.</table>
প্রদর্শন:
Column 1
Column 2
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
1.<table border="1" cellpadding="10"
bgcolor="rgb(0,255,0)">
2.<tr>
3.<th>Column 1</th>
4.<th>Column 2</th>
5.</tr>
6.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</
td></tr>
7.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</
td></tr>
8.</table>
প্রদর্শন:
Column 1
Column 2
Row 1 Cell 1
Row 1 Cell 2
Row 2 Cell 1
Row 2 Cell 2
এইচটিএমএল ব্যাকগ্রাউন্ড
রং টিউটোরিয়াল (HTML Background
Colors Tutorial in Bangla)
bgcolor এট্রিবিউট
টি বিশেষভাবে ওয়েব পেজ
এবং টেবিলের ব্যাকগ্রাউন্ড নিয়ন্ত্রন
করে। Bgcolor এট্রিবিউট টিকে অনেক
এইচটিএমএল ট্যাগ এর মধ্যে ব্যাবহার
করা যায় তবে সবচেয়ে ভাল হয় <body>
এবং <table> ট্যাগ এর মধ্যে ব্যাবহার
করলে। অতিরিক্ত
হিসাবে ব্যাকগ্রাউন্ড স্টাইল
করতে চাইলে সিএসএস ব্যাকগ্রাউন্ড
(CSS টিউটোরিয়ালে আরোচনা করা
হয়েছে) দেখতে পারেন।
গঠন:
<tagname bgcolor ="value">
1.<body bgcolor="Silver">
2.<p>We set the background of this paragraph to
be silver. The body tag is
3.where you change the pages background. Now
continue the lesson to
4.learn more about adding background colors in
your HTML!
5.</p>
6.</body>
প্রদর্শন:
We set the background of this paragraph to be
silver. The body tag is where you change the
pages background. Now continue the lesson to
learn more about adding background colors in
your HTML!
টেবিলের ব্যাকগ্রাউন্ড এ কালার
যোগ করা :
01.<table bgcolor="lime" border="1"><tr>
02.<td>A lime colored table background using
color names.</td>
03.</tr></table>
04.
05.
06.<table bgcolor="#ff0000" border="1"><tr>
07.<td>A red colored table background using
hexadecimal values "#FF0000".</td>
08.</tr></table>
09.
10.
11.<table bgcolor="rgb(0, 0, 255)"
border="1"><tr>
12.<td>A blue colored table background using
RGB values "rgb(0, 0, 255)".</td>
13.</tr></table>
প্রদর্শন:
A lime colored table background using color
names.
A red colored table background using
hexadecimal values "#FF0000".
A blue colored table background using RGB
values "rgb(0, 0, 255)".
টেবিলের সারি এবং কলামে কালার
যোগ করা:
1.<table>
2.<tr bgcolor="#FFFF00"><td>This Row is Yellow!
</td></tr>
3.<tr bgcolor="#AAAAAA"><td>This Row is Gray!
</td></tr>
4.<tr bgcolor="#FFFF00"><td>This Row is Yellow!
</td></tr>
5.<tr bgcolor="#AAAAAA"><td>This Row is Gray!
</td></tr>
6.<tr bgcolor="#FFFF00"><td>This Row is Yellow!
</td></tr>
7.<tr bgcolor="#AAAAAA"><td>This Row is Gray!
</td></tr>
8.</table>
প্রদর্শন:
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
একত্রে ব্যাকগ্রাউন্ড color এবং font color:
1.<table bgcolor="#000000">
2.<tr><td bgcolor="#009900">
3.<font color="#FFFF00" align="right">Green
Bay</font></td>
4.<td><font color="#FFFFFF">13</font></td></
tr>
5.<tr><td bgcolor="#0000FF">
6.<font color="#DDDDDD" align="right">New
England</font></td>
7.<td><font color="#FFFFFF">27</font></td></
tr>
8.</table>
প্রদর্শন:
Green Bay
13
New England
27
1.<table bgcolor="#777777">
2.<tr><td>
3.<p><font face="Monotype Corsiva, Verdana"
size="4" color="#00FF00">
4.This paragraph tag has...
5.</font></p>
6.</td></tr>
7.</table>
প্রদর্শন:
This paragraph tag has a gray background with
green colored font. You should see Monotype
Corsiva font if you have it installed, or Verdana
as the backup. Both fonts are widely accepted as
standard fonts.
এইচটিএমএল ব্যাকগ্রাউন্ড
টিউটোরিয়াল (HTML Background Tutorial
in Bangla)
ব্যাকগ্রাউন্ড এট্রিবিউট এর
সাহায্যে এইচটিএমএল
টেবিলে ইমেজকে ব্যাকগ্রাউন্ড ইমেজ
হিসাবে দেখানো যায়।
1.<table height="50" width="100"
2.background=" http://www.webcoachbd.com/
images/stories/imagel.jpg " >
3.<tr><td>This table has a background image</
td></tr>
4.</table>
প্রদর্শন:
This table has a background image
এইচটিএমএল ব্যাকগ্রাউন্ড রিপিট:
উপরের
উদাহরনে দেখা গিয়েছে যে টেবিল
এর আকার ছবির আকারের সমান
বলে কোন সমস্যা হয় নি । যদি টেবিল
এর আকার ছবির আকারের চেয়ে বড় হয়
তবে ব্যাকগ্রাউন্ড ছবি রিপিট হবে।
1.<table height="200" width="300"
2.background=" http://www.webcoachbd.com/
images/stories/imagel.jpg " >
3.<tr><td>This table has a background image</
td></tr>
4.</table>
প্রদর্শন:
This table has a background image
এইচটিএমএল প্যাটার্নড ব্যাকগ্রাউন্ড
বিভিন্ন ফটো এডিটিং সফ্টওয়ার
দিয়ে বিভিন্ন প্যাটার্নের
ব্যাকগ্রাউন্ড ছবি এরং ট্রান্সপারেন্ট
ব্যাকগ্রাউন্ড ছবি তৈরী করা যায়।
ট্রান্সপারেন্ট ইমেজের ফাইলটিকে gif
ফরমেটে রাখতে হবে jpeg ফরমেটে নয়।
view source
print?
1.<table height="100" width="150"
2.background=" http://www.tizag.com/pics/
htmlT/pattern.jpg " >
3.<tr><td>This table has a background patterned
image</td></tr>
4.</table>
প্রদর্শন:
This table has a background patterned image
view source
print?
1.<table background=" http://www.tizag.com/
pics/htmlT/transparent.gif " >
2.<tr><td>This table has a red transparent
background image</td></tr>
3.</table>
প্রদর্শন:
This table has a red transparent background
image
এইচটিএমএল ফ্রেম টিউটোরিয়াল (HTML
Frame)
ফ্রেম এর মাধ্যমে একই সময় একই ব্রাউজার
উইন্ডো তে অনেক গুলো এইচটিএমএল
ডকুমেন্ট প্রদর্শন করা যায়।
এইচটিএমএল-a generic frame page:
ফ্রেমের বেশি ব্যবহার হল একটি ফ্রেম
এ মেনু আর একটি ফ্রেম এ তার কনটেন্ট ।
যখন কেউ মেনু লিংকে ক্লিক করে তখন
সেই ওয়েব পেজটি কনটেন্ট
পেজে খোলে।
1.<html>
2.<head>
3.</head>
4.<frameset cols="30%,*">
5.<frame src="/menu.html">
6.<frame src="/content.html">
7.</frameset>
8.</html>
প্রদর্শন:
frameset – এটা একটা parent tag যা ফ্রেম
page এর characteristics নির্দেশ করে।পৃথক
পৃথক ফ্রেম frameset এর মধ্যে নির্দেশিত
থাকে।
frameset cols="#%, *" - Cols(column) যা ফ্রেম
এর width নির্দেশ করে। উপরের
উদাহরনে আমরা মেনু (1st column)
নির্বাচন করেছি যা total page এর ৩০%
এবং "*", এর অর্থ total page এর ৭০% content
(2nd column) নির্দেশিত হয়।
frame src="/" ওয়েব পেজ এর লোকেশন
ফ্রেমে লোড হয়।
ব্যনার বা টাইটেল যোগ করা:
1.<html><head></head>
2.<frameset rows="20%,*">
3.<frame src="/title.html">
4.<frameset cols="30%,*">
5.<frame src="/menu.html">
6.<frame src="/content.html">
7.</frameset>
8.</html>
frameset rows="#%, *"-এর অর্থ frameset
cols="#%, *"- মতই।
FrameBorder and FrameSpacing:
FrameBorder এবং FrameSpacing attribute এর
সাহায্যে ফ্রেম এর Spacing
এবং দুটি ফ্রেমের মধ্যে ugly gray lines
রিমুভ করা যায়।
1.<html><head></head>
2.<frameset border="0" frameborder="0"
framespacing="0" rows="20%,*">
3.<frame src="/title.html">
4.<frameset border="0" frameborder="0"
framespacing="0" cols="30%,*">
5.<frame src="/menu.html">
6.<frame src="/content.html">
7.</frameset>
8.</html>
প্রদর্শন:
Noresize and Scrolling:
Noresize attribute এর সংশ্লিষ্ট
ফ্রেমকে আমরা রিসাইজ
করতে পারি না।
scrolling="(yes/no)"- ফ্রেম এর ভিতরে scroll
হবে বা হবে না।
1.<html><head></head>
2.<frameset border="2" frameborder="1"
framespacing="2" rows="20%,*">
3.<frame src="/title.html" noresize
scrolling="no">
4.<frameset border="4" frameborder="1"
framespacing="4" cols="30%,*">
5.<frame src="/menu.html" scrolling="auto"
noresize>
6.<frame src="/content.html" scrolling="yes"
noresize>
7.</frameset>
8.</html>
অনুগ্রহ করে কোডগুলি নিজে লিখে
প্রাকটিস করে দেখুন।
এইচটিএমএল লেআউট টিউটোরিয়াল
(HTML Layout Tutorial in Bangla)
এইচটিএমএল লেআউট হল খুব মৌলিক
বিষয়। টেবিলের ভিতর টেবিল স্থাপন
করে এইচটিএমএল
লেআউট তৈরী করা হয়।
1.<table bgcolor="black" border="1" heigh="200"
width="300">
2.<tr><td>
3.<table bgcolor="white" heigh="100"
width="100">
4.<tr><td>Tables inside tables!</td></tr>
5.</table>
6.</td></tr></table>
প্রদর্শন: টেবিলের ভিতর টেবিল
Tables inside tables!
এইচটিএমএল স্টান্ডার্ড লেআউট
Standard layout সাধারনত উপরে অবস্থিত
ব্যানার, নেভিগেশন এবং content
বা প্রদর্শন বক্স। এগুলো হলো
ভাল ওয়েব সাইট এর বৈশিষ্ট্য।
01.<table cellspacing="1" cellpadding="0"
border="0"
02.bgcolor="black" height="250" width="400">
03.<tr height="50"><td colspan="2"
bgcolor="white">
04.<table title="Banner" id="banner" border="0">
05.<tr><td>Place a banner here</td></tr>
06.</table>
07.</td></tr>
08.<tr height="200"><td bgcolor="white">
09.<table title="Navigation" border="0">
10.<tr><td>Links!</td></tr>
11.<tr><td>Links!</td></tr>
12.<tr><td>Links!</td></tr>
13.</table>
14.</td><td bgcolor="white">
15.<table title="Content" id="content" border="0">
16.<tr><td>Content goes here</td></tr>
17.</table>
18.</td></tr></table>
প্রদর্শন:
01.<table title="Shell" height="250" width="400"
02.border="0" bgcolor="black" cellspacing="1"
cellpadding="0">
03.<tr height="50"><td bgcolor="white">
04.<table title="banner" id="banner">
05.<tr><td>Banner goes here</td></tr>
06.</table>
07.</td></tr>
08.<tr height="25"><td bgcolor="white">
09.<table title="Navigation" id="navigation">
10.<tr><td>Links!</td>
11.<td>Links!</td>
12.<td>Links!</td></tr>
13.</table>
14.</td></tr>
15.<tr><td bgcolor="white">
16.<table title="Content" id="content">
17.<tr><td>Content goes here</td></tr>
18.</table>
19.</td></tr></table>
প্রদর্শন:
এইচটিএমএল মিউজিক টিউটোরিয়াল
(HTML Embed Music Tutorial in Bangla)
লেখক মো: ফেরদৌস আলম
ওয়েব পেজ এ music ঢুকানো অনেক সহজ।
Embed ট্যাগ এর সাহায্যে music
ঢুকানো হয় এবং src attribute এর
সাহায্যে media file এর লোকেশন ঠিক
করা হয়।
1.<embed src="/Madine Ko Jain.mp3" />
Embed Attributes – প্রদর্শনের
সাথে সর্ম্পকিত:
Embeded media player এর বাহ্যিক রুপ
কে কাস্টমাইজ করতে নিচের attribute
কে সেট করতে হবে।
১. width - media player এর প্রসস্থতা
২. height - media player এর উচ্চতা
৩. hidden – যদি এর মান সত্য হয় তবে media
player টি প্রদর্শিত হবে না।
আমি সুপারিশ করব এই attributeটি ব্যবহার
করতে যদি আপনি জেনে থাকেন
ওয়েব পেজ এ চলা music টি ভিজিটর
বন্ধ করা option না চান।
1.<embed src="/last breath.mp3" width="360"
height="165" />
Embed Attributes – কার্যপ্রণালী :
Embeded media player এর
কার্যপ্রণালী কে কাস্টমাইজ
করতে নিচের attribute কে সেট
করতে হবে।
autostart – এই attribute এর দুটি মান false
বা true । যদি মান true দেয়া হয়
তবে ওয়েব পেজ খোলার
সাথে সাথে গান শুরু হবে।
loop - এই attribute এর দুটি মান false বা true।
true সেট করা থাকলে গানটি রিপিট
হবে আর false থাকলে হবে না।
volume - এই attribute দ্বারা media file এর
volume সেট করা হয়। এর সীমা হল ০-১০০।
1.<embed src="/beethoven.mid" autostart="false"
loop="false"
2.volume="60" />
এইচটিএমএল ভিডিও টিউটোরিয়াল
(HTML Video Tutorial in Bangla)
লেখক মো: ফেরদৌস আলম
Music ফাইল এর মত ভিডিও ফাইল
কে <embed /> ট্যাগ দিয়ে ওয়েব পেজ এ
প্রদর্শন করা যায়। image ট্যাগ এর মত
embed ট্যাগ এর কোন closing ট্যাগ এর
প্রয়োজন নেই। src attribute এর
মাধ্যমে সঠিক URL(local বা global) ঠিক
করে ভিডিও ওয়েব পেজে প্রদর্শন
করা যায়।
1.<embed src=" http://www.webcoachbd.com/
files/html/htmlexample.mpeg "
2.autostart="false" />
প্রদর্শন:
আপনি href attribute এর মাধ্যমেও সঠিক
URL ঠিক করে ভিডিও ওয়েব
পেজে প্রদর্শন করা যায়।
1.<a href=" http://www.webcoachbd.com/pics/
flash/motiontween1easy.swf ">
2.motiontween1easy.swf</a>
(রাইট বাটন ক্লিক করে play)
এইচটিএমএল -ভিডিওর ধরন
Flash movies (.swf), AVI's (.avi), and MOV's
(.mov)। embed ট্যাগ এসব
ফরমেটকে সাপোর্ট করে।
.swf files - এই ফরমেটটি হচ্ছে ফ্লাশ
.wmv files – এই
ফরমেটটি হচ্ছে মাইক্রোসফট উইন্ডোজ
মিডিয়া টাইপ।
.mov files - এই ফরমেটটি হচ্ছে এপল কুইক
টাইম মিডিয়া
.mpeg files – এটি একটি standard ফরমেট
যা Moving Pictures Expert Group
দ্বারা compression movie ফাইল
তৈরী হয়েছে।
উপরের ফরমেট গুলোর
মধ্যে ইন্টানেটে বেশি ব্যবহার হয় swf,
mpeg এই ফরমেট গুলো ।
এইচটিএমএল - Embed Attributes:
Src attribute এর মত <embed /> ট্যাগ এর
আরো attribute
রয়েছে সেগুলো হলো volume, autostart,
hidden, and loop ।
autostart - এই attribute এর দুটি মান false
বা true । যদি মান true দেয়া হয়
তবে পেজ খোলার
সাথে সাথে ভিডিও টি শুরু
হয়ে যাবে।
hidden - এই attribute এর মাধ্যমে play/stop/
pause নিয়ন্ত্রন করে। embedded object is
hidden or not. Values are true or false. (Hide your
embeded media if you just want background
noise).
loop - এই attribute এর দুটি মান false বা true।
true সেট করা থাকলে ভিডিও
টি রিপিট হবে আর false
থাকলে হবে না।.
playcount - Setting a playcount সেট করা অর্থ
হচ্ছে mediaটি x number পর্যন্ত repeat
হবে অবিরত হওয়ার repeat
পরিবর্তে (playcount="2" এর অর্থ video
টি দুই বার চলবে).
volume - এই attribute দ্বারা media file এর
volume set করা হয়। এর সীমা হল ০-১০০।
এইচটিএমএল বডি (HTML Body)
লেখক মো: ফেরদৌস আলম
Body tag যা web page এর সকল element ধারন
করে। Tables, Lists, Forms, paragraph element
গুলোকে Body element এর
মধ্যে রাখতে হয়।
HTML - Body Margins:
Attributes
Leftmargin: body element. এর বাম পাশের
মারজিন।
topmargin :body element এর উপরের
মারজিন।
1.<body topmargin="50">
2.<body leftmargin="50">
প্রদর্শন:
Top Margin
Left Margin
HTML - Base Text:
Text attributes এর মাধ্যমে Body tag এর
ভিতরের সকল টেক্সট এর কালার ঠিক
করা যায়।
1.<body text="red" >
বা
1.<body text="rgb(255,0,0)" >
এইচটিএমএল ডিভ টিউটোরিয়াল ( HTML
Div Tutorial in Bangla)
<div> ট্যাগ অন্যান্য ট্যাগ এর পাত্র
হিসাবে কাজ করে অনেকটা body
ট্যাগ এর মত।
Div এলিমেন্ট গুলো হলো block
এলিমেন্ট
যারা অন্তরালে থেকে অন্যান্য ট্যাগ
গুলোকে একত্রে করে।
সিএসএস এর ক্ষেত্রে Div এলিমেন্ট
অনেক গুরুত্তপুর্ন।
নিচে ডিভে ব্যবহৃত কতকগুলো attributes
দেয়া হলো।
id
width
height
title
style
দর্শকদের strong visualization এর জন্য
ডিভের style attribute এর মাধ্যমে কালার
প্রদর্শন করা যায়।
1.<body>
2.<div style="background: green">
3.<h5 >SEARCH LINKS</h5>
4.<a target="_blank" href=" http://
www.google.com ">Google</a>
5.</div>
6.</body>
প্রদর্শন:
এইচটিএমএল ডিভ লেআউট
টেবিল লেআউট অথবা ফ্রেম ছাড়াও ৩য়
অল্টারনেটিভ হিসাবে div এলিমেন্ট
ব্যবহার করা যায়।
beginning and ending ট্যাগ এর মাধ্যমে div
এলিমেন্ট সকল এইচটিএমএল এলিমেন্ট
ধারন করতে পারে।
01.<div id="menu" align="left" >
02.<a href="/">HOME</a> |
03.<a href="/">CONTACT</a> |
04.<a href="/">ABOUT</a>
05.</div>
06.<div id="content" align="left" bgcolor="white">
07.<h5>Content Articles</h5>
08.<p>This paragraph would be your content
paragraph with all of your readable material.</p>
09.</div>
প্রদর্শন:
01.<div id="menu" align="right" >
02.<a href="/">HOME</a> |
03.<a href="/">CONTACT</a> |
04.<a href="/">ABOUT</a> |
05.<a href="/">LINKS</a>
06.</div>
07.<div id="content" align="right" >
08.<h5>Content Articles</h5>
09.<p>This paragraph would be your content
10.paragraph with all of your readable
material.</p>
11.<h5 >Content Article Number Two</h5>
12.<p>Here's another content article right here.</
p>
13.</div>
প্রদর্শন:
এইচটিএমএল বোল্ড এবং ইটালিক (HTML
Bold & Italic)
<b> bold tag ব্যবহার করে আমরা টেক্স
বোল্ড করতে পারি।
1.<b>This text is entirely BOLD!</b>
প্রদর্শন: Bold:
This text is entirely BOLD!
টেক্সকে highlight করতে bold tag ব্যবহার
করতে পারি।.
1.<p><b>Don't</b> touch that!</p>
প্রদর্শন:
Don't touch that!
dictionary fashion.লেখার জন্য আমরা bold
tag ব্যবহার করতে পারি।
1.<p><b>Cardio:</b> Latin word meaning of the
heart.</p>
প্রদর্শন: Dictionary
Cardio: Latin word meaning of the heart.
HTML - Italic(s)
The italics tag টি key word or phrase
কে highlight করতে ব্যবহার করা উচিত। এই
tags আপনার font face কে stylize বা কোন
আকৃতি দেবেনা বরং টেক্সটকে জোর
দিবে। Emphasized tag প্রায়ই italics tag এর
মত।
1.Italic <i>tag</i>!
2.<em>Emphasized</em> Text!
3.Create a <blockquote>blockquote</blockquote>!
4.Format your <address>addresses</address>!
প্রদর্শন: HTML Italics:
Italic tag !
Emphasized Text!
Create a blockquote !
Format your addresses !
1.<b>HTML</b>
2.<i>Hyper Text Markup Language</i>
বা
1.<b>HTML</b>
2.<em>Hyper Text Markup Language</em>
প্রদর্শন: HTML Dictionary
HTML
Hyper Text Markup Language
or
HTML
Hyper Text Markup Language
HTML Bold and Italics
<b> and the <i> tags উভয়কেই একসাথে text
format এর জন্য ব্যবহার করা যায়।
শুধু তাদের ক্রম ঠিক
থাকলো কিনা তা দেখে নিবেন।
1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>
প্রদর্শন:
Phillip M. Rogerson MD
<b> and the <i> tags উভয়কেই টেক্স
লিংকে ব্যবহার করলে ব্যাপার ভাল
বুঝা যায়।
1.<p>Include several external
2.links throughout your texts as references to
your viewers,
3.we will discuss
4.<a href="/" target="_blank" title="Tizag Links">
5.<b><i>HTML Links</i></b>
6.</a>
7.in a later lesson.</p>
প্রদর্শন: Format Links:
Include several external links throughout your
texts as references to your viewers, we will
discuss HTML Links in a later lesson.
এইচটিএমএল কোড এবং pre ট্যাগ (HTML
Code & Pre)
লেখক মো:ফেরদৌস আলম
code tag এর মাধ্যমে আপনার text
কে computer code এর মত
করে লেখতে পারেন। এটা সাধারন
ভাবে text এর font face, size, এবং letter
spacing পরিবর্তন করতে পারে।
1.This text has been formatted to be computer
<code>code</code>!
প্রদর্শন: Computer Code
This text has been formatted to be computer
code!
Use this tag to separate any computer code you
wish to display on your website. It is not always
necessary, but the tag exists if you so desire.
HTML - Code Links
পৃথক link হিসাবে আপনার web page এ
দেখাতে পারেন।
1.<p>Feel free to search <a href=" http://
www.google.com " target="_blank">
2.<code>Google</code>
3.</a> for
4.anything you wish to find on the internet.</p>
প্রদর্শন: Code Links:
Feel free to search Google for anything you wish
to find on the internet.
HTML - <pre> Preformatting
<pre> tag এর সুবিধা হল HTML coding এর সময়
যেভাবে আমরা লাইন ব্রেক, স্পেস
নির্দেশ করে দিবো ঠিক
সেভাবে টেক্সট প্রদর্শিত হবে।অর্থ্যাৎ
যেভাবে কোড লিখবেন সেভাবেই
আউটপুট দেখাবে।
1.<pre>
2.Roses are Red,
3.এখানে কয়েকটা স্পেস আছেViolets are
blue,
4.I may sound crazy,
5.এখানে কয়েকটা স্পেস আছেBut I love
you!
6.</pre>
প্রদর্শন:
Roses are Red, Violets are blue,I may sound
crazy, But I love you!
এইচটিএমএল
সুপারস্ক্রিপ্ট,সাবস্ক্রিপ্ট,স্ট্রাইকথ্রো
1.<p>This text is <sup>superscripted!</sup></p>
প্রদর্শন: Superscript:
This text is superscripted!
HTML – Exponents
অংকে exponential ব্যবহার করা জন্য <sup>
tag ব্যবহার করতে হয়।
1.2<sup>3</sup> = 8
2.14<sup>x</sup>
প্রদর্শন: Exponents:
23 = 8
14x
HTML – ফুটনোট:
উপন্যাস বা প্রবন্ধে দেখা যায় কোন
লেখার reference দেয়ার জন্য <sup> tag
ব্যবহার হয় যা ফুটনোটকে নির্দেশ করে।
1.<p>"It was a lover's tryst<sup>1</sup>."
2.<hr />
3.1. Secret meeting between lovers
প্রদর্শন: Footnote
"It was a lover's tryst1."
1. Secret meeting between lovers
HTML -Subscript
1.<p>This text is <sub>subscripted!</sub></p>
প্রদর্শন:
This text is subscripted!
1.<p>H<sub>2</sub>0 - Water
2.<p>O<sub>2</sub> - Oxygen
3.<p>CO<sub>2</sub> - Carbon Dioxide
প্রদর্শন:
H2O - Water
O2 - Oxygen
CO2 - Carbon Dioxide
HTML – Strikethrough
<del> tag এর মাধ্যমে কোন
লেখাকে ক্রস দেওয়া যায়।
1.<p>This text is <del>scratched</del> out!</p>
প্রদর্শন: Strikethrough
This text is out!
HTML - Check Off Task:
1.<ol>
2.<li>Clean my room</li>
3.<li><del>Cook Dinner</del></li>
4.<li><del>Wash Dishes</del></li>
5.</ol>
প্রদর্শন:
Clean my room
এইচটিএমএল ফর্ম ( HTML Form)
ওয়েব সার্ভার হতে তথ্য(name, email
address, credit card, ইত্যাদি) গ্রহনের
ক্ষেত্রে ওয়েবমাস্টার এর জন্য ফর্ম
গুরুত্বপুর্ন tool হিসাবে কাজ। আপনার
চাহিদা অনুযায়ী ফর্ম দর্শক হতে ইনপুট
গ্রহন করে। আপনি এখান
থেকে ডেটা সঞ্চয় করতে পারেন ,
order করতে পারেন, ব্যাবহারকারীর
পরিসংখ্যান
জমা করতে পারেন,আপনার forum এ ঐ
ব্যক্তিটিকে রেজিস্ট্রেশন
করাতে পারেন ইত্যাদি ।
টেক্সট ফিল্ড
কিভাবে সম্পুর্ন ফর্ম তৈরী করতে হয়
সেটা আপনাদের আগে জানতে হবে।
Input fields হচ্ছে form নামক sandwich এর
গোশত । <input> tag এর কিছু attributes
আছে সেসব সম্বন্ধে জানা উচিত ।
type - এই এট্রিবিউট ইনপুট ফিল্ড এর
প্রকারভেদ নির্ধারন করে। যেমন text,
submit, এবং password ।
name - এই এট্রিবিউট টি দিয়ে ফিল্ড
এর নামকরন করা যায়
যাতে পরবর্তিতে আপনি reference
আনতে পারেন।
size - এই এট্রিবিউট টি ফিল্ড এর
horizontal width সেট করে ।
maxlength – এই এট্রিবিউট টি character এর
সর্বোচ্চ নম্বর নির্ধারন করে
<form method="post"
action="mailto:[email protected]"> Name:
<input type="text" size="10" maxlength="40"
name="name"> <br /> Password: <input
type="password" size="10" maxlength="10"
name="password"> </form>
প্রদর্শন: Input Forms
Name:
Password:
এইচটিএমএল- ইনপুট ট্যাগ:
Input fields এর মধ্যে যেসব জিনিস
অন্তর্ভুক্ত সেগুলো হলো checkboxes, text
fields, radios, এবং form submission buttons।
<input /> ট্যাগ এর কোন closing tag
প্রয়োজন নেই।
এইচটিএমএল -Type Attribute:
Type attributes এর সাহায্যে এক প্রকারের
input tag নির্দেশ করতে পারি।
নিচে কতকগুলো input tag দেয়া হলো।
১. "text"
২. "password"
৩. "checkbox"
৪. "radio"
৫. "submit"
৬. "reset"
এইচটিএমএল – চেকবক্স:
চেকবক্স অনেকগুলি আইটেম
থেকে একটা বাছাই করার
সুবিধা দেয়। চেকবক্স এর name
এবং value এট্রিবিউট যা রেডিও বাটন
এর name এবং value এট্রিবিউট মত আচরন
করে।
<form method="post"
action="mailto:[email protected]"> Select
your favorite cartoon characters. <input
type="checkbox" name="toon"
value="Goofy">Goofy <input type="checkbox"
name="toon" value="Donald">Donald <input
type="checkbox" name="toon" value="Bugs">Bugs
Bunny <input type="checkbox" name="toon"
value="Scoob">Scooby Doo <input type="submit"
value="Email Myself"> </form>
প্রদর্শন: চেকবক্স:
Select your favorite cartoon characters.
Goofy
Donald
Bugs Bunny
Scooby Doo
এইচটিএমএল - সাবমিট বাটন:
Input type এর মধ্যে "submit"
অপশনটি সাবমিট বাটন তৈরীর
ক্ষেত্রে উল্লেখযোগ্য ।specifies a very
unique button. যখন আমরা submit button এ
চাপ দেবো তখন ফর্ম এর
বার্তাটি activate হবে।
যেহেতু আমরা সাবমিট বাটন
তৈরী করেছি তাই নতুন এট্রিবিউট
প্রয়োজন তা হচ্ছে value এট্রিবিউট।
আমরা যে শব্দকে value এট্রিবিউট এর
মান হিসাবে নির্বাচন
করবো তা বাটন উপর প্রদর্শিত হবে।
"Submit" or "Continue" শব্দগুলো value
এট্রিবিউট এর মান হিসাবে ব্যবহার হয়।
.
1.<input type="submit" value="Submit" />
2.<input type="submit" value="Continue
Please!" />
প্রদর্শন: সাবমিট বাটন
এইচটিএমএল - রিসেট বাটন:
সর্বশেষ input type হল রিসেট বাটন।
রিসেট বাটন ক্লিক করার
মাধ্যমে আপনি ফর্ম এর সবকিছু আবার
পুর্বের স্বাভাবিক অবস্থায়
নিয়ে যেতে পারবেন।"start over" বাটন
কে আপনি রিসেট বাটন এর মত ব্যাবহার
করতে পারবেন।
1.<input type="reset" value="Reset Fields" />
2.<input type="reset" value="Start Over" />
প্রদর্শন: রিসেট বাটন:
এইচটিএমএল টেক্সক্ট ফিল্ড (HTML Text
Field)
Text fields হল ছোট আয়তাক্ষেত্র
যা আপনাকে কোন টেক্স ইনপুট
করতে এবং সেই তথ্য web server
পাঠাতে সাহায্য করবে। এসব
তথ্যগুলো scripting language যেমন (PHP,
PERL, or ASP) এর মাধ্যমে প্রক্রিয়া হয়।
HTML - Text Field Size:
Size attribute এর মাধ্যমে text area এর size
নিয়ন্ত্রন করা যায়। default size হল
সাধারনত ২০ characters দির্ঘ্য।
1.<input type="text" size="5" />
2.<input type="text" size="15" />
3.<input type="text" size="25" />
প্রদর্শন: Text Fields:
HTML - Text Field Maxlength:
maxlength attribute নির্দিস্ট
করা ছাড়া ব্যবহারকারী তার ইচ্ছামত
characters ইনপুট
করতে পারবে এমনকি আপনি যদি সাইজ
নির্দিস্ট করেও থাকেন। characters ইনপুট
কে সীমাবদ্ধ করতে maxlength attribute
টি ব্যবহার করা হয়। size এবং maxlength
একই হওয়া প্রয়োজন।
1.<input type="text" size="5" maxlength="5" />
2.<input type="text" size="15" maxlength="15" />
3.<input type="text" size="25" maxlength="25" />
প্রদর্শন: Maxlength Attribute
HTML - Text Field Value:
value attribute ব্যবহার
করে আপনি আগে থেকেই টেক্সট
ফিল্ডে কিছু লিখে রাখতে পারেন
যেটা সকলে দেখতে পারবে।
1.<input type="text" size="5" maxlength="5"
value="55555" />
2.<input type="text" size="15" maxlength="15"
value="Corndog" />
3.<input type="text" size="25" maxlength="25"
value="Tizag Tutorials!" />
Text Field Values:
এইচটিএমএল টেক্সক্ট এরিয়া (HTML Text
Area)
টেক্সক্ট এরিয়া ব্লগ এর মত এটা ইউজার
থেকে তথ্য তুলে আনতে ব্যবহৃত হয়।
Paragraphs, essays, or memos সমূহ কাট পেষ্ট
করে টেক্সক্ট এরিয়া তে বসানো যায়
এবং সাবমিট করা যায়।টেক্সক্ট
এরিয়া এর opening এবং closing ট্যাগ
রয়েছে। টেক্সক্ট এরিয়া ট্যাগ এর
ভিতর কোন কিছু লিখলে তা ওয়েব
পেজ এর টেক্সক্ট এরিয়া তে প্রদর্শিত
হয়।
1.<textarea>Text Area!</textarea>
প্রদর্শন
Text Area!
HTML - Text area Cols and Rows:
Adjust the of the text area র size এর appearance
কে ঠিক করতে হলে দুটো attributes
প্রয়োজন তা হলো cols and rows । প্রতেক
attribute এর জন্য সংখ্যাগত মান
দিতে হরে। যত বড় মান হবে তত বড় text
area হবে।
1.<textarea cols="20" rows="10">Text Area!</
textarea>
2.<textarea cols="40" rows="2">Text Area!</
textarea>
3.<textarea cols="45" rows="5">Text Area!</
textarea>
প্রদর্শন:
Text Area!
Text Area!
Text Area!
HTML - Textarea Wrap:
wrap attribute টি টেক্সের কার্যকলাপ
নির্ধারন করে যখন textarea র text field এ
লেখা লিখতে লিখতে সারির
শেষে চলে আসে। Wrap এর তিন ধরনের
সেটিং আছে।যেমন:
১.soft
২.hard
৩.off
wrap attribute এর Soft মানটি wordকে text
areaর ভিতরে মুড়িয়ে ফেলে but form
সাবমিট করা হয় তখন
মুড়ানো wordটি দেখা যায় না (Line
breaks অপশন যোগ হয় না )
wrap attribute এর Hard মানটি wordকে text
areaর
ভিতরে মুড়িয়ে ফেলে এবং লাইন এর
শেষে Line breaks অপশন যোগ হয় । তারপর
form সাবমিট করলে দেখা যায়
যেভাবে text box এ লেখা ছিল ঠিক
সেভাবে দেখাচ্ছে।
wrap attribute এর Off মানটি wordকে text
areaর
ভিতরে মুড়িয়ে ফেলে না এবং একটি
লাইনে অনবরত চলতে থাকে।
1.<textarea cols="20" rows="5" wrap="hard">
2.As you can see many times word wrapping is
often the desired
3.look for your textareas. Since it makes
everything nice and
4.easy to read.
5.</textarea>
প্রদর্শন:Text Area Wrapping:
As you can see many times word wrapping is
often the desired look for your textareas. Since it
makes everything nice and easy to read.
1.<textarea cols="20" rows="5" wrap="off">
2.As you can see many times word wrapping is
often the desired
3.look for your textareas. Since it makes
everything nice and
4.easy to read.
5.</textarea>
প্রদর্শন: No Wrapping
As you can see many times word wrapping is
often the desired look for your textareas. Since it
makes everything nice and easy to read.
HTML - Textarea Readonly:
readonly attribute এর value দুটি yes বা no।
readonly attribute এর মান yes
থাকলে আপনারা শুধু textarea এর
টেক্সকে কপি করতে পারবেন কিন্তু
পরিবর্তন করতে পারবেন না।
1.<textarea cols="20" rows="5" wrap="hard"
readonly="yes">
2.As you can see many times word wrapping is
often the desired
3.look for your text areas. Since it makes
everything nice and
4.easy to read.
5.</textarea>
প্রদর্শন:
As you can see many times word wrapping is
often the desired look for your text areas. Since it
makes everything nice and easy to read.
HTML – Disabled
disabled attribute প্রয়োগের ফলে textarea র
লেখা highlight হয় না, ধুসর রং ধারন
করে এবং এর লেখাকে পরিবর্তন
করতে পারি না।
1.<textarea cols="20" rows="5" wrap="hard"
disabled="yes">
2.As you can see many times word wrapping is
often the desired
3.look for your text areas. Since it makes
everything nice and
4.easy to read.
5.</textarea>
প্রদর্শন:
As you can see many times word wrapping is
often the desired look for your text areas. Since it
makes everything nice and easy to read.
এইচটিএমএল রেডিও বোতাম (HTML Radio
button)
লেখক মো: ফেরদৌস আলম
Radios হল এক প্রকার ইনপুট ফর্ম
যা ব্যবহারকারীকে যেকোন
একটি অপশন সিলেক্ট করতে বলে।
রেডিও বোতাম বা বাটন এর নাম
ঠিকভাবে দিতে হবে।"multiple choice" এই
ধরনের কুইজ এবং প্রশ্নের জন্য Radios
ব্যবহার করা সবচেয়ে ভাল।
1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
প্রদর্শন: Radios:
Italian:
Greek:
Chinese:
একই ফর্ম এ দুইটি ভিন্ন সেট রেডিওর
আরও উদাহরন দেয়া হল।
1.Italian: <input type="radio" name="food" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
4.
5.Male: <input type="radio" name="gender" />
6.Female: <input type="radio" name="gender" />
প্রদর্শন: Multiple Radios:
Italian:
Greek:
Chinese:
Male:
Female:
এইচটিএমএল- Radio Checked:
checked এট্রিবিউট,এর
সাহায্যে আপনারা radio
তে অটোমেটিকালি ডিফল্ট
হিসাবে বৃত্তে আগে থেকে চেক
দিয়ে রাখতে পারেন।
1.Italian: <input type="radio" name="food"
checked="yes" />
2.Greek: <input type="radio" name="food" />
3.Chinese: <input type="radio" name="food" />
প্রদর্শন:Default Italian:
Italian:
Greek:
Chinese:
এইচটিএমএল আপলোড ( HTML Upload Form)
upload form ব্যবহার করে ইউজার pictures,
movies, বা এমনকি নিজের webpages
upload করতে পারে। একটা upload form হল
এক ধরনের input form ।
আপনি সাধারনভাবে type attribute
দিয়ে এর মান হিসাবে file
লিখে upload form তৈরী করতে পারেন।
1.<input type="file"/>
প্রদর্শন: Upload Form
Max File Size
upload ফাইল এর size এর
সীমানা বেধে দিয়ে আপনি আপনার
webserver এর মূল্যবান space
রক্ষা করতে পারেন। এর জন্য আমরা
hidden input field এবং আরও কিছু specific
attributes যোগ করবো।
1.<input type="hidden" name="MAX_FILE_SIZE"
value="500" />
2.<input type="file"/>
এখানে value 100 মানে file সর্বোচ্চ
100kb হতে পারবে।
প্রদর্শন:
এইচটিএমএল ড্রপডাউন লিস্ট ( HTML Drop
down list)
ড্রপডাউন লিস্ট এর
মাধ্যমে আপনি ইউজারের জন্য এমন
একটা তালিকা তৈরী করতে পারবেন
যেখান থেকে ইউজার যেকোন
একটা সিলেক্ট করে দিতে পারবে।ধরুন
আপনাকে একটা ফর্ম
তৈরী করতে বলা হল
এবং এখানে একজনের প্রিয়
রং কি সেটা যাতে সিলেক্ট
করে দিতে পারে (অনেকগুলি রং এর
মধ্যে) এমন একটি অপশন রাখতে হবে,তখন
ড্রপডাউন লিস্টের
মাধ্যমে সেটা সহজেই করতে পারেন।
ড্রপডাউন লিস্ট
তৈরী করতে প্রথমে <select> ট্যাগ
দিয়ে কোড শুরু করতে হবে এরপর
যে আইটেমগুলি থেকে ইউজার বাছাই
করবে সেগুলির প্রতিটি <option>
ট্যাগের মধ্যে রাখতে হবে।যেমন
1.<select name="color">
2.<option value="bl">Black</option>
3.<option value="wh">White</option>
4.<option selected="selected"
value="mr">Maroon</option>
5.</select>
প্রদর্শন:ড্রপডাউন লিস্ট
Black White Maroon
উপরের উদাহরনে দেখুন selected
এট্রিবিউটের কারনে প্রথম অপশন Maroon
দেখাচ্ছে আপনি যদি চান White
প্রথমে দেখাক তাহলে ৩ নম্বর
লাইনে selected এট্রিবিউট ব্যবহার
করবেন।
প্রতিটি <option> ট্যাগে value
এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন
ফর্মের ডেটা সার্ভারে পাঠাবেন।
value এট্রিবিউটের নাম ধরে (যেমন
bl,mr..) কল করতে হয়।
<select> ট্যাগের size এট্রিবিউট
<select> ট্যাগে size এট্রিবিউট
দিয়ে আপনি ঠিক করে দিতে পারেন
যে লিস্টে কয়টি আইটেম
দেখাবে যেমন উপরের উদাহরনেই
যদি size=2 দেন তাহলে দুটি অপশন
দেখাবে বাকিটা স্ক্রল
করে দেখতে হবে।
01.<select name="color" size=2>
02.
03.<option value="bl">Black</option>
04.
05.<option value="wh">White</option>
06.
07.<option selected="selected"
value="mr">Maroon</option>
08.
09.</select>
প্রদর্শন: <select> ট্যাগের size এট্রিবিউট
Black White Maroon
<select> ট্যাগের multiple এট্রিবিউট
multiple এর মাধ্যমে আপনি একের অধিক
বিষয় সিলেক্ট করার সুযোগ
দিতে পারেন।
01.<select multiple="yes">
02.
03.<option value="bl">Black</option>
04.
05.<option value="wh">White</option>
06.
07.<option selected="selected"
value="mr">Maroon</option>
08.
09.</select>
প্রদর্শন: <select> ট্যাগের multiple
এট্রিবিউট
Black White Maroon
*৭ নম্বর লাইনে যদি selected এট্রিবিউট
উঠিয়ে দেন তাহলে কোন অপশন আর
সিলেক্টেড দেখাবেনা।
আপনার অপশন লিস্ট যদি অনেক বড় হয়
তাহলে গ্রুপ করতে পারেন।<optgroup>
এলিমেন্ট দিয়ে এটা করা যায়। যেমন
01.<select name="selInformation" >
02.<optgroup label="Tutorials" >
03.<option value="html"> HTML Tutorial </
option>
04.<option value="css"> CSS Tutorials </option>
05.<option value="javascript"> JavaScript </
option>
06.</optgroup>
07.<optgroup label="PHP Tutorials" >
08.<option value="basicphp"> Basic PHP </
option>
09.<option value="advancedphp"> Advanced PHP
</option>
10.</optgroup >
11.<optgroup label="Database Tutorials">
12.<option value="sql"> SQL Tutorial </option>
13.<option value="phpdatabase"> PHP Database
</option>
14.</optgroup>
15.</select>
প্রদর্শন:
HTML Tutorial CSS Tutorials JavaScript Basic
PHP Advanced PHP SQL Tutorial PHP Database
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
