ওয়েব ডিজাইন-৪:লেখার আকার-আকৃতি পরিবর্তন

ডিসেম্বর 19, 2013 — M R

আগের পোস্টে আমরা দেখেছি কেমন করে ওয়েব পেজে লেখা সাজাতে হয়। এই পোস্টে আমরা দেখবো কেমন করে ফন্ট পরিবর্তন, আকার আকৃতি পরিবর্তন করতে হয়।

১। বোল্ড, ইটালিক, আন্ডারলাইনঃ কোন লেখাকে বোল্ড(মোটা) , ইটালিক(কিছুটা হেলানো) বা আন্ডারলাইন(নিচে টান) করতে যথাক্রমে <b> , <i> ও <u> ট্যাগ ব্যবহার করা হয়। (মনে রাখার জন্যঃ বোল্ড(bold)এর প্রথম অক্ষর b,ইটালিক (Italic) এর প্রথম অক্ষর i,এবং আন্ডারলাইনের( underline) প্রথম অক্ষর u)। এই ট্যাগগুলো এবং এদের সমাপ্তিসূচক ট্যাগের মাঝে যা লিখবেন , তা-ই বোল্ড, ইটালিক বা আন্ডারলাইন হবে। যেমনঃ

<b>MUKTADIR</b>  <br/>
<i>MUKTADIR</i>  <br/>
<u>MUKTADIR</u> <br/>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

MUKTADIR

MUKTADIR

MUKTADIR

যদি একই লেখাকে একসাথে বোল্ড,ইটালিক বা আন্ডারলাইন করতে চান তবে একাধিক ট্যাগ একসাথে ব্যবহার করতে পারবেন। যেমনঃ
<b><i>MUKTADIR</i></b> <br/>
<b><u>MUKTADIR</u></b> <br/>
<i><u>MUKTADIR</u></i> <br/>
<i><b><u>MUKTADIR</u></b></i> <br/>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

MUKTADIR

MUKTADIR

MUKTADIR

MUKTADIR

  1. হেডিংঃ সংবাদ পত্রের শিরোনামের সাথে আমরা সবাই পরিচিত। অনেক ওয়েব সাইটেও দেখবেন এরকম শিরোনাম(Headline) থাকে। আপনিও ওয়েব পেজে শিরোনাম দিতে পারেন। এজন্য <h1>, <h2>, <h3> ,<h4>, <h5>ও <h6> এই ছয়টি ট্যাগ ব্যবহার করতে পারবেন। কোনটির ক্ষেত্রে শিরোনামটা কেমন হবে তা বলার চেয়ে দেখে বোঝা সহজ। যথাঃ

<h1>MUKTADIR RAHMAN</h1> <br/>
<h2>MUKTADIR RAHMAN</h2> <br/>
<h3>MUKTADIR RAHMAN</h3> <br/>
<h4>MUKTADIR RAHMAN</h4> <br/>
<h5>MUKTADIR RAHMAN</h5> <br/>
<h6>MUKTADIR RAHMAN</h6> <br/>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

MUKTADIR RAHMAN

MUKTADIR RAHMAN

MUKTADIR RAHMAN

MUKTADIR RAHMAN

MUKTADIR RAHMAN
MUKTADIR RAHMAN

কেন দিয়েছি বুঝতে পারছেন তো?

৩। সুপারস্ক্রিপ্ট ও সাবস্ক্রিপ্টঃ কোন লেখা স্বাভাবিক অবস্থান থেকে সামান্য উপরে থাকলে তাকে বলে সুপারস্ক্রিপ্ট আর সামান্য নিচে থাকলে তাকে বলে সাবস্ক্রিপ্ট ।য়েব পেজে অংক জাতীয় কোন লেখা লিখতে এবং রাসায়নিক সংকেত লিখতে এদের খুব প্রয়োজন হয়। সুপারস্ক্রিপ্ট(superscript) ও সাবস্ক্রিপ্ট (subscript) লিখার জন্য যথাক্রমে <sup> ও <sub> ট্যাগ দুটি ব্যবহার করা হয়। যেমনঃ

(a+b) <sup> 2 </sup> = a <sup> 2 </sup> +2ab+ b <sup> 2 </sup> <br/>
H<sub>2</sub>O

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

(a+b) 2 = a 2 +2ab+ b 2

H2O

৪। ফন্ট পরিবর্তনঃ সাধারনভাবে ওয়েব পেজে যখন কোন লেখা লিখেন তখন দেখবেন তা একটি নির্দিষ্ট ফন্টে , নির্দিষ্ট সাইজে আসে যা আগে থেকেই ওয়েব ব্রাউজারে সেট করা থাকে। তবে এই ফন্ট বা সাইজ যদি আপনার মন মত না হয় তবে নিজের ইচ্ছা মত ফন্ট নির্বাচন করতেও পারেন। এজন্য<font> ট্যাগ ব্যবহার করতে হবে। এখন আমরা এইচটিএমএল এর একটা নতুন ধারনার সাথে পরিচিত হতে যাচ্ছি যাকে বলে অ্যাট্রিবিউট (attribute) । তার আগে একটা উদাহারণের মাধ্যমে বিষয়টার সাথে পরিচিত হওয়া যাক। যথাঃ

<font face=”Times New Roman” size=”20″>
Muktadir Rahman
</font>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ


Muktadir Rahman

কি ঘটছে ভাল করে লক্ষ করুন। Muktadir Rahman লেখটি Times New Roman ফন্টে প্রদর্শিত হচ্ছে যার সাইজ বা আকার হল ২০। এখানে font ট্যাগের দুটি অ্যাট্রিবিউট হল face ও size ।

এবার অ্যাট্রিবিউট নিয়ে কিছু কথা বলি। অ্যাট্রিবিউট শব্দটি দ্বারা ” কোন কিছুর ধর্ম বা বৈশিষ্ট বোঝায়”। এইচটিএমএল এও এটি একই অর্থে ব্যবহৃত হয়। কোন ট্যাগের ধর্ম বা বৈশিষ্ট কেমন হবে তা অ্যাট্রিবিউট এর মাধ্যমে নির্ধারন করা হয়। যেমনঃ উপরের উদাহারণে লেখার ফন্ট কি হবে তা face আট্রিবিউট দিয়ে নির্ধারণ করা হয়েছে, লেখার আকার কেমন হবে তা size অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করা হয়েছে। এরকম প্রায় সব গুলো ট্যাগেরই নির্দিষ্ট কতগুলো আট্রিবিউট আছে। এগুলো ব্যবহার করে ঐ ট্যাগ গুলোর স্বাভাবিক ধর্ম পরিবর্তন করা যায়। এখানে স্বাভাবিক কথাটা গুরুত্ত্বপূর্ণ। কারণ আপনি যদি কোন অ্যাট্রিবিউট না লিখেন তবে ওয়েব ব্রাউজার তার নিজের মত করে অ্যাট্রিবিউট সেট করে নেবে। যেমনঃ আগের উদাহারণে size অ্যাট্রিবিউট না লিখলে ওয়েব ব্রাউজার লেখাটি স্বাভাবিক আকৃতিতে প্রদর্শিত করত।
কোন ট্যাগের অ্যাট্রিবিউটকে ঐ ট্যাগের ভেতর লিখতে হবে (উপরের উদাহরণের মত)। অ্যাট্রিবিউট এর গঠন নিম্নদূপঃ

অ্যাট্রিবিউট এর নাম = “অ্যাট্রিবিউট এর মান”

<font> ট্যাগ এর তিনটি অ্যাট্রিবিউট আছে । যথাঃ
1.face:এই অ্যাট্রিবিউট এর মাধ্যমে লেখার ফন্ট কি হবে তা নির্ধারন করা যায়। এখানে মানের অংশে যে ফন্টের নাম লিখবেন তা অবশ্যই যে ওয়েব পেজটি দেখবে তার কম্পিউটার এ ইন্সটল থাকতে হবে। তাই সেই সব ফন্টই ব্যবহার করবেন যা সকল কম্পিউটার এ আছে।
2.size:এই অ্যাট্রিবিউট এর মাধ্যমে লেখার আকার কেমন হবে তা নির্ধারন করা যায়।
3.color:এই অ্যাট্রিবিউট এর মাধ্যমে লেখার রঙ কি হবে তা নির্ধারন করা যায়। এর মান তিন ধরনের হতে পারে। যখন CSS শিখাব তখন এই তিন পদ্ধতি নিয়ে বিস্তারিত আলোচনা করব। এখন প্রচলিত ইংরেজি নাম ( red ; green etc.) ব্যবহার করতে শিখব।

ফন্ট নিয়ে সম্পুর্ন বিষয়টিকে একটা উদাহারণের সাহায্যে ব্যাখ্যা করা হলঃ

<font face=”Arial” size=”30″ color=”red”>
Bangladesh!!!!!
</font>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ


Bangladesh!!!!!

আজকের মত এখানেই শেষ।

অনুশীলনিঃ ওয়েব পেজে নিচের লেখাটা প্রদর্শণ করাতে হবে কী কোড লিখতে হবে???

Once upon a time,    there was a man and

a woman.

the women was dangerous. 

Posted in এইচটি এম এল. Leave a Comment »

ওয়েব ডিজাইন-৩:লেখা সাজানো

ডিসেম্বর 19, 2013 — M R

আগের পোস্টে HTML এর কয়েকটি বেসিক জিনিস নিয়ে আলোচনা করেছিলাম। এই পোস্টে ওয়েব পেজ এ লেখা কেমন করে সাজাতে হয় তা নিয়ে আলোচনা করবো।

নিচের ট্যাগ গুলো ব্যবহার করে লেখা সাজানো যায়ঃ
১। একাধিক স্পেস দেয়াঃ আগের পোস্টে দেখানো হয়েছে, লেখার মাঝে একাধিক স্পেস দিলেও- তা কেবল একটি স্পেস হিসাবেই ওয়েব পেজ এ পাওয়া যায়। এখন যদি সত্যিই একাধিক স্পেস এর প্রয়োজন হয় তখন কি করবেন? এজন্য ছোট্ট একটা কোড &nbsp ব্যবহার করতে হবে। কোন লেখার মাঝে যতবার &nbsp লিখবেন ততটি স্পেস সৃষ্টি হবে । যেমনঃ Body অংশে নিচের কোড লিখলে(যেহেতু ওয়েব পেজে যা লিখবেন তা Body অংশেই লিখতে হবে ,তাই “Body অংশে লিখলে” কথাটি পরবর্তীতে পরিহার করব। )

I &nbsp am Muktadir &nbsp &nbsp &nbsp &nbsp Rahman.

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

I &nbsp am Muktadir &nbsp &nbsp &nbsp &nbsp Rahman.

২। নতুন লাইন তৈরীঃ আগের পোস্টে দেখানো হয়েছে, লেখা লেখার সময় কীবোর্ডের Enter কী ব্যবহার করে নতুন লাইনে গেলেও- ওয়েব পেজে লাইন দুটি কেবল একটি লাইনে পাওয়া যায়। এসমস্যা নিরাসনের জন্য একটি ট্যাগ ব্যবহার করা এবং তা হল
(line break বা লাইন ভাঙ্গার সংক্ষিপ্ত রূপ br)। যেমনঃ

I am Muktadir Rahman.
I am teaching you HTML.

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

I am Muktadir Rahman.
I am teaching you HTML.

উল্লেখ্য, যত বার
লিখবেন ততটি নতুন লাইনের সৃষ্টি হবে। যেমন আগের উদাহরণের ক্ষেত্রে

I am Muktadir Rahman.

I am teaching you HTML.

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

I am Muktadir Rahman.

I am teaching you HTML.

এখানে একটা বিষয় লক্ষ করুনঃ আমি আগের পোস্টে লিখেছি যে, একটি ট্যাগ লিখলে ঐ ট্যাগের কাজ শেষ হবার পর সমাপ্তিসূচক ট্যাগ লিখতে হবে। কিন্তু উপরের
ট্যাগ ব্যবহার করলেও এখানে কোন সমাপ্তিসূচক ট্যাগ লিখা হয় নি। তার পরিবর্তে শেষের > চিহ্নের আগে / চিহ্ন ব্যবহৃত হয়েছে। এটা ব্যতিক্রম। এছাড়া আরো দু-একটি ট্যাগ (  <img/>,<hr>, ) আছে যাতে সমাপ্তিসূচক ট্যাগ লিখতে হয় না। এই দু-একটি ব্যতিক্রম ছাড়া বাকী ট্যাগ গুলোতে সমাপ্তিসূচক ট্যাগ লিখতে হবে। যে যে ট্যাগের ক্ষেত্রে সমাপ্তিসূচক ট্যাগ লিখতে হয় না, তা সময় মত বলে দেয়া হবে। এখন ইহা নিয়ে এখন মাথা না ঘামালেও চলবে।

৩। প্যারাগ্রাফ তৈরীঃ বড় বড় লেখাগুলো সাধারণত একাধিক প্যারাগ্রাফে বিভক্ত করে লিখলে পাঠকের বুঝতে সুবিধা হয়। যেমন আমার এই পোস্টটি অনেক গুলো প্যারাগ্রাফ ব্যবহার করেছি। প্যারাগ্রাফ তৈরী করার জন্য

ট্যাগ ব্যবহার করা হয় ( প্যারাগ্রাফ(paragraph) এর প্রথম অক্ষর p ব্যবহার করে ট্যাগটি

)। যেমনঃ

<p>I am Muktadir Rahman. I am studying at Bangladesh University of Engineering and Technology (BUET). I want to be an engineer.</p>

<p>During my leisure,I try to write new post for my readers. Now I am teaching you all web design. But what I have seen is that most of you do not feel any interest in Learning Web design.</p>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

I am Muktadir Rahman. I am studying at Bangladesh University of Engineering and Technology (BUET). I want to be an engineer.

During my leisure,I try to write new post for my readers. Now I am teaching you all web design. But what I have seen is that most of you do not feel any interest in Learning Web design.

৪। একের ভিতর সবঃ উপরে একাধিক স্পেস সৃষ্টি, নতুন লাইন তৈরী, প্যারাগ্রাফ তৈরী দেখানো হয়েছে। এসব ব্যবহার করা অনেক ক্ষেত্রে ঝামেলা দায়ক হতে মনে হতে পারে। যেমন ধরুন আপনার একাধিক স্পেস ব্যবহার করা প্রয়োজন – সেক্ষেত্রে একাধি বার &nbsp ব্যবহার করতে হয়, নতুন লাইন তৈরী করতে বার বার <br/> ট্যাগ ব্যবহার করতে হয়। এই ঝমেলা গুলো এড়াতে <pre> ট্যাগ ব্যবহার করতে পারেন। ট্যাগ ব্যবহার করে যেভাবে লেখাগুলো লিখবেন , ঠিক সেই ভাবেই ওয়েব পেজে প্রদর্শিত হবে (অর্থাৎ লেখাগুলোর মাঝে যত স্পেস দিবেন, যত নতুন লাইন তৈরী করবেন -ওয়েব পেজে ঠিক সেরকম প্রদর্শিত হবে) । যেমনঃ আগের পোস্টের উদাহারণটির ক্ষেত্রেঃ

<pre>I am           Muktadir Rahman.
I        am teaching you HTML</pre>

ওয়েব পেজে নিচের ন্যায় দেখাবেঃ

I am      Muktadir Rahman.
I   am teaching you HTML

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

অনুশীলনঃ ওয়েব পেজে নিচের লেখাগুলো যেভাবে আছে সে ভাবে প্রদর্শণ করার জন্য কী কী লিখতে হবে?

I love          my     country

very          much.

And I think that-

everyone                should  love   his country.

(দুই উপায়ে করা যেতে পারে। একটা সহজ ও অন্যটা ঝামেলা দায়ক। দুটি উপায়েই চেষ্টা করবেন কিন্তু)

Posted in এইচটি এম এল. ট্যাগ সমুহঃ , . Leave a Comment »

ওয়েব ডিজাইন-২: HTML বেসিক

নভেম্বর 28, 2013 — M R

HTML শেখার আগে কয়েকটি মৌলিক বিষয়ে ধারণা থাকতে হবে। নিচে তা আলোচনা করা হলঃ
HTML ট্যাগঃ ট্যাগ সম্পর্কে আগের পোস্টে ধারনা দেয়া হয়েছিল। < চিহ্ন দিয়ে শুরু এবং > চিহ্ন দিয়ে শেষ হওয়া শব্দ বা শব্দসমষ্টিই হল ট্যাগ। যেমনঃ <HTML>, <Body>, <head>,<P> ইত্যাদি এক একটি ট্যাগ। HTML কিছু ট্যাগের সমষ্টি ছাড়া আর কিছুই নয়। এই ট্যাগগুলো ব্যবহার করেই HTML এর সকল কোড লিখতে হয়। অর্থাৎ আমরা যা কিছু-ই করি না কেন(টাইটেল দেয়া,লেখা বড়-ছোট করা, বর্ণ পরিবর্তন,লিস্ট তৈরী ইত্যাদি সবকিছু), তা ট্যাগ ব্যবহার করেই করতে হবে। প্রতিটি কাজ করার জন্য আলাদা আলদা ট্যাগ আছে যেমনঃ ওয়েব পেজ এর টাইটেল দেয়ার জন্য টাইটেল (<title>) ট্যাগ। তাই আমরা HTML এ যা শিখব তা হল এই ট্যাগগুলোর কোনটি কোন কাজে এবং কেমন করে ব্যবহার করতে হয়। এখানে আরেকটা জিনিস জানতে হবেঃ একটা ট্যাগ শুরু করে ঐ ট্যাগের কাজ শেষ হবার পর একটি সমাপ্তি সুচক ট্যাগ লিখে দিতে হবে। এটা লিখার জন্য যে ট্যাগ ব্যবহারর করেছেন সেই ট্যাগটিই লিখতে হবে, কেবল প্রথম < চিহ্নের পর / ব্যবহার করতে হবে। যেমনঃ
আগের পোস্টের উদাহারণে

এখানে <title> ট্যাগ লিখে ওয়েব সাইট এর টাইটেল লেখার পর সমাপ্তি সূচক </title> ট্যাগ লিখে দেয়া হয়েছে। সমাপ্তি সূচক ট্যাগটি নির্দেশ করে যে ওয়েব সাইট এর টাইটেল লেখা শেষ হয়েছে। অর্থাৎ সমাপ্তি সুচক ট্যাগ এর আগ পর্যন্ত যা লিখা হবে তা-ই ওয়েব পেজ এর টাইটেল হিসাবে বিবেচিত হবে( এমন কি </head> <body> ইত্যাদি ট্যাগও ওয়েব পেজ এর টাইটেল হয়ে যাবে।আগের পোস্ট এর কোডটা লিখে </title> ট্যাগটি বাদ দিয়ে পরীক্ষা করে দেখুন। অবশ্যই পরিক্ষাটা করে দেখবেন কিন্তু।) । শুধু টাইটেল ট্যাগ নয় পরবর্তীতে যত গুলো ট্যাগ ব্যবহার করবেন , ব্যবহারের পর সমাপ্তি সুচক ট্যাগ অবশ্যই লিখবেন।

ওয়েব পেজ এর বিভিন্ন অংশঃ আগের পোস্টে বলা হয়েছে – HTML এ ওয়েব পেজকে দুইটি অংশে ভাগ করা হয়ঃ ১। Head .২। Body
১। Head: এই অংশ <head> ট্যাগ দিয়ে শুরু হয় এবং </head> ট্যাগ দিয়ে শেষ হয়। এই অংশে ওয়েব পেজের টাইটেল সেট করা হয়। এছাড়াও আরো কিছু কাজ করা হয় যা পরে দেখা যাবে।
২। Body: এই অংশ <body> ট্যাগ দিয়ে শুরু হয় এবং </body> ট্যাগ দিয়ে শেষ হয়। এই অংশে ওয়েব পেজ এ যা যা থাকবে ( যেমন কোন লেখা, ছবি ইত্যাদি যে কোন কিছু) তা লিখে দিতে হয়।এই অংশের মাঝে যা লিখবেন ওয়েব পেজেও তা লেখা দেখা যাবে। এই পোস্ট শেষে তা বুঝতে পারবেন।
সুতরাং যে কোন ওয়েব পেজে নিচের অংশগুলো থাকতে হবেঃ

<html>
<head>
(এখানে টাইটেল সেট করা লাগবে)
</head>
<body>
(এখানে যা লিখবেন তা ওয়েব পেজ এ প্রদর্শিত হবে।)
</body>
</html>

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

টাইটেল সেট করাঃ আগেই বলা হয়েছে HTML এ প্রতিটি কাজ করার জন্য এক একটি ট্যাগ আছে। টাইটেল সেট করার জন্য টাইটেল ট্যাগ (<title>) ব্যবহার করতে হবে। এই ট্যাগকে Head অংশে লিখতে হবে। যেমনঃ

<html>
<head>
<title>My First Web Page</title>
</head>
<body>

</body>
</html>

উপরের ওয়েব পেজের টাইটেল হল “My First Web Page” যা ওয়েব ব্রাউজারের টাইটেল বারে দেখা যাবে।

ওয়েব পেজে লেখাঃ আগেই বলা হয়েছে যে body অংশে যা-ই লিখবেন তা-ই ওয়েব পেজ এ দেখা যাবে। যেমনঃ

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Welcome to my first web page.

</body>
</html>

এবার পেজটি ওপেন করে দেখুন লেখা আছে “Welcome to my first web page. ” । তবে এখানে লেখার ক্ষেত্রে কিছু সীমাবদ্ধতা আছে। লেখাগুলোর মাঝে একাধিক Space দিতে পারবেন না । দিলেও ওয়েব পেজে কেবল একটি Space দেখাবে। Keyboard এ Enter কী ব্যবহার করে আলাদা লাইনে লিখলেও , ওয়েব পেজে তা কেবল একটা লাইন হিসাবেই উপস্থাপিত হবে। যেমনঃ body অংশে নিচের লেখা লিখলেও
I am                                                         Muktadir                 Rahman.
I am                                       teaching you                                    HTML
ওয়েব পেজে কেবল নিচের লেখা দেখাবেঃ
I am Muktadir Rahman. I am teaching you HTML
এই সমস্যা নিরাসনের জন্য কিছু ট্যাগ ব্যবহার করা হয়। ওয়েব পেজে লেখা সাজানোর জন্য যে ট্যাগগুলো ব্যবহার করা হয় তা নিয়ে পরবর্তী পোস্টে আলোচনা করা হবে।
এবার নিচের প্রশ্ন গুলোর জবাব দিয়ে আপনি কতটুকু বুঝেছেন তা চেক করুন। যদি আটকে যান মন খারাপ করবেন না- পোস্টটি আবার মনযোগ দিয়ে পড়ে ফেলুন।
প্রশ্ন-১। ধরুন আপনার ওয়েব পেজ এ একটা ছবি প্রদর্শণ করাবেন। কোন জিনিসটি ব্যবহার করবেন?
ক) ট্যাগ খ) জাভাস্ক্রিপ্ট গ) অন্য কিছু
প্রশ্ন-২। ছবি প্রদর্শণের ক্ষেত্রে কোন অংশে কোড লিখবেন?
ক)Head খ)Body গ) অন্য কোন স্থানে

Posted in এইচটি এম এল. Leave a Comment »

ওয়েব ডিজাইন-১:প্রাথমিক আলোচনা

নভেম্বর 24, 2013 — M R

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

আপনার ওয়েব সাইট পেতে হলে নিচের ধাপগুলো পর্যায়ক্রমে অনুসরন করতে হবেঃ
১. ওয়েব সাইট তৈরী
২. ওয়েব সাইট প্রকাশ

১।ওয়েব সাইট তৈরীঃ প্রথমে আপনাকে ওয়েব সাইটটা তৈরী করতে হবে। একাজটা দুইভাবে করতে পারেনঃ এক, বিভিন্ন সফটওয়্যার (যেমনঃ Microsoft FrontPage , Adobe Dreamweaver ইত্যাদি) ব্যবহার করে। দুই, কোড লিখে (যেমনঃ HTML, CSS,JavaScript প্রভৃতি)। আসলে আপনি যেভাবেই ওয়েব সাইট বানান না কেন , তা হবে কিছু কোডের সমষ্টি। সফটওয়্যারগুলো কোড লেখার কাজটা করে দেয়। তাই সফটওয়্যারগুলো দিয়ে ওয়েব সাইট বানানো তুলনামুলকভাবে অনেকটা সহজ । তবে ওয়েব সাইট তৈরী করার আসল মজাটা পাওয়া যায় যখন কোড লিখে ওয়েব সাইট তৈরী করা যায়। আমি কোড লিখে (HTML ও CSS ব্যবহার করে ) ওয়েব সাইট তৈরী করা দেখাবো।

২. ওয়েব সাইট প্রকাশঃ ওয়েব সাইট তৈরী করার পর তা ইন্টারনেট এ প্রকাশ করতে হবে। এজন্য দুইটি কাজ করতে হবেঃ এক, ডোমেইন নেম (আপনার ওয়েব সাইট এর নামই হল ডোমেইন নেম, যেমন Muktadir.com) কেনা এবং দুই,ইন্টারনেট এ ওয়েব সাইট রাখার জন্য জায়গা (Space) কেনা (যেখানে আপনার ওয়েব সাইট আপলোড করবেন. এই আপলোড করার কাজটাকে বলে ওয়েব হোস্টিং)। যেহেতু আপনি এই ব্যপারে নতুন , তাই আগে বিনামুল্যে ওয়েব সাইট প্রকাশ করে শিখতে পারেন। এজন্য বিভিন্ন ওয়েব সাইট আছে (যেমনঃ http://www.110mb.com ) যেখানে Sign up করলে তারা একটা ডোমেইন নেম ও কিছু জায়গা দেয়। কাজটা খুবই সহজ , যা নিয়ে পরে বিস্তারিত আলোচনা করা হবে।

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

কী কী লাগবেঃ HTML বা CSS দিয়ে ওয়েব সাইট বানাতে আলাদা কোন সফটওয়্যার এর দরকার নেই। উইন্ডোজ এর Notepad নামের টেক্সট এডিটর দিয়েই কাজ চালানো যায়। তবে প্রোগ্রামারগণ Notepad++ নামক ছোট একটা সফটওয়্যার ব্যবহার করে থাকেন। এর সুবিধা হল যখন কোড লিখবেন তখন কোড গুলো বিভিন্ন বর্ণ ধারন করে। এতে কোড লিখে মজা পাওয়া যায়, সহজে ভুল গুলো সহজে ধরতে পারা যায়। এছাড়াও বেশ কিছু বাড়তি সুবিধা পাওয়া যায়। তাই যারা HTML শিখতে চান তারা Notepad++ সফটওয়্যারটি ডাউনলোড করে নিতে পারেন http://download.tuxfamily.org/notepadplus/6.5.1/npp.6.5.1.Installer.exe লিংটি থেকে। তবে Notepad++ না ব্যবহার করলেও কোনো সমস্যা নেই, Notepad তো আছেই।

HTML প্রথম পাঠঃ HTML এর মৌলিক আলোচনা শুরু করার আগে ছোট একটা HTML পেজ তৈরী করা যাক । প্রথমে Notepad ওপেন করুন (Start Menu> Programs> Accessories >Notepad)। নিচের কোডগুলো লিখে ফেলুন।

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
Welcome to my First Web page
</body>
</html>

এবার File> Save এ যান। যে উইন্ডো আসবে তার File name নামক text box এ লিখুন Index.html এবং ফাইলটি ইচ্ছা মত একটা ফোল্ডারে সেভ করুন।ব্যস তৈরী হয়ে গেল HTML পেজ। এবার ঐ ফোল্ডারে গিয়ে ফাইলটি ওপেন করুন । ওয়েব ব্রাউজারের টাইটেল বারে দেখুন লেখা My First Web Page এবং সামনে Welcome to my First Web page লেখাটি দেখা যাবে।

এবার বিষয়টি ব্যাখ্যা করার চেষ্টা করা যাক। যখন ফাইলটি ওপেন করা হল তখন ওয়েব ব্রাউজার উপরের প্রতিটি লাইনকে পর্যায়ক্রমে ইন্টারপ্রেট বা অনুবাদ করতে থাকে (সোজা কথায় আপনি কোডগুলো দিয়ে যে কমান্ড দিলেন সে অনুসারে কাজ করতে থাকে) । বিষয়
টা নিচে বর্ণনা করা হলঃ
১। যখন ব্রাউজার <html> লাইনটি দেখে তখন সে বুঝে যে এর নিচে </html> এর উপরে যে কোড গুলো লিখেছেন তা HTML ভাষায় রচিত। তারপর ব্রাউজারটি পরের লাইনে চলে যায় ।
২।যখন <head> লেখাটি দেখে তখন সে বুঝে নেয় </head> লেখটির আগ পর্যন্ত কোড গুলো head অংশের (HTML এ একটি ওয়েব পেজ প্রধানত দুটি অংশে বিভক্ত Head ও Body।Head অংশে ওয়েব সাইট এর টাইটেল সেট করা হয় এবং Body অংশে ওয়েব পেজ এ যা যা থাকবে তা নির্ধারন করা হয়)।
৩।যখন <title>My First Web Page</title> লাইনটিতে যায় তখন বুঝে নেয় ওয়েব সাইটটির Title হবে My First Web Page. তাই ওয়েব পেজটি ওপেন করলে টাইটেল বারে My First Web Page লেখাটি দেখায়।
৪। যখন <body> লাইনটিতে যায় তখন বুঝে নেয় </body> লাইনটির আগ পর্যন্ত যা আছে তা body অংশের আওতাভুক্ত। ফলে Welcome to my First Web page লেখাটি ওয়েব পেজ এ দেখায়।

উপরের আলোচনা থেকে যা যা শিখলাম তা হলঃ
১। প্রতিটি ওয়েব পেজ এর দুইটি অংশ থাকেঃ Head ও Body । Head অংশে ওয়েব পেজ এর টাইটেল ও Body অংশে ওয়েব পেজ এ যা যা থাকবে তা লিখে দিতে হয়।
২। < চিহ্ন দিয়ে শুরু ও > দিয়ে শেষ হোওয়া শব্দগুলোকে HTML এর ভাষায় ট্যাগ (tag) বলে। এই গুলো ব্যবহার করেই ওয়েব ব্রাউজারকে নির্দেশ দেয়া হয়। তাই ট্যাগগুলো গুরুত্তপুর্ন।

পরের পোস্টে HTML এর প্রাথমিক বিষয়াদি আলোচনা করার চেষ্টা করব। পরবর্তী পোস্ট গুলো পাবার জন্য কেমন লাগলো জানাবেন। 

Posted in এইচটি এম এল. 1 Comment »

ওয়েব সাইট তৈরি করুন সহজে

এপ্রিল 14, 2009 — M R

ইন্টারনেট মানে অজস্র সাইট এর সমারোহ। পৃথিবীতে কত ওয়েব সাইট আছে তা বলা কঠিন। প্রতি মিনিটে অসংখ সাইট তৈরি হচ্ছে । আমরা অনেকে চাই নিজের একটি ওয়েব সাইট থাকুক। কিন্তু অনেকেই প্রয়োজনীয় জ্ঞানের অভাবে তা পারি না।আমাদের দেশে অনেক সংস্থা নির্দিষ্ট টাকার বিনিময়ে ওয়েব সাইট দিয়ে থাকে।কিছু সংস্থা বিনামূল্যে ওয়েব সাইট হোস্টিং এর সুবিধা দিয়ে থাকে।ডোমেইন নিবন্ধনঃ ওয়েব সাইট তৈরির করার আগে আমাদের অবশ্যই ডোমেইন Register করতে হবে। ডোমেইন মানে ওয়েব সাইট এর নাম।বিনামূল্যে কয়েকটি সংস্থা ওয়েব হোস্টিং ও ডোমেইন নেম দিয়ে থাকে। তার মধ্যে http://we.bs অন্যতম। এতে নিবন্ধ করলে আপনাকে ৬০মেগাবাইট জায়গা দিবে। আমরা এই সাইট এ ওয়েব সাইট হোস্টিং করে শিখব। প্রথমে http://we.bs/sign_up.html যান। FREE এ চেক দিন। 2. Please, select if you want to register/transfer/host a domain or use a subdomain: লিখার নিচে Register / Transfer a domain name এ চেক দিন। একটি টেক্সট বক্স আসবে। এখানে আপনার ওয়েব সাইট এর নাম দিন। যেমনঃ মনে করি আপনি আপনার ওয়েব সাইট এর নাম Muktadir দিবেন ।এ জন্য টেক্সট বক্সে Muktadir লিখুন। তারপর SEARCH বাটনে ক্লিক করুন।register muktadi.we.bsএ চেক দিয়ে NEXT বাটন চাপুন। এর পর দেখবেন একটি Registration ফরম এসেছে। সব গুলি টেক্সট বক্সে আপনার সঠিক তথ্য দিন। []I agree with your Terms and Conditions এ চেক দিয়ে SingUp বাটনে ক্লিক করুন। আমরা ইমেইলে একটি Password চলে যাবে। এবার আপনাকে আপনার ওয়েব সাইট বানিয়ে হোস্ট করতে হবে।
ওয়েব সাইট তৈরি করাঃ আমরা দুই ভাবে ওয়েব সাইট তৈরি করতে পারি।
১. টেম্পলেট ব্যবহার করেঃ টেম্পলেট ব্যবহার করে ওয়েব সাইট বানানো সহজ। নিচে কিছু টেম্পলেট এর সাইট দেওয়া হল । এথেকে আপনি বিনামূল্যে টেম্পলেট নামিয়ে ওয়েব সাইট বানাতে পারেন।
http://www.freesitetemplates.com
http://www.oswd.org
http://www.templateworld.com/free_templates.html

২. সফটওয়্যার ব্যবহার করেঃ সফটওয়্যার ব্যবহার করেও ওয়েব পেইজ বানানো যায়। http://muk.110mb.com/web.php সাইট থেকে Easy Web Site Pro-4 ডাউনলোড করে নিতে পারেন। ডাউনলোড শেষ হলে ইন্সটল করুন।আপনার কম্পিউটারে আগে মাইক্রোসফট ডট নেট ফ্রেমওয়ার্ক ইন্সটল থাকতে হবে ।এই সফটওয়্যারটি দ্বারা ৮টি Step শেষ করে আপনার ওয়েব সাইট বানাতে পারবেন।এ সফটওয়্যারটির ব্যবহার দেখতে পারেন http://www.easywebsitepro.com/help/en লিঙ্ক থেকে। ওয়েব সাইট তৈরি শেষ হলে একটি ফোল্ডার এ ফাইল গুলি রাখুন। মনে করি web site নামে একটি ফোল্ডারে রাখলাম। এখন আপনাকে ফাইল গুলি we.bs এ আপলোড করতে হবে।
ওয়েব পেইজ হোস্টিং করাঃ আমাদের শেষ কাজ হল তৈরিকৃত ওয়েব সাইট সার্ভারে হোস্ট বা আপলোড করতে হবে। http://we.bs/members.html গিয়ে আপনার মেইলে দেয়া Name ও Password দিয়ে লগইন করুন। File Manager এ ক্লিক করুন বা ফাইল ম্যানেজার ওপেন করুন। এখানে দেখবেন আপনার ওয়েব সাইট এর নাম(ডোমেইন নেম) দেখাচ্ছে। ক্লিক করুন। লোড হলে দেখবেন Index.html নামে একটি ফাইল আছে । ফাইলটির বাম পাশে চেক দিয়ে Delete Files/Folder(s) বাটনে ক্লিক করুন। মেসেজ বক্সে Are you sure you want to delete the marked file(s) ? লেখাটি দেখাবে। Ok ক্লিক করুন। Delete হয়ে গেলে আপনাকে আপনার ওয়েব সাইট আপ্লোড করতে হবে। UPLOAD FILES: লেখার পাশে একটি টেক্সট বক্স দেখবেন। এর পাশের Choose… বাটনে ক্লিক করুন। একটি উইন্ডো আসবে। উইন্ডোটি থেকে আপনার web site ফোল্ডারটি ওপেন করে index.html নামক ফাইল সিলেক্ট করে Open বাটনে ক্লিক করুন। এবার UPLOAD FILES: এর নিচ বরাবর এরেকটি টেক্সট বক্স আসবে। এর পাশের Choose.. বাটনে ক্লিক করে আবার আরেকটি ফাইল সিলেক্ট করে ওপেন করুন । এভাবে সব কটি ফাইল ওপেন করুন। সব শেষে Upload Files বাটনে ক্লিক করুন। কিছুক্ষনের মধ্যে ফাইল গুলি আপলোড হয়ে যাবে। বাস হয়ে গেল আপনার ওয়েব সাইট । এবার আপনার ওয়েব সাইট ভিজিট করতে পারেন।

Posted in ওয়েব ডিজাইন. 4 Comments »

কিভাবে CO.cc ডোমেইন পাবেন

মার্চ 28, 2009 — M R

অনেকেই ডোমেইন সম্পর্কে বোঝেন না। ডোমেইন কিভাবে পাওয়া যায় তা বোঝেন না । আপনি অতি সহজে Co.cc ডোমেইন পেতে পারেন। এটি URL redirect না। এতে আমরা শিখব কিভাবে ডমেইন সেট আপ করতে হয়।

১.প্রথমে ক্লিক করুন। এখন নতুন উইন্ডো আসবে। এখানে দেখবেন একটি টেক্সট বক্স আছে । তার ডান পাশে “Check Availability” একটি বাটন আছে। ঐ টেক্সট বক্সে আপনার কাংখিত ডোমেইন নেম লিখুন, যেমনঃ আপনি mohaimen.co.cc নামে ডোমেইন নেম পেতে চান , তাহলে টেক্সট বক্সে লিখুন mohaimen । তারপর পাশের “Check Availability” বাটনে ক্লিক করুন । কিছুক্ষনের মাঝে আপনার ডমেইন নেম চেক করবে। যদি আগে এই ডোমেইন রেজিষ্টেশণ না করে তা হলে Mohaimen.co.cc is available লেখাটি দেখাবে। যদি না দেখায় তাহিলে অন্য ডোমেইন নেম দেখুন।

এবার Continue Registration  এ ক্লিক করুন। এবার আপনাকে নিবন্ধিত হতে হবে। এজন্য Create an account now  এর উপর ক্লিক করুন।এবার একটি নিবন্ধন ফরম আসবে। এখানে আপনার তথ্য পূরণ করুন। এবং সব শেষে I accept the Terms of Service [] এ টিক দিয়ে Creat an account এ ক্লিক করুন।

এবার একটি লেখা দেখাবে Your new domain has been successfully registered। আপনার ডোমেইন  হয়ে গেছে। এখন আপনাকে ডোমেইনটি সেট আপ করতে হবে।

২. Set up বাটনে ক্লিক করুন। Manage Domain আসবে। এখানে আপনার ডোমেইনের ডান পাশে Set up লিখা বাটনে ক্লিক করুন। এখানেই পেচটা । এখন আপনি যদি ডোমেইন চান তাহলে 1. Manage DNS  এ চেক দিন। এখানে দুটি টেক্সট বক্স দেখতে পাবেন। Name Server 1 ও Name Server ২ । এখনে আপনার ওয়েব সার্ভার থেকে পাওয়া Name Server দুটি লিখুন। এটি আপনার ওয়েব সার্ভের আপনাকে বলে দিবে।Name Server  ঘর গুলো পূরণ করে Set up এ ক্লিক করুন। এবার ২৪ ঘন্টা পরে ডমেইনটি আপনার সার্ভারে সেট হবে। তারপর ৪৮ ঘন্টা পরে আপনার ওয়েব সার্ভারের Domain Addson অপশনে গিয়ে আপনার নিবন্ধিত ডোমেইন লিখুন। হয়ে যাবে।

Posted in ওয়েব ডিজাইন. 2 Comments »