Huge Sell on Popular Electronics
অ্যাফিলিয়েট মার্কেটিং এর উপর বাংলা ভিডিও টিউটোরিয়াল
Affiliate Marketing Bangla Video Tutorial Part -1
Tag Archives: tutorial
পাইথন প্রোগ্রামিং টিউটোরিয়াল : বেসিক (Python Tutorial in Bangla : Basic)
Huge Sell on Popular Electronics
লিখেছেন: আবরার রেজওয়ান শুভ
1.1 Python - Tutorial
Python একটি general-purpose interpreted, সাধারণ, সহজবোধ্য, উদ্দেশ্য-কেন্দ্রিক এবং উচ্চমানের প্রোগ্রামিং ল্যাংগুয়েজ। ১৯৮৫-১৯৯০ সালের মধ্যে গুইদো ভ্যান রসাম (Guido van Rossum) এই প্রোগ্রামিং ল্যাংগুয়েজ সৃষ্টি করেন। এই টিউটোরিয়ালটি Python সম্পর্কে যথেষ্ট ধারণা দিবে।
কাদের জন্য
যারা একেবারে শুরু থেকে Python প্রোগ্রামিং শিখতে চান, মূলত তাদের জন্যই এই টিউটোরিয়ালটি তৈরি করা হয়েছে।
পূর্বশর্ত
কম্পিউটার প্রোগ্রামিং ল্যাংগুয়েজ এর ব্যাসিক কিছু শব্দের অর্থ জানা থাকলে ভাল হয়। অন্য কোন প্রোগ্রামিং ল্যাংগুয়েজ জানা থাকলে আরো ভাল।
1.2 Python Overview
Python ল্যাংগুয়েজটিকেই এমন ভাবে তৈরি করা হয়েছে যাতে সহজে বোঝা যায়। এটি অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজ এর মত যতিচিহ্ন (কমা, ব্র্যাকেট ইত্যাদি)-নির্ভর নয়, বরং কিছু ইংরেজি কী-ওয়ার্ড প্রতিনিয়ত ব্যবহার করে ল্যাংগুয়েজটা তোইরি করা হয়েছে, এবং এখানে শব্দবিন্যাসও তুলনামূলক সহজ।
- Python সরাসরি অনুবাদকৃত - অনেকটা PERL এবং PHP প্রোগ্রামিং এর মত, Python প্রোগ্রামও রান করাবার আগে আলাদা করে কম্পাইল করতে হয়না, সরাসরি রান দেয়ার সময়েই প্রোগ্রামটির প্রোসেস (অনুবাদ) হয়।
- Python পারস্পরিক ক্রিয়াশীল- প্রোগ্রাম লেখার সময় Python prompt থেকে অনুবাদক (interpreter) এর সাথে সরাসরি মত বিনিময় করা যায়।
- Python উদ্দেশ্য-কেন্দৃক- Python উদ্দেশ্য-কেন্দৃক পদ্ধতি অনুসরণ করে, যার মাধ্যমে একটি বিশেষ উদ্দেশ্যের ভেতর একাধিক কোড লিপিবদ্ধ করা হয়।
- Python অনভিজ্ঞ দের ভাষা- নতুন প্রোগ্রামার দের জন্য Python দারুন একটি ভাষা, এবং পাশাপাশি এর নানাবিধ প্রয়োগ রয়েছে (সহজ টেক্সট প্রোসেসিং থেকে শুরু করে ওয়েব ব্রাউসার কিংবা গেমস ডেভেলাপমেন্টে)
ইতিহাস
আশির ও নব্বইয়ের দশকের মাঝামাঝি গুইদো ভ্যান রসাম (Guido van Rossum) নেদার্ল্যান্ড এর ন্যাশনাল রিসার্চ ইন্সটিটিউট ফর ম্যাথম্যাটিক্স এন্ড কম্পিউটার সাইন্স এ Python আবিষ্কার করেন।
ABC, Modula-3, C, C++, Algol-68, SmallTalk, Unix shell সহ অন্যান্য অনেকগুলো স্ক্রিপ্টিং ল্যাংগুয়েজ থেকে Python এর সূত্রপাত হয়েছে। Perl প্রোগ্রামিং ল্যাংগুয়েজ এর মত পাইথন এর সোর্স কোড ও GNU General Public License (GPL) এ পাওয়া যায়। Python এর সত্ত্বাধিকার Python software foundation রক্ষা করে। একটি কোর ডেভেলাপমেন্ট টীম পাইথনের অগ্রযাত্রা/ পরিচালনা নিয়ন্ত্রন করে, যেখানে Guido van Rossum, Python এর আবিষ্কারক গুরুত্বপূর্ণ ভূমিকা পালন করে।
বৈশিষ্ট্য
- Python সহজবোধ্য। এখানে কী-ওয়ার্ড এর ব্যবহার তুলনামূলক কম। Python এর শব্দবিন্যাস এবং ভাষা-গঠনও অপেক্ষাকৃত সহজ, যে কারনে সবাই খুব সহজেই এই ভাষা আয়ত্ত করতে পারে।
- Python সহজে পড়া যায়। এর কোডিং পদ্ধতি খুব সহজে বোঝা যায়।
- Python এর সোর্স কোড সহজে মেইন্টেইন করা যায়।
- Python এর লাইব্রেরী অনেক সমৃদ্ধ এবং স্বল্প সাইজের, যা UNIX, Windows, Macintosh ইত্যাদি অপারেটিং সিস্টেম সাপোর্ট করে।
- Python এ interactive (পারস্পরিক) কোডিং এর সুবিধা রয়েছে, যার ফলে টুকিটাকি বিভিন্ন প্রকার কোড এর জন্য একই সাথে Testing ও Debugging করা যায়।
- Python পোর্ট্যাবল, অর্থাৎ বিভিন্ন রকমের হার্ডওয়ার প্ল্যাটফর্মে এটি একই ভাবে কাজ করে।
- Python প্রথমে কিছু low level module দিয়ে শুরু করা যায়, এবং পরে প্রয়োজন অনুযায়ী প্রোগ্রামার রা নানা রকম টুল সংযোজন করে সেই মোডিউল গুলো আরো সমৃদ্ধ করতে পারে।
- প্রায় সব ধরনের বাণিজ্যিক ডাটাবেইজ এ Python এর ইন্টারফেস থাকে।
- Python GUI applications সাপোর্ট করে, যার সাহাজ্যে বিভিন্ন system calls, libraries ও windows systems তৈরি অথবা স্থানান্তরিত করা যায়।
- বড় সাইজের প্রোগ্রামের জন্য Shell স্ক্রিপ্টিং এর চেয়ে Python এর স্ক্রিপ্ট ভাল কাজ করে।
এগুলো ছাড়াও Python এর আরো কিছু ফিচার রয়েছে। যেমন, এটি Object-Oriented Programming (OOP) এর মত সুবিন্যস্ত; এটিকে স্ক্রিপ্টিং ল্যাংগুয়েজ এর মত ব্যবহারের পাশাপাশি অন্য বড় সাইজের এপ্লিকেশনের বাইট-কোড হিসেবে কম্পাইল করা যায়; এর দারা অত্যান্ত জটিল ও গতিশীল ডাটা তৈরি ও চেক করা যায়; Python গার্বেজ কালেক্ট করে, এবং একে সহজেই C, C++, COM, ActiveX, CORBA, ও Java’র সাথে ইণ্টেগ্রেট করা যায়।
বাংলায় এজাইল পদ্ধতি টিউটোরিয়াল (Agile Methodology Tutorial in Bangla)
Huge Sell on Popular Electronics
Naim Mustafa Ali
BSc. in Soil, Water and Environment, MS in Water Science from University of Dhaka
Agile একটি সফিওয়্যার ডেভেলপমেন্ট পদ্ধতি যাতে ক্রমানুসাতে 1 থেতে 4 সপ্তাতেে সংক্ষিপ্ত পুনোরাবৃত্তি ব্যবহার করে একটি সফটওয়্যার নির্মাণ করা হয় যেন তা পরিবর্তিত ব্যবসাইক চাহিদার সঙ্গে সংযুক্ত করা যায়। এই সহজ টিউটোরিয়ালে উপযুক্ত উদাহরণ ব্যবহারের মাধ্যমে Agile development সম্পর্কে সাধারণ এবং দ্রুতভাবে বুঝতে সাহায্য করবে।
পাঠকবর্গ
এই টিউটোরিয়ালটি Beginners দের Agile এর মূলনীতি ও তার বাস্তবায়ন বুঝতে সাহায্যের জন্য প্রস্তুত করা হয়েছে। এই টিউটোরিয়াল শেষ করার পর আপনি নিজেকে দক্ষতার একটি মধ্যম পর্যায়ে খুঁজে পাবেন, যেখান থেকে আপনি আরও এগিয়ে গেতে পারবেন।
পূর্বশর্ত
এই টিউটোরিয়াল সঙ্গে অগ্রসর হওয়ার আগে, আপনার প্রয়োজনীয় সফটওয়্যার ডেভেলপমেন্ট ধারণা যেমনঃ কোডিং, টেস্টিং ইত্যাদির মৌলিক জ্ঞান প্রয়োজন।
ইউনিক্স টিউটোরিয়াল (Unix Tutorial)
Huge Sell on Popular Electronics
লেখকঃ সৈয়দআহমেদ অনুবাদঃ মতিউর রহমান।
ইউনিক্স টিউটোরিয়াল
UNIX হচ্ছে উইন্ডোজ সেভেন/এইট এর মত একটি কম্পিউটার অপারেটিং সিস্টেম যা একই সময়ে একাধিক ব্যবহারকারীর কাছ থেকে কার্যক্রম নিয়ন্ত্রণ করতে পারে। এই অপারেটিং সিস্টেমটি প্রায় ১৯৬৯ সালে (AT&T Bell) এটি&টি বেল ল্যাবস এ কেন থম্পসন এবং ডেনিস রিটছি নামক দুই বাক্তির দ্বারা সুচনা ঘটে। সম্মানিত পাঠক এই টিউটোরিয়ালটি নতুনদের জন্য প্রস্তুত করা হয়েছে যেখানে তারা বেসিক থেকে এডভান্স ইউনিক্স কমান্ড,ইউনিক্স শেলস্ক্রিপ্টিং এবং বিভিন্ন ইউটিলিটি ইত্যাদি মৌলিক ধারনা নিতে পারবে। তবে এটা জানার জন্য আপনার কিছু কম্পিউটার অপারেটিং সিস্টেম এবং তার বৈশিষ্ট্য সম্পর্কে সামান্য জ্ঞান থাকতে হবে আমি ধরে নিচ্ছি আপনার সেটা আছে। আপনার বিভিন্ন কম্পিউটার অপারেটিং সিস্টেম এর উপর যে ধারনা আছে সেটা আপনাকে এই টিউটোরিয়াল দেয়া বিভিন্ন এক্সেরসাইজ বুঝতে সাহায্য করবে।
ইউনিক্স শেলপ্রোগ্রামসমূহ
আপনি ইউনিক্স/লিনাক্স মৌলিক কমান্ড এবং শেলস্ক্রিপ্ট শিখতে আগ্রহী কিন্তু আপনার পিসিতে সেট আপ দেয়া নেই বা এই প্রোগ্রামটি আপনার কাছে নেই তাহলে চিন্তার কোন বিষয় নেই আপনি চাইলে এখনি compileonline.com এর ডেডিকেটেড সার্ভার থেকে হেল্প নিতে পারেন, যা একেবারেই বিনামূল্যে এবং যে কোন সময় নিতে পারবেন। পরবর্তী টিউটোরিয়াল এর জন্য নেক্সট পেজ ভিসিট করুন। ধন্যবাদ
জাভাস্ক্রিপ্ট অবজেক্ট নটেশন টিউটোরিয়াল (JSON Tutorial)
Huge Sell on Popular Electronics
JSON টিউটোরিয়াল
আদনান নাহিদ
সরকারি তিতুমির কলেজ
- JSON: জাভাস্ক্রিপ্ট অবজেক্ট নটেশন (JavaScript Object Notation)।
- JSON হল তথ্য সংরক্ষণ এবং তথ্য আদান প্রদানের জন্য একটি শব্দবিন্যাস ।
- JSON XML এ ব্যবহারের একটি সহজতম বিকল্প ।
নিম্নলিখিত JSON উদাহরণটি কর্মচারীদের লক্ষ্য নির্ধারণ করে,, একটি অ্যারের সাথে ৩ জন কর্মচারীর রেকর্ড দেয়া হল :
JSON উদাহরণ
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
নিম্নলিখিত XML উদাহরণটিও 3 কর্মচারীর সাথে কর্মীদের লক্ষ্য রেকর্ড নির্ধারণ করে ।
এক্সএমএল উদাহরণ
<employees> <employee> <firstName>John</firstName> <lastName>Doe</lastName> </employee> <employee> <firstName>Anna</firstName> <lastName>Smith</lastName> </employee> <employee> <firstName>Peter</firstName> <lastName>Jones</lastName> </employee> </employees>
JSON কি?
• JSON জাভাস্ক্রিপ্ট অবজেক্ট নটেশনকে ভিত্তি করে গড়ে ওঠে ।
• JSON একটি লাইটওয়েট তথ্য-ইন্টারচেঞ্জ ফরম্যাট ।
• JSON একটি স্বাধীন ভাষা ।
• JSON একটি "স্ব-বর্ণনা" এবং বুঝতে সহজ ।
* JSON জাভাস্ক্রিপ্ট সিনট্যাক্স ব্যবহার করে, কিন্তু JSON বিন্যাস শুধু লিখিত, যেমন XML । প্রোগ্রামিং ভাষা দ্বারা এই লেখাগুলো পড়া যায় ডাটা ফরম্যাট হিসাবে ব্যবহার করা যাব ।
জাভাস্ক্রিপ্ট টিউটোরিয়াল JavaScript Tutorial
Huge Sell on Popular Electronics
জাভাস্ক্রিপ্ট টিউটোরিয়াল JavaScript Tutorial
- জাভাস্ক্রিপ্ট হচ্ছে এইচটিএমএল ও ওয়েব এর একটি প্রোগ্রামিং ভাষা।
- প্রোগ্রামিং ভাষা আপনি কম্পিউটারকে যেভাবে কাজ করাতে চান সেভাবে কাজ করায়।
- জাভাস্ক্রিপ্ট শেখা সহজ।
- এই টউটোরিয়ালটি আপনাকে প্রাথমিক থেকে উচ্চতর জাভাস্ক্রিপ্ট শেখাবে।
প্রতি অধ্যায় এ উদাহরণ
প্রতি অধ্যায় এ উদাহরণ সন্নিবেশিত করা হয়েছে।
যেমন:
<!DOCTYPE html> <html> <body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body> </html>
ফলাফল
My First JavaScript
উদাহরণ এর সাহায্যে শেখা
উদাহরণ 1000 শব্দ দ্বারা বর্ণনা করা থেকেও ভাল। শেখার জন্য অনেক ক্ষেত্রে উদাহরণ ব্যাখ্যা দেখে শেখার চেয়েও সহজতর।
নোট: আপনি যদি সকল উদাহরণ ব্যবহার করে দেখেন, তাহলে আপনি খুব অল্প সময়ে জাভাস্ক্রিপ্ট সম্পর্কে প্রচুর জানতে পারবেন।
জাভাস্ক্রিপ্ট কেন শিখবেন?
জাভাস্ক্রিপ্ট হচ্ছে তিনটি ল্যাংগুয়েজ এর মধ্যে একটি যা প্রত্যেক ওয়েব ডেভেলপারকে অবশ্যই শিখতে হয়:
- HTML ওয়েব পেজ উপাদানগুলো সন্নিবেশিত করতে
- CSS ওয়েব পেজ এর বিন্যাস/সাজসজ্জা নির্দিষ্ট করতে
- JavaScript ওয়েব পেজ এর আচরণ প্রোগ্রামিং এর সাহায্যে নিয়ন্ত্রণ করতে
এই টিউটোরিয়ালটি হচ্ছে জাভাস্ক্রিপ্ট সম্পর্কে, এবং জাভাস্ক্রিপ্ট কিভাবে এইচটিএমএল এবং সিএসএস এর সাথে কাজ করে সে সম্পর্কে।
শেখার গতি
- এই টউটোরিয়ার এ শেখার গতি আপনার পছন্দের উপর নির্ভর করে।
- সবকিছুই আপনার উপর।
- আপনি যদি কোন কিছু পুরোপুরি বুঝতে না পারেন তাহলে আপনি বিরতি নিতে পারেন বা পু্ণরায় পড়তে পারেন।
- সবসময়ই নিশ্চিত হয়ে নিন যে আপনি উদাহরণগুলো বুঝতে পেরেছেন।
এইচটিএমএল রঙ (HTML Color codes chart)
Huge Sell on Popular Electronics
এইচটিএমএল রঙ (HTML Color Names)
স্বর্ণা আখতার
স্বর্ণা আখতারআমরা জানি একেকটি কালার হলো লাল, নীল এবং সবুজ এর সমন্বিত রূপ। সাধারনত, ১৪০ টি কালার আছে যেগুলো সব ওয়েব ব্রাউজারেই সাপোর্ট করে। এই ১৪০ টি নাম এইচ টি এম এল ৫ এবং সিএসএস ৫ এ উল্লেখ আছে। যার মধ্যে ১৭ টি এসেছে এইচ টি এম এল থেকে এবং ১২৭ টি এসেছে সিএসএস থেকে। নিচে সেইসব ১৪০ টি কালারের নাম এবং তাদের হেক্সাডেসিমেল কোড দেয়া হল।
HTML Iframe (এইচটিএমএল আইফ্রেম)
Huge Sell on Popular Electronics
একটি iframe একটি ওয়েব পৃষ্ঠার মধ্যে আরো একটি ওয়েব পেজ প্রদর্শন করতে ব্যবহৃত হয়।
Iframe Syntax (iframe সিনট্যাক্স)
একটি iframe যোগ করার সিন্টেক্স হল :
<iframe src="URL" width="300" height="150"></iframe>
src অ্যাট্রিবিউট আইফ্রেম পৃষ্ঠার URL টি (ওয়েব ঠিকানা) নির্দিষ্ট করে
Iframe - এর উচ্চতা এবং প্রস্থতা নির্ধারন
Iframe - এর এর আকার নির্ধারণ করার জন্য height এবং width অ্যাট্রিবউট ব্যবহার করুন
অ্যাট্রিবিউট এর মান ডিফল্ট হিসেবে পিক্সেল এ থাকে, কিন্তু আপনি ইচ্ছা করলে একে পারসেন্ট হিসেবেও ব্যবহার করতে পারেন (যেমন: 80%)
উদাহরণ:
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - এর বর্ডার মুছে ফেলা
ডিফল্ট হিসেবে iframe এর চারদিকে একটি কালো বর্ডার থাকে
বর্ডারটি মুছার জন্য একটি স্টাইল অ্যাট্রিবিউট যোগ করুন এবং CSS এর বর্ডার প্রোপার্টি ব্যবহার করুন
উদাহরণ :
<iframe src="demo_iframe.htm" style="border:none"></iframe>
CSS এর সাহায্যে iframe বর্ডার এর সাইজ, রং এবং স্টাইলও পরিবর্তন করা যায়
উদাহরণ :
<iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>
কোন একটি লিংক এর টার্গেট হিসাবে আইফ্রেম ব্যবহার করন
একটি আইফ্রেমকে কোন একটি লিঙ্ক এর টারগেট ফ্রেম হিসেবে ব্যবহার করা যায়
লিঙ্কটির target অ্যাট্রিবিউটটি অবশ্যই আইফ্রেম এর name অ্যাট্রিবিউটটিকে নির্দেশ করতে হবে
উদাহরণ :
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://bangla.salearningschool.com" target="iframe_a">http://bangla.salearningschool.com</a></p>
এইচটিএমএল এ আইফ্রেম ট্যাগ
এইচটিএমএল এ আইফ্রেম ট্যাগ হচ্ছে : </iframe>
যা একটি ইনলাইন ফ্রেম সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়।
এইচটিএমএল প্রতিক্রিয়াশীল ওয়েব ডিজাইন (HTML Responsive Web Design)
Huge Sell on Popular Electronics
স্বর্ণা আখতার
প্রতিক্রিয়াশীল ওয়েব ডিজাইন এর প্রধান কাজ ই হল আপনার ওয়েব সাইটকে বিভিন্ন ডিভাইস যেমন, মোবাইল বা কম্পিউটার এর লেআউট এর সাথে খাপ খাওয়ানো। এটি আপনার ওয়েব সাইটকে সহজবোধ্য ও সুখপাঠ্য করে গড়ে তোলে।
প্রতিক্রিয়াশীল ওয়েব ডিজাইন লেআউট যেভাবে তৈরি করবেন
প্রতিক্রিয়াশীল ওয়েব ডিজাইন আপনাকে নিজেই অথবা আপনি কিভাবে ফুটিয়ে তুলবেন সেটার উপর নির্ভর করবে।
নিচে একটি উদাহরন দেয়া হল
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
বুটস্ট্র্যাপ ব্যবহারের মাধ্যমে
আগেকার বিদ্যমান সিএসএস ফ্রেমওয়ার্ক এর মাধ্যমেও প্রতিক্রিয়াশীল ওয়েব ডিজাইন বানানো যায়। আর এখানে বুটস্ট্র্যাপ ই হল এইচ টি এম এল, সিএসএস এবং যে এস ফ্রেমওয়ার্ক এর সবচেয়ে জনপ্রিয় পদ্ধতি ।
বুটস্ট্র্যাপ আপনার সাইট কে যে কোন সাইজ যেমন, ল্যাপটপ বা কম্পিউটার এ ভালোভাবে দেখাতে সহায়তা করে।
উদাহরের সাহায্যে দেখানো হল
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="jumbotron"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="row"> <div class="col-md-4"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="col-md-4"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="col-md-4"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </div> </body> </html>
এইচটিএমএল লেআউট (HTML Layout)
Huge Sell on Popular Electronics
Md. Mursedul Islam Sumon
Web Designer
এইচটিএমএল লেআউট (HTML Layouts)
বিভিন্ন ওয়েবসাইটে অনেক সময়ই লক্ষ্য করা যায় যে লিখাগুলো কয়েকটি কলামে বিভক্ত করা থাকে। যেমন, ম্যাগাজিন, নিউজপেপার ইত্যাদি।
HTML এ <div> tag এর ব্যবহার করে layout design বা কলামে বিভক্ত করা যায়।
div element ব্যবহার করে প্রায় layout করা হয়, কারন div ব্যবহার করলে একে সহজেই CSS দিয়ে এর অবস্থান ও সবকিছু design করে নেয়া যায়।
নিচের উদাহরণটিতে চারটি div ব্যবহার করে কয়েকটি কলাম তৈরি করা হল-
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
উপরোক্ত html এর CSS part টুকু নিম্নরুপ
<style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style>
ফলাফলঃ
HTML5 ব্যবহার করে ওয়েবসাইট বিন্যাস
HTML5 দিয়ে খুব সুন্দরভাবে ও সহজেই একটা website এর layout তৈরি করা যায়।
HTML5 এর কিছু নতুন Tag ব্যবহার করে সহজেই website এর বিভিন্ন part আলাদা করা যায়।
| header = এই tag ব্যবহার করে website এর header section কে বুঝানো হয়। |
| nav = এই tag ব্যবহার করে মেনুর আইটেমগুলোর link করা হয়। |
| section = এই tag ব্যবহার করে কোন document এর section বুঝানো হয়। |
| article = এই tag দিয়ে একটি article বুঝানো হয়। |
| aside = এই tag দিয়ে পেজ এর sidebar বুঝানো হয়। |
| footer = এই tag দিয়ে পেজ এর সর্বনিম্ন অংশ বা footer part বুঝানো হয়। |
নিচের উদাহরনে <header>, <nav>, <section>, এবং <footer> ব্যবহার করে layout তৈরি করা দেখানো হল-
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright © W3Schools.com
</footer>
</body>
উপরোক্ত html এর CSS নিম্নে দেয়া হল-
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
টেবিল ব্যবহার করে HTML বিন্যাস
Table tag ব্যবহার করে html layout তৈরি করা যায়।
<body> <table class="lamp"> <tr> <th> <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"> </th> <td> The table element was not designed to be a layout tool. </td> </tr> </table> </body>
উপরোক্ত html এর CSS নিম্নে দেয়া হল-
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp th {
width:40px;
}
</style>
এইচটিএমএল ক্লাসেস (HTML Classes)
Huge Sell on Popular Electronics
শরিফুল ইসলাম
Php Coder
HTML Classes
সিএসএস এর মাধ্যমে বিভিন্ন ক্লাস এর এর স্টাইল সেট করে দেওয়া যায়।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> </div> </body> </html>
Classing ব্লক elements
এইচটিএমএল <div> একটি ব্লক লেভেল উপাদান। অন্যান্য এইচটিএমএল এর উপাদানের ক্ষেত্রে এটি container হিসেবে কাজ করতে পারে। সবগুলো এইচটিএমএল উপাদানের div এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> .cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </body> </html>
Classing inline elements
এইচটিএমএল এর <span> উপাদান একটি ইনলাইন উপাদান যা container এর টেক্সট এর জন্য ব্যবহার হয়ে থাকে। সবগুলো এইচটিএমএল উপাদানের span এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> span.red {color:red;} </style> </head> <body> <h1>My <span class="red">Important</span> Heading</h1> </body> </html>
এইচটিএমএল ব্লক (HTML Block and Inline Elements)
Huge Sell on Popular Electronics
এইচটি এম এল ব্লক (HTML Block Elements)
নাম-শরিফুল ইসলাম
Php Coder
উদাহরণঃ
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
ফলাফলঃ
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
এইচটিএমএল এর ব্লক উপাদান এবং ইনলাইন উপাদান
প্রায় প্রত্যেক এইচটিএমএল উপাদানকে ব্লক লেভেল উপাদান বা ইনলাইন উপাদান হিসেবে চিহ্নিত করা হয়ে থাকে। যখন ব্রাউজার এ ডিসপ্লে করা হয় তখন সাধারনত ব্লক লেভেল উপাদানগুলো নতুন লাইন থেকে শুরু হয়।
Examples: <h1>, <p>, <ul>, <table>
ইনলাইন উপাদান গুলো কোন লাইন এর বিরতি ছারাই শুরু হয়
Examples: <b>, <td>, <a>, <img>
এইচটিএমএল DIV Element
<div> একটি ব্লক লেভেল উপাদান যা অন্য এইচটিএমএল উপাদান এর সাথে container হিসেবে ব্যবহার করা যায়। এই <div> উপাদানের কোন স্পেশাল অর্থ নেই। এর জন্য কোন attribute এর দরকার পরে না। কিন্ত স্টাইল এবং ক্লাস হল কমন। কারন এটি ব্লক লেভেল উপাদান যা ব্রাউজার এ লাইন এর বিরতি হিসেবে প্রকাশ করে।
এইচটিএমএল <span> element
<span> একটি ইনলাইন উপাদান যা টেক্সট এর সাথে container হিসেবে ব্যবহার করা যায়। এই <span> উপাদানের কোন স্পেশাল অর্থ নেই। এর জন্য কোন attribute এর দরকার পরে না। কিন্ত স্টাইল এবং ক্লাস হল কমন। <div> উপাদান এর মতন <span> অটোমেতিক ফরম্যাট নেই।
উদাহরণঃ
<h1>My <span style="color:red">Important</span>Heading</h1>
ফলাফলঃ
My ImportantHeading
এইচটিএমএল grouping ট্যাগ
<div>-ডকুমেন্ট কে ব্লক- লেভেল হিসেবে ডিফাইন করার জন্য
<span>- ডকুমেন্ট কে ইনলাইন হিসেবে ডিফাইন করার জন্য
এইচটিএমএল লিস্ট (HTML tag list)
Huge Sell on Popular Electronics
Tamim Ikbal
HTML List ট্যাগ কি এবং এটা কিভাবে HTML এ কাজ করে ?
একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।
Unordered List
এটিই সবচেয়ে বেশি ব্যবহৃত হয় প্রফেশনালি। <ul></ul> এর ভিতরে রাখতে হবে এবং <li></li> এলিমেন্টের ভতর একটা একটা করে আইটেম রাখতে হবে। প্রদর্শন করবে তালিকা আকারে কোন নাম্বারিং থাকবেনা। বাই ডিফল্ট একটা গোল চিহ্ন প্রতিটি আইটেমের বাপাশে থাকে।
<html>
<head>
<title>your website name</title>
</head>
<body>
<ul>
<li>Bangla</li>
<li>English</li>
<li>Social Science</li>
<li>Mathemetaics</li>
</ul>
</body>
</html>
আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।
- Bangla
- English
- Social Science
- Mathemetaics
Ordered List
কখনও নাম্বার দিয়ে তালিকা প্রয়োজন হতে পারে তখন <ol></ol> এর ভিতর li ট্যাগ দিয়ে বানাতে পারেন ।
<html>
<head>
<title>your website name</title>
</head>
<body>
<ol start="10">
2.<li>iPad</li>
3.<li>iPhone</li>
4.<li>MacBook Air</li>
5.</ol>
</body>
</html>
আপনার ওয়েব ব্রাউজার এ রান করার তার দেখতে নিচের মতো দেখতে পারবেন ।
- iPad
- iPhone
- MacBook Air
হয়তো ভাবছেন <ol start="10"> লিখার পর বাকি সব গুল 10,11,12 তালিকা কি করে করলাম । একটু লক্ষ করেন <ol start=" পর আমি “10” লিখছি যার কারনে 10 থেকে তালিকা শুরু হইছে । আর তিনটি তালিকা থাকার কারনে ১০,১১,১২ পর্যন্ত প্রদশন করছেন । আপনারা যদি <ol start=" লিখার পরে “49” দিন এবং ট্যাগ শেষ করেন তাহলে ৪৯ থেকেই আপনার তালিকা শুরু হবে ।
এইচটিএমএল টেবিল (HTML Table)
Huge Sell on Popular Electronics
HTML Table
মো: আশিকুজ্জামান আশিক
রাজশাহী বিশ্ববিদ্যালয়।
HTML টেবিল ব্যবহার করে আমরা কোন web পেজে বিভিন্ন ধরনের পরিসংখ্যানমূলক ডেটা পাঠকের নিকট আকর্ষণীয় ভাবে উপস্থাপন করতে পারবো।
HTML টেবিলের উদাহরন
এই পর্যায়ে আমরা একটি HTML টেবিলের উদাহরন দেখব:
| সিরিয়াল নাম্বার | নামের প্রথম অংশ | নামের শেষ অংশ | নাম্বার |
| ১. | আল | আমিন | ৯০ |
| ২. | মেহেদি | হাসান | ৮৫ |
| ৩. | রোজিনা | আক্তার | ৭৭ |
| ৪. | মাহফুজুর | রহমান | ৭৬ |
| ৫. | তানজিলা | আক্তার | ৬৯ |
এই টেবিলটি তৈরি করার জন্য আপনি নিচের কোডটি কপি করে আপনার ব্লগে ব্যবহার করতে পারেন।
<table style="width:100%"> <tr>
<th> সিরিয়াল নাম্বার </th> <th> নামের প্রথম অংশ </th> <th> নামের শেষ অংশ </th> <th> প্রাপ্ত নাম্বার </th> </tr> <tr> <td> ১.</td> <td> আল</td> <td> আমিন</td>
<td> ৯০</td> </tr>
<tr> <td> ২.</td> <td> মেহেদি</td> <td> হাসান</td>
<td> ৮৫</td> </tr> </table>
এইভাবে আপনি <tr> থেকে </tr> পর্যন্ত অংশ পর্য়ন্ত অংশটুকু বার বার ব্যবহার করে টেবিলের সাইজ বাড়াতে পারেন।
এবার এই টেবিলে ব্যবহৃত গুরুত্বপূর্ণ ট্যাগ এর ব্যবহার সম্পর্কে কিছু তথ্য জানি।
<table> এবং </table> ট্যাগ দ্বারা কোন টেবিলের শুরু এবং শেষ চিহ্নিত করা হয়।
<tr> এবং </tr> ট্যাগ দ্বারা কোন টেবিলে ব্যবহৃত row বা সারির শুরু এবং শেষ নির্দেশ করা হয়।
<td> এবং </td> ট্যাগ দ্বারা কোন টেবিলের row বা সারিগুলোকে ছোট ছোট সেলে বিভক্ত করা হয়।
<th> এবং </th> ট্যাগ দিয়ে কোন টেবিলের হেডিংকে চিন্হিত করা হয়। [সাধারনত এই ট্যাগ ব্যবহার করলে লেখাগুলো ‘Bold’ বা মোটা হয়ে web-পেজে দেখাবে।]
HTML টেবিলে Border ট্যাগ এর ব্যবহার
HTML টেবিলকে আকর্ষনিয় করতে আমরা অনেক সময় Border ট্যাগ ব্যবহার করে থাকি। এই ট্যাগ ব্যবহার করে টেবিলের বর্ডার প্রয়োজন অনুযায়ি মোটা এবং চিকন করে উপস্থাপন করতে পারবেন।
উদাহরন:
<table border="1" style="width:100%"> <tr> <td>হাসান</td> <td>জামিল</td> <td>৫০</td> </tr> <tr> <td>কবির</td> <td>খান</td> <td>৯১</td> </tr> </table>
এখানে “<table border="1" style="width:100%">” দ্বারা একই টেবিলের Border মোটা বা চিকন ভাবে উপস্থাপন করতে পারবেন। "1" এর মান ইচ্ছে মত পরিবর্তন করে বর্ডার পরিবর্তন করতে পারবেন।
এইচটি এম এল ইমেজ (HTML Image)
Huge Sell on Popular Electronics
এইচটি এম এল ইমেজ (HTML Images)
মোঃ রফিকুল ইসলাম
উদাহরণঃ
DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountains</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
</body>
</html>
ফলাফলঃ
Spectacular Mountains
অবশ্যই ইমেজ (ছবির) উচ্চতা এবং প্রসস্থতা উল্লেখ করে দিতে হবে। যদি উচ্চতা এবং প্রসস্থতা নির্দিষ্ট করে না দেয়া হয়ে তাহলে পেজে ইমেজ লোড হওয়ার সময় ইমেজটি ফ্লিক (পেজের সাথে ছবিটি সামঞ্জস্য হওয়ার সময় ছবিটি লাফালাফি) করবে।
এইচটিএমএল ইমেজ সিনট্যাক্স
এইচটিএমএল এ ইমেজকে <img> ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়।
<img> ট্যাগ এর ভিতরে শুধুমাত্র্ অ্যাট্রিবিউট থাকে এবং এর কোন ক্লোজিং ট্যাগ থাকে না।
src অ্যাট্রিবিউটম ইমেজ এর ইউআরএল (ওয়েব ঠিকানা বা ইমেজ এর অবস্থান এর ঠিকানা) কে সংজ্ঞায়িত করে।
<img src="url" alt="some_text">
Alt অ্যাট্রিবিউট
Alt অ্যাট্রিবিউট দ্বারা ওয়েব এ যদি কোন কারনে ইমেজ লোড না হতে পারে তাহলে উক্ত ইমেজ এর বিকল্প হিসেবে কি Text প্রদর্শিত হবে তা নির্ধারণ করে।
Alt অ্যাট্রিবিউট এর ভেলু (মান) হবে আপনি যে Text টি ইমেজ লোড না হলে প্রদর্শন করতে চান সেই Text.
<img src="html5.gif" alt="The official HTML5 Icon">
ফলাফল
Alt অ্যাট্রিবিউট অবশ্যই প্রদান করত হবে। এটি ছাড়া একটি ওয়েব পেজ সঠিকভাবে যাচাই করা যায় না।
এইচটিএমএল স্ক্রিন রিডার
স্ক্রিণ রিডার সফটওয়্যারগুলো পর্দায় কি প্রদর্শিত সকলকিছু পড়তে পারে।
ওয়েব এ ব্যবহৃত এইচটিএমএল কোড Text থেকে বক্তৃতা, শব্দের আইকন বা যেকোন প্রতীকি আউটপুট পুনরুদ্ধার করতে পারে।
স্ক্রিণ রিডার সাধারণত যারা অন্ধ, দৃষ্টিপ্রতিবন্ধি, অশিক্ষিতদের জন্য ব্যবহৃত হয়।
নোট: স্ক্রিন রিডার Alt অ্যাট্রিবিউট পড়তে পারে।
ছবির আকার - প্রস্থ এবং উচ্চতা
ইমেজ (ছবির) width (প্রস্থ) এবং height (উচ্চতা) নির্ধারণের জন্য আপনি style অ্যাট্রিবিউট ব্যবহার করতে পারেন।
এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):
<img src="Mountain.jpg" alt="Mountain View" style="width:128px;height:128px">
ফলাফল:
বিকল্প হিসেবে আপনি width এবং height অ্যাট্রিবিউট ব্যবহার করতে পারেন।
এর মান পিক্সেল দ্বারা নির্ধারণ করা হয় (মান এর পরে px লিখতে হয়):
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Width এবং Height বা Style?
উভয় width, height, এবং style অ্যাট্রিবিউট লেটেস্ট HTML5 সাপর্ট করে।
আমরা আপনাকে style অ্যাট্রিবিউট ব্যবহারের পরামর্শ দেব। এটি স্টাইল শীটকে ইমেজ এর ডিফল্ট আকার পরিবর্তন করতে বাধা দেয়।
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></body>
</html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body><img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128"></body>
</html>
অন্য ফোল্ডার এর ছবি যদি উল্লেখ করে দেয়া না হয় তাহলে ব্রাউজার ছবি খুঁজে পেতে ওয়েব পেজ এর একই ফোল্ডার এ খোঁজ করে। ওয়েব পেজ এ এটিই সাধারণ, যদি আপনি কোন সাব ফোল্ডার এ ইমেজটি রাখেন তাহলে এভাবে তা উল্লেখ করে দিতে হবে:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
ব্রাউজার যদি ইমেজটি খুঁজে না পায় তাহলে সে একটি ব্রোকেন লিঙ্ক আইকন প্রদশণ করবে। উদাহরণ
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px">
ফলাফল
অন্য সার্ভারের ছবি
কিছু ওয়েব সাইট তাদের ইমেজগুলো ইমেজ সার্ভারে লোড করে রাখে, আসলে আপনি বিশ্বের যে কোনো ওয়েব ঠিকানার ইমেজ এ প্রবেশ করতে পারেন:
<img src="http://www.rasta.edu.pk/images/EducationTraining1.jpg">
ফলাফল
অ্যানিমেটেড ছবি
GIF ফরমেট অ্যানিমেটেড ইমেজ সমর্থন করে।
<img src="Tree.gif" alt="Rain Tree" style="width:240px;height:320px">
ফলাফল
নোট: অ্যানিমেটেড ইমেজ ও ননঅ্যানিমেটেড ইমেজ এর সিনটেক্স এ কোন পার্থক্য নেই।
লিঙ্ক হিসেবে ইমেজ ব্যবহার
ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ ব্যাপার
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
ইমেজ ম্যাপ
একটি ইজেজ এর জন্য আপনি ক্লিক করা যায় এমনভাবে ইমেজ ম্যাপ তৈরি করতে পারেন।
উদাহরণ
usemap="#planetmap" style="width:145px;height:126px">
<map name="Bangladesh">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
ফলাফল
ইমেজ ফ্লোটিং
আপনি ইজেমকে প্যারাগ্রাফ এর বাম বা ডানে ভাসমান অবস্থায় রাখতে পারেন
উদাহরণ
<p>
60px;height:40px">
A paragraph with an image. The image floats to the left of the text.
</p>
ফলাফল:
.jpg?w=474)
A paragraph with an image. The image floats to the left of the text.
অধ্যায় সারসংক্ষেপ
- এইচটিএমএল এ <img> এলিমেন্ট ইমেজকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ src অ্যাট্রিবিউট ইমেজ এর ফাইল নেমকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ alt অ্যাট্রিবিউট ইমেজ এর বিকল্প টেক্সকে সংজ্ঞায়িত করে।
- এইচটিএমএল এ width এবং height অ্যাট্রিবিউট ইমেজ এর আকারকে সংজ্ঞায়িত করে।
- সিএসএস এ width and height প্রোপার্টি ইমেজ এর আকারকে সংজ্ঞায়িত করে (বিকল্পভাবে)।
- সিএসএস এ float প্রোপার্টি ইমেজকে ফ্লোট করতে সহায়তা করে।
- এইচটিএমএল এ usemap অ্যাট্রিবিউট ইমেজ ম্যাপ তৈরি করতে ব্যবহৃত হয়।
- এইচটিএমএল এ <map> এলিমেন্ট ইমেজ ম্যাপকে সংজ্ঞায়িত করতে ব্যবহৃত হয়।
- এইচটিএমএল এ <area> এলিমেন্ট ইমেজ ম্যাপ এর কোন এরিয়া ব্যবহার করতে তা সংজ্ঞায়িত করে।
এইচটিএমএল লিঙ্ক (HTML Link)
Huge Sell on Popular Electronics
এইচ টি এম এল লিঙ্ক
স্বর্ণা আখতার
সম্পাদনাঃ মোঃ রফিকুল ইসলাম
প্রায় সকল ওয়েবপেজ এ লিঙ্ক রয়েছে। লিঙ্ক এ ক্লিক করার মাধ্যমে ব্যবহারকারী এক পেজ থেকে অন্য পেজে যেতে পারে।
এইচটিএমএল লিঙ্ক - হাইপারলিঙ্ক
হাইপারলিঙ্ক হচ্ছে একটি Text, বা ছবি যার উপর ক্লিক করার মাধ্যমে আপনি অন্য আরেকটি ওয়েবপেজে/ডকুমেন্ড এ চলে যেতে পারে।
এইচটিএমএল লিঙ্ক - সিনট্যাক্স
এইচ টি এম এল এ লিঙ্ক সিনট্যাক্সগুলো কিভাবে গঠিত হয় নিচে তাঁর উদাহরন তুলে ধরা হল, <a> ট্যাগ দ্বারা লিঙ্ককে সঙ্গায়িত করা হয়।
লিঙ্ক সিনট্যাক্স
<a href="url">link text</a>
উদাহরনঃ
<a href="http://bangla.salearningschool.com/html/">Visit our HTML tutorial</a>
ফলাফলঃ
এখানে href অ্যাট্রিবিউট ওয়েব পেজ এর গন্তব্যকে নির্দেশ করে করে যেমন, http://bangla.salearningschool.com/html/
আর link text (Visit our HTML tutorial) হল প্রদর্শিত অংশ যার উপর ক্লিক করলে আপনি একটি নির্দিষ্ট ওয়েব পেজ এ স্থানান্তিরিত হবেন।
নেটঃ link text সবসময়ই টেক্স হতে হবে এমন কোন কথা নেই, এটি ছবি বা এইচটিএমএল এর যেকোন উপাদান হতে পারে।
লোকাল লিঙ্ক
উপরের উদাহরণে একটি সংয়সম্পূর্ণ ওয়েব এড্রেস (URL) ব্যবহার করা হয়েছে।
একটি লোকাল লিঙ্ক (একই ওয়েব সাইটের লিঙ্ক) নির্দিষ্ট করা হয় আপেক্ষিক URL এর সাহায্যে (http://www.... ব্যতীত)
যেমনঃ
<a href="html_images.asp">HTML Images</a>
এইচটিএমএল লিঙ্ক - কালার এবং আইকন
আপনি যখন কোন লিঙ্ক এর উপর নিয়ে যান তখন সাধারণত দুপ্রকার ঘটনা ঘটতে পারেঃ
১. মাউস এর তীর টিহ্নটি একটা ছোট হাতের রুপ নিতে পারে।
২. লিঙ্ক এর বিষয়বস্তু যেমন লিঙ্ক টেক্সট ইত্যাদির কালার পরিবর্তন হয়ে থাকে।
সাধারনত লিঙ্কগুলো যে কোন ব্রাউজার এ নিম্নোক্তভাবে দেখা যায়
১. অদেখা লিঙ্কগুলোর নিচে আন্ডার লাইন এবং এদের কালার নীল হয়।
২. দেখা লিঙ্কগুলোর নিচেও আন্ডার লাইন থাকে কিন্তু এদের কালার সাধারনত রক্তবর্ণ হয়।
৩. একটা সচল লিঙ্কএর নিচেও একইভাবে আন্ডার লাইন কিন্তু লাল কালারের হয়ে থাকে।
আপনি style ব্যবহার করে ডিফল্ট কালার ও আন্ডারলাইন পরিবর্তন করতে পারেন।
উদাহরণঃ
<style>
a:link {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>
a:link {color:#000000; background-color:transparent; text-decoration:none}
a:visited {color:#000000; background-color:transparent; text-decoration:none}
a:hover {color:#ff0000; background-color:transparent; text-decoration:underline}
a:active {color:#ff0000; background-color:transparent; text-decoration:underline}
</style>
এইচটিএমএল লিঙ্ক - টার্গেট অ্যাট্রিবিউট
target অ্যাট্রিবউট নির্দারণ করে ডকুমেন্টটি কোথায় খুলবে।
উদাহরণস্বরূপ ডকুমেন্টটি একই উইন্ডোতে খুলতে পারে বা নতুন ট্যাব এও খুলতে পারেঃ
<a href="http://bangla.salearningschool.com/html/" target="_blank">Visit our HTML tutorial</a>
ফলাফল
| Target Value | বিবরণ |
|---|---|
| _blank | লিঙ্ককৃত ডকুমেন্টটি নতুন একটি উইন্ডো বা ট্যাব এ খোলে |
| _self | লিঙ্ককৃত ডকুমেন্টটি যে ফ্রেমে ক্লিক করেছেন সেই একই ফ্রেমে খুলবে (এটিই ডিফল্ট হিসেবে থাকে) |
| _parent | লিঙ্ককৃত ডকুমেন্টটি মুল ফ্রেমে খোলে |
| _top | লিঙ্ককৃতডকুমেন্টটি সম্পূর্ণ উইন্ডো জুড়ে খোলে |
| framename | লিঙ্ককৃত ডকুমেন্টটি নির্দিষ্ট নামের ফ্রেমে খোলে |
আপনার ওয়েব পেজটি যদি একটি ফ্রেম লক করা থাকে, তাহলে target="_top" ব্যহার করে লক ভেঙ্গে ফেলতে পারেন।
উদাহরণঃ
<a href="http://bangla.salearningschool.com/html/" target="_top">Visit our HTML tutorial</a>
ফলাফলঃ
এইচটিএমএল লিঙ্ক - ইমেজ/ছবি লিঙ্ক হিসেবে ব্যবহার
ইমেজকে লিঙ্ক হিসেবে ব্যবহার করা খুবই সাধারণ
উদাহরণঃ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
ফলাফলঃ
এইচটিএমএল লিঙ্ক - id অ্যাট্রিবিউট
<a> এলিমেন্ট এর সাথে একটি id অ্যাট্রিবউট যোগ করুন
<a id="tips">Useful Tips Section</a>
<a> এলিমেন্ট এ একটি লিঙ্ক সংযুক্তকরণ
<a href="#tips">Visit the Useful Tips Section</a>
<a> এলিমেন্ট এ অন্য পেজ এর একটি লিঙ্ক যুক্তকরণ
<a href="http://bangla.salearningschool.com/html_links.htm#tips">Visit the Useful Tips Section</a>
সারসংক্ষেপ
• এইচটিএমএল <a> এলিমেন্ট এর ব্যবহার লিঙ্ককে সঙ্গালিত করে
• এইচটিএমএল href অ্যাট্রিবউট এর ব্যবহার লিঙ্ক এর এড্রেসকে সঙ্গায়িত করে
• এইচটিএমএল target অ্যাট্রিবউট এর ব্যবহার লিঙ্কটি কোথায় খুলবে তা বোঝায়
• এইচটিএমএল <img> এলিমেন্ট এর ব্যবহার ইমেজ/ছবিকে লিঙ্ক সিহেবে ব্যবহার করে
• এইচটিএমএল id অ্যাট্রিবউট (id="value") এর ব্যবহার বুকমার্ক ডিফাইন করার জন্য ব্যবহৃত হয়
• এইচটিএমএল href অ্যাট্রিবউট (href="#value") এর ব্যবহার বুকমার্ক এ ঠিকানা বুঝায়
এইচটিএমএল এর সিএসএস (HTML Style – CSS)
Huge Sell on Popular Electronics
শরিফুল ইসলাম
Php Coder
HTML Styles - CSS
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body {background-color:lightgray} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
সিএসএস দ্বারা এইচটিএমএল কে স্টাইল করা
সিএসএস(css) এর পূর্ণ নাম হল Cascading Style Sheets ।
তিনভাবে স্টাইল কে এইচটিএমএল এর সাথে যুক্ত করা যায়
• Inline-স্টাইল attribute ব্যবহার করে এইচটিএমএল এর সাথে যুক্ত করা যায়
• Internal- <style> এলিমেন্ট এইচটিএমএল এর head সেকশন এর মধ্যে যুক্ত করা যায়
• External- এক বা একাধিক বাইরের সিএসএস ফাইল যুক্ত করে কাজ করা যায়।
তবে সব থেকে কমন হল বাইরে থেকে একটি সিএসএস ফাইল যুক্ত করা। কিন্তু আমরা এইখানে internal স্টাইল ব্যবহার করব। কারন এতে আমাদের জন্য স্টাইল এর জন্য ভিন্ন ভিন্ন ফাংশন গুলো বুজতে ঝুব সুবিধা হবে।
সিএসএস syntax
সিএসএস স্টাইলিং এর জন্য নিন্মোক্ত সিনটেক্স ব্যবহার করা হয়
element { property:value ; property:value }
এই element হল এইচটিএমএল এর একটি উপাদানের নাম। property হল সিএসএস একটি প্রপার্টি। value হল সিএসএস প্রপার্টি এর একটি মান।
অনেকগুলো স্টাইল থাকলে তাহলে সেগুলো সেমিকোলন দিয়ে আলাদা করতে হয়।
Inline স্টাইল (inline css)
এইচটিএমএল উপাদানের ক্ষেত্রে একটি ইউনিক স্টাইল এর জন্য inline styling খুবই উপযোগী। এই উদাহরনে ইনলাইন স্টাইল এর মাধ্যমে একটি ইউনিক heading এর টেক্সট এর কালার পরিবর্তন করা হচ্ছে
উদাহরণ
<h1 style="color:blue">This is a Blue Heading
Internal স্টাইল (internal css)
একটি পেজ এর সকল এইচটিএমএল উপাদানের জন্য একটি কমন স্টাইল ব্যবহার করা হয়েছে আর তা হল internal style sheet।
সাধারনত এটি <style> এলিমেন্ট এর সাহায্যে হেড সেকশন এর মধ্যে ইনক্লুড করতে হয়।
উদাহারন
<!DOCTYPE html> <html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
External স্টাইল (External সিএসএস)
অনেকগুলো পেজ এর স্টাইল নিয়ন্ত্রণ করার জন্য এই পধতি চালানো হয়। এই ক্ষেত্রে মাত্র সিএসএস ফাইল এর একটি উপাদান পরিবর্তন করার মাধ্যমে বাকি সবগুলো পেজ এর পরিবর্তন করা সম্ভব। হেড সেকশন এর মধ্যে external সিএসএস ফাইল এর লিঙ্ক করে দিতে হয়।
উদাহরণ
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
সিএসএস ফন্টস
সিএসএস এর color প্রপার্টি দ্বারা এইচটিএমএল পেজ এর টেক্সট এর কালার কি হবে তা ডিফাইন করা হয়। সিএসএস এর font-family দ্বারা টেক্সট এর ফন্ট কোন ফন্ট হবে তা ডিফাইন করে। সিএসএস এর font-size প্রপার্টি দ্বারা টেক্সট এর আকার কতটুকু হবে তা ডিফাইন করে।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> h1 { color:blue; font-family:verdana; font-size:300%; } p { color:red; font-family:courier; font-size:160%; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
তবে <font> ট্যাগ টি এইচটিএমএল এর পুরাতন ভার্সন এ কাজ করে এইচটিএমএল৫ এ কাজ করে না।
সিএসএস বক্স মডেল
প্রত্যেকটি এইচটিএমএল এর উপাদানের জন্য একটি বক্স নির্দিষ্ট করা থাকে কিন্তু আমরা তখনি এটা দেখতে পারব যখন আমরা সিএসএস এর মধ্যে border প্রপার্টি ঘোষণা করব
উদাহরণ
p { border:1px solid black; }
border এর মধ্যে ফাকা তৈরি করার জন্য আমরা padding প্রপার্টি ব্যবহার করব
উদাহারন
p { border:1px solid black; padding:10px; }
বর্ডার এর বাইরে মার্জিন এর জন্য আমরা margin প্রপার্টি ব্যবহার করব
উদাহরণ
p { border:1px solid black; padding:10px; margin:30px; }
সিএসএস উদাহরণ এ px ব্যবহার করা হয়েছে এতে পিক্সেল বুঝায়
ID Attribute
উপরের সবগুলো উদাহরণ এ সিএসএস এর সাধারন নিয়ম ব্যবহার করা হয়েছে।
যদি কোন একটি নির্দিষ্ট স্টাইল নির্দিষ্ট কোন এইচটিএমএল এর উপাদানের ক্ষেত্রে প্রয়োগ করতে হয় তাহলে id attribute প্রথমে এইচটিএমএল এর মধ্যে যোগ করতে হবে
উদাহরণ
<p id="p01">I am different</p>
এরপর id কে সিএসএস এর মধ্যে কল করে স্টাইল যোগ করতে হবে
উদাহরণ
p#p01 { color:blue; }
Class attribute
কোন নির্দিষ্ট উপাদানের ধরন পরিবর্তন করার জন্য ক্লাস (class) attribute এইচটিএমএল এর উপাদানের মধ্যে যোগ করতে হয়
উদাহরণ
<p class="error">I am different</p>
একন আপনি নির্দিষ্ট ক্লাস এর সাথে সকল এলিমেন্ট এ ভিন্ন ভিন্ন স্টাইল দিতে পারবেন।
উদাহরণ
p.error { color:red; }
নোটঃ id ব্যবহার করা হয় একটি ইউনিক উপাদানের জন্য এবং class ব্যবহার করা হয় একটি এলিমেন্ট এর গ্রুপ এর জন্য।
সীমাবদ্ধতা
পুরাতন এইচটিএমএল ভার্সন এর অনেক ট্যাগস এবং attributes ব্যবহার করা হয় স্টাইল documents এ। কিন্রু এইগুলো এইচটিএমএল ৫ এ সাপোর্ট করে না।
যে উপাদান বা elements গুলো বাদ দিতে হবে ব্যবহার করা বাদ দিতে হবে: <font>, <center> এবং <strike>.
যে attribute গুলো বাদ দিতে হবে: color এবং bgcolor
একনজরে প্রপার্টি গুলো
Inline styling এ এইচটিএমএল এর স্টাইল attribute এর ব্যবহার
Internal css এ এইচটিএমএল এর <style> এলিমেন্ট এর ব্যবহার
External css এ এইচটিএমএল এর <link> উপাদানের ব্যবহার
সেকশন এ <style> এবং <link> elements যুক্ত করার জন্য এইচটিএমএল এর <head> এলিমেন্ট এর ব্যবহার
Text কালার করার জন্য এ সিএসএস এর কালার প্রপার্টি এর ব্যবহার
Text এর ফন্ট নির্দারণের জন্য সিএসএস এর font-family প্রপার্টি এর ব্যবহার
Text এর ফন্ট সািইজ নির্দারণের জন্য সিএসএস এর font-size প্রপার্টি এর ব্যবহার
উপাদানের বর্ডার দেখানোর জন্য সিএসএস এর border প্রপার্টি এর ব্যবহার
বর্ডার এর ভিতরে স্পেস নির্দারনের জন্য সিএসএস এর padding প্রপার্টি এর ব্যবহার
বর্ডার এর বাহিরের দিকের স্পেস নির্দারনের জন্য সিএসএস এর margin প্রপার্টি এর ব্যবহার
এইচটিএমএল স্টাইল ট্যাগ
<style> - একটি document মধ্যে সমস্ত স্টাইল এর তথ্যকে সঙ্গায়িত করে
<link> - document এবং external রিসোর্স ফাইল এর মধ্যে সম্পর্ক নির্দারণ করে
এইচটিএমএল কমেন্ট (HTML Comment)
Huge Sell on Popular Electronics
রাজু (DU)
এইচ টি এম এল এ কমেন্ট করার জন্য কমেন্ট ট্যাগ <!-- এবং --> ব্যবহার করা হয়।
HTML Comment Tags এইচটিএমএল কমেন্ট ট্যাগ
HTML source এ আপনি নিম্নোক্ত syntax ব্যাবহার করে comments করতে পারেনঃ
<!-- এখানে আপনার Comment লিখুন -->
নোটঃ এখানে অবশ্যই মনে রাখতে হবে যে একটি বিস্ময় সূচক চিহ্ন (!) শুরুর ট্যাগ এ ব্যাবহার করা হয়েছে। কিন্তু সমাপ্তি ট্যাগ হিসেবে কোন (!) ব্যবহার করা হয়নি।
Comments গুলি browser এ প্রদর্শিত হয় না কিন্তু তারা HTML document এ সাহায্য করে থাকে।
Comments দ্বারা আপনি আপনার HTML এ notifications and reminders ঠিক করে দিতে পারবেন।
উদাহরনঃ
<!-- এখানে আপনার Comment লিখুন -->
<p>এখানে আপনার paragraph লিখুন .</p>
<!-- কোন information মনে রাখার জন্য এখানে যোগ করুন -->
HTML debugging এর জন্য comment অসাধারন কাজ করে, কেননা আপনি HTML code line এর বাইরে comment করতে পারেন এবং কমেন্ট দেখে ত্রুটি খুজে বের করতে পারবেন।
উদাহরনঃ
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
Conditional Comments (শর্তাধীন Comment)
HTML এ Conditional Comment ব্যাবহারে আপনি বাধার সম্মুখীন হতে পারেনঃ
<!--[if IE 8]>
.... some HTML here ....
endif]-->
Conditional comment সংবলিত HTML tag কেবলমাত্র Internet Explorer দ্বারা ই কার্যকর হতে পারে।
Software Program Tags
HTML comment tag গুলি বিভিন্ন HTML software program দ্বারা তৈরি হতে পারে।
উদাহরণসরূপঃ <!--webbot bot--> tag টি HTML comment এর ভিতরে FrontPage এবং Expression Web দ্বারা মোড়ান থাকে।
নিয়ম হিসেবে এইসব tag কে রেখে দেয়া হয় software টিকে সহায়তা করার জন্য, যা দ্বারা এটি তৈরি করা হয়েছে।
পিএইচপি ৫ টিউটোরিয়াল (PHP 5 Tutorial in Bangla)
Huge Sell on Popular Electronics
নাম-শরিফুল ইসলাম
Job category-Php Coder
সাধারনত পিএইচপি একটি server site scripting language. Php ব্যবহার করে ওয়েব পেজ কে অতি আধুনিক এবং ডাইনামিক করে তলা যায়।
কোন লেখা কে আমরা পিএইচপি এর মাধ্যমে দেখাতে চাইলে echo বা print”” ব্যবহার করতে পারি। যেমন-
<!DOCTYPE html> <html> <body> <?php echo "My first PHP script!"; ?> </body> </html>
নোটপ্যাড ওপেন করে এই example টুকু টাইপ করে ফাইল টি সেভ করুন .php extension দিয়ে। তা না হলে এটি পিএইচপি ফাইল হিসেবে চলবে না। আরও একটি বিষয় পিএইচপি ফাইল রান করার জন্য নির্দিষ্ট ভাবে একটি সারভার লাগবে তা না হলে কখনই এই পিএইচপি চলবে না। এইজন্য আপনি xampp server ইন্সটল করে নিতে পারেন। xampp ইন্সটল করার পর c > XAMPP >htdocs এর ভিতরে একটি ফোল্ডার ওপেন করুন আপনি যেকোনো নাম দিতে পারেন। মনে করুন আপনি নাম দিলেন test এবং আপনার ফাইল টি এই test ফোল্ডার এর ভিতর রাখুন। পিএইচপি এর ফাইল এর নাম যেকোনো রাখতে পারেন। ব্রাউজার ওপেন করে এড্রেস বারে লিখুন localhost/test/[পিএইচপি ফাইল এর নাম.php].go বাটন এ ক্লিক করলে দেখুন আপনি পিএইচপি তে লেখা ব্রাউজার এ দেখতে পারবেন।
এইচটিএমএল শিরোনাম (HTML Headings)
Huge Sell on Popular Electronics
HTML Headings
HTML Documents এর ক্ষেত্রে Headings খুবই গুরুত্বপূর্ণ। <h1> থেকে <h6> tags দ্বারা Heading কে তুলে ধরা হয়।
<h1> tag দ্বারা সবচেয়ে গুরুত্বপূর্ণ ও <h6> tag দ্বারা অপেক্ষাকৃত কম গুরুত্বপূর্ণ Heading কে তুলে ধরা হয়।
উদাহরণস্বরূপঃ
<h1> এই হল একটি শিরোনাম </h1>
<h2> এই হল একটি শিরোনাম </h2>
<h3> এই হল একটি শিরোনাম </h3>
<h4> এই হল একটি শিরোনাম </h4>
<h5> এই হল একটি শিরোনাম </h5>
<h6> এই হল একটি শিরোনাম </h6>
ফলাফল:
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
এই হল একটি শিরোনাম
বিশেষ দ্রষ্টব্যঃ প্রত্যেক Heading এর আগে ও পরে browser স্বয়ংক্রিয়ভাবে কিছু empty space যোগ করে দেয়।
শিরোনাম (Heading) খুব গুরুত্বপূর্ণ
HTML Headings কে কেবল Heading এর জন্য ব্যবহার করতে হবে, কোন Text কে বড় (big) অথবা Bold করার জন্য Heading কে ব্যবহার করা যাবে না। আপনার web page গুলোর structure এবং content এর সূচি বানানোর জন্য সার্চিঞ্জিনগুলো আপনার headings কে ব্যবহার করে। User রা Heading এর দ্বারা আপনার web page এর সারমর্ম বুঝে নেয়। Document এর structure দেখানোর জন্যও Heading ব্যবহার করা গুরুত্বপূর্ণ। <h1> Heading হল প্রধান শিরোনাম, <h2> অপেক্ষাকৃত গৌন, <h3> তার চেয়ে কম গুরুত্বপূর্ণ এভাবেই ক্রমান্বয়ে ব্যবহৃত হয়।
HTML Horizontal Rules (আনুভূমিক নিয়ম)
HTML page এ <hr> tag আনুভূমিক রেখা তৈরি করে। বিষয়বস্তুকে চিহ্নিত করার জন্য <hr > element ব্যবহার করা হয়।
যেমনঃ
<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>
ফলাফল
↓
The hr tag defines a horizontal rule:
This is a paragraph.
This is a paragraph.
This is a paragraph.
↑
HTML এর <head> element
HTML এর <head> element টির HTML Headings এর সাথে কিছু করার নেই। <head> element meta data ধারণ করে। আর meta data web page এ দৃশ্যায়িত হয় না। <html> tag ও <body> tag এর মধ্যখানে HTML element অবস্থান করে।
উদাহরণস্বরূপঃ
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
ফলাফল
The HTML head element contains meta data.
Meta data is data about the HTML document.
HTML এর title element
HTML এর title element হল meta data। এটা HTML Documents এর title হিসেবে চিহ্নিত হয়। Document এ title কখনও প্রদর্শিত হয় না।
HTML এর meta element
HTML এর <meta> element ও আরেকটি meta data। HTML Document এর অন্যান্য তথ্য ও চরিত্র সেটকে তুলে ধরতে এটি ব্যবহৃত হয়।
এইচটিএমএল এর মৌলিক বিষয় (HTML Basic Example)
Huge Sell on Popular Electronics
এইচ টি এম এল এর সাধারন বিষয়াবলী
স্বর্ণা আখতার
(টিউটোরিয়াল টি পড়ার আগে অবশ্যই আপনাকে এইচ টি এম এল ট্যাগ এর ব্যবহার সম্পর্কে জানতে হবে। পরবর্তী অধ্যায় এ ট্যাগ সম্পর্কে আলোচনা করা হয়েছে।)
এইচ টি এম এল ডকুমেন্ট
সকল এইচ টি এম এল ডকুমেন্ট অবশ্যই ডকুমেন্ট এর টাইপ ঘোষণা এর মাধ্যমে শুরু করতে হয়। যেমন, <DOCTYPE html>
এইচ টি এম এল এর শুরু হয় <html> ট্যাগ দিয়ে এবং শেষ হয় </html> এর মাধ্যমে।
<body> এবং </body> এর মধ্যে প্রদর্শিত টেক্সট এইচ টি এম এল ডকুমেন্ট এর বিষয়বস্তু হিসাবে গণ্য হয়।
উদাহরনের সাহায্যে নিচে দেখানো হল
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ফলাফল
My First Heading
My first paragraph.
এইচ টি এম এল এর শিরোনাম
এইচ টি এম এল এর শিরোনাম গুলো <h1> এবং <h6> ট্যাগ দ্বারা নির্ধারণ করা হয়।
যেমন,
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
ফলাফল
This is a heading
This is a heading
This is a heading
এইচ টি এম এল প্যারাগ্রাফ
এইচ টি এম এল প্যারাগ্রাফগুলোকে <p> ট্যাগে দ্বারা নির্ধারণ করা হয়।
যেমন,
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
ফলাফল
This is a paragraph.
This is another paragraph.
এইচ টি এম এল লিঙ্ক
এইচ টি এম এল এর লিঙ্কগুলো <a> ট্যাগের মাধ্যমে লিখা হয়।
যেমন,
<a href="http://bangla.salearningschool.com">This is a link</a>
ফলাফল
এখানে, লিঙ্ক এড্রেস গুলো কি রকম হবে তা নির্ভর করে “href” attribute এর উপর। আর অ্যাট্রিবিউট গুলো এইচ টি এম এল এর উপাদানগুলো সম্পর্কে বিস্তারিত বিবরণ প্রদান করে।
এইচ টি এম এল ইমেজ
এইচ টি এম এল ইমেজগুলোকে <img> ট্যাগের মাধ্যমে লিখা হয়। আর এখানে src, alt, height এবং width গুলো অ্যাট্রিবিউট হিসাবে ব্যবহার করা হয়।
উদাহরনের মাধ্যমে দেখানো হল,
<img src="http://bangla.salearningschool.com/wp-content/uploads/2015/04/bangla.salearning.png" alt="http://bangla.salearningschool.com" width="660" height="150">
ফলাফল
এইচটিএমএল এডিটর (HTML Editor)
Huge Sell on Popular Electronics
এইচ টি এম এল এডিটর (HTML Editors)
এইচটিএমএল সম্পাদক
নয়ন চন্দ্র দত্ত
নোটপ্যাড বা TextEdit ব্যবহার করে এইচটিএমএল লিখা
পেশাদারী এইচটিএমএল এডিটর ব্যবহার করেও এইচটিএমএল সম্পাদনা করা যেতে পারে। যেমনঃ-
• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
তবে, এইচটিএমএল শেখার জন্য আমরা নোটপ্যাড (পিসি) বা TextEdit (ম্যাক) মত টেক্সট এডিটর সুপারিশ করি।
আমরা বিশ্বাস করি একটি সাধারণ টেক্সট এডিটর ব্যবহার করে এইচটিএমএল শিখাটা সবচেয়ে ভাল।
নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করতে নিম্নোক্ত ৪টি ধাপ অনুসরণ করুনঃ
ধাপ ১: নোটপ্যাড খোলা
উইন্ডোজ 7 বা তার আগের ভার্সন এ নোটপ্যাড ওপেন করতেঃ
ক্লিক Start (নীচে পর্দার বাম দিকে)। ক্লিক All Programs । ক্লিক Accessories । ক্লিক Notepad ।
Windows 8 বা তার পরের ভার্সন এ নোটপ্যাড খুলুনঃ
Start Screen ( উইন্ডো প্রতীক আপনার পর্দার নিচে বাম দিকে রয়েছে ) ওপেন করুন এবং Notepad টাইপ করুন।
ধাপ ২: কিছু এইচটিএমএল লিখুন
লিখুন বা নোটপ্যাডের মধ্যে কিছু এইচটিএমএল কপি করুন।
<DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
স্টেপ ৩: এইচটিএমএল পেজ সংরক্ষণ(Save) করুন
আপনার কম্পিউটারে ফাইলটি সংরক্ষণ করুন।
নোটপ্যাড মেনু থকে File > Save as সিলেক্ট করুন। ফাইলটির নাম "index.htm" দিন বা আপনার পছন্দমত অন্য কোন নাম দিয়ে এর পর .htm দিয়ে সেভ করুন।
UTF-8, এইচটিএমএল ফাইলের জন্য পছন্দসই এনকোডিং । ANSI এনকোডিং মার্কিন জুড়ে এবং পশ্চিম ইউরোপের শুধুমাত্র অক্ষর (characters) ।
ধাপ ৪: ব্রাউজারে আপনার এইচটিএমএল ফাইলটি দেখুন
আপনার প্রিয় ব্রাউজারে সংরক্ষিত এইচটিএমএল ফাইলটি খুলুন।
ব্রাউজারে ফাইলটি ওপেন করতে ফাইলের উপর মাউস পয়েন্টার রেখে ডাবল ক্লিক করুন বা মাউসের দান বাটন এ ক্লিক করে Open with এ মাউস পয়েন্টার রেখে ব্রাউজার চয়েজ করুন এবং ফাইল ওপেন করুন।
এইচটিএমএল টিউটোরিয়াল পরিচিতি (HTML tutorial Introduction)
Huge Sell on Popular Electronics
HTML পরিচিতি
HTML কি?
HTML হল একটি মার্কআপ ল্যাঙ্গুয়েজ যার মাধ্যমে একটি ওয়েব পেজের কন্টেন্ট গুলোকে বর্ণনা করা হয়।
- HTML এর পূর্ণরূপ হল Hyper Text Markup Language
- মার্কআপ ল্যাঙ্গুয়েজ হল অনেকগুলো মার্কআপ ট্যাগের সমষ্টি
- HTML এর ডকুমেন্টস HTML ট্যাগ দ্বারা বর্ণনা করা হয়
- প্রত্যেকটি HTML ট্যাগ ডকুমেন্টের ভিন্ন ভিন্ন কন্টেন্টকে বর্ণনা করে
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
<head>
<title>Page Title</title>
</head><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
ফলাফল :
My First Heading
My first paragraph.
উদাহরণের বর্ণনা
- প্রথমের DOCTYPE ঘোষণা করে যে ডকুমেন্টটির প্রকার হচ্ছে : HTML
- <html> এবং </html> এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টকে বর্ণনা করে
- <head> এবং </head>এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টটি কি প্রকারের সেই তথ্য ধারণ করে
- <title> এবং </title> এই ট্যাগের ভিতরের টেক্সটগুলো HTML ডকুমেন্টের টাইটেল ধারণ করে
- <body> এবং </body> এই ট্যাগের ভিতরের টেক্সটগুলো ওয়েবপেজ ব্রাউজারে যেসব কন্টেন্ট শো করবে তা ধারণ করে
- <h1> এবং </h1> এই ট্যাগের ভিতরের টেক্সট হেডিংকে বর্ণনা করে
- <p> এবং </p>এই ট্যাগের ভিতরের টেক্সটগুলো প্যারাগ্রাফকে ডিক্লেয়ার করে
HTML ট্যাগ
HTML ট্যাগ হল এঙ্গেল বন্ধনী <> দ্বারা আবদ্ধ কতগুলো কীওয়ার্ড
- HTML ট্যাগগুলো সাধারণত জোড়ায় জোরায় হয়ে থাকে, যেমন <p> এবং </p>
- জোড়ার প্রথম অংশকে বলা হয় স্টার্ট ট্যাগ এবং শেষ অংশকে বলা হয় ইন্ড ট্যাগ
- ইন্ড ট্যাগ স্টার্ট ট্যাগের মতই হয় শুধু ট্যাগ নেমের পূর্বে একটি অতিরিক্ত স্লেস (/) হয়
হিন্টসঃ স্টার্ট ট্যাগকে প্রায়ই ওপেনিং ট্যাগ বলা হয় এব ইন্ড ট্যাগকে বলা হয় ক্লোজিং ট্যাগ
ওয়েব ব্রাউজার
ওয়েব ব্রাউজার যেমন (Chrome, IE, Firefox, Safari) এগুলোর কাজ হচ্ছে HTML ডকুমেন্টসকে পড়া এবং তা ডিসপ্লে করা। ব্রাউজার কখনো HTML এর ট্যাগগুলোকে ডিসপ্লে করে না কিন্তু কোন কন্টেন্টকে কিভাবে ডিসপ্লে করতে হবে তার জন্য ট্যাগগুলোকে ব্যাবহার করে।
HTML পেজ স্ট্রাকচার
HTML পেজ কিভাবে ব্রাউজারে ডিসপ্লে হয় তার একটি স্ট্রাকচার নিচে দেয়া হল
<html>
</html> |
শুধুমাত্র বডি এরিয়ার ভিতরে যা থাকে তাই ব্রাউজারে ডিসপ্লে হয়
<!DOCTYPE> ঘোষণা
<!DOCTYPE> ঘোষণা করলে ব্রাউজার ওয়েব পেজের উপাদানগুলো সঠিকভাবে প্রদর্শন করতে পারে।
ওয়েবসাইটে বিভিন্ন ধরনের ডকুমেন্টস থাকে।
ডকুমেন্টসগুলোকে সঠিকভাবে প্রদর্শন করার জন্য ব্রাউজারকে ডকুমেন্ট টাইপ এবং ভার্সন সম্পর্কে জানতে হয়।
ডিক্লেয়ারেশন কেস সেনসেটিভ হয় না, সকল ধরনের কেস এখানে গ্রহণযোগ্য।
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
কমন ডিক্লেয়ারেশনস
HTML5
| <!DOCTYPE html> |
HTML 4.01
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
XHTML 1.0
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
HTML ভার্সনস
ওয়েবের যুগের সূচনা থেকেই HTML এর অনেকগুলো ভার্সন বের হয়েছে:
| ভার্সন | সাল |
| HTML | 1991 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML | 2000 |
| HTML5 | 2012 |
উইন্ডোজ ৮.১ টিউটোরিয়াল : শুরু করা যাক (Get started)
Huge Sell on Popular Electronics
শুরু করা যাক উইন্ডোজ 8.1
যদি আপনি উইন্ডোজ 8.1 বা উইন্ডোজ আর টি 8.1 সম্পর্কে বিস্তারিত জানতে চান তাহলে এই টউটোরিয়ালের 11 পৃষ্ঠা হচ্ছে শুরু করার সর্বোত্তম জায়গা। কিন্তু আপনি যদি আরো বিস্তারিতভাবে জানতে চান দেখুন উইন্ডোজের সাথে পরিচিত হউন...
প্রথম যা জানতে হবে
1। অনলাইনে প্রবেশ
ইমেইল চেক করা, পছন্দনিয় সাইটগুলো পরিদর্শন করা, বন্ধুদের স্ট্যাটাস আপডেট এ মন্তব্য করা – ইন্টারনেট কানেকশনের উপর ভিত্তি করে অনেক কিছুই আপনি করতে পারেন। পথ খুঁজে বের করুণ আপনি কিভাবে অনলাইনে প্রবেশ করবেন এবং যখন আপনি পাবলিক নেটওয়পাক এ থাকবেন তখন কিভাবে আপনার তথ্য নিরাপদ রাখবেন ।
“শিখুন কিভাবে অনলাইনে প্রবেশ করবেন”
2। মাইক্রোসফট একাউন্ট
আপনার পিসিতে মাইক্রোসফট এর একাউন্ট খুলুন এবং আপনি উইন্ডোজ স্টোর, ই-মেইল, সোসিয়াল নেটওয়ার্ক সাইট এবং আরো অনেক কিছুতে সয়ংক্রিয়ভাবে যুক্ত হয়ে যাবেন। নিশ্চিত হয়ে নিন যে আপনার একটি একাউন্ট আছে এবং খুঁজে বের করুন আপনার পিসি যারা ব্যবহার করে তাদের একাউন্ট কিভাবে তৈরি করে দেবেন।
মাইক্রোসফট একাউন্ট সম্পর্কে জানুন
চারপাশে আপনার পথ খুঁজে বের করা
3। Start সম্পর্কে সবকিছু
Start Screen হচ্ছে আপনার পিসি দিয়ে যা কিছু করবেন তার শুরুর ধাপ। আপনি একে চিন্তা করতে পারেন স্টার্ট মেনু হিসেবে কিন্তু এটি বর্তমানে সম্পূর্ণ পর্দা জুড়ে বিস্তৃত এবং আপনি একে আপনার অ্যাপ্লিকেশন, বন্ধু এবং ছবি দিয়ে নিজেরমত করে নিতে পারেন।
4। পরিচিত ডেস্কটপ
আপনি যেই ডেস্কটপ সম্পর্কে জানেন এবং পছন্দ করেন তা এর মধ্যেও আছে। আপনি প্রোগ্রাম ব্যবহার করতে পারেন এবং উইন্ডোজ স্টোর এর অ্যাপ্লিকেশন নিয়ে খেলতে পারেন - সবকিছুই আপনি আপনার ডেস্কটপ থেকে করতে পারবেন। আপনার পছন্দনীয় অ্যাপ্লিকেশন টাস্কবার এ যোগ করুন এবং বাছাই করুন আপনার পছন্দের থিম এবং ব্যাকগ্রাউন্ড।
5। আপনার পিসির চারপাশ
প্রয়োজনীয় নেভিগেশন সম্পর্কে শিখুন, সেইসাথে কিভাবে শুরুতে ফিরে যেতে হয়, দুটি অ্যাপ্লিকেশনের মধ্যে কিভাবে একটি থেকে আরেকটিতে যেতে হয়, কিভাবে পাশাপাশি অ্যাপ্লিকেশন ব্যবহার করতে হয়। টাচ অথবা মাউস এবং কীবোর্ড ব্যবহারে আরো দক্ষ হউন এবং শিখুন অধিক ব্যবহৃত কীবোর্ড শর্টকাট সম্পর্কে।
6। খুঁজা, শেয়ার করা, প্রিন্ট করা এবং আরো
কোন ব্যাপার না আপনি আপনার পিসির কোথায় আছেন, আপনি প্রাথমিক কাজ সম্পাদনের জন্য চার্ম ব্যবহার করতে পারেন। দেখুন কিভাবে ওয়েবে এবং আপনার পিসিতে কোন কিছু খুঁজে বের করতে হয়, ছবি বা ওয়েবসাইট কিভাবে শেয়ার করতে হয়, কিভাবে Start এ ফিরে যেতে হয়, কিভাবে প্রিন্ট করতে হয় এবং অন্যান্য ডিভাইস ব্যবহার করতে হয় এবং কিভাবে সেটিং পরিবর্তন করতে হয়।
7। অ্যাপ্লিকেশন সংগ্রহ করা এবং ব্যবহার করা
উইন্ডোজ স্টোর এ আপনার প্রয়োজনীয় অ্যাপ্লিকেশন খুঁজুন। এখানে প্রচুর সংখ্যক অ্যাপ্লিকেশন আছে যা থেকে আপনি আপনার পছন্দেরটি বেছে নিতে পারেন এবং এদের অনেকগুলোই ফ্রি অথবা ফ্রি ট্রাইয়াল। সেইসাথে খুঁজে নিন কিভাবে অ্যাপ্লিকেশন ব্যবহার করতে হয়, সেটিং পরিবর্তন করতে হয় এবং অ্যাপ্লিকেশন বন্ধ করতে হয়।
“শিখুন কিভাবে অ্যাপ্লিকেশন সংগ্রহ ও ব্যবহার করতে হয়।”
সম্পন্ন অবস্থায় পাওয়া
8। ই-মেইল সেটআপ করা
পড়ার জন্য (Read), উত্তর দেওয়ার জন্য (Replay), আপনার Inbox কে সাজিয়ে গুছিয়ে রাখার জন্য যেকোন ব্রাউজার থেকে আপনি আপনার পিসিতে Mail Application অথবা Outlook.com ব্যবহার করতে পারেন। খুজে বের করুন, কিভাবে তাদের Set up করবেন এবং আপনার একাউন্টগুলো যোগ করবেন। অথবা Outlook অ্যাপ্লিকেশনের সাহায্যে চেষ্টা করুন। এটি উইন্ডোজ আরটি 8.1 এর সাথে বিনামূল্যে প্রদান করা হয়।
“ই-মেইল Set up সম্পর্কে জানুন”
9। web এ ব্রাউজ করুন
Internet Explorer এর সর্বশেষ সংস্করণের সাহায্যে আপনার পছন্দের ওয়েব সাইটে প্রবেশ করুন। ব্রাউজিং এর মৌলিক স্বাদ পান এবং নতুন বৈশিষ্ট সম্পর্কেও জানুন। আপনার পছন্দের সাইটে কিভাবে দ্রুততার সাথে যাবেন তার Tips সংগ্রহ করুন এবং বিরক্তিকর বিজ্ঞাপণ থেকে পরিত্রাণ পেতে কিভাবে রিডিং ভিউ দেখবেন তা জানুন।
“Internet Explorer 11 সম্পর্কে জানুন”
10। আপনার পিসিকে ব্যক্তিগত রূপ প্রদান
আপনার পছন্দের ছবি, রং এবং ব্যাকগ্রাউন্ড দিয়ে আপনার পিসিকে নিজের মত করে সাজিয়ে নিন। আপনার একটি অতি পছন্দের মুখমন্ডল এর ছবি দিয়ে Account Picture তৈরি করুন। এবং দেখুন একটি স্বরণ রাখতে কষ্টকর পাসওয়ার্ড ব্যবহার না করে কিভাবে একটি ছবি কে আপনার পিসিতে প্রবেশের পাসওয়ার্ড হিসেবে ব্যবহার করতে হয়।
“শিখুন একটি পিসিকে কিভাবে ব্যক্তিগত রূপ প্রদান করতে হয়”
11। অনড্রাইভ
বর্তমানে আপনার ফাইলকে সংরক্ষিত করে রাখার দুটি পথ আছে: আপনি আপনার পিসিতে সংরক্ষণ করে রাখতে পারেন বা অনলাইন ক্লাউড সংগ্রহস্থল (online cloud storage) এর OneDrive এ সংরক্ষণ করে রাখতে পারেন। আপনি যখন OneDrive এ সংরক্ষণ করে রাখবেন তখন আপনি যেকোন ডিভাইস থেকে এগুলোকে ব্যবহার করতে পারবেন, সুতরাং এগুলো সবসময় আপনার সাথেই থাকবে। অন্যের সাথে শেয়ার করা বা অন্যকে সহযোগীতা করাও অত্যান্ত সহজ হবে।
উইন্ডোজ ৮.১ টিউটোরিয়াল: অনলাইনে প্রবেশ (Getting online)
Huge Sell on Popular Electronics
উইন্ডোজ ৮.১ টিউটোরিয়াল 11 এর 1
E-mail চেক করা, পছন্দনিয় সাইটগুলো পরিদর্শন করা, বন্ধুদের Status update এ মন্তব্য করা – ইন্টারনেট কানেকশনের উপর ভিত্তি করে অনেক কিছুই আপনি করতে পারেন। পথ খুঁজে বের করুণ আপনি কিভাবে অনলাইনে প্রবেশ করবেন এবং যখন আপনি পাবলিক নেটওয়পাক এ থাকবেন তখন কিভাবে আপনার তথ্য নিরাপদ রাখবেন।
শিখুন কিভাবে Online এ প্রবেশ করবেন:
ইন্টারনেটের সাথে সংযুক্ত থাকা
আপনি Social update পোষ্ট করতে চান, বন্ধুকে E-mail পাঠাতে চান অথবা আপনার প্রিয় ওয়েবসাইটগুলো পরিদর্শন করতে চান, ইন্টারনেট সংযোগ হচ্ছে তার চাবি। এবং আপনার যদি উইন্ডোজ 8.1 অথবা উইন্ডোজ আরটি 8.1 পিসি থাকে তাহলে এই কাজগুলো করতে হলে আপনার ইন্টারনেট সংযোগ প্রয়োজন হবে।
বাড়িতে সংযুক্ত করণ:
আপনার যদি ISP (ইন্টারনেট সার্ভিস প্রোভাইডার) যেমন- phone বা cable কম্পানী এর মত একটি একাউন্ট (আইডি) থাকে তাহলে ইতিমধ্যেই আপনার বাড়িতে ইন্টারনেট সংযোগ আছে। আপনি আপনার পিসিকে একটি ইথারনেট তারের (Ethernet cable) মাধ্যমে মডেম এর সাথে সংযুক্ত করতে পারেন এবং ইন্টারনেট ব্রাউজার ওপেন করে ইন্টারনেট ব্যবহার করতে পারেন। যদি আপনার আরো সহায়তার প্রয়োজন হয় তাহলে আপনি “ইন্টারনেটে সংযোগ” দেখতে পারেন।
যদি বিভিন্ন পিসি বা ডিভাইস এ একই সংযোগ শেয়ার করতে চান অথবা যদি আপনি একটি পাসওয়ার্ড সুরক্ষিত সংযোগ চান, তাহলে আপনি আপনার বাড়িতে একটি নেটওয়ার্ক সেট আপ করতে পারেন। একবার সেটআপ করার পরে, আপনি Charm থেকে আপনার নেটওয়ার্ক নির্বাচন করতে পারবেন, আরো জানতে “একটি ডিভাইস বা পিসি যোগ করুন” দেখুন।
আপনি যখন বাড়িতে সংযোগ নিবেন তখন HomeGroup তৈরি করুন, যা পিসি থেকে গান অথবা ভিডিও শুনতে অথবা ফাইল বা ডিভাইস (যেমন প্রিন্টার হিসেব) দুটি পিসির মধ্যে শেয়ার করার জন্য নিখুঁত। আরো জানতে দেখুন “HomeGroup শুরু থেকে শেষ”।
আপনি যখন বাহিরে থাকবেন তখনও সংযুক্ত থাকা
প্রচুর সংখ্যক Public Places ওয়াই-ফাই সংযোগ সেবা প্রদান করে, যেমন কফি শপ বা বিমানবন্দর। যখন আপনি কফি বা ফ্লাইট এর জন্য অপেক্ষা করছেন, আপনি আপনার ই-মেইল চেক করতে পারেন বা ওয়েব সাইট ব্রাউজ করতে পারেন।
আপনি যদি এমন জায়গায় থাকেন যেখানে Wi‑Fi নেই, আপনি মোবাইলে ব্রডব্যান্ড সংযোগ চালু করতে পারেন। মোবাইল ব্রডব্যান্ড সংযোগ একটি ইন্টারনেট সংযোগ যা আপনি নিজের সাথে নিয়ে যেতে পারেন এবং যতদুর মোবাইল ফোন সেবা চালু আছে তার সবখানেই ইন্টারনেট ব্যবহার করতে পারবেন। আপনার একটি সিম কার্ড ক্রয় করতে হবে Phone বা Cable কম্পানীর কাছ থেকে এবং তারপর পিসির সাথে কার্ডটি সংযোগ করে মোবাইল ব্রডব্যন্ড সংযোগ চালু করতে পারবেন। মোবাইল ব্রডব্যন্ড সম্পর্কে আরো জানতে দেখুন “মোবাইল ব্রডব্যান্ড শুরু থেকে শেষ”।
কিছু ইন্টারনেট সংযোগ (বিশেষ করে মোবাইল ব্রডব্যান্ড সংযোগ) সীমাবদ্ধ হয়, অর্থাৎ আপনার পরিকল্পনা (Plan) অনুসারে আপনি সর্বচ্চ প্রতি মাসে নির্দিষ্ট পরিমাণ ডাটা ব্যবহার করতে পারবেন। এই ধরনের পরিকল্পনায় আপনাকে সচেতন থাকতে হবে আপনার Plan এর বেশি ডাটা ব্যবহার করে যেন বাড়তি বিল গুনতে না হয়। আপনি এটি পরীক্ষা করতে পারবেন ডেস্কটপ এর নেটওয়ার্ক আইকন এ ক্লিক করার মাধ্যমে বা Settings Charms এর মাধ্যমে। আরো জানতে দেখুন “ Metered ইন্টারনেট সংযোগ: প্রায়ই জিজ্ঞাসিত প্রশ্ন”।
একটি নেটওয়ার্কের সঙ্গে সংযোগ
আপনি যখন প্রথম উইন্ডোজ Set up করবেন, আপনি সাথে সাথে একটি ইন্টারনেট সংযোগ এর সাথে সংযুক্ত থেকে থাকতে পারেন। যদি না থাকেন তাহলে বিদ্যমান নেটওয়ার্কের একটি তালিকা দেখতে পারেন এবং তাদের যেকোন একটির সাথে সংযোগ স্থাপন করতে পারেন।
বিদ্যমান নেটওয়ার্কের তালিকা দেখতে
১। পর্দার ডান প্রান্তে সুইপ করে যান এবং Settings এ টোকা দিন।
(যদি আপনি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পার্শ্বের নিচের দিকে নিয়ে যেয়ে Settings এর উপর ক্লিক করুন।)
২। নেটওয়ার্ক আইকন চেক করুন। এটি আপনাকে দেখাবে আপনি সংযুক্ত আছেন কিনা এবং সংযুক্ত থাকলে সংযুক্তি কতটা শক্তিশালি।
৩। আপনি যদি সংযুক্ত না থাকেন তাহলে নেটওয়ার্ক আইকনে ক্লিক করুন (
অথবা 
)
৪। টোকা দিন বা ক্লিক করুন আপনি যে নেটওয়ার্কে সংযুক্ত হতে চান এবং তারপর Connect এ ক্লিক করুন।
আপনাকে পাসওয়ার্ড প্রদান করার জন্য জিজ্ঞাস করতে পারে। আপনি এটি নেটওয়ার্ক এডমিন এর কাছে পাবেন। আপনি যদি বাড়িতে থাকেন তাহলে এটা পরিবারের যেকোন সদস্যের কাছেই থাকতে পারে। আপনি যদি কর্মক্ষেত্রে থাকেন আপনার আইটি এডমিন এর কাছে জিজ্ঞাস করুন। যদি আপনি public place এ থাকেন যেমন- কফি শপ, এমন কাউকে জিজ্ঞাস করুণ যে সেখানে কাজ করে।
৫। যদি আপনি এই নেটওয়ার্কে সবসময় সংযুক্ত হতে চান তাহলে Connect automatically চেক বক্স এ ক্লিক করুন।
মোবাইলে ব্রডব্যান্ড কানেকশন ব্যবহার
মোবাইলে ব্রডব্যান্ড কানেকশন কিভাবে ব্যবহার করবেন তা জানতে দেখুন “মোবাইলে ব্রডব্যান্ড শুরু থেকে শেষ”
একবার যখন Set up করবেন, উইন্ডোজ আপনাকে সংযুক্ত রাখবে - যখন আপনি চলন্ত অবস্থায় থাকবেন তখন সয়ংক্রিয়ভাবে Wi-Fi সংযোগ, মোবাইল ব্রডব্যান্ড সংযোগে পরিবর্তিত হবে। এইভাবে আপনি সংযুক্ত অবস্থায় থাকবেন, এমনকি যখন এক জায়গা থেকে অন্য জায়গায় চলন্ত অবস্থায় থাকবেন বা যাবেন তখনও সংযুক্ত থাকবেন। বা আপনার খরচ কম রাখার জন্য যেখানে Wi-Fi সংযোগ আছে সেখানে মোবাইল ব্রডব্যান্ড থেকে সয়ংক্রিয়ভাবে Wi-Fi এ সংযুক্ত হবেন ।
এয়ারপ্লেন মোড (Airplane mode)
আপনি যখন বিমানে থাকবেন, উড্ডয়ন ও অবতরণের সময় সকল ইলেকট্রনিক ডিভাইস এর পাউয়ার নিম্নগামি হয় । কিন্তু যখন আকাশে থাকবেন তখন আপনি আপনার পিসিকে Airplane mode এ নিয়ে যেতে পারেন এবং ডাউনলোডকৃত ছবি দেখতে পারেন, গেম খেলতে পারেন অথবা প্রেজেন্টেশন এর কাজ করতে পারেন। Airplane mode বিমানের নিয়ম অনুসারে আপনার পিসি থেকে যেকোন সংকেত অন্যত্র প্রেরণ বন্ধ করে দেয়।
Airplane mode ব্যবহার করতে
১। পর্দার ডান কর্ণারের দিকে যান এবং Settings এ প্রবেশ করুন।
(যদি আপনি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পার্শ্বের নিচের দিকে নিয়ে যেয়ে Settings এর উপরে ক্লিক করুণ)
২। নেটওয়ার্ক আইকনে ক্লিক করুন।
৩। যখন আপনি বিমানে থাকবেন তখন Airplane mode চালু করুন এবং যখন মাটিতে নামবেন তখন তা বন্ধ করুন।
Airplane mode সম্পর্কে আরো জানতে দেখুন “Airplane mode কি?”
Public Network এর গোপনীয়তা
আপনি যখন বাড়ি হতে দুরে যাবেন এবং Public Network ব্যবহার করবেন, যেমন কফি শপ অথবা বিমানবন্দর, আপনার পিসি এবং ডাটা সংরক্ষিত রাখার জন্য আপনাকে কিছু পদক্ষেপ নিতে হবে।
প্রথমবার যখন আপনি Public Network এর সাথে সংযুক্ত হবেন, তখন জিজ্ঞাসিত হতে পারেন যে, আপনি কোনো ডিভাইস খুঁজতে চান কিনা এবং সেই নেটওয়ার্কের সাথে সংযুক্ত হতে চান কিনা। বলুন না, কেননা তাহলে অন্যান্য লোকেরা আপনার পিসিকে দেখতে পারবে না যখন আপনি এই নেটওয়ার্ক এর সাথে সংযুক্ত হবেন। যদি আপনি হ্যাঁ বলে ফেলেন গাবরানোর কিছু নেই। আপনি কিভাবে আপনার Settings পরিবর্তন করবেন তা এখানো দেয়া হলো ।
Public Network এ আপনার ডাটা নিরাপদ রাখার জন্য
১। পর্দার ডান কর্ণারের দিকে যান এবং Settings এ প্রবেশ করুন।
(যদি আপনি মাউস ব্যবহার করতে চান তাহলে মাউস পয়েন্টার পর্দার ডান পার্শ্বের নিচের দিকে নিয়ে যেয়ে Settings এর উপরে ক্লিক করুণ)
2। ক্লিক Network, ক্লিক Connections এবং তারপর নেটওয়ার্ক এর নামের উপর ক্লিক করুন।
3। Find devices and content বন্ধ করুন। আপনি এখনও অনলাইনে যেতে পারবেন কিন্তু অন্যারা যারা এই Public Network ব্যবহার করছে তারা আপনার ডাটা নিয়ে যেতে পারবে না।
উইন্ডোজ ৮.১ টিউটোরিয়াল: কেন ব্যবহার করবেন? (Why Windows)
Huge Sell on Popular Electronics
উইন্ডোজ ৮.১ ব্যবহার করার সাতটি কারণ
টাচ ডেস্কটপ তৈরি করা আগে কখনোই সহজ ছিল না।
১। এটি সহজ
উইন্ডোজ ৮.১ কে আপনি আপনার পরিচিত ডেস্কটপ দিয়ে শুরু করতে পারেন অথবা Live Tiles এর মতো অ্যাপ্লিক্যাশন হিসেবে শুরু করতে পারেন। আপনি টাচ, মাউস এবং কিবোর্ড ব্যবহার করতে পারবেন - যেটা আপনার কাছে সুবিধাজনক মনে হয়। আপনি যে সকল যন্ত্রপাতি ব্যবহার করতে চান তার সবই ব্যবহার করতে পারবেন কেননা সেগুলোর প্রায় সবগুলোই উইন্ডোজ উপযোগী। সেই সাথে আপনি আপনার কম্পিউটারে, ওয়েভ সাইটগুলোতে, ক্লাউড এবং অ্যাপ্লিকেশন গুলোতে এবং একই সাথে Bing Smart Search এর মাধ্যমে যেকোন বিষয় খুঁজে পেতে পারেন - শুধুমাত্র স্ত্রিনের ডানের সার্চ Charm এ প্রবেশ করার মাধ্যমে।
২। সকল অ্যাপ্লিকেশনস
উইন্ডোজ অ্যাপ্লিকেশনস এর জগৎ
Windows Store এ আপনি নতুন আবিস্কার এর সাথে সাথে আপনার পছন্দের অ্যাপ্লিকেশন খুঁজে পাবেন। এবং Built in App আপনাকে আরো বেশি কিছু করতে সাহায্য করবে যেমন- The Food & Drink App আপনাকে রান্নার কাজে সাহায্য করবে এবং Photo App আপনাকে নতুন ভাবে আপনার তোলা ছবি সম্পাদনা করতে সহায়তা করবে।
৩। যন্ত্র (ডিভাইসেস)
বিশাল সংখ্যক যন্ত্র আছে আপনার প্রতিটি প্রয়োজন, বাসনা এর জন্য।
৪। ব্যস্ততা
Tools আপনাকে সাহায্য করবে আপনার কাজ সম্পাদনের জন্য
Office Application এর মাধ্যমে আপনি কার্য্যত আপনার কাজ করার স্বাধীনতা পাবেন যেকোন স্থানে যেকোন Device এর মাধ্যমে। যে অফিস অ্যাপ্লিকেশন আপনি জানেন এবং যাকে বিশ্বাস করেন তার মাধ্যমে ডকুমেন্ট তৈরি করুণ, Cloud এ সংরক্ষণ করুণ এবং অফিস অনলাইনের মাধ্যমে একই সাথে (রিয়েল টাইম এ) ডকুমেন্ট সম্পাদনা ও অন্যকে সহযোগীতা করুণ। সেইসাথে আপনার যখন প্রয়োজন হবে তখন Multitasking Split Screen (একই সাথে একাধিক কাজ করার জন্য স্ক্রিণকে বিভক্ত করার মাধ্যমে) আপনাকে সহায়তা করবে। এবং Bing Smart Search আপনাকে যেকোন তথ্য খুঁজে পেতে সহায়তা করবে তা সে যেখানেই থাকুক।
৫। একে ব্যক্তিগত করা
টাইলসকে আপনার পছন্দ অনুযায়ী তৈরি করুণ
কিছু অ্যাপ্লিকেশন Live Tiles আছে সুতরাং আপনি এদেরকে খোলা ছাড়াই Real time update দেখতে পারবেন। এবং আপনি গুরুত্ব অনুযায়ী Tiles এর আকার ও বসানোর স্থান নির্দারণ করে দিতে পারবেন।
ডেস্কটপ রূপান্তরিত করণ
প্রগতিপন্থী (হাইপার) ডেস্কটপ চান? আপনি নিজস্বভাবে বিশ্বের যেকোন স্থান থেকে ব্যাকগ্রাউন্ড নিয়ে ডেস্কটপকে সৌন্দর্যমন্ডিত করতে পারেন এবং উইন্ডোজ থিম এর সাহায্যে সমন্বিত করতে পারেন ছবির সেট, কালার প্যালেট, শব্দ ও নকশা। হারলে যোগ করেছেন তার নিজস্ব মাছ ধরার ছবি তাও একটা কৌতুক তৈরি করেছে।
একেবারে ঠিক না হওয়া পর্যন্ত চিমটানো
উইন্ডোজ কাস্টমাইজ করুণ এবং নিজের বানান
Start Screen এর ব্যাকগ্রাউন্ড পছন্দ করুণ, স্থাপণ করুণ আপনার পছন্দের অ্যাপ্লিকেশন, গেম ফোল্ডার, প্রোফাইল বা ওয়েবসাইট এবং আপনার প্রয়োজন অনুসারে সাজান। এটি ঠিক না হওয়া পর্যন্ত Josh একে নিয়ে খামচাখামচি করেন। অনেকটা তার রেস্টুরেন্ট এর মেনু (খাবার তালিকা) তৈরি করার মতো।
৬। সবসময়ই সংযুক্ত
আপনার ডিভাইস জুড়ে এর উইন্ডোজ
OneDrive এর মাধ্যমে আপনি প্রবেশ করতে পারবেন আপনার সঙ্গীত, সিনেমা, ফটো, ডকুমেন্ট, সেটিংস, উইন্ডোজ অ্যাপস এমনকি ব্রাউজিং ইতিহাস আপনার যন্ত্রের (ডিভাইস এর) মাধ্যমে - সেইসাথে আপনি বিনামুল্যে পাবেন ১৫ গিগাবাইট জায়গা। যা ২৫৫ ঘন্টা সঙ্গিত বা ২০,০০০ ওয়ার্ড ডকুমেন্ট বা ৩০০.০০০ ফটো রাখার জন্য যথেষ্ট - অন্য কথায় এটি যথেষ্ট পরিমাণ জায়গা।
আপনি ইচ্ছা করলে একই Microsoft Account যেকোন Device এ ব্যবহার করতে পারবেন। এর মানে হলো আপনাকে শুধুমাত্র আপনার User ID এবং Password মনে রাখতে হবে এবং স্বয়ংক্রিয়ভাবে উক্ত Device আপনার পছন্দের তালিকা ও সেটিংস অনুযায়ী আপনাকে অনুসরণ করবে।
৭। এর মজা
উইন্ডোজ XBox আপনার বিনোদন কেন্দ্র
XBox আপনার সম্পূর্ণ বিনোদন কেন্দ্র - Cloud এ, Game এ প্রবেশ করায়, সঙ্গীত, চলচ্চিত্র, আই টিউনস লাইব্রেরি এবং অন্যান্য ক্ষেত্রে - বাড়িতে এবং যেখানেই যান।
XBox গেম:
XBox গেমস এ আপনার চাহিদা অনুসারে Tiles আছে এবং প্রতিদিনই নতুন নতুন যোগ হচ্ছে। আপনি অনেক Game এর জন্য Touch Screen ব্যবহার করতে পারেন এবং পেতে পারেন অনন্য অভিজ্ঞতা। এবং XBox সেবার মাধ্যমে আপনি আপনার বন্ধুর সাথে কথা বলতে পারেন - বিশ্বস্ততার সাথে।
AngularJS টিউটোরিয়াল (AngularJS Tutorial in Bangla)
Huge Sell on Popular Electronics
মৃত্যুঞ্জয় বিশ্বাস
AngularJS, HTML কে নতুন এট্রিবিউট দ্বারা বৃস্তৃত করে।
AngularJS, SPA (Single Page Applications) এর জন্য উত্তম ।
AngularJS শেখা সহজ ।
এই টিউটোরিয়ালটিতে যা রয়েছে
এই টিউটোরিয়ালটি এমনভাবে ডিজাইন করা হয়েছে যাতে আপনি অতি দ্রুত ও দক্ষতার সাথে AngularJS শিখতে পারেন ।
প্রথমে আপনি AngularJS এর সকল মূল বিষয়গুলো শিখবেন, যেমনঃ directives, expressions, templates, এবং data binding।
এবং এরপর AngularJS সম্পর্কে যা জানা দরকার, তার সবই শিখবেন, যেমনঃ
Controllers, Modules, Events, DOM, Forms, Input, Validation, Http এবং আরও অনেক কিছু।
প্রতিটি অধ্যায়ে উদাহরণগুলো নিজে নিজে চেষ্টা করুন
প্রতিটি উদাহরণ নিজে নিজে চেষ্টা করে দেখুন:
যেমন -
<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
ফলাফল : AngularJS উদাহরণ
আপনার কি কি জানা থাকতে হবে
AngularJS শিখার আগে আপনার যেগুলো সম্পর্কে ধারনা থাকতে হবেঃ
- HTML
- CSS
- JavaScript
AngularJS এর ইতিহাস
AngularJS বেশ নতুন। ভার্সন ১.০ রিলিজ হয়েছে ২০১২ সালে ।
Miško Hevery, google এর একজন কর্মকর্তা ২০০৯ সালে AngularJS নিয়ে কাজ শুরু করেন। Idea টা খুবই কার্যকর হয়, এবং এখন এই project টি officially Google development team দ্বারা সাহায্যপ্রাপ্ত হয়।
Computer hardware bangla tutorial -17(Data recovery) (কম্পিউটার হার্ডওয়্যার বাংলা টিউটোরিয়াল)
Huge Sell on Popular Electronics
