- এইচটিএমএল (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
<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
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
<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
<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
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: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>
এনটাইটি হল 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 discussHTML 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:youremail@email.com"> 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:youremail@email.com"> 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 androws। প্রতেক 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
শিখতে শিখতে বুড়ো হয়ে যাবো।।😆😆😆
ReplyDeleteOw its a nice post. Thanks for sharing this type of Freelancing tips.
ReplyDeleteI already bookmarking your site. You can also visit my Freelancing Blog for get some more information about Freelancing Tutorial .
এগুলো zip হিসেবে দিলে ভাল হত যাই হোক খুব ভাল লাগছে কিছু শিখতে পারলাম
ReplyDeleteonk kichu shiklam........Thank you...
ReplyDeleteThanks For Share This Information
ReplyDeleteHTML কি
THANKS A LOT,,,,,,,onek valo legese boss.
ReplyDeleteNice post folks.
ReplyDeleteHere I started writing html tutorials on by blog.Hope you will check that.
https://phonoming.blogspot.com/
This comment has been removed by the author.
ReplyDelete