Web Design Part-2 HTML এইচটিএমএল ব্যাকগ্রাউন্ড রং টিউটোরিয়াল (HTML Background Colors Tutorial in Bangla) লেখক মো: ফেরদৌস আলম bgcolor এট্রিবিউট টি বিশেষভাবে ওয়েব পেজ এবং টেবিলের ব্যাকগ্রাউন্ড নিয়ন্ত্রন করে। Bgcolor এট্রিবিউট টিকে অনেক এইচটিএমএল ট্যাগ এর মধ্যে ব্যাবহার করা যায় তবে সবচেয়ে ভাল হয় এবং ট্যাগ এর মধ্যে ব্যাবহার করলে। অতিরিক্ত হিসাবে ব্যাকগ্রাউন্ড স্টাইল করতে চাইলে সিএসএস ব্যাকগ্রাউন্ড(CSS টিউটোরিয়ালে আরোচনা করা হয়েছে) দেখতে পারেন। গঠন: 1. 2.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. 6. প্রদর্শন: 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. 02.A lime colored table background using color names. 03. 04. 05. 06. 07.A red colored table background using hexadecimal values #FF0000. 08. 09. 10. 11. 12.A blue colored table background using RGB values rgb(0, 0, 255). 13. প্রদর্শন: 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. 2.This Row is Yellow! 3.This Row is Gray! 4.This Row is Yellow! 5.This Row is Gray! 6.This Row is Yellow! 7.This Row is Gray! 8. প্রদর্শন: 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. 2. 3.Green Bay 4.13 5. 6.New England 7.27 8. প্রদর্শন: Green Bay 13 New England 27 1. 2. 3. 4.This paragraph tag has... 5. 6. 7. প্রদর্শন: 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. 3.This table has a background image 4. প্রদর্শন: This table has a background image এইচটিএমএল ব্যাকগ্রাউন্ড রিপিট: উপরের উদাহরনে দেখা গিয়েছে যে টেবিল এর আকার ছবির আকারের সমান বলে কোন সমস্যা হয় নি । যদি টেবিল এর আকার ছবির আকারের চেয়ে বড় হয় তবে ব্যাকগ্রাউন্ড ছবি রিপিট হবে। 1. 3.This table has a background image 4. প্রদর্শন: This table has a background image এইচটিএমএল প্যাটার্নড ব্যাকগ্রাউন্ড বিভিন্ন ফটো এডিটিং সফ্টওয়ার দিয়ে বিভিন্ন প্যাটার্নের ব্যাকগ্রাউন্ড ছবি এরং ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড ছবি তৈরী করা যায়। ট্রান্সপারেন্ট ইমেজের ফাইলটিকে gif ফরমেটে রাখতে হবে jpeg ফরমেটে নয়। 1. 3.This table has a background patterned image 4. প্রদর্শন: This table has a background patterned image 1. 2.This table has a red transparent background image 3. প্রদর্শন: This table has a red transparent background image এইচটিএমএল ফ্রেম টিউটোরিয়াল (HTML Frame) লেখক মো: ফেরদৌস আলম ফ্রেম এর মাধ্যমে একই সময় একই ব্রাউজার উইন্ডো তে অনেক গুলো এইচটিএমএল ডকুমেন্ট প্রদর্শন করা যায়। এইচটিএমএল-a generic frame page: ফ্রেমের বেশি ব্যবহার হল একটি ফ্রেম এ মেনু আর একটি ফ্রেম এ তার কনটেন্ট ।যখন কেউ মেনু লিংকে ক্লিক করে তখন সেই ওয়েব পেজটি কনটেন্ট পেজে খোলে। 1. 2. 3. 4. 5. 6. 7. 8. প্রদর্শন: এখানে ক্লিক করুন frameset – এটা একটা parent tag যা ফ্রেম page এর characteristics নির্দেশ করে।পৃথক পৃথক ফ্রেম frameset এর মধ্যে নির্দেশিত থাকে। frameset cols=#%, *- Cols(column) যা ফ্রেম এর width নির্দেশ করে। উপরের উদাহরনে আমরা মেনু (1st column) নির্বাচন করেছি যা total page এর ৩০% এবং *, এর অর্থ total page এর ৭০% content(2nd column) নির্দেশিত হয়। frame src=/ ওয়েব পেজ এর লোকেশন ফ্রেমে লোড হয়। ব্যনার বা টাইটেল যোগ করা: 1. 2. 3. 4. 5. 6. 7. 8. frameset rows=#%, *-এর অর্থ frameset cols=#%, *- মতই। FrameBorder and FrameSpacing: FrameBorder এবং FrameSpacing attribute এর সাহায্যে ফ্রেম এর Spacing এবং দুটি ফ্রেমের মধ্যে ugly gray lines রিমুভ করা যায়। 1. 2. 3. 4. 5. 6. 7. 8. প্রদর্শন: এখানে ক্লিক করুন Noresize and Scrolling: Noresize attribute এর সংশ্লিষ্ট ফ্রেমকে আমরা রিসাইজ করতে পারি না। scrolling=(yes/no)- ফ্রেম এর ভিতরে scroll হবে বা হবে না। 1. 2. 3. 4. 5. 6. 7. 8. অনুগ্রহ করে কোডগুলি নিজে লিখে প্রাকটিস করে দেখুন। এইচটিএমএল লেআউট টিউটোরিয়াল (HTML Layout Tutorial in Bangla) লেখক মো: ফেরদৌস আলম এইচটিএমএল লেআউট হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে এইচটিএমএল লেআউট তৈরী করা হয়। 1. 2. 3. 4.Tables inside tables! 5. 6. প্রদর্শন: টেবিলের ভিতর টেবিল Tables inside tables! এইচটিএমএল স্টান্ডার্ড লেআউট Standard layout সাধারনত উপরে অবস্থিত ব্যানার, নেভিগেশন এবং content বা প্রদর্শন বক্স। এগুলো হলো ভাল ওয়েব সাইট এর বৈশিষ্ট্য। 01. 03. 04. 05.Place a banner here 06. 07. 08. 09. 10.Links! 11.Links! 12.Links! 13. 14. 15. 16.Content goes here 17. 18. প্রদর্শন: লেআউট উদাহরন 01. 03. 04. 05.Banner goes here 06. 07. 08. 09. 10.Links! 11.Links! 12.Links! 13. 14. 15. 16. 17.Content goes here 18. 19. প্রদর্শন: লেআউট উদাহরন এইচটিএমএল মিউজিক টিউটোরিয়াল (HTML Embed Music Tutorial in Bangla) লেখক মো: ফেরদৌস আলম ওয়েব পেজ এ music ঢুকানো অনেক সহজ। Embed ট্যাগ এর সাহায্যে music ঢুকানো হয় এবং src attribute এর সাহায্যে media file এর লোকেশন ঠিক করা হয়। 1. Embed Attributes – প্রদর্শনের সাথে সর্ম্পকিত: Embeded media player এর বাহ্যিক রুপ কে কাস্টমাইজ করতে নিচের attribute কে সেট করতে হবে। ১. width - media player এর প্রসস্থতা ২. height - media player এর উচ্চতা ৩. hidden – যদি এর মান সত্য হয় তবে media player টি প্রদর্শিত হবে না। আমি সুপারিশ করব এই attributeটি ব্যবহার করতে যদি আপনি জেনে থাকেন ওয়েব পেজ এ চলা music টি ভিজিটর বন্ধ করা option না চান। 1. Embed Attributes – কার্যপ্রণালী : Embeded media player এর কার্যপ্রণালী কে কাস্টমাইজ করতে নিচের attribute কে সেট করতে হবে। autostart – এই attribute এর দুটি মান false বা true । যদি মান true দেয়া হয় তবে ওয়েব পেজ খোলার সাথে সাথে গান শুরু হবে। loop - এই attribute এর দুটি মান false বা true। true সেট করা থাকলে গানটি রিপিট হবে আর false থাকলে হবে না। volume - এই attribute দ্বারা media file এর volume সেট করা হয়। এর সীমা হল ০-১০০। 1. এইচটিএমএল ভিডিও টিউটোরিয়াল (HTML Video Tutorial in Bangla) লেখক মো: ফেরদৌস আলম Music ফাইল এর মত ভিডিও ফাইল কে ট্যাগ দিয়ে ওয়েব পেজ এ প্রদর্শন করা যায়। image ট্যাগ এর মত embed ট্যাগ এর কোন closing ট্যাগ এর প্রয়োজন নেই। src attribute এর মাধ্যমে সঠিক URL(local বা global) ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়। 1. প্রদর্শন: আপনি href attribute এর মাধ্যমেও সঠিক URL ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়। 1. 2.motiontween1easy.swf (রাইট বাটন ক্লিক করে play) এইচটিএমএল -ভিডিওর ধরন Flash movies (.swf), AVIs (.avi), and MOVs (.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. 2. প্রদর্শন: Top Margin Left Margin HTML - Base Text: Text attributes এর মাধ্যমে Body tag এর ভিতরের সকল টেক্সট এর কালার ঠিক করা যায়। 1. বা 1. এইচটিএমএল ডিভ টিউটোরিয়াল ( HTML Div Tutorial in Bangla) লেখক মো: ফেরদৌস আলম ট্যাগ অন্যান্য ট্যাগ এর পাত্র হিসাবে কাজ করে অনেকটা body ট্যাগ এর মত। Div এলিমেন্ট গুলো হলো block এলিমেন্ট যারা অন্তরালে থেকে অন্যান্য ট্যাগ গুলোকে একত্রে করে। সিএসএস এর ক্ষেত্রে Div এলিমেন্ট অনেক গুরুত্তপুর্ন। নিচে ডিভে ব্যবহৃত কতকগুলো attributes দেয়া হলো। id width height title style দর্শকদের strong visualization এর জন্য ডিভের style attribute এর মাধ্যমে কালার প্রদর্শন করা যায়। 1. 2. 3.SEARCH LINKS 4.Google 5. 6. প্রদর্শন: ডিভ কালার উদাহরন এইচটিএমএল ডিভ লেআউট টেবিল লেআউট অথবা ফ্রেম ছাড়াও ৩য় অল্টারনেটিভ হিসাবে div এলিমেন্ট ব্যবহার করা যায়। beginning and ending ট্যাগ এর মাধ্যমে div এলিমেন্ট সকল এইচটিএমএল এলিমেন্ট ধারন করতে পারে। 01. 02.HOME | 03.CONTACT | 04.ABOUT 05. 06. 07.Content Articles 08.This paragraph would be your content paragraph with all of your readable material. 09. প্রদর্শন: এই্চটিএমএল ডিভ লেআউট 01. 02.HOME | 03.CONTACT | 04.ABOUT | 05.LINKS 06. 07. 08.Content Articles 09.This paragraph would be your content 10.paragraph with all of your readable material. 11.Content Article Number Two 12.Heres another content article right here. 13. প্রদর্শন: ডিভ লেআউট এইচটিএমএল বোল্ড এবং ইটালিক (HTML Bold & Italic) লেখক মো:ফেরদৌস আলম bold tag ব্যবহার করে আমরা টেক্স বোল্ড করতে পারি। 1.This text is entirely BOLD! প্রদর্শন: Bold: This text is entirely BOLD! টেক্সকে highlight করতে bold tag ব্যবহার করতে পারি।. 1.Dont touch that! প্রদর্শন: Dont touch that! dictionary fashion.লেখার জন্য আমরা bold tag ব্যবহার করতে পারি। 1.Cardio: Latin word meaning of the heart. প্রদর্শন: 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 tag! 2.Emphasized Text! 3.Create a blockquote! 4.Format your addresses! প্রদর্শন: HTML Italics: Italic tag! Emphasized Text! Create a blockquote! Format your addresses! 1.HTML 2.Hyper Text Markup Language বা 1.HTML 2.Hyper Text Markup Language প্রদর্শন: HTML Dictionary HTML Hyper Text Markup Language or HTML Hyper Text Markup Language HTML Bold and Italics and the tags উভয়কেই একসাথে text format এর জন্য ব্যবহার করা যায়। শুধু তাদের ক্রম ঠিক থাকলো কিনা তা দেখে নিবেন। 1.Phillip M. Rogerson MD প্রদর্শন: Phillip M. Rogerson MD and the tags উভয়কেই টেক্স লিংকে ব্যবহার করলে ব্যাপার ভাল বুঝা যায়। 1.Include several external 2.links throughout your texts as references to your viewers, 3.we will discuss 4. 5.HTML Links 6. 7.in a later lesson. প্রদর্শন: 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! প্রদর্শন: 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.Feel free to search 2.Google 3. for 4.anything you wish to find on the internet. প্রদর্শন: Code Links: Feel free to search Google for anything you wish to find on the internet. HTML - Preformatting tag এর সুবিধা হল HTML coding এর সময় যেভাবে আমরা লাইন ব্রেক, স্পেস নির্দেশ করে দিবো ঠিক সেভাবে টেক্সট প্রদর্শিত হবে।অর্থ্যাৎ যেভাবে কোড লিখবেন সেভাবেই আউটপুট দেখাবে। 1. 2.Roses are Red, 3.এখানে কয়েকটা স্পেস আছেViolets are blue, 4.I may sound crazy, 5.এখানে কয়েকটা স্পেস আছেBut I love you! 6. প্রদর্শন: Roses are Red, Violets are blue, I may sound crazy, But I love you! এইচটিএমএল সুপারস্ক্রিপ্ট,সাবস্ক্রিপ্ট,স্ট্রাইকথ্রো লেখক মো:ফেরদৌস আলম 1.This text is superscripted! প্রদর্শন: Superscript: This text is superscripted! HTML – Exponents অংকে exponential ব্যবহার করা জন্য tag ব্যবহার করতে হয়। 1.23 = 8 2.14x প্রদর্শন: Exponents: 23 = 8 14x HTML – ফুটনোট: উপন্যাস বা প্রবন্ধে দেখা যায় কোন লেখার reference দেয়ার জন্য tag ব্যবহার হয় যা ফুটনোটকে নির্দেশ করে। 1.It was a lovers tryst1. 2. 3.1. Secret meeting between lovers প্রদর্শন: Footnote It was a lovers tryst1. ________________________________________ 1. Secret meeting between lovers HTML -Subscript 1.This text is subscripted! প্রদর্শন: This text is subscripted! 1.H20 - Water 2.O2 - Oxygen 3.CO2 - Carbon Dioxide প্রদর্শন: H2O - Water O2 - Oxygen CO2 - Carbon Dioxide HTML – Strikethrough tag এর মাধ্যমে কোন লেখাকে ক্রস দেওয়া যায়। 1.This text is scratched out! প্রদর্শন: Strikethrough This text is out! HTML - Check Off Task: 1. 2.Clean my room 3.Cook Dinner 4.Wash Dishes 5. প্রদর্শন: 1. Clean my room2. 3. এইচটিএমএল ফর্ম ( HTML Form) লেখক মো: ফেরদৌস আলম ওয়েব সার্ভার হতে তথ্য(name, email address, credit card, ইত্যাদি) গ্রহনের ক্ষেত্রে ওয়েবমাস্টার এর জন্য ফর্ম গুরুত্বপুর্ন tool হিসাবে কাজ। আপনার চাহিদা অনুযায়ী ফর্ম দর্শক হতে ইনপুট গ্রহন করে। আপনি এখান থেকে ডেটা সঞ্চয় করতে পারেন , order করতে পারেন, ব্যাবহারকারীর পরিসংখ্যান জমা করতে পারেন,আপনার forum এ ঐ ব্যক্তিটিকে রেজিস্ট্রেশন করাতে পারেন ইত্যাদি । টেক্সট ফিল্ড কিভাবে সম্পুর্ন ফর্ম তৈরী করতে হয় সেটা আপনাদের আগে জানতে হবে। Input fields হচ্ছে form নামক sandwich এর গোশত । tag এর কিছু attributes আছে সেসব সম্বন্ধে জানা উচিত । type - এই এট্রিবিউট ইনপুট ফিল্ড এর প্রকারভেদ নির্ধারন করে। যেমন text, submit, এবং password । name - এই এট্রিবিউট টি দিয়ে ফিল্ড এর নামকরন করা যায় যাতে পরবর্তিতে আপনি reference আনতে পারেন। size - এই এট্রিবিউট টি ফিল্ড এর horizontal width সেট করে । maxlength – এই এট্রিবিউট টি character এর সর্বোচ্চ নম্বর নির্ধারন করে Name: Password: প্রদর্শন: Input Forms Name: Password: এইচটিএমএল- ইনপুট ট্যাগ: Input fields এর মধ্যে যেসব জিনিস অন্তর্ভুক্ত সেগুলো হলো checkboxes, text fields, radios, এবং form submission buttons। ট্যাগ এর কোন closing tag প্রয়োজন নেই। এইচটিএমএল -Type Attribute: Type attributes এর সাহায্যে এক প্রকারের input tag নির্দেশ করতে পারি।নিচে কতকগুলো input tag দেয়া হলো। ১. text ২. password ৩. checkbox ৪. radio ৫. submit ৬. reset এইচটিএমএল – চেকবক্স: চেকবক্স অনেকগুলি আইটেম থেকে একটা বাছাই করার সুবিধা দেয়। চেকবক্স এর name এবং value এট্রিবিউট যা রেডিও বাটন এর name এবং value এট্রিবিউট মত আচরন করে। Select your favorite cartoon characters. Goofy Donald Bugs Bunny Scooby Doo প্রদর্শন: চেকবক্স: 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. 2. প্রদর্শন: সাবমিট বাটন এইচটিএমএল - রিসেট বাটন: সর্বশেষ input type হল রিসেট বাটন। রিসেট বাটন ক্লিক করার মাধ্যমে আপনি ফর্ম এর সবকিছু আবার পুর্বের স্বাভাবিক অবস্থায় নিয়ে যেতে পারবেন।start over বাটন কে আপনি রিসেট বাটন এর মত ব্যাবহার করতে পারবেন। 1. 2. প্রদর্শন: রিসেট বাটন: এইচটিএমএল টেক্সক্ট ফিল্ড (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. 2. 3. প্রদর্শন: Text Fields: HTML - Text Field Maxlength: maxlength attribute নির্দিস্ট করা ছাড়া ব্যবহারকারী তার ইচ্ছামত characters ইনপুট করতে পারবে এমনকি আপনি যদি সাইজ নির্দিস্ট করেও থাকেন। characters ইনপুট কে সীমাবদ্ধ করতে maxlength attribute টি ব্যবহার করা হয়। size এবং maxlength একই হওয়া প্রয়োজন। 1. 2. 3. প্রদর্শন: Maxlength Attribute HTML - Text Field Value: value attribute ব্যবহার করে আপনি আগে থেকেই টেক্সট ফিল্ডে কিছু লিখে রাখতে পারেন যেটা সকলে দেখতে পারবে। 1. 2. 3. Text Field Values: এইচটিএমএল টেক্সক্ট এরিয়া (HTML Text Area) লেখক মো: ফেরদৌস আলম টেক্সক্ট এরিয়া ব্লগ এর মত এটা ইউজার থেকে তথ্য তুলে আনতে ব্যবহৃত হয়। Paragraphs, essays, or memos সমূহ কাট পেষ্ট করে টেক্সক্ট এরিয়া তে বসানো যায় এবং সাবমিট করা যায়।টেক্সক্ট এরিয়া এর opening এবং closing ট্যাগ রয়েছে। টেক্সক্ট এরিয়া ট্যাগ এর ভিতর কোন কিছু লিখলে তা ওয়েব পেজ এর টেক্সক্ট এরিয়া তে প্রদর্শিত হয়। 1.Text Area! প্রদর্শন HTML - Text area Cols and Rows: Adjust the of the text area র size এর appearance কে ঠিক করতে হলে দুটো attributes প্রয়োজন তা হলো cols androws। প্রতেক attribute এর জন্য সংখ্যাগত মান দিতে হরে। যত বড় মান হবে তত বড় text area হবে। 1.Text Area! 2.Text Area! 3.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. 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. প্রদর্শন:Text Area Wrapping: 1. 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. প্রদর্শন: No Wrapping HTML - Textarea Readonly: readonly attribute এর value দুটি yes বা no। readonly attribute এর মান yes থাকলে আপনারা শুধু textarea এর টেক্সকে কপি করতে পারবেন কিন্তু পরিবর্তন করতে পারবেন না। 1. 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. প্রদর্শন: HTML – Disabled disabled attribute প্রয়োগের ফলে textarea র লেখা highlight হয় না, ধুসর রং ধারন করে এবং এর লেখাকে পরিবর্তন করতে পারি না। 1. 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. প্রদর্শন: এইচটিএমএল রেডিও বোতাম (HTML Radio button) লেখক মো: ফেরদৌস আলম Radios হল এক প্রকার ইনপুট ফর্ম যা ব্যবহারকারীকে যেকোন একটি অপশন সিলেক্ট করতে বলে। রেডিও বোতাম বা বাটন এর নাম ঠিকভাবে দিতে হবে।multiple choice এই ধরনের কুইজ এবং প্রশ্নের জন্য Radios ব্যবহার করা সবচেয়ে ভাল। 1.Italian: 2.Greek: 3.Chinese: প্রদর্শন: Radios: Italian: Greek: Chinese: একই ফর্ম এ দুইটি ভিন্ন সেট রেডিওর আরও উদাহরন দেয়া হল। 1.Italian: 2.Greek: 3.Chinese: 4. 5.Male: 6.Female: প্রদর্শন: Multiple Radios: Italian: Greek: Chinese: Male: Female: এইচটিএমএল- Radio Checked: checked এট্রিবিউট,এর সাহায্যে আপনারা radio তে অটোমেটিকালি ডিফল্ট হিসাবে বৃত্তে আগে থেকে চেক দিয়ে রাখতে পারেন। 1.Italian: 2.Greek: 3.Chinese: প্রদর্শন:Default Italian: Italian: Greek: Chinese: এইচটিএমএল আপলোড ( HTML Upload Form) লেখক মো: ফেরদৌস আলম upload form ব্যবহার করে ইউজার pictures, movies, বা এমনকি নিজের webpages upload করতে পারে। একটা upload form হল এক ধরনের input form । আপনি সাধারনভাবে type attribute দিয়ে এর মান হিসাবে file লিখে upload form তৈরী করতে পারেন। 1. প্রদর্শন: Upload Form Max File Size upload ফাইল এর size এর সীমানা বেধে দিয়ে আপনি আপনার webserver এর মূল্যবান space রক্ষা করতে পারেন। এর জন্য আমরা hidden input field এবং আরও কিছু specific attributes যোগ করবো। 1. 2. এখানে value 100 মানে file সর্বোচ্চ 100kb হতে পারবে। প্রদর্শন: এইচটিএমএল ড্রপডাউন লিস্ট ( HTML Drop down list) লেখক মো:রেজওয়ানুল আলম ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন। ড্রপডাউন লিস্ট তৈরী করতে প্রথমে ট্যাগ দিয়ে কোড শুরু করতে হবে এরপর যে আইটেমগুলি থেকে ইউজার বাছাই করবে সেগুলির প্রতিটি ট্যাগের মধ্যে রাখতে হবে।যেমন 1. 2.Black 3.White 4.Maroon 5. প্রদর্শন:ড্রপডাউন লিস্ট উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন। প্রতিটি ট্যাগে value এট্রিবিউট আছে এটা খুব গুরত্বপূর্ন যখন ফর্মের ডেটা সার্ভারে পাঠাবেন।value এট্রিবিউটের নাম ধরে (যেমন bl,mr..) কল করতে হয়। ট্যাগের size এট্রিবিউট ট্যাগে size এট্রিবিউট দিয়ে আপনি ঠিক করে দিতে পারেন যে লিস্টে কয়টি আইটেম দেখাবে যেমন উপরের উদাহরনেই যদি size=2 দেন তাহলে দুটি অপশন দেখাবে বাকিটা স্ক্রল করে দেখতে হবে। 01. 02. 03.Black 04. 05.White 06. 07.Maroon 08. 09. প্রদর্শন: ট্যাগের size এট্রিবিউট ট্যাগের multiple এট্রিবিউট multiple এর মাধ্যমে আপনি একের অধিক বিষয় সিলেক্ট করার সুযোগ দিতে পারেন। 01. 02. 03.Black 04. 05.White 06. 07.Maroon 08. 09. প্রদর্শন: ট্যাগের multiple এট্রিবিউট *৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা। আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন। এলিমেন্ট দিয়ে এটা করা যায়। যেমন 01. 02. 03. HTML Tutorial 04. CSS Tutorials 05. JavaScript 06. 07. 08. Basic PHP 09. Advanced PHP 10. 11. 12. SQL Tutorial 13. PHP Database 14. 15.
Posted on: Tue, 05 Aug 2014 08:55:44 +0000
Trending Topics
Recently Viewed Topics
© 2015