এইচটিএমএল টিউটোরিয়াল | ভূমিকা
নোটপ্যাড। Notepad open করে তৈরী হোন।যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন।
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
এলিমেন্টস(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 হবার পর নিম্নের কোডটি লিখবো
এভাবে লেখার পর 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 এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়।
<body> element
body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়।
এই কোডগুলি নোটপ্যাডে কপি পেস্ট করে .html extension দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী প্রথম ওয়েব পেজ দেখুন।
এইচটিএমএল ট্যাগ টিউটোরিয়াল (HTML Tag Tutorial in Bangla)
যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
ট্যাগ এর প্রধান তিনটি অংশ আছে
ক. শুরু করার ট্যাগ(opening tag)
খ.ধারনকৃত অংশ(contents)
গ.শেষ করার ট্যাগ (closing tag)।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।
ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো।
আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।
প্রদর্শন:
–Line Break–
- এইচটিএমএল (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 হবার পর নিম্নের কোডটি লিখবো
1.<html>2.Welcome to Bangladesh3.</html>সেভ করা ফাইলটিকে 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 যা 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 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 Tag2.<br /> -- Line Break Tag3.<input type="text" size="12" /> -- Input Field–Line Break–
এইচটিএমএল এট্রিবিউট টিউটোরিয়াল (HTML Attribute tutorial in Bangla)
ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি
আমরা একটি টেবিল তৈরী করি তবে attributes ব্যাবহার করে টেবিল এর প্রস্থ,
উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ও
উচ্চতার মান দিতে পারি।
Class বা id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে।
Class বা id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার
অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট ,সিএসএস (এগুলো সম্পর্কে
পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে।
প্রদর্শন
প্রদর্শন:
এই attribute টি TextField প্রদর্শনের বিষয়ে ভুমিকা নেই তবে পর্দার অন্তরালে এর অনেক বেশি অবদান(javascript , css)
<h2 title=”Hello There!”>Titled Heading Tag</h2>
প্রদর্শন
কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।
<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.
প্রদর্শন:
প্রদর্শন:
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.
প্রদর্শন:
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 হিসাবে প্রদর্শিত হয় এবং আকার যা হেডিং এর নম্বরের উপর নির্ভর করে। হেডিং নম্বর গুলো ১ হতে ৬ এর মধ্যে সীমাবদ্ধ। এখানে ১ সবচেয়ে বড় এবং ৬ সবচেয়ে ছোট হেডিং
লক্ষ করার বিষয় এইযে প্রতিটি হেডিং এর নিজস্ব লাইন ব্রেক option আছে ।
এটা হেডিং এর built in attribute । হেডিং লেখার সময় অটোমেটিক লাইন ব্রেক
হয়ে যায়।
প্রদর্শন:
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 দিলে নিচের লাইনে চলে যায়,এটার কাজ ঠিক তেমনই।
প্রদর্শন:লাইন ব্রেক এর সাহায্যে চিঠির address তৈরী করতে পারি।
Will Mateson
Box 61
Cleveland, Ohio
আবার চিঠির সমাপ্ত ঘোষনা করতে পারি।
প্রদর্শন:
Sincerely,
Kevin Sanders
Vice President
আরও একটা বিষয় মনে রাখা প্রয়োজন যে লাইন ব্রেক ট্যাগ এর কোন closing tag এর প্রয়োজন নেই।
ট্যাগ দারা প্রকাশ করা হয়।
ট্যাগটি ব্যবহার করে screen এর উপর সমান্তরাল লাইন প্রদর্শন করে। line break tag এর মত Horizontal rule tag এর কোন closing tag নেই।
প্রদর্শন:
Use
Them
Sparingly
Horizontal rule কোন গ্রন্থপঞ্জি বা কোন টেবিলের বিষয় সমুহ প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়।
প্রদর্শন:
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; অভিধান
প্রদর্শন:
Start attributes দিয়ে নিজের ইচ্ছানুযায়ী নম্বর হতে লিস্ট শুরু করা যায়।
প্রদর্শন:
5.Enroll in College
6.Get a Degree
প্রদর্শন:
আমরা type attributes ব্যবহার করে unordered list এর অন্যান্য বুলেট ব্যবহার করতে পারি।
<ul type=”square”>
<ul> type=”dics”>
<ul> type=”circle”>
<dl> tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার করা হয় ।
<dt> tag: যাকে সংজ্ঞায়িত(Define) করবো এই ট্যাগ ব্যবহার করে তার নাম লেখা হয়।
<dd> tag: <dt> tag এ যে নাম লেখা হয়েছে তার সম্পর্কে এখানে আলোচনা হয় ।
প্রদর্শন:
Fromage
French word for cheese. Voiture
French word for car.
এইচটিএমএল কালার কোড টিউটোরিয়াল (HTML Color code)
Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়।নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।
Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে rgb । প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)। rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)।
Hexadecimal হল ৬ digit কালারের উপস্থাপন। প্রথম দুটি digit(RR), Red value নির্দেশ করে পরবর্তি দুটি digit(GG), Green value নির্দেশ করে এবং সর্বশেষ দুটি digit(BB), Blue value নির্দেশ করে।
এইচটিএমএল হেক্সাডেসিমাল রং
bgcolor=”#RRGGBB”
তাই বর্ণকে নম্বর হিসাবে ব্যবহার করা হয়। এই বর্ণকে পরে নম্বরে রুপান্তর করা হয়।নিচে একটি উদাহরন দেয়া হলো।
এখানে “F” হচ্ছে সবোর্চ্চ পরিমান এবং এই কালারটি (“#FFFFFF”) সাদা কালার নিদের্শ করে। নিচে বিষয়টি বিস্তারিত আলোচনা করা হয়েছে।
উপরের সূত্রটি বাস্তব। প্রথমে 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> ট্যাগ ব্যাবহার না করে সিএসএস(সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যাবহার করা উচিত।
প্রদর্শন:
Here is a size 5 font.
প্রদর্শন:
প্রদর্শন:
This paragraph has had its font formatted by the font tag!
প্রদর্শন:
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
প্রদর্শন:
এইচটিএমএল ব্যাকগ্রাউন্ড রং টিউটোরিয়াল (HTML Background Colors Tutorial in Bangla)
bgcolor এট্রিবিউট টি বিশেষভাবে ওয়েব পেজ এবং টেবিলের ব্যাকগ্রাউন্ড নিয়ন্ত্রন করে। Bgcolor এট্রিবিউট টিকে অনেক এইচটিএমএল ট্যাগ এর মধ্যে ব্যাবহার করা যায় তবে সবচেয়ে ভাল হয় <body> এবং <table> ট্যাগ এর মধ্যে ব্যাবহার করলে। অতিরিক্ত হিসাবে ব্যাকগ্রাউন্ড স্টাইল করতে চাইলে সিএসএস ব্যাকগ্রাউন্ড(CSS টিউটোরিয়ালে আরোচনা করা হয়েছে) দেখতে পারেন।
গঠন:
<tagname bgcolor =”value”>
প্রদর্শন:
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!
প্রদর্শন:
প্রদর্শন:
প্রদর্শন:
প্রদর্শন:
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)
ব্যাকগ্রাউন্ড এট্রিবিউট এর সাহায্যে এইচটিএমএল টেবিলে ইমেজকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে দেখানো যায়।
প্রদর্শন:
প্রদর্শন:
প্রদর্শন:
প্রদর্শন:
This table has a red transparent background image
এইচটিএমএল ফ্রেম টিউটোরিয়াল (HTML Frame)
ফ্রেম এর মাধ্যমে একই সময় একই ব্রাউজার উইন্ডো তে অনেক গুলো এইচটিএমএল ডকুমেন্ট প্রদর্শন করা যায়।
প্রদর্শন:
নিজে চেষ্টা করুন।
frameset – এটা একটা parent tag যা ফ্রেম page এর characteristics নির্দেশ করে।পৃথক পৃথক ফ্রেম framesetএর মধ্যে নির্দেশিত থাকে।
frameset cols=”#%, *”– Cols(column) যা ফ্রেম এর width নির্দেশ করে। উপরের উদাহরনে আমরা মেনু (1st column) নির্বাচন করেছি যা total page এর ৩০% এবং “*”, এর অর্থ total page এর ৭০% content(2nd column) নির্দেশিত হয়।
frame src=”/” ওয়েব পেজ এর লোকেশন ফ্রেমে লোড হয়।
frameset rows=”#%, *”-এর অর্থ frameset cols=”#%, *”– মতই।
প্রদর্শন:
নিজে চেষ্টা করুন।
scrolling=”(yes/no)”- ফ্রেম এর ভিতরে scrollহবে বাহবে না।
অনুগ্রহ করে কোডগুলি নিজে লিখে প্রাকটিস করে দেখুন।
এইচটিএমএল লেআউট টিউটোরিয়াল (HTML Layout Tutorial in Bangla)
এইচটিএমএল লেআউট হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে এইচটিএমএল
লেআউট তৈরী করা হয়।
প্রদর্শন: টেবিলের ভিতর টেবিল
ভাল ওয়েব সাইট এর বৈশিষ্ট্য।
প্রদর্শন:
নিজে চেষ্টা করুন।
প্রদর্শন:
নিজে চেষ্টা করুন।
এইচটিএমএল মিউজিক টিউটোরিয়াল (HTML Embed Music Tutorial in Bangla)
ওয়েব পেজ এ music ঢুকানো অনেক সহজ। Embed ট্যাগ এর সাহায্যে music ঢুকানো হয় এবং src attribute এর সাহায্যে media file এর লোকেশন ঠিক করা হয়।
১. width – media player এর প্রসস্থতা
২. height – media player এর উচ্চতা
৩. hidden – যদি এর মান সত্য হয় তবে media player টি প্রদর্শিত হবে না। আমি সুপারিশ করব এই attributeটি ব্যবহার করতে যদি আপনি জেনে থাকেন ওয়েব পেজ এ চলা music টি ভিজিটর বন্ধ করা option না চান।
autostart – এই attribute এর দুটি মান false বা true । যদি মান true দেয়া হয় তবে ওয়েব পেজ খোলার সাথে সাথে গান শুরু হবে।
loop – এই attribute এর দুটি মান false বা true। true সেট করা থাকলে গানটি রিপিট হবে আর false থাকলে হবে না।
volume – এই attribute দ্বারা media file এর volume সেট করা হয়। এর সীমা হল ০-১০০।
এইচটিএমএল আপলোড ( HTML Upload Form)
upload form ব্যবহার করে ইউজার pictures, movies, বা এমনকি নিজের webpages upload করতে পারে। একটা upload form হল এক ধরনের input form । আপনি সাধারনভাবে type attribute দিয়ে এর মান হিসাবে file লিখে upload form তৈরী করতে পারেন।
এখানে value 100 মানে file সর্বোচ্চ 100kb হতে পারবে।
প্রদর্শন:
এইচটিএমএল ড্রপডাউন লিস্ট ( HTML Drop down list)
ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <select> ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন
প্রদর্শন:ড্রপডাউন লিস্ট
উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।
প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়।
<select> ট্যাগের size এট্রিবিউট
<select> ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।
প্রদর্শন: <select> ট্যাগের size এট্রিবিউট
<select> ট্যাগের multiple এট্রিবিউট
multiple এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন।
প্রদর্শন: <select> ট্যাগের multiple এট্রিবিউট
*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।
আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।<optgroup> এলিমেন্ট দিয়ে এটা করা যায়। যেমন
প্রদর্শন:
ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <select> ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি <option> ট্যাগের মধ্যে রাখতে হবে।যেমন
প্রদর্শন:ড্রপডাউন লিস্ট
উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।
প্রতিটি <option> ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়।
<select> ট্যাগের size এট্রিবিউট
<select> ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে।
প্রদর্শন: <select> ট্যাগের size এট্রিবিউট
<select> ট্যাগের multiple এট্রিবিউট
multiple এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন।
প্রদর্শন: <select> ট্যাগের multiple এট্রিবিউট
*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।
আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।<optgroup> এলিমেন্ট দিয়ে এটা করা যায়। যেমন
প্রদর্শন:
1.<tag attributes ="value" attributes ="value">1.<table width="150" height="100">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 Heading
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
এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (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>Headings
are
great
for
titles
and subtitles
হেডিং এবং প্যারাগ্রাফ এর একত্রে ব্যবহার:
আমরা হেডিং এবং 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 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 দিলে নিচের লাইনে চলে যায়,এটার কাজ ঠিক তেমনই।
1.<p>2.Will Mateson<br />3.Box 61<br />4.Cleveland, Ohio<br />5.</p>Will Mateson
Box 61
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 কেট্যাগ দারা প্রকাশ করা হয়।
ট্যাগটি ব্যবহার করে screen এর উপর সমান্তরাল লাইন প্রদর্শন করে। line break tag এর মত Horizontal rule tag এর কোন closing tag নেই।
1.<hr>2.Use3.<hr><hr>4.Them5.<hr>6.Sparingly7.<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) অর্থ হচ্ছে নম্বর যেমন ১, ২, ৩ ইত্যাদি।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
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 Food5.Enroll in College
6.Get a Degree
এইচটিএমএল ক্রমিক লিস্ট (HTML ordered listscontinued)
আরও চার প্রকারের ধারাবাহিক লিস্ট(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 |
|
|
|
|
এইচটিএমএল বিনাক্রম লিস্ট (HTML unordered lists)
<ul> ট্যাগ সাহায্যে বুলেট লিস্ট তৈরী করা হয়। বুলেট লিস্ট আবার তিন প্রকার যেমন ১. squares ২.discs ৩.circles । default হিসাবে সাধারনত full discs ব্যাবহার করা হয়।1.<h4 align="center">Shopping List</h4>2.<ul>3.<li>Milk</li>4.<li>Toilet Paper</li>5.<li>Cereal</li>6.<li>Bread</li>7.</ul>Shopping List
- Milk
- Toilet Paper
- Cereal
- Bread
<ul type=”square”>
<ul> type=”dics”>
<ul> type=”circle”>
| type=”square” | type=”disc” | 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.</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- Colorcode: breaking the code)
নিচে টেবিলে দেখানো হয়েছে কিভাবে বর্ণ Hexadecimal system এর Numbering system কে বর্ধিত করে ১৬ digit এ উন্নীত করে।| Decimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| Hexadecimal | 0 | 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
This text is red
ফন্ট ফেস (Font face)
ফন্ট face এর ক্ষেত্রে সতর্ক হওয়া উচিত কারন আপনার সিস্টেম এ নির্ধারিত ফন্ট টি ইনস্টল দেয়া না থাকে তাহলে আপনি ঐ ফন্ট টি দেখতে পাবেন না এবং তার পরিবর্তে ডিফল্ট হিসাবে Times New Roman ফন্ট টি দেখতে পাবেন।1.<p>2.<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph3.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 |
প্রথম অক্ষরের সুন্দর স্টাইল:
ফন্ট কে কাস্টমাইজ করে যেকোন ধরনের স্টাইল করা যায়।1.<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize2.your font to achieve a desired look.</p>
Customize your font to achieve a desired look.
এইচটিএমএল লিংক টিউটোরিয়াল
আপনি চাইলে আপনার সাইটের কোন টেক্সটের উপর লিংক তৈরী করে দিতে পারেন
যেখানে ক্লিক করলে অন্য পেজ/সাইট আসবে। anchor tag এর সাহায্যে লিংক তৈরী
করা হয়। শুধু টেক্সট নয় আপনি চাইলে একটা মেইল এড্রেসের উপর লিংক দিতে
পারেন,একটা ছবির উপর লিংক দিতে পারেন,বড় কোন ওয়েব পেজের সুচিপত্র তৈরী করে
এর আইটেমগুলিতে লিংক দিতে পারেন (এসব লিংকে ক্লিক করলে পেজেরই ঐ অংশে যাবে
যেখান থেকে আইটেমটি শুরু হয়েছে)।
Hypertext reference হতে পারে Internal, Local, Global ।
ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে।
লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে।
গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে।
ইন্টারনাল- href=”#anchorname”
লোকাল- href=”/webcoachbd/../pics/picturefile.jpg”
গ্লোবাল- href=”http://www.tizag.com/”
প্রদর্শন: গ্লোবাল লিংক
Webcoachbd Home Google Home Yahoo Home
<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>
এইচটিএমএল এনটাইটিজ টিউটোরিয়াল (HTML Entities Tutorial in Bangla)
এনটাইটি হল symbol এর কাল্পনিক বিষয়। অনেক symbol যেমন ট্রেডমার্ক, কপিরাইট, বৈদেশিক মুদ্রা প্রতিক ইত্যাদি ওয়েব পেজ প্রদর্শন করতে হলে এনটাইটি বিষয়ে জানতে হবে।
প্রত্যেক এনটাইটি এর তিনটি অংশ থাকে যেমন:
১.প্রত্যেক Entity এমপারসেন্ড (ampersand) দিয়ে শুরু হয়- &
২.তারপর Entity এর নাম – copy
৩.শেষে semicolon যোগ করতে হয়-;
প্রদর্শন:
Everything that goes up, must come down!
আমরা এইচটিএমএল এ লেস দেন এবং গ্রেটার দেন চিহ্ন ব্যবহার করে ট্যাগ তৈরী করি। এসব চিহ্ন ওয়েব পেজ এ দেখাতে চাইলে এনটাইটি ব্যবহার করতে হবে।
প্রদর্শন:
Less than – <
Greater than – >
Body tag – <body>
এইচটিএমএল কমেন্ট বা মম্তব্য (HTML Comments Tutorial in Bangla)
১. এইচটিএমএল ডকুমেন্ট এর ভিতরে note লিখে বা নিজের জন্য reminder লিখে
২.স্ক্রিপ্টিং ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর কিছু কমেন্ট বা মন্তব্য প্রয়োজন। .
৩.Temporarily comment প্রয়োজন যতক্ষন পর্যন্ত এইচটিএমএল এলিমেন্ট অসম্পুর্ন থাকে।
অন্যান্য ট্যাগ মত কমেন্ট এরও opening tag এবং closing tag আছে।
<!– Opening Comment
— > Closing Comment
যখন এইচটিএমএল ইলিমেন্টকে প্রদর্শন করতে চান তখন কমেন্ট ট্যাগটি উঠিয়ে দিবেন।
প্রদর্শন: Input Field:
এইচটিএমএল ছবি টিউটোরিয়াল (HTML Images Tutorial in Bangla)
ছবি একটা গুরুত্বপুর্ন বিষয় এর সঠিক ব্যবহার আমাদের জানতে হবে। <img/> ট্যাগ ব্যবহার করে আমরা ওয়েব পেজ এ ইমেজ নিয়ে আসতে পারি।
প্রদর্শন:
দুটি উপায়ে আমরা ইমেজের সোর্স নির্দিস্ট করতে পারি।
১. Standard URL ব্যবহার করে
(src=http://www. webcoachbd.com/pics/htmlT/sunset.gif)
২. web server এ file কপি বা আপলোড করে
(src=”/../sunset.gif”)
এই picture file এর location এর সাথে .এইচটিএমএল file এর location এর সম্পর্ক আছে।
URL Types:
প্রদর্শন:
প্রদর্শন:
প্রদর্শন:
প্রদর্শন:
এইচটিএমএল টেবিল টিউটোরিয়াল (HTML Tables Tutorial in Bangla)
টেবিল হল Horizontal সারি এবং vertical কলামের বিন্যাস। এটা tabular data প্রদর্শনের ক্ষেত্রে অনেক গুরুত্বপুর্ন। ডকুমেন্টের এলিমেন্ট নিয়ন্ত্রনের জন্য ওয়েব ডিজাইনারদের কাছে এটা আরো বেশি গুরুত্বপুর্ন । সারি এবং কলামের ইন্টারসেকশনকে cell বলে। সকল এইচটিএমএল টেবিল <table> ট্যাগ দিয়ে শুরু হয় এবং </table> ট্যাগ দিয়ে শেষ হয়।
১.<tr> ট্যাগ Horizontal সারি নিদের্শ করে।
২ <td> ট্যাগ ঐ Horizontal সারির data cell নিদের্শ করে।
৩ <th> ট্যাগ data cell এর টেবিল heading হিসাবে কাজ করে।
৪ <tfoot> ট্যাগ টেবিলের footer যোগ করার জন্য ব্যবহার হয়।
প্রদর্শন:
প্রদর্শন:
প্রদর্শন:
প্রদর্শন:
হাইপারটেক্সক্ট রেফারেন্স(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–linkTarget)
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>
এইচটিএমএল এনটাইটিজ টিউটোরিয়াল (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" />এইচটিএমএল ছবি টিউটোরিয়াল (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:
| 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 ইমেজ ফাইলটি খুজে পাচ্ছে না।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 ব্যবহার ইমেজের অবস্থান নির্ধারন করতে পারি।- 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!
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>| 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 |
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 is3.where you change the pages background. Now continue the lesson to4.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 ফরমেটে নয়।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 |
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>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.<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 ফাইল এর মত ভিডিও ফাইল কে ট্যাগ দিয়ে ওয়েব পেজ এ প্রদর্শন করা
যায়। image ট্যাগ এর মত embed ট্যাগ এর কোন closing ট্যাগ এর প্রয়োজন
নেই। src attribute এর মাধ্যমে সঠিক URL(local বা global) ঠিক করে ভিডিও
ওয়েব পেজে প্রদর্শন করা যায়।
প্রদর্শন:
আপনি href attribute এর মাধ্যমেও সঠিক URL ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়।
(রাইট বাটন ক্লিক করে play)
.swf files – এই ফরমেটটি হচ্ছে ফ্লাশ
.wmv files – এই ফরমেটটি হচ্ছে মাইক্রোসফট উইন্ডোজ মিডিয়া টাইপ।
.mov files – এই ফরমেটটি হচ্ছে এপল কুইক টাইম মিডিয়া
.mpeg files – এটি একটি standard ফরমেট যা Moving Pictures Expert Group দ্বারা compression movie ফাইল তৈরী হয়েছে।
উপরের ফরমেট গুলোর মধ্যে ইন্টানেটে বেশি ব্যবহার হয় swf, mpeg এই ফরমেট গুলো ।
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 করা হয়। এর সীমা হল ০-১০০।
Leftmargin: body element. এর বাম পাশের মারজিন।
topmargin :body element এর উপরের মারজিন।
বা
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 এর মত ট্যাগ এর আরো 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:
AttributesLeftmargin: body element. এর বাম পাশের মারজিন।
topmargin :body element এর উপরের মারজিন।
1.<body topmargin="50">2.<body leftmargin="50">
show
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 এর মাধ্যমে কালার প্রদর্শন করা যায়।
প্রদর্শন:
ডিভ কালার উদাহরন
beginning and ending ট্যাগ এর মাধ্যমে div এলিমেন্ট সকল এইচটিএমএল এলিমেন্ট ধারন করতে পারে।
প্রদর্শন:
এই্চটিএমএল ডিভ লেআউট
প্রদর্শন: Exponents:
23 = 8
14x
প্রদর্শন: Footnote
“It was a lover’s tryst1.”
1. Secret meeting between lovers
প্রদর্শন:
This text is subscripted!
প্রদর্শন:
প্রদর্শন: Strikethrough
This text isscratched out!
প্রদর্শন:
ওয়েব সার্ভার হতে তথ্য(name, email address, credit card, ইত্যাদি) গ্রহনের ক্ষেত্রে ওয়েবমাস্টার এর জন্য ফর্ম গুরুত্বপুর্ন tool হিসাবে কাজ। আপনার চাহিদা অনুযায়ী ফর্ম দর্শক হতে ইনপুট গ্রহন করে। আপনি এখান থেকে ডেটা সঞ্চয় করতে পারেন , order করতে পারেন, ব্যাবহারকারীর পরিসংখ্যান জমা করতে পারেন,আপনার forum এ ঐ ব্যক্তিটিকে রেজিস্ট্রেশন করাতে পারেন ইত্যাদি ।
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:
এইচটিএমএল -Type Attribute:
Type attributes এর সাহায্যে এক প্রকারের input tag নির্দেশ করতে পারি।নিচে কতকগুলো input tag দেয়া হলো।
১. “text”
২. “password”
৩. “checkbox”
৪. “radio”
৫. “submit”
৬. “reset”
<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
যেহেতু আমরা সাবমিট বাটন তৈরী করেছি তাই নতুন এট্রিবিউট প্রয়োজন তা হচ্ছে value এট্রিবিউট। আমরা যে শব্দকে value এট্রিবিউট এর মান হিসাবে নির্বাচন করবো তা বাটন উপর প্রদর্শিত হবে। “Submit” or “Continue” শব্দগুলো value এট্রিবিউট এর মান হিসাবে ব্যবহার হয়। .
প্রদর্শন: সাবমিট বাটন
প্রদর্শন: রিসেট বাটন:
এইচটিএমএল টেক্সক্ট ফিল্ড (HTML Text Field)
Text fields হল ছোট আয়তাক্ষেত্র যা আপনাকে কোন টেক্স ইনপুট করতে এবং সেই তথ্য web server পাঠাতে সাহায্য করবে। এসব তথ্যগুলো scripting language যেমন (PHP, PERL, or ASP) এর মাধ্যমে প্রক্রিয়া হয়।
প্রদর্শন: Text Fields:
প্রদর্শন: Maxlength Attribute
Text Field Values:
এইচটিএমএল টেক্সক্ট এরিয়া (HTML Text Area)
টেক্সক্ট এরিয়া ব্লগ এর মত এটা ইউজার থেকে তথ্য তুলে আনতে ব্যবহৃত হয়। Paragraphs, essays, or memos সমূহ কাট পেষ্ট করে টেক্সক্ট এরিয়া তে বসানো যায় এবং সাবমিট করা যায়।টেক্সক্ট এরিয়া এর opening এবং closing ট্যাগ রয়েছে। টেক্সক্ট এরিয়া ট্যাগ এর ভিতর কোন কিছু লিখলে তা ওয়েব পেজ এর টেক্সক্ট এরিয়া তে প্রদর্শিত হয়।
প্রদর্শন
Text Area!
প্রদর্শন:
Text Area!
Text Area!
Text Area!
১.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র ভিতরে মুড়িয়ে ফেলে না এবং একটি লাইনে অনবরত চলতে থাকে।
প্রদর্শন: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.
প্রদর্শন: 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.
প্রদর্শন:
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.
প্রদর্শন:
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.
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 content10.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 ব্যবহার করে আমরা টেক্স বোল্ড করতে পারি।
প্রদর্শন: Bold:
প্রদর্শন:
Don’t touch that!
dictionary fashion.লেখার জন্য আমরা bold tag ব্যবহার করতে পারি।
প্রদর্শন: Dictionary
Cardio: Latin word meaning of the heart.
প্রদর্শন: HTML Italics:
Italic tag! Emphasized Text!
Create a blockquote!
Format your addresses!
বা
প্রদর্শন: HTML Dictionary
শুধু তাদের ক্রম ঠিক থাকলো কিনা তা দেখে নিবেন।
প্রদর্শন:
প্রদর্শন: Format Links:
1.<b>This text is entirely BOLD!</b>
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>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>!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
Hyper Text Markup LanguageorHTML
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 external2.links throughout your texts as references to your viewers,3.we will discuss4.<a href="/" target="_blank" title="Tizag Links">5.<b><i>HTML Links</i></b>6.</a>7.in a later lesson.</p>
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
পরিবর্তন করতে পারে।
প্রদর্শন: Computer Code
This text has been formatted to be computer
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.
প্রদর্শন: Code Links:
Feel free to search
প্রদর্শন:
1.This text has been formatted to be computer <code>code</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> for4.anything you wish to find on the internet.</p>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!
এইচটিএমএল সুপারস্ক্রিপ্ট,সাবস্ক্রিপ্ট,স্ট্রাইকথ্রো
<p>This text is <sup>superscripted!</sup></p>প্রদর্শন: Superscript:This text is superscripted!
HTML – Exponents
অংকে exponential ব্যবহার করা জন্য <sup> tag ব্যবহার করতে হয়।1.2<sup>3</sup> = 82.14<sup>x</sup>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“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 - Water2.<p>O<sub>2</sub> - Oxygen3.<p>CO<sub>2</sub> - Carbon Dioxide
H2O – Water
O2 – Oxygen
CO2 – Carbon Dioxide
O2 – Oxygen
CO2 – Carbon Dioxide
HTML – Strikethrough
<del> tag এর মাধ্যমে কোন লেখাকে ক্রস দেওয়া যায়।1.<p>This text is <del>scratched</del> out!</p>This text is
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
Cook DinnerWash Dishes
ওয়েব সার্ভার হতে তথ্য(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" />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" />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!" />এইচটিএমএল টেক্সক্ট এরিয়া (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 desired3.look for your textareas. Since it makes everything nice and4.easy to read.5.</textarea>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 desired3.look for your textareas. Since it makes everything nice and4.easy to read.5.</textarea>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 desired3.look for your text areas. Since it makes everything nice and4.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 desired3.look for your text areas. Since it makes everything nice and4.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 ব্যবহার করা সবচেয়ে ভাল।
প্রদর্শন: Radios:
Italian:
Greek:
Chinese:
একই ফর্ম এ দুইটি ভিন্ন সেট রেডিওর আরও উদাহরন দেয়া হল।
প্রদর্শন: Multiple Radios:
Italian:
Greek:
Chinese:
Male:
Female:
Greek:
Chinese:
1.Italian: <input type="radio" name="food" />2.Greek: <input type="radio" name="food" />3.Chinese: <input type="radio" name="food" />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" />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:
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"/>প্রদর্শন:
এইচটিএমএল ড্রপডাউন লিস্ট ( 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>উপরের উদাহরনে দেখুন 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> ট্যাগের 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>*৭ নম্বর লাইনে যদি 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>ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে <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>উপরের উদাহরনে দেখুন 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> ট্যাগের 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>*৭ নম্বর লাইনে যদি 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>Genericattributes:
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 । |
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন
আপনাকে ধন্যবাদ ভেদরগঞ্জ কোচিং সেন্টার এন্ড ট্রেনিং ইন্সটিটিউট পরিবারের পক্ষ থেকে।