- এইচটিএমএল (HTML) এর অর্থ হচ্ছে Hyper Text Markup Language.এটা কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়,মার্কআপ ল্যাংগুয়েজ।
- ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
- এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন।এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন
- তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল।সবশেষে পিএইচপি+ ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।
নোটপ্যাড। Notepad open করে তৈরী হোন।যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন।
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
- এইচটিএমএল এলিমেন্ট (Elements)
- এইচটিএমএল ট্যাগ (Tag)
- এইচটিএমএল অ্যাট্রিবিউট (Attribute)
| এইচটিএমএল এলিমেন্ট টিউটোরিয়াল (HTML Elements) |
এলিমেন্টস(Elements): এলিমেন্টস হল HTML এর মুল কেন্দ্রবিন্দু।তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান।সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার,নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।একটি এলিমেন্ট(Element) মুল তিনটি অংশ নিয়ে গঠিত। শুরু করার ট্যাগ(opening tag) ,এলিমেন্ট এর ধারনকৃত অংশ এবং শেষে বন্ধ করার ট্যাগ(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 হবার পর নিম্নের কোডটি লিখবো 1.<html> 2.Welcome toBangladesh 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 এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়। 1.<html> 2.<head> 3.<title> My WebPage!</title> 4.</head> 5.</html> <body> element body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়। 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 দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী প্রথম ওয়েব পেজ দেখুন। |
| এইচটিএমএল ট্যাগ টিউটোরিয়াল (HTML Tag Tutorial in Bangla) |
| যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।ট্যাগ এর প্রধান তিনটি অংশ আছেক. শুরু করার ট্যাগ(opening tag) খ.ধারনকৃত অংশ(contents) গ.শেষ করার ট্যাগ (closing tag)। এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন। 1.<p>A Paragraph Tag</p> ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো। 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/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়। আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ। 1.<img src=”/../mypic.jpg” /> — Image Tag 2.<br /> — Line Break Tag 3.<input type=”text” size=”12″ /> — Input Field প্রদর্শন: –Line Break– আরও তথ্য |
| এইচটিএমএল এট্রিবিউট টিউটোরিয়াল (HTML Attribute tutorial in Bangla) |
ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি আমরা একটি টেবিল তৈরী করি তবে attributes ব্যাবহার করে টেবিল এর প্রস্থ, উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ও উচ্চতার মান দিতে পারি।1.<tag attributes ="value" attributes ="value">1.<table width="150" height="100">Class বা id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। Class বা id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট ,সিএসএস (এগুলো সম্পর্কে পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে। 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 টি প্রায়ই র্ফম বা অন্যান্য ইনপুট ইলিমেন্টের সাথে দেখা যায়।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 টি নির্বাচিত থাকে।1.<h2 align="center">Centered Heading</h2>Centered Heading1.<h2 align="left">Left aligned heading</h2>2.<h2 align="center">Centered Heading</h2>3.<h2 align="right">Right aligned heading</h2>Left aligned headingCentered headingRight aligned headingGeneric attributes:Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেক HTML Tag এর সাথে সহজে ব্যবহার করা যায়।
| |||||||||||||||||||||||||||||||
| এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (HTML Paragraph Tutorial in Bangla) | |||||||||||||||||||||||||||||||
| কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।<p> ট্যাগ দারা অনুচ্ছেদ (প্যারাগ্রাফ) নিদের্শ করা হয়। এই ট্যাগ ব্যবহার করার ফলে প্যারাগ্রাফ টেক্সের উপরে নিচে অটোমেটিক ফাকা লাইন সৃষ্টি হয়।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 ব্যবহার করে একই কাজ করতে পারি। 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 এর মধ্যে অবস্থান করবে। 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 এর ডানপাশে অবস্থান করবে। 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 হিসাবে প্রদর্শিত হয় এবং আকার যা হেডিং এর নম্বরের উপর নির্ভর করে। হেডিং নম্বর গুলো ১ হতে ৬ এর মধ্যে সীমাবদ্ধ। এখানে ১ সবচেয়ে বড় এবং ৬ সবচেয়ে ছোট হেডিং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>Headingsaregreatfortitlesand subtitlesলক্ষ করার বিষয় এইযে প্রতিটি হেডিং এর নিজস্ব লাইন ব্রেক option আছে । এটা হেডিং এর built in attribute । হেডিং লেখার সময় অটোমেটিক লাইন ব্রেক হয়ে যায়।হেডিং এবং প্যারাগ্রাফ এর একত্রে ব্যবহার:আমরা হেডিং এবং paragraph একসাথে ব্যবহার করতে পারি। নিচে উদাহরন দেয়া হল।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 ExampleAvoid 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 দিলে নিচের লাইনে চলে যায়,এটার কাজ ঠিক তেমনই।1.<p>2.Will Mateson<br /> 3.Box 61<br /> 4.Cleveland,Ohio<br /> 5.</p> প্রদর্শন:লাইন ব্রেক এর সাহায্যে চিঠির address তৈরী করতে পারি। Will Mateson Box61 Cleveland,Ohio আবার চিঠির সমাপ্ত ঘোষনা করতে পারি। 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 কে 1.<hr> 2.Use 3.<hr><hr> 4.Them 5.<hr> 6.Sparingly 7.<hr> প্রদর্শন: 1.<hr> 2.1. “The Hobbit”, JRR Tolkein. 3. 4.2. “The Fellowship of the Ring” 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) অর্থ হচ্ছে নম্বর যেমন ১, ২, ৩ ইত্যাদি।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
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>প্রদর্শন: Goals4.Buy Food5.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:
এইচটিএমএল বিনাক্রম লিস্ট (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
<ul type=”square”> <ul> type=”dics”> <ul> type=”circle”>
এইচটিএমএল ডেফিনেশন লিস্ট (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.</dt>প্রদর্শন: Fromage French word for cheese. Voiture French word for car. |
| এইচটিএমএল কালার কোড টিউটোরিয়াল (HTML Color code) |
Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়।নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।১৬টি মৌলিক কালার:
আমি আপনাদেরকে নিরাপদ web design এর জন্য HTML rgb ব্যবহারের পরামর্শ দেব না কারন Non-IE browser, HTML rgb সাপোর্ট করে না। আপনারা যদি CSS শিখতে চান তাহলে আপনাদের উচিত এই বিষয় সম্বন্ধে জানা। Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে rgb । প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)। rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)। Red, Green এবং Blue এর মান:
প্রথম প্রথম 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 এ উন্নীত করে।
একটি বাস্তব হেক্সাডেসিমাল: 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
ফন্ট কে কাস্টমাইজ করে যেকোন ধরনের স্টাইল করা যায়। 1.<p><font size=”7″ face=”Georgia, Arial” color=”maroon”>C</font>ustomize 2.your font to achieve a desired look.</p> প্রদর্শন: Customize your font to achieve a desired look. |
| এইচটিএমএল লিংক টিউটোরিয়াল (HTML Link) |
| লিংক এর মাধ্যমে ওয়েব সাইটগুলোর মধ্যে শক্তিশালী সংযোগ সংস্থাপিত হয়। anchor tag এর সাহায্যে সংযোগ দিয়ে লিংক তৈরী করা হয়। টেক্সট, ইমেজ, ফর্ম এর সাহায্যেও লিংক তৈরী করা যায়।এইচটিএমএল-হাইপারটেক্সক্ট | HTML-Hypertext reference (href)href attribute এমন একটি রেফারেন্স নিদের্শ করে যার সাথে লিংক করা সাদৃশ্যপুর্ন। Hypertext reference হতে পারে Internal, Local, Global । Internal: একই পেজের মধ্যে লিংক তৈরী হওয়া। Local : আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হওয়া। Global: আপনার web site এর বাহিরে অন্য web site এর সাথে লিংক তৈরী হওয়া। Internal – href=”#anchorname” Local – href=”/../pics/picturefile.jpg” Global – href=”http://www.tizag.com/” এইচটিএমএল টেক্সক্ট লিংক (HTML-Text links) <a> এবং </a> tag দ্বারা যথাত্রুমে সংযোগের শুরু এবং শেষ বোঝায়। href attribute এর সাহায্যে কোন ধরনের সংযোগ স্থাপিত হবে তা নির্ধারিত হয়। href attribute কে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে লেখা কোন কিছু, তা পরে web পেজে লিংক হিসাবে দেখা যাবে। 1.<a href=”http://www.tizag.com/” target=”_blank” >Tizag Home</a> 2.<a href=”http://www.espn.com/” target=”_blank” >ESPN Home</a> 3.<a href=”http://www.yahoo.com/” target=”_blank” >Yahoo Home</a> প্রদর্শন: Global Link
Target attribute দ্বারা বোঝায়, হয় পেজ খুলতে হবে পৃথক window তে অথবা লিংক খুলতে হবে একই browser window তে ।
1.<a href=”http://www.ESPN.com” target=”_blank”>ESPN.COM</a> প্রদর্শন: _blank Target:
| ||||||||||||
| এইচটিএমএল এনকর ইমেইল লিংক (HTML Email Link,Anchor) | ||||||||||||
| ইমেইল লিংক তৈরী করা সহজ। যদি আপনি চান কেউ আপনার site এ Email করবে তবে ইমেইল লিংক এর মাধ্যমে তা করতে পারেন। সেখানে যে বিষয়ে তারা Email পাঠাবে সে বিষয় উল্লেখ করে দিতে পারেন।<a href=”mailto: ferdous@yahoo.com?subject=Feedback” > Ferdous@yahoo.com</a>প্রদর্শন: mailto: ferdous@webcoachbd.com?subject=feedback অনেক সময় ব্যবহারকারীর সুবির্ধাতে Email লিখে দেয়া হয়। mailto: ferdous@webcoachbd.com?subject=feedback <a href=”mailto: ferdous@webcoachbd.com?subject=Feedback&body=Sweet site!”> ferdous@ webcoachbd.com</a> প্রদর্শন: Complete Email: mailto: ferdous@webcoachbd.com?subject=feedback&body =sweet site! এইচটিএমএল ডাউনলোড লিংক (HTML-download links) ডাউনলোডের জন্য ফাইল place করা টেক্স লিংক এর মত। ডাউনলোডের জন্য image link ব্যবহার করলে বিষয়টি একটু জটিল হয়ে পড়ে।সেক্ষেত্রে thumbnail লিংক ব্যবহার করা উচিত। পরবর্তি লেসনে বিস্তারিত আলোচনা করা হয়েছে। HTML Code: <a href=”http://www.webcoachbd.com/pics/htmlT/blanktext.zip”>Text Document</a> প্রদর্শন: Download a Text Document: Text Document এইচটিএমএল ডিফল্ট লিংক (HTML-default links;base) <base> ট্যাগ কে এইচটিএমএল head element এর মধ্যে রাখা হয়।এভাবে default URL সেট করা হয় পেজের সকল লিংকের জন্য। আপনার হোম পেজের জন্য <base> tag স্থাপন করতে পারেন। 1.<head> 2.<base href=”http://www.webcoachbd.com/”> 3.</head> |
| এইচটিএমএল এনটাইটিজ টিউটোরিয়াল (HTML Entities Tutorial in Bangla) |
| এনটাইটি হল 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> |
| এইচটিএমএল কমেন্ট বা মম্তব্য (HTML Comments Tutorial in Bangla) |
কমেন্ট আপনাকে ওয়েব ডেভেলপার হিসাবে এমন একটি পথ দেখাবে যেটা দ্বারা আপনি এটা নিয়ন্ত্রন করতে পারবেন যে কোন্ কোন্ লাইন ব্রাউজার দ্বারা নিস্ক্রিয় করা হবে।তিনটি কারনে আমরা কোডকে ignore করি।১. এইচটিএমএল ডকুমেন্ট এর ভিতরে note লিখে বা নিজের জন্য reminder লিখে ২.স্ক্রিপ্টিং ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর কিছু কমেন্ট বা মন্তব্য প্রয়োজন। . ৩.Temporarily comment প্রয়োজন যতক্ষন পর্যন্ত এইচটিএমএল এলিমেন্ট অসম্পুর্ন থাকে। 1.<!--Note to self: This is my banner image! Don't forget -->2.<img src="http://www.webcoachbd.com/pics/ferdousSugar.jpg" height="100" width="200"/>অন্যান্য ট্যাগ মত কমেন্ট এরও opening tag এবং closing tag আছে। <!– Opening Comment – > Closing Comment এইচটিএমএল – <!– এই লেখাটি কমেন্ট হয়ে থাকবে –>:ওয়েব ডেভেলপার হিসাবে আপনি অনেক কাজ অসম্পুর্ন রাখতে পারেন সেক্ষেত্রে অসম্পুর্ন কাজটিকে <!— — > কমেন্ট ট্যাগ এর ভিতর রাখতে পারেন।1.<!-- <input type="text"> size="12" /> -- Input Field -->যখন এইচটিএমএল ইলিমেন্টকে প্রদর্শন করতে চান তখন কমেন্ট ট্যাগটি উঠিয়ে দিবেন। 1.<input type="text" size="12" />প্রদর্শন: Input Field: |
| এইচটিএমএল ছবি টিউটোরিয়াল (HTML Images Tutorial in Bangla) |
| ছবি একটা গুরুত্বপুর্ন বিষয় এর সঠিক ব্যবহার আমাদের জানতে হবে। <img/> ট্যাগ ব্যবহার করে আমরা ওয়েব পেজ এ ইমেজ নিয়ে আসতে পারি।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:
Alt attribute নির্দিস্ট করে অলটারনেটিভ টেক্সট অর্থ্যাৎ যখন ইমেজ প্রদশির্ত হয় না তখন অলটারনেটিভ টেক্সটি প্রদশির্ত হয় । ইমেজ প্রদশির্ত না হওয়ার কারন হতে পারে ফাইলটি নষ্ট হয়ে গেছে বা browser ইমেজ ফাইলটি খুজে পাচ্ছে না। 1.<img src=”http://example.com/brokenlink/sunset.gif” alt=”Beautiful Sunset” /> প্রদর্শন: এইচটিএমএল-ছবি height এবং width: ইমেজের height এবং width ঠিক করার জন্য height এবং width attribute ব্যাবহার করা হয়। 1.<img src=”/sunset.gif” height=”50″ width=”100″> প্রদর্শন: এইচটিএমএল-Vertically এবং Horizontally align ছবি: Align এবং valign attribute ব্যবহার ইমেজের অবস্থান নির্ধারন করতে পারি।
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> প্রদর্শন:
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> প্রদর্শন:
এখানে 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> প্রদর্শন:
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> প্রদর্শন:
|
| এইচটিএমএল ব্যাকগ্রাউন্ড রং টিউটোরিয়াল (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> প্রদর্শন:
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> প্রদর্শন:
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> প্রদর্শন:
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> প্রদর্শন:
|
| এইচটিএমএল ব্যাকগ্রাউন্ড টিউটোরিয়াল (HTML Background Tutorial in Bangla) |
| ব্যাকগ্রাউন্ড এট্রিবিউট এর সাহায্যে এইচটিএমএল টেবিলে ইমেজকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে দেখানো যায়।1.<table height=”50″ width=”100″2.background=”http://www.tizag.com/pics/htmlT/background.jpg” > 3.<tr><td>This table has a background image</td></tr> 4.</table> প্রদর্শন:
উপরের উদাহরনে দেখা গিয়েছে যে টেবিল এর আকার ছবির আকারের সমান বলে কোন সমস্যা হয় নি । যদি টেবিল এর আকার ছবির আকারের চেয়ে বড় হয় তবে ব্যাকগ্রাউন্ড ছবি রিপিট হবে। 1.<table height=”200″ width=”300″ 2.background=”http://www.tizag.com/pics/htmlT/background.jpg” > 3.<tr><td>This table has a background image</td></tr> 4.</table> প্রদর্শন:
বিভিন্ন ফটো এডিটিং সফ্টওয়ার দিয়ে বিভিন্ন প্যাটার্নের ব্যাকগ্রাউন্ড ছবি এরং ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড ছবি তৈরী করা যায়। ট্রান্সপারেন্ট ইমেজের ফাইলটিকে gif ফরমেটে রাখতে হবে jpeg ফরমেটে নয়। 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> প্রদর্শন: 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> প্রদর্শন: |
| এইচটিএমএল ফ্রেম টিউটোরিয়াল (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> প্রদর্শন: টেবিলের ভিতর টেবিল
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./MadineKoJain.mp3Embed Attributes – প্রদর্শনের সাথে সর্ম্পকিত: Embeded media player এর বাহ্যিক রুপ কে কাস্টমাইজ করতে নিচের attribute কে সেট করতে হবে। ১. width – media player এর প্রসস্থতা ২. height – media player এর উচ্চতা ৩. hidden – যদি এর মান সত্য হয় তবে media player টি প্রদর্শিত হবে না। আমি সুপারিশ করব এই attributeটি ব্যবহার করতে যদি আপনি জেনে থাকেন ওয়েব পেজ এ চলা music টি ভিজিটর বন্ধ করা option না চান। 1./lastbreath.mp3 Embed Attributes – কার্যপ্রণালী : Embeded media player এর কার্যপ্রণালী কে কাস্টমাইজ করতে নিচের attribute কে সেট করতে হবে। autostart – এই attribute এর দুটি মান false বা true । যদি মান true দেয়া হয় তবে ওয়েব পেজ খোলার সাথে সাথে গান শুরু হবে। loop – এই attribute এর দুটি মান false বা true। true সেট করা থাকলে গানটি রিপিট হবে আর false থাকলে হবে না। volume – এই attribute দ্বারা media file এর volume সেট করা হয়। এর সীমা হল ০-১০০। 1./beethoven.mid |
| এইচটিএমএল ভিডিও টিউটোরিয়াল (HTML Video Tutorial in Bangla) |
| লেখক মো: ফেরদৌস আলম |
| Music ফাইল এর মত ভিডিও ফাইল কে ট্যাগ দিয়ে ওয়েব পেজ এ প্রদর্শন করা যায়। image ট্যাগ এর মত embed ট্যাগ এর কোন closing ট্যাগ এর প্রয়োজন নেই। src attribute এর মাধ্যমে সঠিক URL(local বা global) ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়।1.http://www.webcoachbd.com/files/html/htmlexample.mpegপ্রদর্শন: আপনি 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 এর মত ট্যাগ এর আরো 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.” 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>WashDishes</del></li> 5.</ol> প্রদর্শন:
|
| এইচটিএমএল ফর্ম ( 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 Top of Form Password: Bottom of Form 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> প্রদর্শন: চেকবক্স: Top of Form Bottom of Form Top of Form Donald Bugs Bunny Scooby Doo Bottom of Form Top of Form Bottom of Form 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) |
2.<option>California– CA</option>
3.<option>Colorado– CO</option>
4.<option>Connecticut– CN</option>
5.</select>
প্রদর্শন: Drop Down List
selected attributeএর সাহায্যে আমরা পছন্দমত বিষয়টিকে select করা অবস্থায় প্রদর্শন করতে পারে।
HTML – Selection Forms:
size attribute ব্যবহার করে আপনারা drop down list ভেঙেগ পুরো লিস্ট প্রদর্শন করতে পারেন।
size attribute টি select করে যে কতকগুলো options এক সাথে প্রদর্শন হবে লিস্টটি scroll করার পুর্বে। selected attributeএর সাহায্যে আমরা পছন্দমত বিষয়টিকে select করা অবস্থায় প্রদর্শন করতে পারে।
1.<select size=”3″>
2.<option>California– CA</option>
3.<option>Colorado– CO</option>
4.<option>Connecticut– CN</option>
5.</select>
প্রদর্শন: Selection Forms
HTML – Selecting Multiples:
multiple attribute এর মাধ্যমে আপনারা একের অধিক বিষয় select করতে পারেন।
1.<select multiple=”yes” size=”3″>
2.<option>California– CA</option>
3.<option>Colorado– CO</option>
4.<option>Connecticut– CN</option>
5.</select>
একটি মন্তব্য পোস্ট করুন