লেসন ৪: বডি element

এই আলোচনাটি একটু বেশি দীর্ঘ হতে চলেছে কারন আমরা আমাদের ওয়েবপেজে text ফরম্যাটিং এর জন্য বিভিন রকমের element নিয়ে কাজ করব। এই পাঠে আমরা প্রত্যেকটি element এর মৌলিক গঠন ব্যবহার করতে যাচ্ছি। পরবর্তী পাঠে আপনারা শিখবেন কিভাবে text color, background color, font size, font style, text-alignment এবং অন্যান্য স্টাইলিং অপশন ব্যবহার করা যায়।

আপনার সুবিধার জন্য, আমি নিচে মেটা ট্যাগের HTML কোড দিয়ে দিয়েছি। নিচের কোডটিকে কপি করে নোটপ্যাড এর নতুন ডকুমেন্ট এ টেম্পলেট কোডের হেড element এ পেস্ট করে দিন,

<meta name="keywords" content=" ">
<meta name="description" content=" ">

Block-level এবং Inline element

প্রথমত আপনাকে HTML ডকুমেন্ট এ বডি সেকশনের মধ্যে থাকা দুটি ভিন্ন শ্রেণির element এর ব্যাপারে জানা দরকার যেটা হল, ১. block level element এবং ২. ইনলাইন element

দুই শ্রেণির এলিমেন্টের মধ্যে একটা পার্থক্য হল যখন ব্রাউজারে রেন্ডার করবে, তখন দৃশ্যগতভাবে block level element একটি নতুন লাইন নিয়ে শুরু হয় যেখানে ইনলাইন element এর ক্ষেত্রে এটা সম্ভব নয়।

আরেকটা পার্থক্য হল, block level element, ইনলাইন এবং কিছু block level element ধারন করতে পারে, অন্যদিকে ইনলাইন element শুধু মাত্র text এবং কিছু ইনলাইন element ধারন করতে পারবে।

উদাহরণস্বরূপ, block level element রুপে ব্যবহৃত heading (H), প্যারাগ্রাফ(P), ফর্ম(FORM), ডিভিশন(DIV), টেবিল(TABLE), এবং লিস্ট(OL/UL/DL) element।

Inline element হল সেগুলো যারা প্যারেন্ট এলিমেন্টের মধ্যে থেকে text ফরম্যাটিং করতে সাহায্য করে, যেমন বোল্ড(B) text, আন্ডারলাইন(U) text, সাবস্ক্রিপ্ট(SUB), সুপারস্ক্রিপ্ট(SUP), অ্যাঙ্কার ও হাইপারলিঙ্ক(A) ইত্যাদি।
আমরা এই টিউটোরিয়ালের কোর্সের মধ্য দিয়ে বিভিন্ন রকমের এলিমেন্টের সঙ্গে পরিচিত হব।

heading

heading  এলিমেন্টের জন্য H কথাটি লেখা হয়। heading এলিমেন্টে ৬টি স্তরের heading ব্যবহার করা হয়, যেখানে H1 হল বৃহত্তর এবং H6 হল ক্ষুদ্রতর heading এলিমেন্ট। heading এলিমেন্ট হল একধরনের ব্লক লেভেল এলিমেন্ট যাতে অন্যান্য এলিমেন্টের মত একটি ওপেনিং ট্যাগ, কিছু text এবং একটি ক্লোজিং ট্যাগ থাকে।

উদাহরনঃ ব্রাউজারে নিচের কোড যেরকম দেখাবে

<h1>H1 - the biggest headline</h1>
<h2>H2 - smaller than H1</h2>
<h3>H3 - smaller than H2</h3>
<h4>H4 - smaller than H3</h4>
<h5>H5 - smaller than H4</h5>
<h6>H6 - the smallest headline</h6>

যখন আপনি h1 heading element ব্যবহার করবেন সেক্ষেত্রে আপনাকে ওয়েবপেজের শুরুতেই এই h1 heading element ব্যবহার করা যুক্তিযুক্ত। প্রত্যেকটি ওয়েবপেজে প্রথম শ্রেণীর এলিমেন্ট একবারই ব্যবহার করা বাঞ্ছনীয়, প্রথম শ্রেণির এলিমেন্টের(h1) একের বেশি অতিরিক্ত ব্যবহারের ক্ষেত্রে SEO (Search Engine Optimization) এর উপর খারাপ প্রভাব পড়ে।

প্যারাগ্রাফ

আপনার ওয়েবপেজের বেশিরভাগ লেখা প্যারাগ্রাফ দ্বারা সজ্জিত থাকে।এই উদ্দেশ্যেই আমরা P এলিমেন্ট ব্যবহার করব। নিচের উদাহরণে দুটো প্যারাগ্রাফ দেখানো হয়েছে,

উদাহরনঃ ব্রাউজারে নিচের কোড যেরকম দেখাবে

<p>এটি একটি অনুচ্ছেদ। এটি একটি ওপেনিং ট্যাগ দিয়ে শুরু হয়...</p>
<p>দুই অনুচ্ছেদের মধ্যে একটি ফাঁকা লাইন সবসময় থাকে।</p>

নিচের ভিডিওতে আমি দেখাব কিভাবে আপনি ওয়েবপেজে কিছু প্যারাগ্রাফ যোগ করবেন, সেখানে আপনি প্যারাগ্রাফ সংক্রান্ত আরও মৌলিক ধারনা পাবেন, আশাকরি এই গুরুত্বপূর্ণ ভিডিও টাকে আপনি স্কিপ করবেন না। আপনার HTML কোডের মধ্যে থাকা বিভিন্ন সাদা স্পেস এবং ফাকা লাইন মিশে গিয়ে ব্রাউজার দ্বারা একটি ব্ল্যাঙ্ক স্পেস তৈরি হয়। আপনি দেখবেন কিভাবে ব্রাউজারকে বাধ্য করা যায় দুটো লেখার মধ্যে নতুন একটা লাইন ব্রেক তৈরি করার <br /> ট্যাগ দিয়ে।

Text ফরম্যাটিং-এর জন্য element সমূহ

কয়েকটি বিশেষ element text ফরম্যাটিং করতে সাহায্য করে। এই সব element opening tag, কিছু text এবং closing tag নিয়ে তৈরি হয়। নিচের টেবিলে আপনি দেখতে পাবেন সেই element গুলির নাম, ব্রাউজারে text গুলির উপর element গুলির প্রভাব এবং element গুলির ব্যবহারের উদাহরণ।

Name	Display Example	HTML Code
em	emphasized text	<em>emphasized text</em>
strong	bold text	<strong>bold text</strong>
u	underlined text	<u>underlined text</u>
sup	Asuperscript f.ex.: E=mc2	A<sup>superscript</sup> f.ex.: E=mc<sup>2</sup>
sub	Asubscript f.ex.: H2O	A<sub>subscript</sub> f.ex.: H<sub>2</sub>O
strike	strike-through	<strike>strike-through</strike>
tt	teletype writer	<tt>teletype writer</tt>

Element গুলির সঠিক ক্রমে ব্যবহার (Correct nesting of elements)

Element গুলিকে নিয়ে পরীক্ষা করবার আগে আপনাকে বিভিন্ন element এর সঠিকভাবে “nesting” করতে হবে, অর্থাৎ HTML এর বিভিন্ন element গুলির opening এবং closing tag সঠিক ক্রমে রাখতে হবে।
নিচে দুটি লাইন দিয়ে উদাহরণ দেখানো হয়েছে। প্রথম লাইনে pargraph(ব্লক লেভেল এলিমেন্ট) ট্যাগের মধ্যে strong element সঠিক ভাবে উপস্থাপন করা হয়েছে, আবার strike  এবং u এলিমেন্ট সঠিক ক্রমে strong element এর মাঝে রাখা হয়েছে। U এলিমেন্টের মাঝে আবার em element ব্যবহার করা হয়েছে। যদিও, দ্বিতীয় লাইন একটি অবৈধ HTML code যদিও ব্রাউজার এই অবৈধ HTML কোডকে সঠিকভাবে আমাদের দেখায়।

উদাহরনঃ ব্রাউজারে নিচের কোড যেরকম দেখাবে

<p>কিনুন <b><strike>৪০ টাকায়</strike> <u><big>মাত্র ২০ টাকায়</big></u></b></p> 
<p>কিনুন <strike><b>৪০ টাকায়</strike> <big><u>মাত্র ২০ টাকায়</b></u></big></p>

এই সম্পর্কে আরও ভালভাবে বুঝতে আপনাদের জন্য নিচে আমি একটি ছবি যোগ করেছি,

HTML Comment

কখনও কখনও আপনার ডকুমেন্টে মন্তব্য(comment) যোগ করা খুবই কার্যকরী কারন যদি আপনার ওয়েবপেজ খুব বড় হয় তাহলে অনেকসময় কনফিউশন এড়ানোর জন্য মন্তব্য যোগ করতে হয়। মন্তব্যে অনেক সময় কিছু নির্দেশ দেওয়া থাকে যে আমাদের ডকুমেন্টের গঠন কেমন হবে, এই মন্তব্য ডেভেলপার দের বুঝতে সাহায্য করবে ওয়েবপেজে HTML code কেন ব্যবহার করা হয়েছে। তাছাড়া কোন HTML code কে অদৃশ্য রাখার জন্যও কমেন্ট ব্যবহার করা হয়।

মন্তব্য শুরু হয় “<!--” এবং শেষ হয় “-->” দিয়ে। ফলে ব্রাউজারে যখন ডকুমেন্ট লোড হবে তখন কিন্তু এই কমেন্টে যে সমস্ত লেখা থাকবে তখন এটা ব্রাউজার দেখাবে না।

<!-- এটি একটি মন্তব্য (কমেন্ট) -->

লেসন ৩: হেড এলিমেন্ট

টাইটেল এলিমেন্ট

বৈধ HTML ডকুমেন্ট তৈরি করার জন্য হেড সেকশনে অন্ততপক্ষে টাইটেল এলিমেন্ট অন্তর্ভুক্ত করা আবশ্যক। যখন আপনি ব্রাউজারে কোন HTML ডকুমেন্ট লোড করেন আপনি টাইটেল বারে ওয়েবপেজটির টাইটেল দেখতে পাবেন।

গুগল, বিং এবং ইয়াহু’র মত সার্চ ইঞ্জিন আপনার ওয়েবপেজের টাইটেলকে সার্চ লিস্টে ওয়েবসাইটের টাইটেল হিসাবে ব্যবহার করে, তাই ওয়েবপেজের হেড সেকশনের এই উপাদানটি খুবই গুরুত্বপূর্ন ফ্যাক্টর হিসাবে কাজ করে।

উদাহরনঃ আপনার ব্রাউজারে নিচের উদাহরণ যেভাবে দেখাবে

<title>The Title Element</title>

মেটা এলিমেন্ট

হেড সেকশনের ভেতরে থাকা এই মেটা এলিমেন্টগুলি বিভিন্ন রকমের কাজের জন্য ব্যবহার করা হয়। এটা হল প্রথম HTML এলিমেন্ট যেখানে আপনি দেখতে পাবেন সেলফ ক্লোজিং ট্যাগের উদাহরণ। এটা শুধু মাত্র ওপেনিং ট্যাগ নিয়ে গঠিত, এর মাঝে কোন কন্টেন্ট থাকে না এবং এমনকি ক্লোজিং ট্যাগও থাকে না।

এই এলিমেন্টের সবথেকে গুরুত্বপুর্ন কাজ হল আপনার ওয়েবসাইটের সম্পর্কে কিছু মৌলিক তথ্য সার্চ ইঞ্জিনকে দেওয়া যেমন হেড সেকশনের ভেতরে থাকা সবথেকে গুরুত্বপুর্ন উপাদান হল কীওয়ার্ড ও ডেস্ক্রিপশন ট্যাগ।

মেটা ট্যাগ বিভিন্ন রকমের কাজের জন্য বিভিন্ন রকমের অ্যাট্রিবিউট ব্যবহার করে। উদাহরণস্বরুপ, আপনার ওয়েবসাইটের কিওয়ার্ডের ব্যাপারে যদি আপনি সার্চ ইঞ্জিনকে তথ্য দিতে চান তাহলে আপনাকে মেটা ট্যাগে প্রথম অ্যাট্রিবিউট দিতে হবে name এবং এর ভ্যালু হবে keyword, দ্বিতীয় অ্যাট্রিবিউট হবে content এবং এর মান হবে আপনার ওয়েবসাইটের কিছু কীওয়ার্ড যেটা আপনি দিতে চান(প্রতিটা কীওয়ার্ড কমা দিয়ে আলাদা করতে হয়)।

<meta name="keywords" content="keyword1, keyword2, ...">

সার্চ ইঞ্জিনকে ওয়েবপেজ সম্পর্কিত সংক্ষিপ্ত বিবরন দেওয়ার জন্য আপনাকে মেটা ট্যাগে name অ্যাট্রিবিউটের ভ্যালু description এবং content অ্যাট্রিবিউটের ভ্যালু দিতে হবে আপনার ওয়েবপেজের সম্পর্কে কিছু তথ্য, যেমনঃ

<meta name="description" content="About my webpage...">

নিচে উভয় মেটা ট্যাগের জন্য HTML কোড দিয়ে দেওয়া হল, সুতরাং এই কোডগুলিকে কপি করে নিয়ে আপনি আপনার প্রথম যে ওয়েবপেজ তৈরি করেছিলেন সেই পেজের হেড সেকশনের মধ্যে পেস্ট করে দিন। এরপর আপনি কীওয়ার্ড এবং ডেসক্রিপশন এর কনটেন্ট ভ্যালু গুলি আপনার পছন্দসই কীওয়ার্ড ও ডেসক্রিপশন দিয়ে পূরণ করুন।

<meta name="keywords" content=" ">
<meta name="description" content=" ">

নিচের চিত্রের মত আপনি হয়ত এই ব্যাপারটি অনেক বার লক্ষ্য করেছেন, কিন্তু এখন আপনি জানেন সার্চ ইঞ্জিনের রেজাল্ট পেজের সার্চ লিস্টে এগুলো আসে টাইটেল এবং ডেসক্রিপশন ট্যাগের মাধ্যমে।উদাহরণস্বরূপ গুগল রেজাল্ট পেজের সার্চ তালিকায় ওয়েবপেজের টাইটেল এলিমেন্টের কনটেন্টকে ওয়েবপেজের টাইটেল হিসাবে ব্যবহার করে, এবং কিছু কিছু সময় ডেসক্রিপশন ট্যাগকেও কোন ওয়েবপেজের সংক্ষিপ্ত বিবরণ হিসাবে ব্যবহার করে(বিশেষ করে যখন ডেসক্রিপশনে সার্চ করা শব্দ গুলি থাকে)। নিচের চিত্রে Best Budget Smartphone নিয়ে গুগলে সার্চ করার পরে যা দেখানো হয়েছেঃ

আপনার ওয়েবপেজের ক্যারেকটার এনকোডিং

মেটা এলিমেন্টের আরেকটা কাজ হল আপনি আপনার ওয়েব পেজে কোন ধরনের অক্ষর সেট করতে চান। যদিও এটার প্রয়োজন নেই, তবুও এই এলিমেন্টকে আপনার ওয়েবপেজে অন্তর্ভুক্ত করা আমি বুদ্ধিমানের কাজ মনে করি, কারনঃ

আপনি যদি কোন ক্যারেকটার সেট ব্যবহার না করেন তাহলে ব্রাউজার আপনার ওয়েবপেজে ইউজারের লোকাল ডিফল্ট ক্যারেক্টার সেট ব্যবহার করবে। এটা কোন রকম পার্থক্য তৈরি করবে না যদি ভিজিটর আপনার আপনার লোকাল কান্ট্রির হয়। কিন্তু আপনি ধরুন বাংলায় একটি ওয়েবসাইট তৈরী করলেন এবং কোন ক্যারেকটার এনকোডিং মেটা ট্যাগ আপনি ব্যবহার করেননি তাহলে আপনার ওয়েবসাইট শুধুমাত্র আপনার লোকাল ভিজিটররাই সহজে বুঝতে পারবে, কারন তাদের সিস্টেমে সেই ডিফল্ট ক্যারেকটার এনকোডিং আছে। কিন্তু ধরুন আপনার ওয়েবসাইটে আমেরিকার কোন ভিজিটর এল, সে কিন্তু দেখবে আপানার ওয়েবসাইটটিতে বিশৃঙ্খল ভাবে লেখা হয়েছে যেটার মাথা-মুন্ডু কিছুই বোঝা যাচ্ছেনা এবং আপনি যে বাংলা ভাষায় লিখেছিলেন সেটা কিন্তু তার ওয়েবসাইটে দেখাবে না। নিচের চিত্রে বিষয়টি পরিষ্কার হয়ে যাবে,

তাই আপনি যদি আপনার ওয়েবসাইট পৃথিবীর নানা প্রান্তে একইরকম ভাবে দেখাতে চান তাহলে এই ক্যারেকটার সেট মেটা ট্যাগ ব্যবহার করতে হবে।

<meta charset="utf-8" />

উপরের ক্যারেকটার সেট সমস্ত বিশ্বজনীন ইউনিকোড ক্যারেকটারকে সাপোর্ট করতে সক্ষম এবং বেশিরভাগ ওয়েবপেজে এই UTF8(U from Universal Character Set + Transformation Format—8-bit) ইউনিকোড ব্যবহৃত হচ্ছে। আপনি http://www.iana.org/assignments/character-sets থেকে আপনার ভাষার ইউনিকোড খুঁজে পেতে পারেন।

আপনাকে যে সমস্ত গুরুত্বপূর্ণ হেড এলিমেন্ট সম্পর্কে জানতে হবে সেটা এখানেই শেষ করতে হচ্ছে। পরবর্তী পাঠে আমরা আমাদের তৈরি করা ওয়েবপেজে বিষয়বস্তু যোগ করা শুরু করব। আপনি ইতিমধ্যে হয়ত লক্ষ্য করেছেন যে টেক্সট এডিটর দিয়ে ওয়েবপেজ বানানো কতটা সময় অপচয়কারী কাজ। আপনার ওয়েবপেজে যে সমস্ত কাজ গুলি আপনি করেছেন সেই পরিবর্তনগুলি দেখার জন্য আপনি ডকুমেন্টকে সেভ করে দিয়ে ব্রাউজারটাকে রিলোড দেবেন।

লেসন ২ঃ HTML এর মৌলিক ধারনা শিখন

HTML, elements, tags এবং attributes এর অর্থঃ

সবার আগে চোখ রাখা যাক আপনাকে যেটা জানতেই হবেঃ

HTML কথাটির অর্থ হচ্ছে Hyper Text Markup Language. এটা একটা মার্কআপ ল্যাংগোয়েজ যেখানে বিভিন্ন সফটওয়্যার যেমন ব্রাউজার এই HTML কোডগুলিকে পড়ে নিয়ে HTML এর ভাষায় ট্রান্সলেট করে এবং HTML কোডের নির্দেশ অনুযায়ী ওয়েবপেজে দেখায়।

HTML হচ্ছে খুব সহজ এবং বিস্তীর্ন মার্কআপ ল্যাংগোয়েজ যা আপনি কিছুক্ষনের মধ্যে দেখতে পাবেন। "World Wide Web Consortium" (W3C.org) হল একটি আন্তর্জাতিক সংস্থা যারা ওয়েব স্ট্যান্ডার্ড, ওয়েব প্রযুক্তি-এর উন্নতি সাধন এবং HTML এর বিস্তারিত তথ্য সংজ্ঞায়িত করে।

একটি HTML ডকুমেন্ট, এলিমেন্টের মাধ্যমে গঠন করা হয়, যা ডকুমেন্টের বিভিন্ন অংশ চিত্রায়িত করে। বেশিরভাগ এলিমেন্ট তিনটি অংশ নিয়ে তৈরি হয়, একটি ওপেনিং ট্যাগ, কিছু কন্টেন্ট যেমন তার মাঝে কিছু লেখা এবং একটি ক্লোজিং ট্যাগ। কথাটি বোঝার জন্য নিচের কোডটি দেখা যেতে পারে যেখানে প্যারাগ্রাফ লেখার জন্য P টেক্সট দেওয়া হয়েছে,

<p>This is a paragraph</p>

ওপেনিং ট্যাগে দেখতে পাচ্ছেন দুটি কোণ বন্ধনী(angle brackets) এবং তাদের মাঝে রয়েছে এলিমেন্টের নাম( P). অতএব উপরের উদাহরণে “<p>” হচ্ছে ওপেনিংগ ট্যাগ। তারপরে আসবে কন্টেন্ট (যেকোন টেক্সট আপনি এখানে লিখতে পারেন)এবং অবশেষে আসবে ক্লোজিং ট্যাগ যেটা ওপেনিং ট্যাগের অনুরূপ তবে এলিমেন্টের নামের আগে একটি ফরোয়ার্ড স্ল্যাশ থাকে (“/”) যেমন “</p>”।

সুতরাং, ট্যাগের কাজটি হচ্ছে ব্রাউজারকে নির্দেশ দেওয়া যেখানে একটা এলিমেন্টের মধ্যে যে কন্টেন্ট সেটা কোথায় শুর এবং কোথায় শেষ হচ্ছে।

এটা জেনে রাখা গুরুত্বপুর্ন যেকোন এলেমিন্টের নাম case-insensitive, যার অর্থ হচ্ছে আপনি যদি HTML কোডে “<p>” বা “<P>” ব্যবহার করেন তাহলে কোন রকমের বিভিন্নতা আপনি লক্ষ্য করবেননা দুটোরই কাজ এক।

Empty tags (“stand-alone tags” নামেও পরিচিত) এমন একটি এলিমেন্ট যা শুধু ওপেনিং ট্যাগ নিয়ে গঠিত। এরা কোন রকম কন্টেন্ট (টেক্সট) এবং ক্লোজিং ট্যাগ ব্যবহার করেনা। পরের লেসনে আপনি এর সম্পর্কে জানবেন।

Attribues হল প্যারামিটার যেগুলি কোন বিষয়বস্তুর (কন্টেন্ট) ফরম্যাটিং করতে সাহায্য করে। এইগুলিকে ওপেনিং ট্যাগের ভেতরে ট্যাগ নামের পাশে অন্তর্ভুক্ত করা হয় নিচের কোড সিনট্যাক্সের মাধ্যমে,

Attribute-Name="Attribute-Value".

যেখানে অ্যাট্রিবিউটের নামগুলো case-insensitive (element name এর মত) অ্যাট্রিবিউটগুলির ভ্যালুগুলি কিন্তু case-sensitive. তাই এই বিভ্রান্তি এড়ানোর জন্য এবং নিরাপদ কোডিং এর জন্য সবসময় ছোট হাতের অক্ষর ব্যবহার করা বাঞ্ছনীয়.

অ্যাট্রিবিউট এর সম্পর্কে স্বচ্ছ ধারনা দেওয়ার জন্য নিচের একটা উদাহরন দেওয়া হল,

<p align="center">This is a centered paragraph</p>

এখন দেখুন, আট্রিবিউটের নামটা হল align এবং উপরের উদাহরণে এর ভ্যালু হচ্ছে center. এবং আপনি অনুমান করুন এর কাজটা কি...

... আপনি ঠিক-ই ধরেছেন এই প্যারাগ্রাফ এলিমেন্টের ভেতরে যে সমস্ত বিষয় বস্তু আছে প্রত্যেক্টি ওয়েবপেজের মাঝখানে দেখাবে।
উদাহরনঃ আপনার ব্রাউজারে নিচের উদাহরণ যেভাবে দেখাবে

<p>this is a paragraph</p>

<p>this is another paragraph</p>

<p align="center">and this is a centered paragraph</p>

HTML5 ডকুমেন্টের বেসিক গঠন

উদাহরনঃ আপনার ব্রাউজারে নিচের উদাহরণ যেভাবে দেখাবে(ব্ল্যাংক পেজ)

<!DOCTYPE html>
<html>

<head>
 <title>Blank Page</title>
</head>

<body>
 
</body>

</html>

এখন সময় হয়ে গেছে আপনাকে কিছু করে দেখানোর যেমন একটি HTML ডকুমেন্ট তৈরী করা। আমরা পরবর্তী লেসন গুলিতে এই টেমপ্লেটটাকে ব্যবহার করব HTML এলিমেন্ট শেখার জন্য।

• টেক্সট এডিটর খুলুন (Notepad++)
• উপরের কোডগুলিকে কপি করে আপনার টেক্সট এডিটরের নতুন ডকুমেন্টে পেস্ট করে দিন
• আপনার কম্পিউটারের লোকাল ড্রাইভে একটি নতুন ফোল্ডার তৈরী করে ওয়েবসাইটের জন্য একটি নাম দিন, তারপর সেখানে ফাইলটাকে সেভ করুন firstpage.html নাম দিয়ে।

আমরা এর পরের পাঠে এই head এলিমেন্টে কি কি ন্যুনতম তথ্য অন্তর্ভুক্ত করব তা শিখে নেব। আমরা এটাকে খুব সহজ ও সংক্ষেপ রাখব।

লেসন ১ঃ মৌলিক দক্ষতা এবং সরঞ্জাম

আপনার কম্পিউটারের দক্ষতা

সৌভাগ্যবশত ওয়েবসাইট তৈরি এবং পাবলিশিং এর জন্য আপনার প্রয়োজন কিছুটা বেসিক কম্পিউটার সম্পর্কিত দক্ষতা এবং সম্ভবত আপনার সেই স্কিল-টা আছে।আপনার যেগুলো জানতে হবে, সেগুলো হলঃ

• সফটওয়্যার ডাউনলোড এবং ইন্সটলিং
• টেক্সট এডিটরে ডকুমেন্ট খোলা
• আপনার কম্পিউটারের হার্ড-ড্রাইভে ফোল্ডার তৈরি করা
• নতুন টেক্সট ডকুমেন্ট তৈরি করা এবং আপনার কম্পিউটারের হার্ড-ড্রাইভে সেগুলিকে সেভ করা

১. একটি সিম্পেল টেক্সট এডিটর

HTML কোড লেখার জন্য আপনাকে একটি Notepad এর মত টেক্সট এডিটর ব্যবহার করতে হবে, যেটা কিনা আপনার সিস্টেমে সর্বদাই থাকে। অবশই ওয়ার্ড প্যাড বা মাইক্রোসফট ওয়ার্ড নয় কেননা, এগুলি নিজেদের প্রোপ্রাইটারি টেক্সট ফরম্যাটিং কোড ব্যবহার করে যে কারনে আপনার HTML কোডগুলিকে বিশৃঙ্খল অবস্থায় আনতে পারে।

অনেক ভালো এবং ব্যবহার উপযোগী বন্ধুত্বপূর্ণ টেক্সট এডিটর হল Notepad++ নামক একটি টেক্সট এডিটর যা বিভিন্ন প্রোগ্রামিং ল্যাংগোয়েজ তৈরি করার উপযোগী যেমন, C, PHP, Python, Ruby, Java, Javascript, Fortran, HTML, CSS ইত্যাদি।

আপনি সরাসরি এই সফটওয়্যার ডাউনলোড করতে পারেন http://notepad-plus-plus.org/ থেকে সম্পুর্ণ বিনামুল্যে।

২. FTP (ফাইল ট্রান্সফার প্রোটোকল) সফটয়্যার

FTP কথাটির অর্থ হল ফাইল ট্রান্সফার প্রোটোকল)। এই লেসনগুলির শেষের দিকে আমি আপনাকে শেখাব কিভাবে আপনি আপনার ওয়েবসাইট ইন্টারনেটে পাবলিশ করবেন এবং আপনার ওয়েবপেজ আপলোড করার সবথেকে সহজতম উপায় হল FTP সফটওয়্যার ব্যবহার করা।

ইন্টারনেটে পাওয়া যায় এরকম অনেক সফটওয়্যার আছে, তাদের মধ্যে কিছু সফটওয়্যার ফ্রি তে পেয়ে যাবেন আবার কিছু কিছু সফটওয়্যার ৩০ দিনের ট্রায়াল পিরিয়ডে থাকে।

ইন্টারনেটে সার্চ করার পর এবং বিভিন্ন সফটওয়্যারগুলিকে ব্যবহার করে আমার কাছে সবথেকে ভাল লেগেছে Filezilla এবং বিভিন্ন হোস্টিং কম্পানি এই সফটওয়্যারটাকেই বেশি রেকমেন্ড করেন। আমি পরবর্তী টিউটোরিয়ালে আপনাকে ধাপে ধাপে শেখাব, কিভাবে এটিকে ইন্সটল, কনফিগার করবেন এবং এর মাধ্যমে কিভাবে আপনার ওয়েবপেজ গুলিকে আপনার হোস্টিং সার্ভারে আপলোড করবেন।

ঠিক আছে, তাহলে এখন শুরু করা যাক HTML ডকুমেন্ট এর বেসিক গঠন এবং এর প্রত্যেক্টি বিভিন্ন এলিমেন্টের অর্থ জেনে নিয়ে।

HTML টিউটোরিয়ালের সূচনা

আমি এই প্রথম লেসন দিয়ে আমাদের প্রথম কোর্স শুরু করছি, এবং তারপর বিভিন পর্যায়ক্রমিক স্টেপের মাধ্যমে আপনাকে HTML এর বিভিন্ন লেসনের সাথে পরিচয় করিয়ে দেব। প্রথম কয়েকটি লেসনের মাধ্যমে আপনি HTML এর গুরুত্বপুর্ন এলিমেন্ট সম্পর্কে জানবেন। তারপর আপনি শিখবেন এই সমস্ত এলিমেন্টের সাহায্যে কিভাবে কাজ শুরু করবেন এবং কিভাবে আপনার ওয়েবসাইট লেয়াউটকে ডিজাইন করবেন। অবশেষে আপনি শিখবেন কিভাবে আপনি আপনার ওয়েবসাইটের ডোমেইন নেম রেজিস্টার করবেন, কিভাবে ওয়েবসাইট লোগো এবং বাটন এলিমেন্ট তৈরি করতে পারবেন। তাছাড়া আপনি শিখবেন কিভাবে আপনার ওয়েবসাইটকে ওয়ার্ল্ড ওয়াইড ওয়েবে প্রকাশিত করবেন।
HTML শেখার দ্রুততম উপায় হল HTML কোড গুলিকে লেখা এবং করা। অতএব, আপনাকে শুধু এই টিউটোরিয়াল দেখে লেখাপড়া করা ও ভিডিও দেখা ছাড়াও যা কিছু শিখছেন সেগুলিকে নিয়ে এক্সপেরিমেন্ট  চালানোর পাশাপাশি এগুলোকে প্রয়োগ করতে হবে।

এই লেসনগুলির মাধ্যমে অনেক HTML কোডের উদাহরন দেওয়া আছে। প্রত্যেকটা কোড স্নিপেট হাইলাইট করে দেওয়া আছে যা আপনাকে আরও ভালভাবে কোড গুলিকে বুঝতে সাহায্য করবে। এগুলোকে আপনি চাইলে কপি করে আপনার টেক্সট এডিটরে পেস্ট করতে পারেন। এবং সেভ করে আপনার ব্রাউজারে দেখতে পারেন কেমন করে সেগুলো ব্রাউজারে রেন্ডার হয়েছে।

নিচের NEXT বাটনে ক্লিক করে আপনি প্রথম লেসন থেকে শুরু করতে পারেন।

HTML সম্পর্কে স্বচ্ছ ধারনা তৈরি করে নিন এই টিউটোরিয়াল থেকে - ২য় অংশ

আগের টিউটোরিয়ায়লে আমরা শিখেছিলাম কিভাবে html এর প্রাথমিক গঠন তৈরি করা যায় এবং আমরা একটি করে heading, paragraph এবং button তৈরি করেছিলাম। এই টিউটোরিয়ালে আমরা কাস্টম স্টাইল অ্যাড করব, সেই সঙ্গে জাভাস্ক্রিপ্ট কোডের মাধ্যমে আমরা প্যারাগ্রাফ এলিমেন্টকে ওয়েবপেজ থেকে সরিয়ে দেব। চলুন শুরু করা যাক।

এলিমেন্টগুলির উপর কাস্টম স্টাইল অ্যাড করা

আমরা প্রথমে জেনে নেব কি কি উপায়ে কাস্টম স্টাইল অ্যাড করা যায়, তিনটি পদ্ধতিতে করা যায় যেমনঃ

১. ইনলাইন স্টাইল
২. এম্বেডেড স্টাইল
৩. এক্সটারনাল স্টাইল
আমরা এখানে এক্সটারনাল স্টাইল পদ্ধতি শিখব না কারন আমরা এই সম্পর্কে শিখব সিএসএস এর টিউটোরিয়াল এ, এখানে আমরা ১ ও ২ নং পদ্ধতিতে স্টাইল অ্যাড করা শিখব।

ইনলাইন স্টাইল প্রয়োগের উদাহরন

আমরা ইনলাইন স্টাইল এর উদাহরন হিসাবে আমাদের h1 ট্যাগের উপর স্টাইল যোগ করব এইভাবে,

<h1 style="font-family: Arial, Verdana; font-size: 36px;">... </h1>

এখানে দেখুন আমরা h1 tag এর পরে একটা স্পেস দিয়ে style অ্যাট্রিবিউট যোগ করে দিয়েছি এবং = সিম্বল এর পরে কোটেশন মার্কের ভেতরে css property এবং ভ্যালু দিয়েছি। তাহলে আমরা এখানে দেখলাম,

Style=”property: value;”

এখানে বলে রাখা ভাল যে css এর অনেক রকমের প্রপার্টি আছে যেমন font-family, color, background, font-size, font-weight, line-heigh ইত্যাদি। যেহেতু css এর প্রপার্টির সংখ্যা অনেক তাই পরবর্তী টিউটোরিয়ালে এই বিষয়ে আমরা আলোচনা করব।

যদিও এই পদ্ধতিতে কাস্টম স্টাইল অ্যাড করা যায় তবুও ওয়েব ডেভেলপররা এই পদ্ধতিতে নিজস্ব স্টাইল অ্যাড করেন না। কারন ওয়েব ডেভেলপারদের অনেক গুলি ফাইল নিয়ে কাজ করতে হয় তাই তারা ব্যবহার করেন এক্সটারনাল স্টাইল শীট। এই পদ্ধতিটা আপনাকে জানিয়ে রাখলাম এই কারনে যে এই পদ্ধতি গুলো জেনে রাখা ভাল আগে থেকেই।

এখন আপনি যদি ফাইলটিকে সেভ করে দিয়ে ব্রাউজারটিকে একবার রিলোড দেন তাহলে আপনি দেখতে পাবেন যে হেডিং এলিমেন্টে কিছুটা চেঞ্জ এসেছে, যেমন এর ফন্ট স্টাইল এর সঙ্গে সঙ্গে এর সাইজটাও আগের তুলনায় বেড়ে গেছে।

এম্বেডেড স্টাইল প্রয়োগের উদাহরন

আমরা এখন এমেবেডেড স্টাইল সম্পর্কে শিখব। সেজন্য আপনাকে head এলিমেন্টের ভেতরে title ট্যাগের শেষে আপনার মাউসের কার্সারটা রাখুন এবং এন্টার প্রেস করুন, তারপর নিচের ট্যাগটি টাইপ করুন,

<style>
</style>

এরপর এই স্টাইল ট্যাগের ভেতরে আপনি যে এলিমেন্টকে স্টাইল করতে চান সেটার ট্যাগ নেমটা লিখুন, যেমন আমাদের বডি ট্যাগটার নাম হিসাবে নিচে যেটা করা হয়েছে,

body {
 background-color: #f7f7f7;
 font-family: sans-serif;
 line-height: 1.7em;
}

এখানে দেখুন আপনি যে ট্যাগ নেমটা দিলেন এটাকে বলা হয়ে থাকে সিলেক্টর আর এটা শেষ হয় কার্লি ব্রেস দিয়ে।আমরা বডি এলিমেন্টের ব্যাকগ্রাউন্ড কালার করে দিয়েছি হালকা সাদা, ফন্ট-ফ্যামিলি দিয়েছি স্যান্স-সেরিফ এবং দুটি এলিমেন্টের মধ্যে যে লাইন হয় তার হাইট করে দিয়েছি ১.৭ ইএম আর এই বন্ধনীর মধ্যে থাকে css property এবং value. তাহলে এর গঠনটা হবে ঠিক নিচের মত,

selector {
 property: value;
}

এটা হয়ে যাবার পরে আমরা আমাদের বাটন এলিমেন্টকে কিছুটা ডিজাইন করব, এখানে দেখুন hideBtn এর জন্য আমরা # চিহ্ন দিয়েছি, কারন সিএসএসের ক্ষেত্রে id selector কে আমরা # চিহ্ন দিয়ে ব্যবহার করে থাকি।

#hideBtn {
 border: 1px solid black;
 background: red;
 font-size: 24px;
 border-radius: 5px;
 padding: 4px 10px;
}

আমাদের স্টাইলের কাজ শেষ, এখন আমরা জাভাস্ক্রিপ্ট ফাংশন তৈরি করা শুরু করছি।

জাভাস্ক্রিপ্ট

আগে প্ল্যান করে নিই আমাদের জাভাস্ক্রিপ্ট দিয়ে আমরা কি করতে চাচ্ছি। আমরা যখন বাটন এলিমেন্টে ক্লিক করব তখন একটি ফাংশন কল হবে, যার ফলে আমাদের প্যারাগ্রাফ এলিমেন্টে একটা স্টাইল অ্যাড হয়ে যাবে display: none.
চলুন শুরু করা যাক,

আমাদের আগে জাভাস্ক্রিপ্টের মাধ্যমে বাটন এলিমেন্টকে সিলেক্ট করতে হবে, কোন এলিমেন্টকে সিলেক্ট করবার জন্য বিভিন্ন রকমের কোড আছে। আমরা এখানে যেহেতু button-টায় id অ্যাট্রিবিউট অ্যাড করেছি তাই আমরা getElementById লিখে প্রথম বন্ধনীর ভেতরে ওই id টার নামে লিখব যেটা হল hideBtn. তাহলে আমাদের কোডটি হবে নিম্নরুপঃ

document.getElementById('hideBtn')

এরপরে আমরা একটি ডট চিহ্ন দিয়ে এর উপর একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করব onclick. এই onclick করার অর্থ হচ্ছে আমরা যখন button টায় ক্লিক করব তখন এই মেথড টি আমাদের একটি ফাংশন কে কল করবে। এরপর আমরা একটি ইকুয়াল চিহ্ন দিয়ে লিখব function তারপর কার্লি ব্রেস দিয়ে দেব,

document.getElementById('hideBtn').onclick = function () {
    
}

এরপর ঐ কার্লি ব্রেসের মাঝে আমরা p এলিমেন্টকে সিলেক্ট করব getElementsByTagName(‘p’)[0] দিয়ে, যেখানে [0] করার অর্থ হচ্ছে যে জাভাস্ক্রিপ্ট array node এ 0 দিয়ে কোন এলিমেন্টকে স্টার্ট করে। আর এখানে যেহেতু প্যারাগ্রাফ এলিমেন্ট একটাই তাই। এরপর আমরা একটি ডট চিহ্ন দিয়ে লিখব style.displya = ‘none’.

document.getElementsByTagName('p')[0].style.display = 'none';

আমাদের জাভাস্ক্রিপ্ট কোড তৈরি, এখন আমাদের শুধু ব্রাউজার এ পরীক্ষা করে দেখতে হবে যে  এই কোড কাজ করছে কিনা। আপনি ফাইলটাকে সেভ করে দিয়ে ব্রাউজার এর রিলোড বাটনে ক্লিক করুন। তারপর hide বাটনে ক্লিক করলে দেখতে পাবেন আমাদের প্যারগ্রাফ এলিমেন্টটি ওয়েবপেজ থেকে হাওয়া হয়ে গেছে।

আপনি এই জাভাস্ক্রিপ্ট দিয়ে অনেক রকমের কাজ ব্রাউজারকে দিয়ে করাতে পারবেন, যেমনঃ
১. ঘড়ি,
২. স্লাইড শো অ্যানিমেশন,
৩. ক্লায়েন্ট সাইড ফর্ম ভ্যালিডেশন
৪. অ্যালার্ট মেসেজ শো করান,
৫. পপ আপ উইন্ডো,
৬. টেবিল অফ কন্টেন্ট,
৭. ডেট পিকার,
৮. ব্যাক টু টপ এফেক্ট,
৯. অ্যাকর্ডিয়ান,
১০. অটোকমপ্লিট ইত্যাদি।

আমরা আমাদের HTML, CSS এবং Javascript এর বেসিক টিউটোরিয়াল শেষ করে ফেলেছি। আমি যথাসাধ্য চেষ্টা করেছি আপানদের এই টিউটোরিয়াল শেখানোর, যদি আপনার কোথাও বুঝতে অসুবিধা হয় আপনি কমেন্ট বক্সে আপনার মুল্যবান কমেন্ট গুলি পোস্ট করতে পারেন। তাছাড়া আপনারা কি শিখতে চান এখানে কমেন্ট করতে পারেন। আমি অবশ্যই আমার ব্লগে লেখার চেষ্টা করব।

আমার এই টিউটোরিয়াল লেখা হয়েছে আপানদের নতুন কিছু শেখানোর, যাতে আপনারাও কিছু শিখতে পারেন। কথায় আছে শিক্ষার কোন শেষ নেই। আশা করি আপনি ভাল থাকবেন এবং আপনার পরিবারকেও ভাল রাখবেন। এখানেই আপনাকে টিউটোরিয়াল টা পড়াবার জন্য ধন্যবাদ বলে শেষ করছি।

ভিডিও টিউটোরিয়াল

HTML সম্পর্কে স্বচ্ছ ধারনা তৈরি করে নিন এই টিউটোরিয়াল থেকে - ১ম অংশ

কেমন আছেন আপনারা? আশা করি আপনারা ভালই আছেন। আপনারা কি HTML শিখতে আগ্রহী? তাহলে আমার এই ব্লগ আপনাকে শিখতে সাহায্য করবে। আমি মানুষকে শেখাতে ভালবাসি, আর আমার এই টিউটোরিয়াল আপনাদের সঠিক ভাবে শেখাতে সাহায্য করলে আমারও ভাল লাগে। আজকে আমরা একটি HTML ফাইল তৈরি করে আপনাদের HTML, CSS এবং Javascript এর একটা স্বচ্ছ ধারনা দেওয়ার চেষ্টা করব। আমার এই টিউটোরিয়ায়ল থেকে শিখতে পারবেন কিভাবে আপনারা HTML এর মূল গঠন তৈরি করতে পারবেন। আপনাদের পরিচয় করিয়ে দেব নতুন দুটি ল্যাংগোয়েজের সঙ্গে, একটি হল CSS এবং অন্যটি হল Javascript. তাহলে চলুন আরম্ভ করি আমাদের টিউটোরিয়াল?

আমাদের এই টিউটোরিয়ালে আমরা একটা HTML এর প্রাথমিক গঠন তৈরি করব, যেখানে আমরা একটি প্রাথমিক শিরনাম(heading level one) একটি অনুচ্ছেদ(paragraph) এবং একটি button এলিমেন্ট তৈরি করব। তারপর আমরা CSS এর মাধ্যমে পেজটাকে কিছুটা স্টাইল চেঞ্জ করার চেষ্টা করব। তাছারা Javascript দিয়ে আমরা এমন একটা কোডিং করব যাতে ওই button এলিমেন্টে ক্লিক করলেই paragraph অংশটি আমাদের ওয়েব পেজটি থেকে ভিসুয়ালি হাইড হয়ে যাবে।

আমাদের যা করতে হবে

১. HTML এর প্রাইমারী গঠন তৈরী করা
২. প্রথম শ্রেণির হেডিং(h1) তৈরী করা,
৩. একটা প্যারাগ্রাফ(p) এলিমেন্ট তৈরি করা,
৪. একটা button এলিমেন্ট তৈরী করা,
৫. ওয়েবপেজের এলিমেন্ট গুলোতে কাস্টম স্টাইল যোগ করা,
৬. জাভাস্ক্রিপ্টের মাধ্যমে একটি ফাংশন তৈরি করা যার ফলে ঐ বাটন-এ ক্লিক করলে আমাদের প্যারাগ্রাফ এলিমেন্ট ভিসুয়ালি হাইড হয়ে যাবে
শুরু করবার আগে বলে রাখি এখনকার প্রত্যেকটা আপডেটেড ব্রাউজার HTML5 সাপোর্ট করে। তাই আমি আপনাকে আমি HTML5 এর বেসিক পার্টটা শেখাব।

টেক্সট এডিটর

আশা করি আপনার কাছে আগে থেকেই Notepad++ আছে। যদি না থাকে তাহলে এখনই গুগলে Notepad++ সার্চ করে ডাউনলোড করে নিতে পারেন।

নোটপ্যাড খুলে আপনি প্রথমে, মেনু ট্যাবের ল্যাংগোয়েজ ট্যাবে ক্লিক করে H লেখাটায় মাউস টা নিয়ে গিয়ে HTML সিলেক্ট করে নিন syntax hilighting এর সুবিধার জন্য।

আপনি আগে ফাইলটাকে সেভ করে নিন আপনার ডেসটিনেশন ফোল্ডারে যেকোনো একটা নাম দিয়ে, কিন্তু মনে রাখবেন ঐ ফাইলটার নামের শেষে অবশ্যই .html এক্সটেনশন দিতে ভুলবেননা, কারন তাহলে উন্ডোজ বুঝতে পারবেনা আপনার ফাইলটা কি টাইপের ফাইল। যদিও নোটপ্যাড অলরেডি যেকোনো ফাইলের জন্যি .txt এক্সটেনশন যোগ করে।

HTML শিখুন

ফাইলটা সেভ হয়ে গেলে আপনি টাইপ করুন নিচের কোডটি, কপি-পেস্ট করবেননা কারন তাহলে আপনি কি শিখছেন বুঝতে পারবেন না। আপনি যতই টাইপ করবেন, তত ভাল করে বুঝতে পারবেন বেশি, আর কোন জায়গায় ভুল হলে আপনি সেটা যদি ধরতে পারেন তাহলে পরবর্তীতে ভুল হবার চান্স হবে কম।

<!DOCTYPE html>

এখানে একটি ব্যাপার লক্ষ্য করুন আমি প্রথমে লেফট অ্যাঙ্গেল ব্র্যাকেট দিয়ে তারপর এক্সক্লেমেশন(!) মার্ক তারপর DOCTYPE html এবং শেষে রাইট অ্যাঙ্গেল ব্র্যাকেট দিয়েছি, এটা করার কারন হচ্ছে আমরা ব্রাউজারকে নির্দেশ দিচ্ছি যে আমরা HTML5 ভার্সন ব্যবহার করছি।

এরপর লিখুন নিচের কোডটি,

<html>

</html>

আপনি দেখুন, প্রত্যেক্টি এলিমেন্ট <> দিয়ে শুরু এবং </> দিয়ে শেষ হয়। তারমানে আপনি যদি উপরের html ট্যাগটি লেখেন তাহলে < html > হবে Start tag এবং </ html > হবে End tag. এই html ট্যাগটিকে বলা হয় এর রুট ট্যাগ।
এরপর আপনি এই রুট এলিমেন্টের মাঝে একটা এন্টার প্রেস করে দুটি এলিমেন্ট তৈরি করুন একটি হচ্ছে হেড ট্যাগ অন্যটি হল বডি ট্যাগ।

..........
<html>

<head>

</head>
<body>

</body>

</html>

আপনি জেনে রাখুন হেড এলিমেন্টের যে সমস্ত ট্যাগ আমরা ব্যাবহার করি সেগুলো কিন্তু ওয়েব ব্রাউজারের ডকুমেন্ট এ দেখতে পাইনা, কারন হেড ট্যাগ ব্যবহার করা হয় ব্রাউজারকে এবং সারচ-ইঞ্জিনকে নির্দেশ দেবার জন্য। এই হেড এলিমেন্ট-এ যে সমস্ত ট্যাগ ব্যবহার করা হয় সেগুলো হল  title,  বিভিন্ন রকমের মেটা ট্যাগ  (যেমনcharset, keywords, description, author etc.), এক্সটারনাল CSS ফাইল, favicon, RSS এবং জাভাস্ক্রিপ্ট ফাইল অ্যাড করবার জন্য link এবং script tag ইত্যাদি।

আর আমরা ব্রাউজারে যে সমস্ত ডকুমেন্ট দেখতে পাই সেসব কিছুই এই body এলিমেন্ট এ অ্যাড করা হয়ে থাকে যেমন হেডিং, প্যারাগ্রাফ, কোন লিংক, বাটন, লিস্ট আইটেম ইত্যাদি।

আপনি যদি এখন ফাইলটাকে সেভ করে মেনু ট্যাব থেকে Run এ ক্লিক করে Launch in firefox অথবা Launch in chrome এ ক্লিক করেন তাহলে আপনি দেখতে পাবেন আপনার ওয়েব পেজটি পুরোপুরি সাদা দেখাচ্ছে। কারন এখনও আমরা কোন এলিমেন্ট বডিতে অ্যাড করিনি। তাছারা আপনি যদি ব্রাউজারের টাইটেল বারের দিকে লক্ষ্য রাখেন আপনি দেখবেন, শুধু ফাইলটার নাম ওই টাইটেল ট্যাব-এ দেখাচ্ছে।

এখন আপনি নিচের ট্যাগটি লিখুন head এলিমেন্টের ভেতরে,

<title>HTML – 1st tutorial </title>

উপরের ট্যাগটি লেখার পরে ফাইলটিকে সেভ করে দিন এবং ব্রাউজারের রিলোড button এ ক্লিক করুন, আপনি দেখতে পাবেন যে ব্রাউজারের টাইটেল বারে HTML – 1st tutorial লেখাটা চলে এসেছে।

এরপর আমরা একটা প্রথম শ্রেণির হেডিং এলিমেন্ট যোগ করব,

<h1>This is first level heading</h1>

হেডিং এলিমেন্ট লেখা হয়ে গেলে আমরা প্যারাগ্রাফ এবং একটি button এলিমেন্ট অ্যাড করব,

<p>This is a paragraph and it will hide from this webpage by javascript when usere click on the button element</p>

<button id="hideBtn">Hide</button>

এখানে লক্ষ্য করুন যে আমি button এলিমেন্টে id অ্যাট্রিবিউট দিয়েছি hideBtn.  এই id কোন এলিমেন্টকে ইউনিক selector যোগ করে, আর এই id কেই পরে css এবং javascript এ ব্যবহার করা হয় নিজের পছন্দ অনুযায়ী কাজ করবার জন্য।

এবার আপনি যদি ফাইলটাকে সেভ করে ব্রাউজারটিকে রিলোড দেন তাহলে আপনি তিনটি এলিমেন্ট দেখতে পাবেন নিচের চিত্রের মত করে,

আপনি যে সমস্ত ডেটাগুলোকে ব্রাউজারে দেখতে পাচ্ছেন প্রত্যেকটাতে ব্রাউজার নিজস্ব ডিফল্ট স্টাইল অ্যাপ্লাই করেছে যেহেতু আমরা কোন কাস্টম স্টাইল অ্যাড করিনি। আমরা এর পরবর্তী টিউটোরিয়ালে শিখব কিভাবে আপনি HTML এলিমেন্টগুলিকে আপনার নিজস্ব স্টাইল অ্যাপ্লাই করবেন এবং জাভাস্ক্রিপ্ট ব্যবহার করবেন।

View Demo

ডেমো টা দেখতে পারেন এই লিঙ্কে ক্লিক করে।

HTML সম্পর্কে যা জেনে রাখা ভাল

নমস্কার, আশা করি আপনারা ভাল আছে, আজকে আমি আপনাদের HTML সম্পর্কে কিছু তথ্য শেয়ার করতে যাচ্ছি যা আপনাকে HTML সম্পর্কে কিছু স্বচ্ছ ধারনা তৈরি করতে সাহায্য করবে।
আমরা এখন ওয়েব টেকনোলজির যুগে বাস করছি, আগে কিন্তু এমন সুযোগ সুবিধা ছিল না। এই ধরুন আপনি আপনার প্রবাসী বন্ধুকে চিঠি লিখবেন তাহলে আপনি কি করবেন? প্রথমত আপনি দেখবেন আপনার বন্ধুর মেইল অ্যাড্রেস আছে কিনা, থাকলে আপনি ঘরে বসেই কম্পিউটার, বা আপনার স্মার্টফোন থেকে একটা মেইল পাঠিয়ে দিলেন। অথবা আপনি আমোদ প্রমোদের জন্য বন্ধুদের সঙ্গে চ্যাট করতে পারবেন, আপনি ফাকা সময়ে অনলাইনে আরটিকেল পড়ছেন বা অনলাইন গেম খেলছেন। এখন তো আবার আপনি ঘরে বসেই ইন্টারনেটের মাধ্যমে জিনিস কেনা বেচা করতে পারছেন, আবার কেউ কেউ তো ইন্টারনেটে কিছু পয়সাও উপার্জন করতে পারছে। এককথায় ইন্টারনেট এখন আমাদের গ্রাস করে ফেলেছে। যাই হোক অনেক ভুমিকা দিয়ে ফেললাম।

এবার আসি HTML এর উৎপত্তি হল কিভাবে। পদার্থবিজ্ঞানী টিম বার্নার্স লী হলেন HTML-এর প্রাথমিক আবিষ্কারক। সুইজারল্যান্ডের আন্তর্জাতিক বৈজ্ঞানিক প্রতিষ্ঠান জেনেভার CERN এর কয়েকজন সহকর্মী তাকে HTML তৈরিতে সাহায্য করেন। টিম বার্নার্স লী বর্তমানে WWWC (Word Wide Web Consortium) এর পরিচালক এবং সেই WWWC গ্রুপ এখন ওয়েবের প্রযুক্তিগত মান নির্ধারন করেন।

১৯৯১-৯২ সালে টিম বারনার্স লি’র একটি এডিটর বিকশিত হয়, যেটা প্রথম ভার্সনের HTML এর জন্য একটি সত্যিকারের ব্রাউজার এডিটর ছিল এবং NeXt ওয়ার্কস্টেশনে চালানো হত। এটাকে Objective-C  তে প্রয়োগ করা হয়েছিল যা দিয়ে ওয়েব ডকুমেন্টকে সহজেই তৈরি করা, দেখা এবং এডিট করা যেত।

আপনারা উইকিপিডিয়ার http://en.wikipedia.org/wiki/HTML  লিংক-এ আরো বিশদ ভাবে HTML এর উতপত্তির কথা জানতে পারবেন।

HTML এর প্রথম ভারসন হল XHTML, তারপর নতুন প্রজন্মের দিকে এগিয়ে যেতে যেতে পরিনত হল HTML4 এবং এখনকার লেটেস্ট ভার্সন HTML5. এখনকার যতগুলি আপডেটেড ব্রাউজারে আমরা সার্ফিং করি সবগুলিই এখন HTML5 সাপোর্ট করে। সুতরাং HTML5 যেমন খুব এফেক্টিভ আবার তেমন শিখতেও সময় কম লাগে। আর আরেকটা কথা আমরা এখন যে চোখ ধাধানো ওয়েব ডিজাইন দেখতে পারি তা শুধু ওই HTML5  এর জন্যই সম্ভব। আগে ওয়েব ডেভেলপারদের ডিজাইনের জন্য table এলিমেন্ট কে ব্যাবহার করতে হত, তারপরে এল divition এলিমেন্ট। আর HTML5 এ আরও নতুন নতুন সেমান্টিক ডিজাইন এলিমেন্ট সংযুক্ত হতে লাগল যেমন, হেডার, ন্যাভ, আরটিকেল, মেইন, অ্যাসাইড, সেকশন, ফুটার ইত্যাদি।

আপনি এখন আপনার ইচ্ছে মত যেকোনো ভার্শনের HTML ব্যাবহার করতে পারেন, কিন্তু আমি আপনাকে এনকারেজ করব HTML5 ব্যবহার করার। কারন এটির মাধ্যমে আপনি খুব ভাল দৃষ্টি নন্দন ওয়েবসাইট বানাতে পারবেন।

একনজরে HTML এর DOCTYPE diclaration

আপনি কোন ভার্শনের HTML ব্যবহার করছেন সেটা আপনাকে ব্রাউজারকে আগে থেকেই ঘোষণা করতে হয় যাতে আপনি আসলে কোন ভার্শনের HTML ব্যাবহার করছেন সেটা ব্রাউজার বুঝতে পারে, যেমনঃ

X-HTML Doctype declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML4 Doctype declaration:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5 doctype declaration:

<!DOCTYPE html>

তাহলে আপনি দেখতেই পারছেন বিবর্তনের দিকে কিভাবে এই ডকটাইপ ডিক্লেরেশন ক্রমশ বড় থেকে ছোট হয়ে গেছে। যার ফলে আমাদের টাইপ করতে হচ্ছে কম আর কাজ হচ্ছে দ্রুতগতিতে। এটা কিন্তু মনে রাখবেন যে HTML শেখা মানে কিন্তু কোন রকমের প্রোগ্রামিং শেখা নয়, আপনি শিখছেন মারকাপ তৈরী করা।
এখানেই আমাদের HTML সম্পর্কে কিছু কথা বলে শেষ করতে হচ্ছে, পরবরতী টিউটোরিয়ালে আমরা HTML তৈরী করব।আর শিখে নেব কিছু নতুন অজানা কথা HTML সম্পর্কে। আশা করি ভাল থাকবে এবং আপনার পরিবারকেও ভাল রাখবেন।

টিউটোরিয়ালঃ জাভাস্ক্রিপ্টের মাধ্যমে আইডি দিয়ে HTML element অপসারণ করুন

আজক আমি এমন একটা জাভাস্ক্রিপ্ট ফাংশন তৈরী করব যেটা দিয়ে যেকোন HTML element কে ডকুমেন্ট থেকে অপসারণ করা সম্ভব এবং আপনার ব্রাউজারকে অবশ্যই আপডেটেড হতে হবে।

HTML Part

<div id="wrapper">
    <div id="header">
        <p>Header Sectioin</p>
    </div>
    <div id="main">
        <div id="sidebar">
            <p>Siebar Section</p>
        </div>

        <div id="content">
            <p>Content Section</p>
        </div>
    </div>
    <div id="footer">
        <p>Footer Section</p>
    </div>
</div>
<button onclick="javascript: document.getElementById('header').remove();this.remove();">Remove Header Element</button>
<button onclick="javascript: document.getElementById('sidebar').remove();this.remove();">Remove Sidebar Element</button>
<button onclick="javascript: document.getElementById('content').remove();this.remove();">Remove Content Element</button>
<button onclick="javascript: document.getElementById('footer').remove();this.remove();">Remove Footer Element</button>
<script>

Javascript Part

Element.prototype.remove = function() {
 this.parentElement.removeChild(this);
}

NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
 var i = 0, len = this.length;
 do {
  if (this[i] && this[i].parentElement) {
   this[i].parentElement.remove(this);
  }
  i++;
 } while (i < len)
}

Demo

এই লিঙ্কে গিয়ে ডেমো দেখতে পারেন।

ইন্ডিয়ানভিসা-বাংলাদেশ ফর্ম পূরণ করার একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত জাভাস্ক্রিপ্ট ট্রিক

Full Featured Javascript Trick

আপনাকে স্বাগত জানাই, আমি আপনাদের জন্য একটি সম্পূর্ণ বৈশিষ্টযুক্ত জাভাস্ক্রিপ্ট ট্রিক নিয়ে এসেছি। আশা করি আপনাদের ভাল লাগবে। আগের পোস্টগুলিতে আমি এই পোস্ট গুলি দেখিয়েছিলামঃ

১. জাভাস্ক্রিপ্ট দিয়ে ভিসা ফর্ম পূরণ
২. বডি এলিমেন্ট থেকে oncopy, onpaste, occut অ্যাট্রিবিউট বাদ দেওয়া
৩. জাভাস্ক্রিপ্টের মাধ্যমে ক্যাপচা ইমেজ কোড রিলোড রিলোড
৪. অ্যাপয়েন্টমেন্ট বাটনকে ওয়েব পেজে সহজে নিয়ে আসা

জাভাস্ক্রিপ্টের মাধ্যমে অনেক অসম্ভব কাজ সহজ করা যায়। উদাহরণস্বরূপ আমরা হিডেন এলিমেন্টকে দেখতে পাইনা, কিন্তু জাভাস্ক্রিপ্ট কোডের মাধ্যমে আমরা এই সমস্ত লুকিয়ে থাকা ইনপুট এলিমেন্টকে সহজেইই কন্সোল প্যানেলে শো করাতে পারি।

এই টিউটোরিয়ালে আমরা নিম্নলিখিত কাজ গুলি করাতে চাই জাভাস্ক্রিপ্টকে দিয়ে,

১. স্বয়ংক্রিয়ভাবে অনলাইন ফর্মে কোনরকম টাইপ বা কপি-পেস্ট ছাড়াই ফর্ম ফিল্ড পূরণ করা
২. ওয়েব পেজে ডিফল্ট অ্যাপয়েন্টমেন্ট বাটন প্রদর্শন করা
৩. দুটি ইভেন্ট হ্যান্ডলারের মাধ্যমে ক্যাপচা কোড পুনরায় রিলোড করা
৪. ওয়েবপেজের উপরে ডিজিটাল ঘড়ি প্রদর্শন
৫. দুটি বাটন সংযুক্ত করা, যেখানে একটিতে ক্লিক করলে একটি নির্দিষ্ট সময় অন্তর অন্তর স্বয়ংক্রিয়ভাবে ক্যাপচা কোড অটো রিলোড করা সম্ভব এবং দ্বিতীয় বাটনটিতে ক্লিক করলে ক্যাপচা কোড রিলোড হওয়া বন্ধ হয়ে যাবে।

ফর্ম পূরণ করার জাভাস্ক্রিপ্ট ট্রিক

/* Form filling javascript code */
  document.querySelector('option[title=BANGLADESH-DHAKA]').value = 'BGDD1';
  document.OnlineForm.pia.value = 'BGDD1'; // Note: Value of Indian Mission Name
  document.OnlineForm.fileno.value = 'XXXXXXXXXXXX'; // Note: Value of Application Id
  document.OnlineForm.birthdate.value = 'DD/MM/YYYY'; // Note: Value of Date of birth
  document.OnlineForm.passport_no.value = 'XXXXXXXXX'; // Note: Value of Passport No.
  var today = new Date(),
  dd = today.getDate(),
  mm = today.getMonth() + 1, // January is 0!
  yyyy = today.getFullYear();
  if (dd < 10) dd = '0' + dd;
  if (mm < 10) mm = '0' + mm;
  today = dd + '/' + mm + '/' + yyyy;
  document.OnlineForm.Date.value = today; // Note: Value of Today's date
  console.log('1) All input field has been filled out.');

এখানে উল্লেখ্য যে, আমি প্রথমে ২য় অপশন এলিমেন্টকে একটি BGDD1 ভ্যালু দিয়েছি, তারপর আমি পুনরায় এই BGDD1 ভ্যালুকেই pia সেলেক্ট এলিমেন্টের ভ্যালুতে অ্যাসাইন করেছি। আপনি যখন উপরের কোডগুলি ইন্সপেক্ট এলিমেন্ট এর কন্সোল প্যানেলে এন্টার করবেন, তখন সমস্ত ভিসার ফর্ম পূরণ হয়ে যাবে স্বয়ংক্রিয়ভাবে।

এখানে একটা ব্যাপারে আপনাকে আগে থেকেই জানিয়ে রাখছি যে আমি document.OnlineForm.fileno = “XXXXXXXX…” করে রেখেছি, আপনাকে শুধু ঐ সমস্ত ভ্যালু গুলিকে আগে থেকেই পুরণ করে রাখতে হবে কোন টেক্সট এডিটর দিয়ে।

ওয়েবপেজে গেট অ্যাপয়েন্টমেন্ট বাটন প্রদর্শন

রিপ্রিন্ট ওয়েবপেজটি যখন আপনি খুলবেন তখন Reprint বাটন আগে থেকেই ওয়েবপেজে চলে আসে, কিন্তু Get Appointment বাটনটা দেখায় না, আমাদেরকে মিশন নেমটা সিলেক্ট করে Get Appointment এর button টা নিয়ে আসতে হয়। কিন্তু নিচের কোডটি কনসোল প্যানেলে এন্টার করলে Get Appointment এর button টা চলে আসবে আর Reprint button-টি দেখাবে না।

/* Displaying Appointment Date by default */
document.querySelector('input[name=Reprint]').style.display = 'NONE';
var getAptBtn = document.querySelector('input[name=Appointment]');
getAptBtn.style.display = 'BLOCK';
getAptBtn.style.marginLeft = '170px';
console.log('2) Reprint button has been removed, Appointment button is now visible');

দুটি ইভেন্ট হ্যান্ডলারের মাধ্যমে ক্যাপচা কোড রিলোড

এই জাভাস্ক্রিপ্ট কোড দুটি কাজ করবে যেটার কাজ একটাই, ক্যাপচা কোড রিলোড করা। অর্থাৎ, আপনি যখন মাউসটি ঐ ক্যাপচা ইমেজ কোডের উপরে রাখবেন তখন ক্যাপচা কোডটি রিলোড হবে, আর আপনি যখন এক্সেস কোড লেখার ইনপুট ফিল্ডের উপর ক্লিক করবেন তখনো ক্যাপচা কোড রিলোড হবে।

/* Reloading captcha code with two event handler */
document.querySelector('#capt').onmouseover = function () {
return refreshCaptcha();
}
document.querySelector('#ImgNum').addEventListener('focus', function () {
return refreshCaptcha();
});
console.log('3) Two event handler has been added for reloading captcha code.');

ওয়েবপেজের উপরে ডিজিটাল ঘড়ি প্রদর্শন

এই জাভাস্ক্রিপ্ট কোড appointment date প্রয়োগের জন্য প্রযোজ্য নয়,  কিন্তু ওয়েব পেজের উপরে আপনার স্থানীয় সময় Chek করতে আপনাকে সাহায্য করবে।

var divClock = document.createElement('div'),
time;
document.body.insertBefore(divClock, document.body.firstChild);
divClock.setAttribute('style', 'font-size: 4em;background: #000;color: #fff;padding: 12px 10px;text-align: center;width: 100%; margiin: 0 auto;');
function showClock() {
var localTime = new Date().toLocaleTimeString();
setTimeout(showClock, 500);
divClock.innerHTML = localTime;
}
showClock();
console.log('4) Clock has been loaded on top');

দুটি বাটন সংযুক্ত করা, যার একটিতে ক্লিক করলে একটি নির্দিষ্ট সময় অন্তর অন্তর ক্যাপচা কোড অটো রিলোড হবে এবং বন্ধ করে দেওয়াও যাবে

এটা খুবই উপকারী জাভাস্ক্রিপ্ট কোড ক্যাপচা কোডটিকে অটোরিলোড করবার জন্য যেখানে আপনাকে ম্যানুয়ালি ক্যাপচা রিলোডের জন্য ক্লিক করতে হবে না, এই ফাংশনটাই আপনার জন্য একটি নির্দিষ্ট সময় অন্তর অন্তর ক্যাপচা ইমেজ রিলোড করতে সাহায্য করবে।
এই স্ক্রিপ্ট দুটি button এলিমেন্ট তৈরি করবে যেখানে। প্রথম button-টিতে ক্লিক করলে একটি নির্দিষ্ট সময় অন্তর ক্যাপচা কোড রিলোড করবে। আমি একটি delay ভ্যারিয়েবল তৈরী করেছি এবং এর ভ্যালু দিয়েছি ৩*১০০০ যেখানে ১০০০ হল মিলিসেকেন্ড(১০০০ মিলিসেকেন্ড = ১ সেকেন্ড)। অর্থাৎ আমি ৩ সেকেন্ড করে দিয়েছি। আপনাকে এই ভ্যালুটাকে আপনার পছন্দের সময় অনুযায়ী পরিবর্তন করে করে নিতে হবে। উদাহরণ স্বরূপ ধরুন আপনি প্রতি ১ মিনিট অন্তর অন্তর ক্যাপচা কোড রিলোড করবেন, তাহলে আপনাকে লিখতে হবে, ১*৬০*১০০০

var btnWrapper = document.createElement('div'),
delay = (3 * 1000), // declare how many seconds the captcha reloads in 
time,
btnClass = 'btn btn-primary',
btn1 = document.createElement('button'),
btn2 = document.createElement('button');
document.body.insertBefore(btnWrapper, document.body.firstChild);
btnWrapper.appendChild(btn1);
btnWrapper.appendChild(btn2);
btn1.setAttribute('class', btnClass);
btn2.setAttribute('class', btnClass);
btn1.appendChild(document.createTextNode('Start Reloading'));
btn1.setAttribute('style', 'margin-right: 8px;')
btn2.appendChild(document.createTextNode('Stop Reloading'));
btnWrapper.setAttribute('style', 'padding: 12px 10px; text-align: right; width: 60%; margin: 0 auto; margin-bottom: 10px;');

function autoClick() {
 document.querySelector('a').click();
 time = setTimeout(autoClick, delay);
}
btn1.addEventListener('click', function () {
 autoClick();
 console.log('Auto reload Success.');
});
btn2.addEventListener('click', function () {
 clearTimeout(time);
 console.log('Auto reload stopped');
});
console.log('5) Auto reload button has been added on top.');

ফুল জাভাস্ক্রিপ্ট কোড

try {
  /* Form filling javascript code */
  document.querySelector('option[title=BANGLADESH-DHAKA]').value = 'BGDD1';
  document.OnlineForm.pia.value = 'BGDD1'; // Note: Value of Indian Mission Name
  document.OnlineForm.fileno.value = 'XXXXXXXXXXXX'; // Note: Value of Application Id
  document.OnlineForm.birthdate.value = 'DD/MM/YYYY'; // Note: Value of Date of birth
  document.OnlineForm.passport_no.value = 'XXXXXXXXX'; // Note: Value of Passport No.
  var today = new Date(),
  dd = today.getDate(),
  mm = today.getMonth() + 1, // January is 0!
  yyyy = today.getFullYear();
  if (dd < 10) dd = '0' + dd;
  if (mm < 10) mm = '0' + mm;
  today = dd + '/' + mm + '/' + yyyy;
  document.OnlineForm.Date.value = today; // Note: Value of Today's date
  console.log('1) All input field has been filled out.');
  /* Displaying Appointment Date by default */
  document.querySelector('input[name=Reprint]').style.display = 'NONE';
  var getAptBtn = document.querySelector('input[name=Appointment]');
  getAptBtn.style.display = 'BLOCK';
  getAptBtn.style.marginLeft = '170px';
  console.log('2) Reprint button has been removed, Appointment button is now visible');
  /* Reloading captcha code with two event handler */
  document.querySelector('#capt').onmouseover = function () {
    return refreshCaptcha();
  }
  document.querySelector('#ImgNum').addEventListener('focus', function () {
    return refreshCaptcha();
  });
  console.log('3) Two event handler has been added for reloading captcha code.');
  /* Displaying clock on top */
  var divClock = document.createElement('div'),
  time;
  document.body.insertBefore(divClock, document.body.firstChild);
  divClock.setAttribute('style', 'font-size: 4em;background: #000;color: #fff;padding: 12px 10px;text-align: center;width: 100%; margiin: 0 auto;');
  function showClock() {
    var localTime = new Date().toLocaleTimeString();
    setTimeout(showClock, 500);
    divClock.innerHTML = localTime;
  }
  showClock();
  console.log('4) Clock has been loaded on top');
  /* Viewing a button which will reload the captcha code */
  var btnWrapper = document.createElement('div'),
  delay = (3 * 1000), // declare how many seconds the captcha reloads in 
  time,
  btnClass = 'btn btn-primary',
  btn1 = document.createElement('button'),
  btn2 = document.createElement('button');
  document.body.insertBefore(btnWrapper, document.body.firstChild);
  btnWrapper.appendChild(btn1);
  btnWrapper.appendChild(btn2);
  btn1.setAttribute('class', btnClass);
  btn2.setAttribute('class', btnClass);
  btn1.appendChild(document.createTextNode('Start Reloading'));
  btn1.setAttribute('style', 'margin-right: 8px;')
  btn2.appendChild(document.createTextNode('Stop Reloading'));
  btnWrapper.setAttribute('style', 'padding: 12px 10px; text-align: right; width: 60%; margin: 0 auto; margin-bottom: 10px;');
  function autoClick() {
    document.querySelector('a').click();
    time = setTimeout(autoClick, delay);
  }
  btn1.addEventListener('click', function () {
    autoClick();
    console.log('Auto reload Success.');
  });
  btn2.addEventListener('click', function () {
    clearTimeout(time);
    console.log('Auto reload stopped');
  });
  console.log('5) Auto reload button has been added on top.');
} catch (e) {
  console.log('There was an error:' + e);
}

ভিডিও টিউটোরিয়াল

স্ক্রিপ্ট ডাউনলোড

আপনি আমাদের Fresh Tech Bloggers ওয়েবসাইটে গিয়ে সোর্স কোডটি ডাউনলোড করে নিতে পারেন। আমাদের পরবর্তী টিউটোরিয়াল এ আপনাকে শেখাব যে আপনি কিভাবে ভিসা তথ্য অনলাইন ইন্ডিয়ান ভিসা সরকার ওয়েব সাইটে অনায়াসেই পুরণ করতে পারবেন।

টিউটোরিয়ালঃ সেট টাইম আউট এবং ক্লিয়ার টাইম আউট

আমাদের এই টিউটোরিয়ালর জন্য একটি ডিভিশন এবং দুটো বাটন এলিমেন্টের প্রয়োজন হবে। ধরুন আমরা এমন একটা টাইম আউট ফাংশন করতে চাই যেখানে টাইমস্ট্যাম্পের আপডেট দেখাবে। এখন আমাদের যেটা করতে হবে সেটা হল আমরা যখন সেট টাইম আউট বাটনে ক্লিক করব তখন এই ফাংশনটা প্রতি ১ সেকেন্ড বা ৫০০ মিলিসেকেন্ড অন্তর অন্তর টাইমস্ট্যামটি আপডেট হতে থাকবে। আর আমরা যখন ক্লিয়ার টাইমআউট বাঁটনটিতে ক্লিক করব তখনই এই টাইমস্ট্যাম্পের আপডেট বন্ধ হয়ে যাবে।
আমরা এখন ৫টি গ্লোবাল ভ্যারিয়েবল(চলরাশি) তৈরি করব যেমন setTime, clearTime, divElement, showTime এবং delay নিচে যেভাবে দেখান হয়েছে,

var setTime = document.getElementById('setTime'), // for first button element
clearTime = document.getElementById('clearTime'), // second button element
divElement = document.getElementById('divElement'), // a div element for viewing time-stamp
showTime, // a variable with no value
delay = 500 // 1 second (to set time);

গ্লোবাল ভ্যারিয়েবল তৈরি হয়ে গেলে আমরা showTimeStamp ফাংশন তৈরি করব যাতে আমাদের div এলিমেন্ট-এ টাইমস্ট্যাম্পের আপডেট দেখায়।
সুতরাং, আমাদের ফাংশন স্টেটমেন্টে একটা লোকাল ভ্যারিয়েবল(time) তৈরি করব, যেটার ভ্যালু হবে
new Date().getTime();
তারপর আমাদের ঐ টাইম-স্ট্যাম্পকে ডিভিশন এলিমেন্ট-এ শো করাব। সুতরাং আমাদের কোডটি হবে,
divElement.innerHTML = time;
এরপর আমরা সেট-টাইমআউট ফাংশন তৈরি করব যা কিনা প্রতি ৫০০ মিলিসেকেন্ড এ showTimeStamp কে কল করবে।

function showTimeStatmp() {
  var time = new Date().getTime();
  divElement.innerHTML = time;
  showTime = setTimeout(showTimeStatmp, delay);
}

এরপর আমরা setTime বাটনটিতে একটি ইভেন্ট লিসেনার সংযুক্ত করব যেখানে ক্লিক করলে আমাদের showTimeStamp ফানশন তার কাজ শুরু করে দেবে।

setTime.addEventListener('click', function () {
  showTimeStatmp();
});

এই ফাংশনটিকে বন্ধ করবার জন্য আমরা দ্বিতীয় বাটন এলিমেন্টে আরেকটা ইভেন্ট লিসেনার সংযুক্ত করব যেখানে ক্লিক করলে আমাদের showTimeStamp ফানশন বন্ধ হয়ে যাবে।

clearTime.addEventListener('click', function () {
  clearTimeout(showTime);
});

ফুল জাভাস্ক্রিপ্ট কোড

var setTime = document.getElementById('setTime'),
 clearTime = document.getElementById('clearTime'),
 divElement = document.getElementById('divElement'),
 showTime,
 delay = 500;

function showTimeStatmp() {
 var time = new Date().getTime();
 divElement.innerHTML = time;
 showTime = setTimeout(showTimeStatmp, delay);
}

setTime.addEventListener('click', function () {
 showTimeStatmp();
});

clearTime.addEventListener('click', function () {
 clearTimeout(showTime);
});

ডেমো

জাভাস্ক্রিপ্ট দিয়ে কিভাবে ডিফল্ট অ্যাপয়েন্টমেন্ট ডেট দেখাবেন ইন্ডিয়ানভিসা-বাংলাদেশ ওয়েবসাইটে

আপনাদের সবাইকে শুভকামনা জানাই, আজ আমি আপনাদের দেখাব আপনারা কিভাবে রিপ্রিন্ট বাটনকে হাইড করে গেট অ্যাপয়েন্টমেন্ট বাঁটনকে বাই ডিফল্ট শো করাবেন। কোন কোন সময় গেট আয়পয়েন্টমেন্ট বাঁটনকে আমরা দেখতে পাইনা। এই ধরনের সমস্যা দূর করার করার জন্যই আমার এই প্রয়াস।

জাভাস্ক্রিপ্ট একটু গভীরে

সর্বপ্রথমে আপনি আপনার ডিফল্ট ব্রাউজারটি খুলুন।
এরপর ইন্ডিয়ানভিসা-বাংলাদেশ ওয়েবসাইটে গিয়ে “Print Registered Application” লিঙ্ক-এ ক্লিক করুন।
ব্রাউজারে ডকুমেন্ট যখন পুরোপুরি লোড হয়ে যাবে তখন ওয়েব পেজটির উপর মাউসের রাইট ক্লিক করে কন্টেক্সট মেনু থেকে ইন্সপেক্ট এলিমেন্টে ক্লিক করুন যেমনটি নিচের প্রদর্শিত চিত্রে দেখানো হয়েছে।
ইন্সপেক্ট এলিমেন্ট টুলসটি খুলে গেলে, আপনি টুলস্টির একদম উপরের বাদিকের কোনায় একটি সার্চ বাটন দেখতে পাবেন, ওইটাতে ক্লিক করুন।
এরপর আপনি ওয়েবপেজ থেকে যে রিপ্রিন্ট বাটনটি আছে সেটাতে ক্লিক করুন, এলিমেন্টস প্যানেলে আপনি তাহলে নিচের মত একটা ফলাফল দেখতে পাবেন।

<input name="Reprint" type="button" class="btn btn-primary" onclick="chkCapRep()" value="Reprint">

আপনি এই কোডটি যদি একটু মনোযোগ দিয়ে লক্ষ্য করেন তাহলে এই এলিমেন্টটিতে কোন স্টাইল অ্যাট্রিবিউট দেখতে পাবেন না, কিন্তু আপনি যদি পরের ইনপুট ট্যাগের দিকে দৃষ্টিপাত করেন তাহলে আপনি স্টাইল অ্যাট্রিবিউট দেখতে পাবেন এরকমঃ

<input name="Appointment" type="button" onclick="chkCapAppt()" style="display:none " class="btn btn-primary" id="Appointment" value="Get Appointment">

style="display:none "
এখন যদি আমরা none লেখাটিকে block দিয়ে পরিবর্তিত করি তাহলে আমরা গেট অ্যাপয়েন্টমেন্ট বাঁটনকে দেখতে পাব।
এখন আমরা জাভাস্ক্রিপ্ট কোড দিয়ে রিপ্রিন্ট বাঁটনকে উঠিয়ে দিয়ে গেট অ্যাপয়েন্টমেন্ট বাঁটনকে আনব।

জাভাস্ক্রিপ্ট কোড

ইন্সপেক্ট এলিমেন্ট এর কনসোল ট্যাব এ গিয়ে নিচের কোডগুলি কপি করে পেস্ট করে দিন, এরপর কী-বোর্ড থেকে এন্টার কী চাপুনঃ

OnlineForm.Reprint.style.display = 'none';
OnlineForm.Appointment.style.display = 'block';

আমাদের জাভাস্ক্রিপ্ট টিউটোরিয়াল এখানেই শেষ, আশা করি আপনি ভাল থাকবেন এবং সবাইকে ভাল রাখবেন।আমাদের নিচের ভিডিওটি পারলে একবার দেখে নিতে পারেন এই টিউটোরিয়ালকে আরও ভিসুয়ালি বোঝার জন্য।

ভিডিও টিউটোরিয়াল

ডাউনলোড

আপনি আমাদের Fresh Tech Bloggers ওয়েবসাইটে গিয়ে সোর্স কোডটি ডাউনলোড করে নিতে পারেন। আমাদের পরবর্তী টিউটোরিয়াল এ আপনাকে শেখাব যে আপনি কিভাবে ভিসা তথ্য অনলাইন ইন্ডিয়ান ভিসা সরকার ওয়েব সাইটে অনায়াসেই পুরণ করতে পারবেন।

অনলাইনে Indindianvisa-bangladesh website এ ক্যাপচা কোড পুনরায় রিলোড করুন সহজ উপায়ে

আজকে আমি এমন একটা জাফাস্ক্রিপ্ট ফাংশন তৈরী করতে যাচ্ছি যাতে এক্সেস কোড ইনপুট বক্সে ক্লিক করলেই ক্যাপচা কোডটি পুনরায় রিলোড হয়। ট্যাব প্রেস করেও এক্সেক কোড বক্সে ফোকাস করে এই ফাংশনকে কাজ কাজ করানো যাবে। আমরা যখন পুরনো ওয়েসবসাইটে কাজ করতাম তখন কিন্তু আমাদের ক্যাপচা কোড রিলোড করার মত তেমন কোন পদ্ধতি ছিল না, যার ফলে আমাদের ভীষণ খাটতে হত অর্থাৎ নতুন করে পেজটি রিলোড করে আবার সমস্ত ভিসা তথ্য দিয়ে ফর্ম ফিলাপ করতে হত। তাছাড়া রিপ্রিন্ট পেজটাকে যখন আমরা বেশ কিছুক্ষণ ধরে রেখে দিতাম সাবমিট না করে, তাহলে কেপচা কোড লিখে সাবমিট করলেই এক্সেস কোড ভুল দেখাত, ফলে আমাদের সব কাজ ভন্ডুল হয়ে যেত ওই একটিমাত্র কারনে। চলুন শুরু করা যাক আমাদের এই ক্যাপচা কোড রিলোড করার জাভাস্ক্রিপ্ট কেরামতি।

জাভাস্ক্রিপ্টের একটু গভীরে

আপনি এখন আপনার ডিফল্ট ব্রাউজারটি ওপেন করুন।
এরপর, ইন্ডিয়ান-বাংলাদেশ ভিসার অফিশিয়াল ওয়েবসাইটে গিয়ে “প্রিন্ট রেজিস্টারড অ্যাপ্লিকেশন” লিঙ্কে ক্লিক করুন।
যখন পেজটি সম্পূর্ণভাবে ব্রাউজারে লোড হবে, তখন আপনি CTRL+U বা মাউসের রাইট ক্লিক করে “ভিউ পেজ সোর্স”-এ ক্লিক করতে পারেন। আপনি এখন একটা সোর্স কোড এর পেজ দেখতে পাচ্ছেন, আপনি যদি এই সোর্স কোডের একেবারে উপরের দিকে লক্ষ্য করেন তাহলে আপনি refreshCaptcha ফাংশান দেখতে পাবেন নিচে প্রদর্শিত চিত্রের মত।

আমাদের শুধুমাত্র refreshCaptcha  কপি করতে হবে, কোড পরীক্ষা করার প্রয়োজন হবে না। এখন সোর্স পেজটিকে বন্ধ করে দিয়ে Reprint.jsp পেজ এ ফিরে যান, এরপর ওয়েব পেজ এর উপর মাউসের রাইট ক্লিক করুন এবং কনটেক্সট মেনু থেকে ইন্সপেক্ট এলিমেন্ট অপশনে ক্লিক করুন। স্বাভাবিকভাবে আমরা জেভাবে কন্সোল ট্যাবে যাই সেভাবেই কন্সোলে ট্যাব এ ক্লিক করুন।
প্রথমে আমাদের ফর্ম এর নাম কি জানা প্রয়োজন, সুতরাং, নিচের কোডটি টাইপ করে এন্টার কী প্রেস করুন:

document.forms[0]

ব্রাউজারের কন্সোল প্যানেলে এই রেজাল্ট দেখতে পাবেনঃ

<body onpest="return false;" oncopy="return false;" oncut="return false;">...</body>

আপনি কনসোল প্যানেলের কোডটি থেকে বুঝতেই পারছেন যে ফর্মটির নাম OnlineForm । আমাদের এখন এক্সেস কোড ইনপুট বক্সটির নাম জানা প্রয়োজন,  তাহলে আমরা যদি নিচের কোডটি টাইপ করে এন্টার বাটনে চাপ দিই তাহলে যতগুলি HTML ইনপুট এলিমেন্ট আছে আমাদের কনসোল প্যানেলে সেগুলি শো করবেঃ

OnlineForm.getElementsByTagName('input');

রেজাল্টঃ

[
<input name="fileno" type="text" class="textBoxDashed" id="fileno" value="" size="20" maxlength="12" title="Please Enter your Application Id" onkeyup="chkAlphaNum(this)" onblur="trim1(this)" isdatepicker="true">
<input name="birthdate" type="text" value="" title="Please Enter you Date of Birth As in Passport" class="textBoxDashed" id="birthdate" datepicker="true" datepicker_max="01/03/2015" size="20" maxlength="10" datepicker_format="DD/MM/YYYY" isdatepicker="true">
<input name="passport_no" type="text" title="Please Enter you Passport No. As in Passport" class="textBoxDashed" id="passport_no" value="" size="20" maxlength="14" onkeyup="chkAlphaNum(this)" onblur="trim1(this);" isdatepicker="true">
<input name="ImgNum" type="text" class="textBoxDashed1" id="ImgNum" onkeyup="chkAlphaNum(this)" size="20" maxlength="6" isdatepicker="true">
<input name="Reprint" type="button" class="btn btn-primary" onclick="chkCapRep()" value="Reprint">
<input name="Appointment" type="button" onclick="chkCapAppt()" class="btn btn-primary" id="Appointment" value="Get Appointment">
<input type="hidden" name="Date" value="01/03/2015">]

যে ফলাফল গুলি কনসোল প্যানেলে দেখায় সেগুলোর একেকটায় আপনি মাউসের দ্বারা ক্লিক করবেন, তাহলে রিপ্রিন্ট পেজের একেকটা ইনপুট ফিল্ড হাইলাইট হয়ে যাবে।আমাদের শুধু এক্সেস কোড এর টেক্সট ইনপুট ফিল্ডের নাম টা জানা জরুরি, তাই আপনি যখন দেখবেন ওই ইনপুট ফিল্ডটা হাইলাইট হয়ে গেছে তখন আপনি কন্সোল প্যানেলের ওই ইনপুট এলেমেন্টের নেম অ্যাট্রিবিউটকেই নোট করে নেবেন, আপনি তাহলে এখন কি দেখতে পাচ্ছেন, ImgNum নিশ্চয়ই। ঠিকই ধরেছেন। আমাদের কনসোল প্যানেল যেহেতু কোডগুলির দ্বারা ভর্তি হয়ে গেছে তাই আমরা CTRL+L প্রেস করে ওইগুলোকে ক্লিয়ার করে নেব।

জাভাস্ক্রিপ্ট কোড

ImgNum.addEventListener('focus', function () {
    refreshCaptcha();
});

এখন আপনি নিচের কোডটি কপি করে কন্সোলে পেস্ট করে দিয়ে এন্টার প্রেস করুন। এরপর আপনি যখন ওই এক্সেস কোডের ইনপুট বক্সে ক্লিক করবেন অথবা ট্যাব প্রেস করে কারসারটিকে এক্সেস কোডের ইনপুট ফিল্ডে আনবেন তখন ক্যাপচা কোড রিলোড হচ্ছে দেখতে পাবেন।

ভিডিও টিউটোরিয়াল

ডাউনলোড

আপনি আমাদের Fresh Tech Bloggers ওয়েবসাইটে গিয়ে সোর্স কোডটি ডাউনলোড করে নিতে পারেন। আমাদের পরবর্তী টিউটোরিয়াল এ আপনাকে শেখাব যে আপনি কিভাবে ভিসা তথ্য অনলাইন ইন্ডিয়ান ভিসা ওয়েব সাইটে অনায়াসেই পুরণ করতে পারবেন।

অনলাইন ভারতীয় ভিসা ওয়েবসাইটে অটোফিলিং টিপসঃ জাভাস্ক্রিপ্ট

আজ আমি আপনাকে কিভাবে অনলাইন ভারতীয় ভিসা ওয়েবসাইট থেকে ভিসা ফর্ম সহজে পূরণ করতে পারেন, তার কিছু জাভাস্ক্রিপ্ট টিপস দিতে যাচ্ছি। গত কয়েক দিন থেকেই ওই ওয়েবসাইটের সমস্ত ইনপুট ক্ষেত্রে কোন ভিসা তথ্য পেস্ট করা অসম্ভব ব্যাপার হয়ে যাচ্ছে যেমন ওয়েব ফাইল নম্বর,  জন্ম তারিখ ও পাসপোর্ট নম্বরের ইনপুট টেক্সট। আপাতদৃষ্টিতে এটা একটি সার্ভার সম্পর্কিত সমস্যা মনে হতে পারে, কিন্তু আসলে আমরা যাতে কপি পেস্ট করে ভিসা তথ্য পূরণ করতে না পারি সেজন্যই এই কারসাজি। পুঙ্খানুপুঙ্খভাবে Reprint.jsp  পেজের সোর্স কোড দেখার পর আমি এই সিদ্ধান্তে পৌছতে পারলাম যে তারা কপি পেস্ট প্রক্রিয়া বন্ধ করার জন্যই বডি এলিমেন্ট এ কিছু অ্যাট্রিবিউট যোগ করে দিয়েছেন, যেমন  onpaste="return false;  "oncopy="return false;" oncut="return false;" ইত্যাদি। এর প্রমাণ হিসেবে একটি ইমেজ সংযুক্ত করেছি আমার পোস্ট এ, দেখে নিতে পারেন।

তাই আমরা ম্যানুয়ালি ইনপুট ক্ষেত্রে ঐ তথ্য টাইপ করতে বাধ্য হই। কিন্তু হিট টাইমের সময় সার্ভার যেহেতু ডাউন হয়ে যায়, তাই ম্যানুয়ালি টাইপ করে সাবমিট দিলেও(যেটা কিনা খুবই সময়সাপেক্ষ ব্যাপার) আমরা “নো অ্যাপয়েন্টমেন্ট ডেটস আর আভেইলেবল” কথাখানি দেখতে পাই। এর ফলে আমরা ভারতীয় ভিসা অনলাইন ওয়েবসাইট থেকে অ্যাপয়েন্টমেন্ট তারিখ পেতে পারিনা।আমাদেরকে তাই একটু ভিন্ন ভাবে চিন্তা করতে হবে যে কিভাবে আমরা কোনরকম ভাবে পেস্ট না করেই অনায়াসে অনলাইন ভিসা ফর্মে ভিসা তথ্য পূরণ করতে পারি।

জাভাস্ক্রিপ্ট একটু গভীরে

এই স্ক্রিপ্ট তৈরি করার জন্য আমাদের মাত্র পাচটি জাভাস্ক্রিপ্ট চলরাশির(ভ্যারিয়েবল)প্রয়োজন. প্রথমে আমাদের ফর্ম এর নাম কি এটা জানতে হবে। যদি আপনার ইন্সপেক্ট এলিমেন্ট ডেভেলপার টুলস সম্পর্কে ধারনা থাকে তাহলে ঠিক আছে তবে যারা জানেন না এটা কি করে করতে হয় আমি তাদেরকে বলব যে আপনি কি করে এটা ব্যবহার করতে পারবেন। আপনি Google Chrome (বা আপনার প্রিয় ব্রাউজার) খুলুন,  তারপর https://indianvisaonline.gov.in/visa/ ওয়েবসাইটটিতে যান এবং "Print Registered Application" লিঙ্কটিতে ক্লিক করুন। এখন ওয়েবপেজটির উপর রাইট ক্লিক করুন এবং নিচে প্রদর্শিত চিত্রের মত করে কন্টেক্সট মেনু থেকে “ইন্সপেক্ট এলিমেন্ট” অপশনে এ ক্লিক করুন:

তারপর ইন্সপেক্ট এলিমেন্টের ডান দিকে অবস্থিত ট্যাব কনসোলে যান। এখন আমাদের ভিসা ফর্মটির কি নাম জানার জন্য document.forms [0] টাইপ করে ↵ এন্টার কী চাপতে হবে, তাহলে ব্রাউজার এর কন্সোল ট্যাব এ নিম্নরুপ কোড কন্সোলে দেখাবে:

var form = OnlineForm,

আপনি লক্ষ করুন, ফর্মের নেম আট্রিবিউট দেয়া আছে OnlineForm। সুতরাং, অনলাইন ভারতীয় ভিসা ফর্মের নাম হল OnlineForm এবং আমাদের প্রথম চলরাশি(ভ্যারিয়েবল) হতে হবে:
var form = OnlineForm
আপনি আপনার পছন্দের টেক্সট এডিটর যেমন নোটপ্যাড প্লাস প্লাস বা উইন্ডোজের ডিফল্ট টেক্সট এডিটর নোটপ্যাড এ এই জাভাস্ক্রিপ্ট কোড কপি করতে পারেন। তারপর গুগল ক্রোম ব্রাউজার এ ফিরে গিয়ে কনসোল ট্যাবে যান এবং form.getElementsByTagName('input') টাইপ করে ↵ এন্টার কী প্রেস  করুন। ব্রাউজার কনসোল প্যানেলে এই কোডগুলি প্রদর্শিত হবে:

[
<input name="fileno" type="text" class="textBoxDashed" id="fileno" value="" size="20" maxlength="12" title="Please Enter your Application Id" onkeyup="chkAlphaNum(this)" onblur="trim1(this)" isdatepicker="true">
<input name="birthdate" type="text" value="" title="Please Enter you Date of Birth As in Passport" class="textBoxDashed" id="birthdate" datepicker="true" datepicker_max="01/03/2015" size="20" maxlength="10" datepicker_format="DD/MM/YYYY" isdatepicker="true">
<input name="passport_no" type="text" title="Please Enter you Passport No. As in Passport" class="textBoxDashed" id="passport_no" value="" size="20" maxlength="14" onkeyup="chkAlphaNum(this)" onblur="trim1(this);" isdatepicker="true">
<input name="ImgNum" type="text" class="textBoxDashed1" id="ImgNum" onkeyup="chkAlphaNum(this)" size="20" maxlength="6" isdatepicker="true">
<input name="Reprint" type="button" class="btn btn-primary" onclick="chkCapRep()" value="Reprint">
<input name="Appointment" type="button" onclick="chkCapAppt()" class="btn btn-primary" id="Appointment" value="Get Appointment">
<input type="hidden" name="Date" value="01/03/2015">]

কনসোল প্যানেলে যে কোডগুলো আপনি দেখতে পাচ্ছেন সেখান থেকে আপনি শুধু নেম অ্যাট্রিবিউট গুলোই মনোযোগ সহকারে নোট করে রাখুন। আমরা তাহলে প্রয়োজনীয় আরো চারটি ভ্যারিয়েবল তৈরি করতে পারলাম সেগুলো হলঃ

var form = OnlineForm,
 webFileNo = form.fileno,
 dateOfBirth = form.birthdate,
 passportNo = form.passport_no,
 accessCode = form.ImgNum;

আপনি আপনার পছন্দের টেক্সট এডিটরে এই ভেরিয়েবলগুলি কপি করে নিতে পারেন। আমাদের এখন একটি জাভাস্ক্রিপ্ট ফাংশন তৈরী করতে হবে যেখানে আমরা আমাদের ভিসা তথ্যগুলি আগে থেকেই পূরন রাখব। ফাংশন তৈরী করলা, কিন্তু আমরা কিভাবে এই ফাংশনকে কল করাব? এটা কিন্তু মনে রাখবেন যে, ফাংশন কে তৌরী করলেই কিন্তু সেটা কাজ করবে না, এটাকে কল করতে হবে। তাই আমরা একটা ইভেন্ট লিসেনার যুক্ত করব ওই এক্সেস কোড লেখার ইনপুট বক্সের উপর, যেখানে ক্লিক করে বা ট্যাব প্রেস করে ওই বক্সটিতে এলেই সমস্ত ভিসা তথ্য সয়ংক্রিয়ভাবে ব্রাউজার দ্বারা ফিল আপ হয়ে যাবে। এখন নিমোক্ত কোডের উদাহরণটি দেখুন:

accessCode.onfocus = function () {
 webFileNo.value = '12345678';  // Paste Web file no within quotation mark
 dateOfBirth.value = '12/12/12';  // Paste date of birth within quotation mark
 passportNo.value = '1234567890'; // Paste passport no within quotation mark
}

যখন আপনি এই কোডগুলিকে কন্সোল ট্যাবে পেস্ট করে এন্টার করবেন তখন কিন্তু আপনি কোনরকম পরিবর্তন লক্ষ্য করবেন না, কিন্তু যখন আপনি ওই এক্সেস কোড লেখার ইনপুট বক্সটায় ক্লিক করবেন তখনই সমস্ত ইনপুট ফিল্ড ভিসা তথ্য দ্বারা পূরণ হয়ে যাবে। আপনারা একটা ব্যাপারে অবগত থাকবেন যে, কোটেশন মার্কের মধ্যে যে কোডগুলি দেওয়া আছে সেগুলো আপনি পরিবর্তন করে নেবেন আপনার ভিসার ওয়েব ফাইল নম্বর, জন্মতারিখ আর পাসপোর্ট নাম্বার দিয়ে, আর ওগুলোর মধ্যে যেন কোন ফাকা স্পেস না পরে, নাহলে আপনার সমস্ত পরিশ্রমই ব্যর্থ যাবে।

কিছু কথা

আমাদের এখানেই টিউটোরিয়াল শেষ করতে হচ্ছে, তাহলে আপনি শিখে গেলেন কিভাবে জাভাস্ক্রিপ্ট কোড দিয়ে অনলাইন ইন্ডিয়ান ভিসা ওয়েবসাইটে ভিসা তথ্য প্রবেশ করাতে পারবেন ম্যানুয়ালি টাইপ বা কপি-পেস্ট না করেই। এই ভিডিও টিউটোরিয়াল আপনাকে কিছুটা সাহায্য করতে পারে, আমাদের উপরের টিউটোরিয়াল আরো ভাল মত বোঝার জন্য।

ভিডিও টিউটোরিয়ায়ল

ডাউনলোড

আপনি আমাদের Fresh Tech Bloggers ওয়েবসাইটে গিয়ে সোর্স কোডটি ডাউনলোড করে নিতে পারেন। আমাদের পরবর্তী টিউটোরিয়াল এ আপনাকে শেখাব যে আপনি কিভাবে ভিসা তথ্য অনলাইন ইন্ডিয়ান ভিসা সরকার ওয়েব সাইটে অনায়াসেই পুরণ করতে পারবেন।