Archive for জানুয়ারী 2015

HTML টিউটোরিয়াল -১৫ >>(HTML কালার কোড)

জানুয়ারী ১৫, ২০১৫ কোন মন্তব্য নেই
HTML টিউটোরিয়াল -১৫ >>(HTML কালার কোড)
 
 
Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়।নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।
figure 1
এইচটিএমএল-রং পদ্ধতি আরজিবি মান (HTML- Coloring system: rgb value)
আমি আপনাদেরকে নিরাপদ web design এর জন্য HTML rgb ব্যবহারের পরামর্শ দেব না কারন Non-IE browser, HTML rgb সাপোর্ট করে না। আপনারা যদি CSS শিখতে চান তাহলে আপনাদের উচিত এই বিষয় সম্বন্ধে জানা।
  • Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে rgb ।
  • প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)।
  • rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)।
Red, Green এবং Blue এর মান:
bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
এইচটিএমএল-রং পদ্ধতি:হেক্সাডেসিমাল (HTML- Coloring system: Hexadecimal)
প্রথম প্রথম Hexadecimal system বুঝতে একটু কারন এই system একটু জটিল ও কঠিন। practice করার মাধ্যমে বিষয়টি অনেক সহজ হয় যাবে। এই Hexadecimal system সকল ক্ষেত্রে গ্রহনযোগ্য এবং বহুল ব্যবহৃত। Hexadecimal system টি ইন্টারনেটের standard color।
Hexadecimal হল ৬ digit কালারের উপস্থাপন। প্রথম দুটি digit(RR), Red value নির্দেশ করে পরবর্তি দুটি digit(GG), Green value নির্দেশ করে এবং সর্বশেষ দুটি digit(BB), Blue value নির্দেশ করে।
এইচটিএমএল হেক্সাডেসিমাল রং
bgcolor="#RRGGBB"
এইচটিএমএল -রং কোড (HTML- Color code: breaking the code)
নিচে টেবিলে দেখানো হয়েছে কিভাবে বর্ণ Hexadecimal system এর Numbering system কে বর্ধিত করে ১৬ digit এ উন্নীত করে।
figure 2
তাই বর্ণকে নম্বর হিসাবে ব্যবহার করা হয়। এই বর্ণকে পরে নম্বরে রুপান্তর করা হয়।নিচে একটি উদাহরন দেয়া হলো।
একটি বাস্তব হেক্সাডেসিমাল:
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 টিউটোরিয়াল -১৪ >>(HTML লিস্ট)

জানুয়ারী ১৪, ২০১৫ কোন মন্তব্য নেই
HTML টিউটোরিয়াল -১৪ >>(HTML লিস্ট)
 
 
ওয়েব পেজে যদি তালিকা বা লিস্ট প্রদর্শন করাতে চান তখন এইচটিএমএল এ ৩ ধরনের লিস্ট করার ট্যাগ আছে, প্রয়োজনমত যেকোন একটি ব্যবহার করতে পারেন।
Unordered List :
এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে। যেমনঃ
1.<ul>
2.<li>Bangla</li>
3.<li>English</li>
4.<li>Social Science</li>
5.<li>Mathemetaics</li>
6.</ul>
প্রদর্শন:
  • Bangla
  • English
  • Social Science
  • Mathematics
আপনি ইচ্ছে করলে সিএসএস দিয়ে গোল চিহ্নের পরিবর্তে অন্য চিহ্নও দিতে পারেন এগুলি সিএসএস এ আলোচনা হবে।
Ordered List:
কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন যেমনঃ
1.<ol>
2.<li>iPad</li>
3.<li>iPhone</li>
4.<li>MacBook Air</li>
5.</ol>
প্রদর্শন
  1. iPad
  2. iPhone
  3. MacBook Air
ol এলিমেন্টে start নামে একটা এট্রিবিউট ব্যবহার করে কত থেকে শুরু হবে এটা ঠিক করা যায় যেমন উপরের লিস্ট টি যদি ১০ থেকে দেখাতে চান তাহলে
1.<ol start="10">
2.<li>iPad</li>
3.<li>iPhone</li>
4.<li>MacBook Air</li>
5.</ol>
প্রদর্শন
10. iPad
11. iPhone
12. MacBook Air
li তে value নামের একটা এট্রিবিউট ব্যবহার করে যেকোন আইটেমের নাম্বার পরিবর্তন করা যায় যেমন:
1.<ol>
2.<li value="5">iPad</li>
3.<li value="10">iPhone</li>
4.<li value="15">MacBook Air</li>
5.</ol>
প্রদর্শন
5. iPad
10. iPhone
15. MacBook Air
Definition list নামে আরেকটা লিস্টিং ট্যাগ আছে এটা খুব ব্যবহার হয়না, এটা দিয়ে একটু ভিন্নভাবে তালিকা দেখানো যায় যেমন:
01.<dl>
02.<dt>Preliminary analysis</dt>
03.<dd> in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them</dd>
04.<dt>Systems analysis, requirements definition</dt>
05.<dd>Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs</dd>
06.<dt>Systems design</dt>
07.<dd>Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.</dd>
08.<dt>Development</dt>
09.<dd>The real code here</dd>
10.</dl>
প্রদর্শন
Preliminary analysis
    in this step, you need to find out the organization's objectives and the nature and scope of the problem under study. Even if a problem refers only to a small segment of the organization itself then you need to find out what the objectives of the organization itself are. Then you need to see how the problem being studied fits in with them
Systems analysis, requirements definition
    Defines project goals into defined functions and operation of the intended application. Analyzes end-user information needs
Systems design
    Describes desired features and operations in detail, including screen layouts, business rules, process diagrams, pseudocode and other documentation.
Development
    The real code here

HTML টিউটোরিয়াল -১৩ >>(HTML ও CSS)

জানুয়ারী ১৩, ২০১৫ কোন মন্তব্য নেই
HTML টিউটোরিয়াল -১৩ >>(HTML ও CSS)
 

আজ আমরা CSS এর অন্যান্য উপাদান গুলো যেমনঃ CSS ফন্ট, CSS এর color প্রোপার্টি, CSS বক্স মডেল ইত্যাদি সম্পর্কে জানবো যেগুলো HTML কোড লিখতে আমাদের কাজে লাগবে।
HTML এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে CSS ফন্ট গুরুত্বপূর্ণ। এজন্য বেশ কিছু CSS প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত।
নিচের সেগুলির উদাহরণ সহ আলোচনা করা হলঃ
CSS ফন্ট
  • font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়।
  • font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের টেক্সটের সাইজ বা আকার কত বড় হবে।
  • CSS এর color প্রোপার্টি দ্বারা HTML এলিমেন্টের টেক্সটের রং নির্ধারণ করা হয়।
  • <font> ট্যাগটি HTML এর পুরনো ভার্সনে কাজ করে HTML 5 এ কাজ করেনা।
উদাহরণ
figure 1
figure 2
CSS বক্স মডেল
অনেক সময় অনেক লেখা এবং ছবিকে বক্সের ভেতরে উপস্থাপন করার দরকার হয়।
CSS দিয়ে তৈরি এই বক্স ব্রাউজারে দেখা যায়।
Border- প্যাডিং এবং কনটেন্ট চারিদিকে লাইনের সৃষ্টি করে। বর্ডারের ব্যাকগ্রাউন্ড কালার থাকে।
উদাহরণ
figure 3
figure 4
Margin- বর্ডারের চারিদিকে একটি এলাকাকে ক্লিয়ার করে । মার্জিনের কোনো ব্যাকগ্রাউন্ড কালার থাকে না।
Padding-কনটেন্ট চারিদিকে একটি এলাকাকে ক্লিয়ার করে । প্যাডিং বক্সের ব্যাকগ্রাউন্ড কালার থাকে।
content- বক্সের কনটেন্ট যেখানে টেক্সট ও ইমেজগুলো আবির্ভূত হয় ।
উদাহরন
figure 5
figure 6
আইডি এট্রিবিউট
  • কয়েকটি বাদে প্রায় প্রত্যেকটি HTML এলিমেন্টে id এট্রিবিউট ব্যবহার করা যায়।
  • id এট্রিবিউটের মান ইচ্ছেমত দিতে পারেন।
  • সহজ কথায় id হচ্ছে এলিমেন্টির একটা নাম। এই নাম ধরে CSS এ এলিমেন্টটিকে সিলেক্ট করা হয় এবং স্টাইলিং করা হয়।
উদাহরণ
figure 7
figure 8
ক্লাস এট্রিবিউট
HTML id এট্রিবিউটের মত class আরেকটা এট্রিবিউট আছে। প্রায় সব HTML এলিমেন্টে এটা ব্যবহার করতে পারেন।
ধরুন আপনার একটা HTML ডকুমেন্টে ১০ টা হেডিং আছে ২টি h1, ৩টি h3, h2 ... এরকম আরও। এখন আপনি যদি চান যে সবগুলি h1 এর রং লাল এবং সবগুলি h3 এর রং বেগুনি হবে, তো কি করবেন, প্রতিটি হেডিং এর আইডি দিবেন? এবং প্রতিটি আইডি ধরে ধরে পরে CSS লিখবেন? উত্তর হল না। কেননা এই সমস্যার সমাধানের জন্যই CSS ক্লাস।
যেহেতু h1 দুটির রং দিব লাল তাই এইদুটি হেডিং এর আমি একই ক্লাস দেব এভাবে h3 ৩টিরও একই ক্লাস দেব। এরপর সেই ক্লাস ধরে স্টাইলিং।
উদাহরণ
figure 9
figure 11

HTML টিউটোরিয়াল -১২ >>(HTML ও CSS])

জানুয়ারী ১২, ২০১৫ কোন মন্তব্য নেই
HTML টিউটোরিয়াল -১২ >>(HTML ও CSS])
 
 
 
এত দিন আমরা আপনাদেরকে HTML সম্পর্কে ধারণা দিয়েছি। আজ আমরা আপনাদেরকে HTML এর HTML কমেন্ট ট্যাগ ও HTML এ CSS এর ব্যবহার দেখাব। এখানে আমরা CSS সম্পর্কে বেসিক কিছু আলোচনা উপস্থাপন করেছি।
HTML কমেন্ট ট্যাগ
  • কমেন্ট ট্যাগ <!-- and --> HTML ডকুমেন্টে কমেন্ট করার ক্ষেত্রে কাজে লাগে।
  • অন্যান্য ট্যাগ মত কমেন্ট এরও opening tag এবং closing tag আছে।
  • <!-- Opening Comment</li>
  • -- > Closing Comment
  • ওয়েব ডেভেলপার হিসাবে আপনি অনেক কাজ অসম্পূর্ণ রাখতে পারেন সেক্ষেত্রে অসম্পূর্ণ কাজটিকে <!— -- > কমেন্ট ট্যাগ এর ভিতর রাখতে পারেন।
  • কমেন্ট ট্যাগ এর ভিতর কোন কিছু রাখলে তা ব্রাউজারে দেখা যায় না।
উদাহরণ
figure 1
figure 2
HTML ও CSS
HTML দিয়ে ডিজাইনের সময় স্টাইলিং করতে গেলে CSS কোড লাগে কারন CSS এর মাধ্যমে HTML এ তৈরীকৃত পেজটি আরও দৃষ্টিনন্দন করা যায়। একটা HTML পেজে <head> ট্যাগের ভিতর <style> ট্যাগ দিয়ে CSS কোড যোগ করে পেজ স্টাইলিং করা যায়। এটা হচ্ছে ইন্টারনাল CSS আর যদি CSS কোড বেশি হয়ে যায় তখন CSS কোড আলাদা ফাইলে লেখা হয়।স্টাইলিং করার জন্য সাধারণত CSS কোড আলাদা ফাইলে লেখা হয়। তবে আপনাদের বুঝার সুবিধার্থে উদাহরণ সমূহে ইন্টারনাল CSS দিয়ে করা হয়েছে। আপনারা CSS সম্পর্কে আরও বিশদভাবে ভাবে জানতে পারবেন CSS টিউটোরিয়াল থেকে যা আর কিছুদিনের মধ্যেই প্রকাশিত হবে।
নিচে সংক্ষেপে CSS এর গুরুত্বপূর্ণ উপাদানগুলো আলোচনা করা হলঃ
  • CSS অর্থ হল ক্যাসকেডিং স্টাইল শিট
  • CSS এর সিনট্যাক্স তিনটি অংশ নিয়ে গঠিত।
১। সিলেক্টর(Selector)
২। প্রোপার্টি(Property)
৩। ভ্যালু(Value)
Selector {property: value}
  • সিলেক্টর হলো নির্দিষ্ট একটি ট্যাগ যেটি আপনি নির্বাচন করতে চান।
  • প্রোপার্টি হচ্ছে অ্যাট্রিবিউট যেটাকে পরিবর্তন করা হয়।
  • আর প্রত্যেকটি প্রোপার্টির একটি নির্দিষ্ট ভ্যালু থাকে।
যেমনঃ Body {color: red}
একাধিক ভ্যালুর ক্ষেত্রে ভ্যালু গুলোকে সেমিকোলন দিয়ে পৃথক করা হয়।
যেমনঃ P { text-align: left; color: green}
একটি HTML ডকুমেন্ট এর সাথে তিন ভাবে স্টাইল শিট যুক্ত করা হয়। সেগুলো হলোঃ
১. এক্সটার্নাল স্টাইল শিট (Extarnal Style Sheet)
  • একই স্টাইল অনেকগুলো পেইজে প্রয়োগ করার ক্ষেত্রে এক্সটার্নাল CSS(স্টাইল শিট) হল আদর্শ উপায়।
  • এক্সটার্নাল স্টাইল শিটের মাধ্যমে একটি মাত্র ফাইল পরিবর্তন করে আপনি সম্পূর্ণ ওয়েভ সাইটের চেহারা পরিবর্তন করে দিতে পারেন।
  • প্রতি পেইজে অবশ্যই <link> ট্যাগ ব্যবহার করে স্টাইল শিটের সাথে লিঙ্ক করতে হয়। <link> ট্যাগ বসাতে হয় <head> সেকশনের ভেতরে।
উদাহরণ
figure 3
figure 4
২. ইন্টারনাল স্টাইল শিট (Internal Style Sheet)
  • যখন কোন ডকুমেন্টে একটি ইউনিক স্টাইল থাকে তখন ইন্টারনাল স্টাইল শিট ব্যবহার করা উচিত ।
  • হেড (head) সেকশনে স্টাইল<style>ট্যাগ ব্যবহার করে স্টাইল শিট নির্ধারণ করতে হবে।
উদাহরণ
figure 5
figure 6
৩. ইনলাইন স্টাইলস(Inline Styles)
  • এটি হচ্ছে CSS style ট্যাগকে HTML কোড এর ভিতর ব্যবহার করার নিয়ম।
  • যখন এলিমেন্টএর সিঙ্গেল অকারেন্সে কোন ইউনিক স্টাইল প্রয়োগ করতে হয় তখন ইনলাইন স্টাইল ব্যবহার করা হয়।
  • ইনলাইন স্টাইল প্রয়োগের জন্য সংশ্লিষ্ট ট্যাগে অ্যাট্রিবিউট ব্যবহার করা হয়।
  • স্টাইল অ্যাট্রিবিউট যে কোন CSS প্রোপার্টি বহন করতে পারে ।
figure 7
figure 8
পরের টিউটরিয়ালে আমরা আরও কিছু CSS এলিমেন্ট সম্পর্কে জানবো।

HTML টিউটোরিয়াল -১১ >>(HTML Computer Code)

জানুয়ারী ১১, ২০১৫ কোন মন্তব্য নেই
HTML টিউটোরিয়াল -১১ >>(HTML Computer Code)
 
 
 
HTML Computer Code এলিমেন্টসমূহ
figure 1
HTML Code ফরম্যাটিং
  • code tag এর মাধ্যমে আপনার text কে computer code এর মত করে লেখতে পারেন।
  • এটা সাধারণ ভাবে text এর font face, size, এবং letter spacing পরিবর্তন করতে পারে।
উদাহরণ
figure 2
figure 3
HTML কিবোর্ড ফরম্যাটিং
  • HTML <kbd> ট্যাগ দ্বারা কিবোর্ড ইনপুটকে বুঝায়
উদাহরণ
figure 5
figure 6
HTML Sample ফরম্যাটিং
  • HTML <samp> ট্যাগ দ্বারা computer output sample বুঝায়।
উদাহরণ
figure 7
figure 8
HTML variable ফরম্যাটিং
  • HTML <var>ম্যাথম্যাটিক্যাল ভেরি্যেবল বুঝানোর ক্ষেত্রে এই ট্যাগটি ব্যবহার করা হয়।
উদাহরণ
figure 9
figure 10
HTML pre ফরম্যাটিং
  • pre ট্যাগের সুবিধা হল HTML coding এর সময় যেভাবে আমরা লাইন ব্রেক, স্পেস নির্দেশ করে দিবো ঠিক সেভাবে টেক্সট প্রদর্শিত হবে।
  • অর্থাৎ যেভাবে কোড লিখবেন সেভাবেই আউটপুট দেখাবে।
উদাহরণ
figure 11
figure 12

HTML টিউটোরিয়াল -১০ >>(HTML কোটেশন)

জানুয়ারী ১০, ২০১৫ কোন মন্তব্য নেই
HTML টিউটোরিয়াল -১০ >>(HTML কোটেশন)

HTML Short কোটেশন ট্যাগ
  • এক বা একাধিক বর্ণ, শব্দ, বাক্য বা প্যারার শুরুতে এবং শেষে “” চিহ্ন কে আমরা কোটেশন বলি।
  • টেক্সটের ভেতর সংক্ষিপ্ত কোটেশন দিতে <q> ব্যবহৃত হয়
  • ব্রাউজার <q> ট্যাগের মধ্যে থাকা লেখায় কোটেশন যুক্ত করে।
উদাহরণ
figure 1
figure 2
HTML Long কোটেশন ট্যাগ
  • HTML <blockquote> দিয়ে Long quotation বুঝায়।
  • টেক্সটের ভেতর দীর্ঘ কোটেশন দিতে <blockquote> ব্যবহৃত হয়।
উদাহরণ
figure 5
figure 3
HTML সাইটেশন, কোটেশন ও ডেফিনেশন ট্যাগ
figure 4
সংক্ষেপে জেনে নিই HTML Computer Code এলিমেন্টগুলো
figure 6
এর পরবর্তী টিউটোরিয়ালে অর্থাৎ HTML টিউটোরিয়াল (১১) তে HTML Computer Code এলিমেন্টগুলো সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

HTML টিউটোরিয়াল -৯ >>(HTML Formatting)

জানুয়ারী ০৯, ২০১৫ কোন মন্তব্য নেই
HTML টিউটোরিয়াল -৯ >>(HTML Formatting)
 

আপনারা ইতিমধ্যে টিউটোরিয়ালে(৭) এ HTML styling এবং HTML style এট্রিবিউট সম্পর্কে জেনেছেন। আজ আমরা টিউটোরিয়ালে(৮) ও টিউটোরিয়ালে(৯ ) এ ধারাবাহিক ভাবে HTML এর সেইসব উপাদান সম্পর্কে জানবো যা দ্বারা একটি টেক্সট বা লেখাকে ভিবিন্ন ভাবে উপস্থাপন করা যায়।
HTML Small Formatting
  • HTML <small> এলিমেন্ট ছোট অক্ষরগুলোকে বুঝায়।
উদাহরন
figure 1
figure 2
HTML Marked Formatting
  • আমরা যদি কোনো টেক্সটকে হাইলাইট বা মার্ক করতে ছাই তবে HTML <mark> ট্যাগটি দ্বারা হাইলাইট বা মার্ক করা যাবে।
figure 3
figure 4
HTML Deleted Formatting
  • HTML <del> ট্যাগ দ্বারা কোনো লেখাকে delete বা remove করা যায়।
উদাহরন
figure 5
figure 6
HTML inserted Formatting
  • <ins> ট্যাগটি Underline বা নিম্নরেখাযুক্ত হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় ।
উদাহরন
figure 7
figure 8
HTML Subscript Formatting
  • <sub> Tag Subscript বা বাক্যনিম্নস্হ অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় ।
figure 9
figure 10
সংক্ষেপে দেখে নেই HTML Text Formatting এলিমেন্ট গুলো
figure 1
এতে সদস্যতা: পোস্টগুলি (Atom)