IT Help Desk > Create your Own Website
HTML শিখুন নিজের ওয়েবপেজে ব্যাবহার করুন Patr 1 to 15
Sultan Mahmud Sujon:
আসুন শিখি HTML [পর্ব-৬]
***আজকে আমরা আলোচোনা করব heading element নিয়ে।
***প্রথমে আপনাদের মাথায় আসতে পারে heading element কী?
***ধরুন আপনি একটি paragraph লিখছেন।এখন এই পারাগ্রাফ এর শিরোনাম দিতে হবে।তারপর paragraph এর বিষয়বস্তু।আজকে আমরা শিখব কিভাবে এই শিরোনাম দিতে হয়।
***এই শিরোনাম দিতে যে ট্যাগ ব্যাবহার হরা হয় তা হচ্ছে <h1>…………………</h1> ট্যাগ।তো আসুন দেখি কিভাবে এই ট্যাগ ব্যাবহার করা যায়।
***এই ট্যাগ ব্যাবহার করা খুবই simple.আপনি যেই লাইনকে শিরোনাম বানাতে চান,সেই লাইন এর শুরুতে <h1> আর লাইন এর শেষে </h1> অ্যাড করুন। আসুন এবার এই নিয়ম অনুসারে একটি কোডিং করি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>
আমরাও পারি।
</title>
</head>
<body>
<h1>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h1>
<p>আমাদের ছোট দেশটির নাম বাংলাদেশ।এই বাংলার আনাচে কানাচে ছড়িয়ে ছিটিয়ে আছে কিছু উদ্দমি মানুষ।যারা দেশকে ভালবাসে নিজের জীবনের থেকেও বেশী।তারা দেশের জন্য কিছু করে সবার কাছে বলে বেড়ায় না যে আমি দেশের জন্য এই কাজটা করেছি।তাদের এই অবদান শুধু দেশ জানে আর সে নিযে জানে।এরাই হল সত্তিকারের মানুষ।মানুষের মত মানুষ।আর কিছু মানুষ আছে যেমন আমাদের রাজনীতির রুই-কাতলারা,তারা দেশের জন্য কত কিছু করছে!!!!!!দেশের উন্নয়নের চিন্তায় তাদের নাকি ঘুম আসে না।এই সব রুই কাতলাদের যখন সত্যিকারের মানুষের পাশে দাড়া করাবেন তখন আপনারই অপমান লাগবে যে আপনি ফেরেশতাদের সাথে নরকের কীটকে দাড়া করিয়েছেন।</p>
</body>
</title>
***এখানে <h1>............</h1> দিয়ে heading আর <p>...........</p> দিয়ে paragraph indicate করেছে।
***এবার এটিকে নোটপ্যাড এ লিখে সেভ করে double click করে ওপেন করুন।
এতক্ষন আমারা শিখলাম কিভাবে heading দেওয়া যায়।এবার আমরা শিখব heading এর নানা রুপ নিয়ে।
<h1>............</h1>
<h2>............</h2>
<h3>............</h3>
<h4>............</h4>
<h5>............</h5>
<h6>............</h6>
***আপনাদের মনে প্রশ্ন আস্তে পারে h1,h2,h3,h4,h5,h6 কেন??এবার আসুন এই বিষইয়ে একটু কথা বলি।
***খুবই সহজ ব্যাপার। h1 হতে ক্রমানুসারে যত নিচের দিকে নামতে থাকবে heading তত ছোট হতে থাকবে।মানে <h1>........</h1> হতে <h2>.......</h2> এর heading ছোট। আর <h6>.......</h6> এর heading সবছেয়ে ছোট।
***তাহলে আসুন এবার বাস্তব উদাহরন দেখি।আপ্নারা আমার সাথে এই কোডিংটুকু লিখুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<title>
আমরাও পারি।
</title>
</head>
<body>
<h1>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h1>
<h2>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h2>
<h3>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h3>
<h4>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h4>
<h5>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h5>
<h6>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h6>
</body>
</title>
***আমাদের কোডিং লেখা শেষ।এবার এটাকে aya.html নামে সেভ করে double click করে ওপেন করুন।
Sultan Mahmud Sujon:
আসুন শিখি HTML [পর্ব-৭]
আজকে আমি font সংক্রান্ত বিভিন্ন ট্যাগ নিয়ে আলোচোনা করব।মানে font এর আকার,আকৃতি,ধরন এসবের নানা ট্যাগ নিয়ে আলোচোনা করব।
bold ট্যাগঃ
এই ট্যাগ ব্যাবহার করলে আপনার লাইন এর অক্ষরগুলো গাঢ় দেখাবে।এই ট্যাগ এর নিয়ম হচ্ছে ……………………………….
italic ট্যাগঃ
এই ট্যাগ ব্যাবহার করলে লাইন এর অক্ষরগুলো একটু বাকা দেখাবে।এই ট্যাগ এর নিয়ম হচ্ছে ................................
blink ট্যাগঃ
এই ট্যাগ ব্যাবহার করলে আপনার লাইন এর অক্ষরগুলো জলা-নেভা করবে।এই ট্যাগ ব্যাবহার করার নিয়ম হচ্ছে <blink>………………..</blink>
emphasis ট্যাগঃ
ধরুন আপনি একটা লাইন এর অক্ষরগুলো ইতালিক বাকা অক্ষরে লিখবেন,কিন্তু গাঢ় তখন আপনাকে emphasis ট্যাগ ব্যাবহার করতে হবে।এই ট্যাগ ব্যাবহার করার নিয়ম হচ্ছে …………………
strong ট্যাগঃ
অনেকে একটা লাইন এর অক্ষরগুলো গাঢ় করার জন্য bolt ট্যাগ এর বদলে strong ট্যাগ ব্যাবহার করে।এই ট্যাগ এর নিয়ম হচ্ছে <strong>……………………</strong>
underline ট্যাগঃ
এই ট্যাগ ব্যাবহার করে কোন লেখার নিচে দাগ দেওয়া হয়।এই ট্যাগ এর নিয়ম হচ্ছে ………………..
strike ট্যাগঃ
এই ট্যাগ এর ব্যাবহার underline ট্যাগ এর মত।লেখার নিচে দাগ দেওয়ার জন্য এই ট্যাগ ব্যাবহার করা হয়।এই ট্যাগ এর নিয়ম হচ্ছে <strike>………………</strike>
big ট্যাগঃ
এই ট্যাগ ব্যাবহার করলে লাইনটির অক্ষরগুলো বড় দেখাবে। এই ট্যাগ এর নিয়ম হচ্ছে <big>……………………..</big>
small ট্যাগঃ
এই ট্যাগ ব্যাবহার করলে একটা লাইন এর অক্ষরগুলো ছোট দেখায়। এই ট্যাগ এর নিয়ম হচ্ছে <small>……………..</small>
type writer ট্যাগঃ
এই ট্যাগ ব্যাবহার করলে ওই লাইন এর অক্ষরগুলো আগেরকার আমলের টাইপ রাইটার মেশিন এর অক্ষরের মত দেখাবে। এই ট্যাগ এর নিয়ম হচ্ছে <tt>………………..</tt>
subscript ট্যাগঃ
একটি লাইন এর কোন অক্ষরকে বা কোন অংশকে একঘর নিচে নামানোর দরকার হয় তখন এই ট্যাগ ব্যাবহার করা হয়। এই ট্যাগ এর নিয়ম হচ্ছে <sub>………………</sub>
superscript ট্যাগঃ
একটি লাইন এর কোন অক্ষরকে বা কোন অংশকে একঘর উপরে উঠানোর দরকার হয় তখন এই ট্যাগ ব্যাবহার করা হয়। এই ট্যাগ এর নিয়ম হচ্ছে <sup>………….</sup>
এতোক্ষন আমরা দেখলাম কিভাবে এই ট্যাগগুলো ব্যাবহার করা যায়।এবার আমরা দেখব এর বাস্তব প্রয়োগ।উপরের ট্যাগ গুলো ব্যাবহার করে আসুন একটা কোডিং তৈরি করি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
<title>
We love
</title>
</head>
<body>
we love
we love
<blink> we love </blink>
we love DIU
<strong> we love DIU</strong>
<strike> we love </strike>
we love
<big> we love </big>
<small> we love </small>
<tt> we love </tt>
This is water H<sub>2</sub>O
This is mathematical term A<sup>2</sup>+B<sup>2</sup>
</body>
</html>
***তারপর তা rea.html নামে সেভ করে double click করে ওপেন করুন।দেখুন কেমন দেখা যাচ্ছে।
যদি কোন কিছু না বুঝে থাকেন তবে আমাকে জানান।সবাই ভাল থাকবেন।
Sultan Mahmud Sujon:
আসুন শিখি HTML [পর্ব-৮]
font size ট্যাগঃ
এই ট্যাগ দিয়ে কোন লাইন এর অক্ষরগুলোর সাইজ ছোট-বড় করা যায়।সাধারনত প্রতিটি font এর ডিফল্ট size ১২ দেওয়া থাকে।আমরা এই ট্যাগ ব্যাবহার করে আমরা এর সাইজ +৭ পর্যন্ত বাড়ানো সম্ভব,আর এর সাইজ -৭ পর্যন্ত কমানো সম্ভব।+৭ এর বেশি আর -৭ এর কম নিলে এই ট্যাগ কাজ করবে না।
এবার আসুন এই ট্যাগ এর গঠন দেখি।<font size=-7 হতে +7>...............................</font>
***এবার আসুন আমরা একটা উদাহরন দেখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<title>
We loveBangladesh
</title>
</head>
<body>
<Font size=+6>we live in a small country.</font>
<Font size=+4>we have a lot of problem.</font>
<Font size=+2>most of our people are poor.</font>
<Font size=+1>we have no food,no shelter,no education.</font>
<Font size= -1>this is enough problem for a country.</font>
<Font size= -2>but,always we are in a smile face.</font>
<Font size= -3>because,we have a dream.</font>
<Font size= -4>some of our student has a dream.they worked,work,will work for his motherland</font>
<Font size= -5>so what can you do???? This is your choice.</font>
</body>
</html>
***এই কোডিং অবশ্যই notepad এ লিখতে হবে।তারপর,aka.html নামে সেভ করে double click করে ওপেন করুন।
font face ট্যাগঃ
এই ট্যাগ ব্যাবহার করে বিভিন্ন style এর font ব্যাবহার করা যায়।আমরা মাইক্রোসফট ওয়ার্ড এ যেসব বিভিন্ন font ব্যাবহার করেছি,html এ তার সব ব্যাবহার করা যাবে।শুধু font এর নাম জানতে হবে।যেমন arial font,vrinda font.
এবার আসুন আমরা এই ট্যাগ এর নিয়মটা শিখি।<font face=যেকোন ফন্ট এর নাম>............</font>
***এবার আসুন আমরা একটা উদাহরন দেখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<title>
We loveBangladesh
</title>
</head>
<body>
<Font face=arial>we live in a small country.</font>
<Font face=bodony mt black>we have a lot of problem.</font>
<Font face=forte>most of our people are poor.</font>
<Font face=impact>we have no food,no shelter,no education.</font>
<Font face=times new roman>this is enough problem for a country.</font>
<Font face=segoe script>but,always we are in a smile face.</font>
<Font face=castellar>because,we have a dream.</font>
<Font face=batang>some of our student has a dream.they worked,work,will work for his motherland</font>
<Font face=Blackadder ITC >so what can you do???? This is your choice.</font>
</body>
</html>
***এবার এটি ata.html নামে সেভ করে double click করে ওপেন করুন।
***আপনারা বিভিন্ন font এর নাম কোথায় পাবেন এই নিয়ে চিন্তা করছেন????আপ্নারা মাইক্রোসফট অফিস ওয়ার্ড ওপেন করে image এর দেখানো যায়গায় ক্লিক করুন তারপর আপনার পছন্দের font এর নামটি জেনে নিন।
Sultan Mahmud Sujon:
আসুন শিখি HTML [পর্ব-৯]
আজকের বিষয়টা একটু কঠিন।একটু মনোযোগ দিয়ে দেখুন।সহজ লাগবে।আর যদি কোন অংশ না বুঝতে পারেন,তবে আমাকে জানান।যদি আমি জানি তাহলে আপনাদের জানিয়ে দিব
Font color ট্যাগঃ
আমাদের আজকের বিষয় font color ট্যাগ নিয়ে।আমরা কোন লাইন এর বিভিন্ন অক্ষর বা ফন্ট কিভাবে বিভিন্ন রং এ রঞ্জিত করব তা দেখব।
***প্রথমে আমরা font color ট্যাগ এর ফরম্যাট দেখে নেই
<font color = 16 টি মৌলিক কালার যেকোন একটির নাম বা,হেক্সাডেসিমাল কালার কোড যেমনঃ (#6633ff)>..................................................................</font>
***আসুন এবার ব্যাপারগুলো নিয়ে আলোচোনা করি।আপনারা font color এ ১৬টি মৌলিক রং এর যেকোন একটির নাম দিলে ফন্টটি বা অক্ষরটি সেই রঙে রঞ্জিত হবে।এই ১৬ টি রং এর বাহিরে কোন রং এর নাম দিলে ওয়েব সাইট তা দেখাতে পারবে না।এই ১৬ টি রং হচ্ছে black,gray,silver,white,navy,blue,teal,aqua,green,lime,olive,yellow,maroon,red,purple,fuchsia.
**তাহলে কি আমরা এই ১৬ টা রং এর বাহিরে কোন রং ব্যাবহার করতে পারব না?????অবশ্যই পারবেন।সেক্ষেত্রে আপনাদের নাম ব্যাবহার করা চলবে না।আপনাদের হেক্সাডেসিমাল কোড ব্যাবহার করতে হবে।
***এবার আসুন শিখি কিভাবে হেক্সাডেমিকাল কোড ব্যাবহার করবেন।একে #rrggbb আকারে প্রকাশ করা হয়।এখানে rr দিয়ে red red, gg দিয়ে green green, bb দিয়ে blue blue বুঝাচ্ছে। এখন ধরুন একটা কোড দেওয়া আছে #336633 . এই কোড দিয়ে এমন একটা রং বুঝাচ্ছে যেটাতে rr=33,gg=66,bb=33 ।মানে ওই রংটাতে ৩৩% red,৩৩% green, ৩৩% blue রং মিশ্রিত অবস্থায় আছে।মনে হয় কিছুটা হলেও বুঝাতে পেরেছি।
***আরেক ধরনের কোড আছে।যেমনঃ #6633ff .এখানে rr=66,gg=33,bb=ff. প্রথম দুইটা দিয়ে বুঝাচ্ছে অই রং এ ৬৬% red, ৩৩% green color আছে।কিন্তু ff দিয়ে কি বুঝায়??? ff দিয়ে সবোর্চ্চ পরিমান বুঝায়।
***উপরের অংশটুকু যারা জটিল পদ্ধতিতে যেতে চান না তাদের জন্য।আর যারা আসল ঘটনাটা জানতে চান তারা এখানে খেয়াল করুন।
{{{এবার আসুন দেখি হেক্সাডেসিমাল ব্যাবহার করা হয়। একে #RRGGBB আকারে প্রকাশ করা হয়।rr দিয়ে red,gg দিয়ে green,bb দিয়ে blue বুঝায়।
এই red,green,bue এর সমষ্টি হচ্ছে rgb.এদের প্রত্যেকের মান 0 হতে ২৫৫ এর মধ্যে হবে।মানে এরা প্রত্যেকের মান এককভাবে ০ হতে ২৫৫ এর মধ্যে হবে।
***যদি কোন রং এর মান ২৫৫ আসে তাহলে তা সবোর্চ্চ পরিমান এ আছে আছে বুঝতে হবে।মানে ১২৫ এর বেশি যত বাড়তে থাকবে রংটি তত গাঢ় হবে।১২৫ এর কম হতে থাকলে রং তত হালকা হবে।
***আসুন একটা চার্ট দেখি।চার্ট তা সুত্রের মত কাজ করবে।
decimal : 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
hexadecimal : 0 1 2 3 4 5 6 7 8 9 A B C D E F
আসুন এবার আমরা একটা সুত্র শিখি হেক্সাডেসিমাল কোড এর মান কত তা বের করার নিয়মঃ
সুত্র= (যদি কোডটা A,B,C আকারে থাকে তাহলে চার্ট এ তার মান যত তা/ যদি সংখ্যা থাকে যেমন 52 তাহলে তার প্রথম সংখ্যা যেমন এখানে 5 *{গুন} 16) + A,B,C এর মান/যদি সংখ্যা থাকে তাহলে শেষ সংখ্যাটুকু যেমন 2
***আসুন এবার একটা ডেসিমাল কোড দেখি। #CCFF98.আসুন দেখি আমরা এই কোড দিয়ে কি বুঝি। এখানে CC=RR(red),FF=GG(green),98=BB(blue) বুঝাচ্ছে।
এখানে CC= (12*16)+12=204,
FF=(15*16)+15=255,
98=(9*16)+8=152.}}}
***আসুন হেক্সাডেসিমাল কোড এর চার্টটি দেখে নেই।এটি আপনারা যত্ন করে রেখে দিবেন,কারন এটা আপনাদের সবসময় কাঝে লাগবে।আর হেক্সাডেসিমাল কোড এর শুরুতে কিন্তু অবশ্যই হ্যাশ (#) দিতে হবে।
Sultan Mahmud Sujon:
আসুন শিখি HTML [পর্ব-১০]
heading এর align attribute:
দেখেছি <h1 হতে h6>………………….</h1 হতে h6> এটা হল heading এর ট্যাগ
ধরুন আপনি heading দিতে পারেন।কিন্তু কোন প্রয়োজনে বা সুন্দরের জন্য আপনাকে heading ডানে বামে নিতে হবে।তখন কি করবেন?? তখন আপনাদের heading ট্যাগ এর সাথে align attribute ব্যাবহার করতে হবে।আপনাকে ডানে,মাঝখানে,বামে heading নেওয়ার জন্য heading ট্যাগ এর সাথে right,center,left ব্যাবহার করতে হবে।
***আসুন এবার format টা দেখি।<h1 হতে h6 align=left বা center বা right>……………………</h1 হতে h6>
আসুন চিন্তা করি আমাদের এমন একটা কোডিং করতে হবে যার heading হবে সবচেয়ে বড়, এবং heading টি হবে ডানে।তখন আমাদের যে কোডিং টি ব্যাবহার করতে হবে তার format হবে <h1 align=right>………………………</h1>
***এবার আসুন একটি উদাহরন দেখি।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<title>
টেকটিউনস বাংলার এক নাম্বার টেকনোলোজি সাইট।
</title>
</head>
<body>
<h1 align=left>আমরা সবাই ভালবাসি</h1>
<h1 align=center> আমরা সবাই ভালবাসি </h1>
<h1 align=right> আমরা সবাই ভালবাসি</h1>
<h1 align=left> আমরা সবাই ভালবাসি </h1>
<h1 align=center> আমরা সবাই ভালবাসি </h1>
<h1 align=right> আমরা সবাই ভালবাসি </h2>
</body>
</html>
*এবার এটি নোটপ্যাড এ লিখে hfe.html নামে সেভ করুন।তারপর double click করে ওপেন করুন।
Navigation
[0] Message Index
[#] Next page
[*] Previous page
Go to full version