html - sysnovahyper text markup language) হর্ে রনরমেি সকল ওর্েব...

46
1 HTML ওয়েব তৈরি রিখন রনয়েই

Upload: others

Post on 07-Apr-2020

19 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

1

HTML ওয়েব তৈরি রিখন রনয়েই

2

সরিপতর

HTMLXHTML এর পরররিরি 3 HTMLXHTML এর সমপরকে 3 কলারকৌশল 3 টল 4 ওরেব বনাম রিনট 4 শর হরে 4 ববরসক বকাড বসট করা 5 বটকসট ব াগ এবং ফরমেট করা 7 বনরটং টযাগ 10 অযাডভানসড বটকসট ফরমেরটং 10 রং এবং ওরেব 13 বহরডং 13 রলট 15 রলংক 16 বলআউট এবং বটরবল 18 অযাডভানসড বটরবল ফরমেট 22 ছরব 28 সব একরিি করা 31 একরট ছরব ব াগ করা 33 সাধারণ একরট বটরবল ব াগ 34 িধান বরডর িথয 38 রফরনরশং টাি 39 রি আপরন আররা িারলরে ব রি িান 39 পরররশষট ১ ছরবর ফাইল ফরমেট 41 পরররশষট ২ 44 পরররশষট ৩ 45

3

HTMLXHTML এর পরররিরি

এই ডকরমনটরট Interactive Media Center এর অনলাইন রটউরটাররোল Introduction to HTMLXHTML এর রবিরণর াগয সংসকরন এরট পাওো ারব এখারন httplibraryalbanyeduimchtml_tut

HTMLXHTML এর সমপরকে

HTML (Hyper Text Markup Language) এবং এর সামপররিক রপ XHTML (Extensible Hyper Text Markup Language) হরে রনরমেি সকল ওরেব পািার মল রভরি রিও নিন ধররণর ি রি এবং বকারডংরের অপশন আরছ ব মন PHP ASP XML ও অনয রকছ িথারপ টরযারডশনাল মাকেআপ লযাঙগরেজ হরে বস ােগা ব খান বথরক ldquoসকল ওরেবrdquo শর হে

বিেমান সমরে HTML এর সবেরশষ সংসকরণ হরে ldquoHTML5rdquo এবং রিও এরিারিন এরট অরফরসোরল আরসরন রকছরিন হরলা এরট অরফরসোরল বযবহি হরে বরাউজাররর িরিরট হালনাগারি আররা ববরশ করর HTML5 কষমিা ি হরে এই রটউরটাররোরল আমরা HTML XHTML এবং HTML5 এর ববশ রকছ রবষে রনরে আরলািনা কররবা ববরশরভাগ বকষরিই এই রিনটরটর মরধয বিমন বকারনা পাথেকয বনই রিও খন িরকার পড়রব িখন পররবিেনগরলা বনাট করা হরব

রকছ ওরেব সমপািনার সফটওোররর িকাশকরা বরলন ব ওরেব পািা তিররর জনয আপরন রি িারির বিাগরাাম বযবহার কররন িরব HTML জানা জররী নে রিও সকল বকষরি এরট সরিক নে িাে সকল বকষরিই HTML সমপরকে রকছটা জঞান অনতিঃ িরকারী

এই রটউরটাররোরল ববরসক HTML বকাড বলখার বযপারর আমরা আপনারক গাইড কররবা এটা বজরন রাখা জররী ব রনরজ রলরখ ও বযবহার করার বিরে অনয বকারনা উপারে বকাড বশখা ও বঝা াে না এই রটউরটাররেোল আপনারক বকাড সমপরকে জঞান বরি করার পরথ একধাপ এরগরে রনরে ারব

কলারকৌশল

অরনক বলাক এমন ভারব ওরেব পািার বকাড রলখরি বিষটা করর ব রনা িারা টামে বপপার রলখরছ িারা এরকবারর শর বথরক শর করর এবং তররখকভারব মাঝ হরে বশরষ িরল াে HTMLXHTML বকাড দই ধররণর টযাগ রিরে গরিি হে িারা হরলা করনটইনার টযাগ এবং রসরঙগল পাটে টযাগ ারক ldquoনন-করনটইনারrdquo টযাগও বরল

করনটইনার টযারগর শর ও বশষ অংশ থারক আর মারঝ িারক িার উপািান ব গরলা টযাগরট রনেনতরন করর একরট উিারণ হরলা এমন একরট টযাগ া বটকসটরক ববালড করর ltstronggtltstronggt এখারন ltstronggt হরলা শরর অংশ এবং ltstronggt হরলা বশরষর অংশ

4

আপরন রি এই বছাট বকাড অংশরট রলখরি িান িরব িা বিখরি এমন হরব ltstronggtThis is

boldltstronggt এবং বিখরবন ব টযারগর দই অংরশর বভিররর বলখারক ববালড রহরসরব বিখারে

রসরঙগল পাটে টযারগর একরট উিাহরণ হরে লাইন ববরক টযাগ ltbrgt া শধ একরট বটকসরটর লাইনরক রনরিেষট জােগাে থারমরে বিে এটা বযবহার করা হে ব বাকযরট থামারনা লাগরব িার বশরষর শরের পর

ওরেব পািাে ব রহি অরনক বকাড থাকরব িাই বকান টযাগরট বখালা বা বনধ আরছ িা মরন রাখা করিন হরে ারব সবরিরে ভারলা উপাে হরে একই সারথ টযারগর শর ও বশরষর অংশ রলরখ বফলা িারপর িার মধযকার রবষেবসত এরট টযাগ বনধ জরনি িরেটনাবশি রটা সমসযার িরিকার করর এবং এই রটউরটাররোরল এ পিরিই বযবহার করা হরেরছ

রসরঙগল পাটে টযাগ িরকাররর সমেই ি করা ারব

টল

সাধারণ ওোডে িরসসররই HTML এবং XHTML বকাড বলখা াে রকনত এটা মরন রাখা জররী ব বকাড বলখার জনয কখরনাই Word WordPerfect OpenOffice বা এধররণর বকারনা ওোডে িরসসর বযবহার করা ারব না ldquoহাই এনডrdquo ওোডে িরসসরগরলা এরিাই সমাটে ব িারা িারির রনজসব ফরমেরটর বকাড িরবশ করাে

বযবহার করার জনয সবরিরে ভারলা সফটওোর হরে এরকবারর সাধরণ HTML বলখার জনয সবরিরে উপ ি হরে NotePad রকছ বিাগরাাম শধমাি ওরেব পািা তিররর জনযই রবরশ ভারব রডজাইন করা হরেরছ ব মন

Dreamweaver এ HTML বলখার জনয রবরশষ ফাংশন আরছ া আপনারক বসাজা বকাড রলখরি বিে HTMLKit এর মরিা রকছ বিাগরাাম আরছ া code insertion বিাগরাাম রহরসরব কাজ করর ব খারন বযবহারকারীরক বকাড রলখরি হেনা িার বিরল বিাগরাামরক HTMLXHTML বলক িরবশ করারি রনরিেশ করর রিও এই বিাগরাামগরল বকাড বলখা সহজ করর রিরেরছ িথারপ বকাড জানাও জররী

এই রটউরটাররোরল আমরা আপনারক NotePad এই ধররণর বিাগরাাম বযবহার কররি পরামশে বিরবা

ওরেব বনাম রিনট

আমরা জারন ব একই সারথ কাজ করা এবং অনলাইরন উিাহরণ অনসরণ করা করিন িাই আমারির এই রটউরটাররোরলর একরট রিরনটড সংসকরণও আরছ া এখান বথরক ডাউনরলাড কররি পাররন িারপর আপরন রিরনটড সংসকরণ পড়রি পাররন এবং করমপউটারর ধাপগরল সমপািন কররি পাররন

শর হরে

আপনার ওরেব িরজকট শর করার জনয আপনার সাইটরট সরিকভারব বসটাপ কররি হরব সাইরটর গিন এরকবারর সহজ আপনার িরজরকটর একরট ldquoরট বফালডারrdquo থাকরব ব টারি সাইটরট সমপরকেি সকল ফাইল থাকরব রট বফালডাররর বভিরর

5

( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা

রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব

indexhtm

indexhtml

defaulthtm

defaulthtml

থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর

রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে

NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন

ববরসক বকাড বসট করা

একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা

ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন

lthtmlgt

lthtmlgt

6

এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে

িারন এখন বরড টযাগ ব াগ করন

ফাইল সংরকষণ করন

এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ

এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox

Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন

lthtmlgt

ltheadgt

ltheadgt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

7

আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে

বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর

পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন

বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)

বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা

পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

8

বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtLorem ipsum dolor

sit

amet consectetur

adipisicing

elit sed do eiusmod

tempor

incididunt ut labore et

dolore

magna aliqua Ut enim

ad

minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea

commodo

consequat Duis aute

irure dolor

in reprehenderit in

voluptate

velit esse cillum

dolore eu

fugiat nulla pariatur

Excepteur

sint occaecat cupidatat

non

proident sunt in culpa

qui

officia deserunt mollit

anim id

est laborumltpgt

ltbodygt

lthtmlgt

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 2: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

2

সরিপতর

HTMLXHTML এর পরররিরি 3 HTMLXHTML এর সমপরকে 3 কলারকৌশল 3 টল 4 ওরেব বনাম রিনট 4 শর হরে 4 ববরসক বকাড বসট করা 5 বটকসট ব াগ এবং ফরমেট করা 7 বনরটং টযাগ 10 অযাডভানসড বটকসট ফরমেরটং 10 রং এবং ওরেব 13 বহরডং 13 রলট 15 রলংক 16 বলআউট এবং বটরবল 18 অযাডভানসড বটরবল ফরমেট 22 ছরব 28 সব একরিি করা 31 একরট ছরব ব াগ করা 33 সাধারণ একরট বটরবল ব াগ 34 িধান বরডর িথয 38 রফরনরশং টাি 39 রি আপরন আররা িারলরে ব রি িান 39 পরররশষট ১ ছরবর ফাইল ফরমেট 41 পরররশষট ২ 44 পরররশষট ৩ 45

3

HTMLXHTML এর পরররিরি

এই ডকরমনটরট Interactive Media Center এর অনলাইন রটউরটাররোল Introduction to HTMLXHTML এর রবিরণর াগয সংসকরন এরট পাওো ারব এখারন httplibraryalbanyeduimchtml_tut

HTMLXHTML এর সমপরকে

HTML (Hyper Text Markup Language) এবং এর সামপররিক রপ XHTML (Extensible Hyper Text Markup Language) হরে রনরমেি সকল ওরেব পািার মল রভরি রিও নিন ধররণর ি রি এবং বকারডংরের অপশন আরছ ব মন PHP ASP XML ও অনয রকছ িথারপ টরযারডশনাল মাকেআপ লযাঙগরেজ হরে বস ােগা ব খান বথরক ldquoসকল ওরেবrdquo শর হে

বিেমান সমরে HTML এর সবেরশষ সংসকরণ হরে ldquoHTML5rdquo এবং রিও এরিারিন এরট অরফরসোরল আরসরন রকছরিন হরলা এরট অরফরসোরল বযবহি হরে বরাউজাররর িরিরট হালনাগারি আররা ববরশ করর HTML5 কষমিা ি হরে এই রটউরটাররোরল আমরা HTML XHTML এবং HTML5 এর ববশ রকছ রবষে রনরে আরলািনা কররবা ববরশরভাগ বকষরিই এই রিনটরটর মরধয বিমন বকারনা পাথেকয বনই রিও খন িরকার পড়রব িখন পররবিেনগরলা বনাট করা হরব

রকছ ওরেব সমপািনার সফটওোররর িকাশকরা বরলন ব ওরেব পািা তিররর জনয আপরন রি িারির বিাগরাাম বযবহার কররন িরব HTML জানা জররী নে রিও সকল বকষরি এরট সরিক নে িাে সকল বকষরিই HTML সমপরকে রকছটা জঞান অনতিঃ িরকারী

এই রটউরটাররোরল ববরসক HTML বকাড বলখার বযপারর আমরা আপনারক গাইড কররবা এটা বজরন রাখা জররী ব রনরজ রলরখ ও বযবহার করার বিরে অনয বকারনা উপারে বকাড বশখা ও বঝা াে না এই রটউরটাররেোল আপনারক বকাড সমপরকে জঞান বরি করার পরথ একধাপ এরগরে রনরে ারব

কলারকৌশল

অরনক বলাক এমন ভারব ওরেব পািার বকাড রলখরি বিষটা করর ব রনা িারা টামে বপপার রলখরছ িারা এরকবারর শর বথরক শর করর এবং তররখকভারব মাঝ হরে বশরষ িরল াে HTMLXHTML বকাড দই ধররণর টযাগ রিরে গরিি হে িারা হরলা করনটইনার টযাগ এবং রসরঙগল পাটে টযাগ ারক ldquoনন-করনটইনারrdquo টযাগও বরল

করনটইনার টযারগর শর ও বশষ অংশ থারক আর মারঝ িারক িার উপািান ব গরলা টযাগরট রনেনতরন করর একরট উিারণ হরলা এমন একরট টযাগ া বটকসটরক ববালড করর ltstronggtltstronggt এখারন ltstronggt হরলা শরর অংশ এবং ltstronggt হরলা বশরষর অংশ

4

আপরন রি এই বছাট বকাড অংশরট রলখরি িান িরব িা বিখরি এমন হরব ltstronggtThis is

boldltstronggt এবং বিখরবন ব টযারগর দই অংরশর বভিররর বলখারক ববালড রহরসরব বিখারে

রসরঙগল পাটে টযারগর একরট উিাহরণ হরে লাইন ববরক টযাগ ltbrgt া শধ একরট বটকসরটর লাইনরক রনরিেষট জােগাে থারমরে বিে এটা বযবহার করা হে ব বাকযরট থামারনা লাগরব িার বশরষর শরের পর

ওরেব পািাে ব রহি অরনক বকাড থাকরব িাই বকান টযাগরট বখালা বা বনধ আরছ িা মরন রাখা করিন হরে ারব সবরিরে ভারলা উপাে হরে একই সারথ টযারগর শর ও বশরষর অংশ রলরখ বফলা িারপর িার মধযকার রবষেবসত এরট টযাগ বনধ জরনি িরেটনাবশি রটা সমসযার িরিকার করর এবং এই রটউরটাররোরল এ পিরিই বযবহার করা হরেরছ

রসরঙগল পাটে টযাগ িরকাররর সমেই ি করা ারব

টল

সাধারণ ওোডে িরসসররই HTML এবং XHTML বকাড বলখা াে রকনত এটা মরন রাখা জররী ব বকাড বলখার জনয কখরনাই Word WordPerfect OpenOffice বা এধররণর বকারনা ওোডে িরসসর বযবহার করা ারব না ldquoহাই এনডrdquo ওোডে িরসসরগরলা এরিাই সমাটে ব িারা িারির রনজসব ফরমেরটর বকাড িরবশ করাে

বযবহার করার জনয সবরিরে ভারলা সফটওোর হরে এরকবারর সাধরণ HTML বলখার জনয সবরিরে উপ ি হরে NotePad রকছ বিাগরাাম শধমাি ওরেব পািা তিররর জনযই রবরশ ভারব রডজাইন করা হরেরছ ব মন

Dreamweaver এ HTML বলখার জনয রবরশষ ফাংশন আরছ া আপনারক বসাজা বকাড রলখরি বিে HTMLKit এর মরিা রকছ বিাগরাাম আরছ া code insertion বিাগরাাম রহরসরব কাজ করর ব খারন বযবহারকারীরক বকাড রলখরি হেনা িার বিরল বিাগরাামরক HTMLXHTML বলক িরবশ করারি রনরিেশ করর রিও এই বিাগরাামগরল বকাড বলখা সহজ করর রিরেরছ িথারপ বকাড জানাও জররী

এই রটউরটাররোরল আমরা আপনারক NotePad এই ধররণর বিাগরাাম বযবহার কররি পরামশে বিরবা

ওরেব বনাম রিনট

আমরা জারন ব একই সারথ কাজ করা এবং অনলাইরন উিাহরণ অনসরণ করা করিন িাই আমারির এই রটউরটাররোরলর একরট রিরনটড সংসকরণও আরছ া এখান বথরক ডাউনরলাড কররি পাররন িারপর আপরন রিরনটড সংসকরণ পড়রি পাররন এবং করমপউটারর ধাপগরল সমপািন কররি পাররন

শর হরে

আপনার ওরেব িরজকট শর করার জনয আপনার সাইটরট সরিকভারব বসটাপ কররি হরব সাইরটর গিন এরকবারর সহজ আপনার িরজরকটর একরট ldquoরট বফালডারrdquo থাকরব ব টারি সাইটরট সমপরকেি সকল ফাইল থাকরব রট বফালডাররর বভিরর

5

( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা

রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব

indexhtm

indexhtml

defaulthtm

defaulthtml

থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর

রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে

NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন

ববরসক বকাড বসট করা

একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা

ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন

lthtmlgt

lthtmlgt

6

এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে

িারন এখন বরড টযাগ ব াগ করন

ফাইল সংরকষণ করন

এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ

এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox

Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন

lthtmlgt

ltheadgt

ltheadgt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

7

আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে

বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর

পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন

বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)

বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা

পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

8

বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtLorem ipsum dolor

sit

amet consectetur

adipisicing

elit sed do eiusmod

tempor

incididunt ut labore et

dolore

magna aliqua Ut enim

ad

minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea

commodo

consequat Duis aute

irure dolor

in reprehenderit in

voluptate

velit esse cillum

dolore eu

fugiat nulla pariatur

Excepteur

sint occaecat cupidatat

non

proident sunt in culpa

qui

officia deserunt mollit

anim id

est laborumltpgt

ltbodygt

lthtmlgt

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 3: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

3

HTMLXHTML এর পরররিরি

এই ডকরমনটরট Interactive Media Center এর অনলাইন রটউরটাররোল Introduction to HTMLXHTML এর রবিরণর াগয সংসকরন এরট পাওো ারব এখারন httplibraryalbanyeduimchtml_tut

HTMLXHTML এর সমপরকে

HTML (Hyper Text Markup Language) এবং এর সামপররিক রপ XHTML (Extensible Hyper Text Markup Language) হরে রনরমেি সকল ওরেব পািার মল রভরি রিও নিন ধররণর ি রি এবং বকারডংরের অপশন আরছ ব মন PHP ASP XML ও অনয রকছ িথারপ টরযারডশনাল মাকেআপ লযাঙগরেজ হরে বস ােগা ব খান বথরক ldquoসকল ওরেবrdquo শর হে

বিেমান সমরে HTML এর সবেরশষ সংসকরণ হরে ldquoHTML5rdquo এবং রিও এরিারিন এরট অরফরসোরল আরসরন রকছরিন হরলা এরট অরফরসোরল বযবহি হরে বরাউজাররর িরিরট হালনাগারি আররা ববরশ করর HTML5 কষমিা ি হরে এই রটউরটাররোরল আমরা HTML XHTML এবং HTML5 এর ববশ রকছ রবষে রনরে আরলািনা কররবা ববরশরভাগ বকষরিই এই রিনটরটর মরধয বিমন বকারনা পাথেকয বনই রিও খন িরকার পড়রব িখন পররবিেনগরলা বনাট করা হরব

রকছ ওরেব সমপািনার সফটওোররর িকাশকরা বরলন ব ওরেব পািা তিররর জনয আপরন রি িারির বিাগরাাম বযবহার কররন িরব HTML জানা জররী নে রিও সকল বকষরি এরট সরিক নে িাে সকল বকষরিই HTML সমপরকে রকছটা জঞান অনতিঃ িরকারী

এই রটউরটাররোরল ববরসক HTML বকাড বলখার বযপারর আমরা আপনারক গাইড কররবা এটা বজরন রাখা জররী ব রনরজ রলরখ ও বযবহার করার বিরে অনয বকারনা উপারে বকাড বশখা ও বঝা াে না এই রটউরটাররেোল আপনারক বকাড সমপরকে জঞান বরি করার পরথ একধাপ এরগরে রনরে ারব

কলারকৌশল

অরনক বলাক এমন ভারব ওরেব পািার বকাড রলখরি বিষটা করর ব রনা িারা টামে বপপার রলখরছ িারা এরকবারর শর বথরক শর করর এবং তররখকভারব মাঝ হরে বশরষ িরল াে HTMLXHTML বকাড দই ধররণর টযাগ রিরে গরিি হে িারা হরলা করনটইনার টযাগ এবং রসরঙগল পাটে টযাগ ারক ldquoনন-করনটইনারrdquo টযাগও বরল

করনটইনার টযারগর শর ও বশষ অংশ থারক আর মারঝ িারক িার উপািান ব গরলা টযাগরট রনেনতরন করর একরট উিারণ হরলা এমন একরট টযাগ া বটকসটরক ববালড করর ltstronggtltstronggt এখারন ltstronggt হরলা শরর অংশ এবং ltstronggt হরলা বশরষর অংশ

4

আপরন রি এই বছাট বকাড অংশরট রলখরি িান িরব িা বিখরি এমন হরব ltstronggtThis is

boldltstronggt এবং বিখরবন ব টযারগর দই অংরশর বভিররর বলখারক ববালড রহরসরব বিখারে

রসরঙগল পাটে টযারগর একরট উিাহরণ হরে লাইন ববরক টযাগ ltbrgt া শধ একরট বটকসরটর লাইনরক রনরিেষট জােগাে থারমরে বিে এটা বযবহার করা হে ব বাকযরট থামারনা লাগরব িার বশরষর শরের পর

ওরেব পািাে ব রহি অরনক বকাড থাকরব িাই বকান টযাগরট বখালা বা বনধ আরছ িা মরন রাখা করিন হরে ারব সবরিরে ভারলা উপাে হরে একই সারথ টযারগর শর ও বশরষর অংশ রলরখ বফলা িারপর িার মধযকার রবষেবসত এরট টযাগ বনধ জরনি িরেটনাবশি রটা সমসযার িরিকার করর এবং এই রটউরটাররোরল এ পিরিই বযবহার করা হরেরছ

রসরঙগল পাটে টযাগ িরকাররর সমেই ি করা ারব

টল

সাধারণ ওোডে িরসসররই HTML এবং XHTML বকাড বলখা াে রকনত এটা মরন রাখা জররী ব বকাড বলখার জনয কখরনাই Word WordPerfect OpenOffice বা এধররণর বকারনা ওোডে িরসসর বযবহার করা ারব না ldquoহাই এনডrdquo ওোডে িরসসরগরলা এরিাই সমাটে ব িারা িারির রনজসব ফরমেরটর বকাড িরবশ করাে

বযবহার করার জনয সবরিরে ভারলা সফটওোর হরে এরকবারর সাধরণ HTML বলখার জনয সবরিরে উপ ি হরে NotePad রকছ বিাগরাাম শধমাি ওরেব পািা তিররর জনযই রবরশ ভারব রডজাইন করা হরেরছ ব মন

Dreamweaver এ HTML বলখার জনয রবরশষ ফাংশন আরছ া আপনারক বসাজা বকাড রলখরি বিে HTMLKit এর মরিা রকছ বিাগরাাম আরছ া code insertion বিাগরাাম রহরসরব কাজ করর ব খারন বযবহারকারীরক বকাড রলখরি হেনা িার বিরল বিাগরাামরক HTMLXHTML বলক িরবশ করারি রনরিেশ করর রিও এই বিাগরাামগরল বকাড বলখা সহজ করর রিরেরছ িথারপ বকাড জানাও জররী

এই রটউরটাররোরল আমরা আপনারক NotePad এই ধররণর বিাগরাাম বযবহার কররি পরামশে বিরবা

ওরেব বনাম রিনট

আমরা জারন ব একই সারথ কাজ করা এবং অনলাইরন উিাহরণ অনসরণ করা করিন িাই আমারির এই রটউরটাররোরলর একরট রিরনটড সংসকরণও আরছ া এখান বথরক ডাউনরলাড কররি পাররন িারপর আপরন রিরনটড সংসকরণ পড়রি পাররন এবং করমপউটারর ধাপগরল সমপািন কররি পাররন

শর হরে

আপনার ওরেব িরজকট শর করার জনয আপনার সাইটরট সরিকভারব বসটাপ কররি হরব সাইরটর গিন এরকবারর সহজ আপনার িরজরকটর একরট ldquoরট বফালডারrdquo থাকরব ব টারি সাইটরট সমপরকেি সকল ফাইল থাকরব রট বফালডাররর বভিরর

5

( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা

রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব

indexhtm

indexhtml

defaulthtm

defaulthtml

থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর

রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে

NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন

ববরসক বকাড বসট করা

একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা

ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন

lthtmlgt

lthtmlgt

6

এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে

িারন এখন বরড টযাগ ব াগ করন

ফাইল সংরকষণ করন

এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ

এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox

Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন

lthtmlgt

ltheadgt

ltheadgt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

7

আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে

বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর

পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন

বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)

বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা

পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

8

বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtLorem ipsum dolor

sit

amet consectetur

adipisicing

elit sed do eiusmod

tempor

incididunt ut labore et

dolore

magna aliqua Ut enim

ad

minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea

commodo

consequat Duis aute

irure dolor

in reprehenderit in

voluptate

velit esse cillum

dolore eu

fugiat nulla pariatur

Excepteur

sint occaecat cupidatat

non

proident sunt in culpa

qui

officia deserunt mollit

anim id

est laborumltpgt

ltbodygt

lthtmlgt

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 4: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

4

আপরন রি এই বছাট বকাড অংশরট রলখরি িান িরব িা বিখরি এমন হরব ltstronggtThis is

boldltstronggt এবং বিখরবন ব টযারগর দই অংরশর বভিররর বলখারক ববালড রহরসরব বিখারে

রসরঙগল পাটে টযারগর একরট উিাহরণ হরে লাইন ববরক টযাগ ltbrgt া শধ একরট বটকসরটর লাইনরক রনরিেষট জােগাে থারমরে বিে এটা বযবহার করা হে ব বাকযরট থামারনা লাগরব িার বশরষর শরের পর

ওরেব পািাে ব রহি অরনক বকাড থাকরব িাই বকান টযাগরট বখালা বা বনধ আরছ িা মরন রাখা করিন হরে ারব সবরিরে ভারলা উপাে হরে একই সারথ টযারগর শর ও বশরষর অংশ রলরখ বফলা িারপর িার মধযকার রবষেবসত এরট টযাগ বনধ জরনি িরেটনাবশি রটা সমসযার িরিকার করর এবং এই রটউরটাররোরল এ পিরিই বযবহার করা হরেরছ

রসরঙগল পাটে টযাগ িরকাররর সমেই ি করা ারব

টল

সাধারণ ওোডে িরসসররই HTML এবং XHTML বকাড বলখা াে রকনত এটা মরন রাখা জররী ব বকাড বলখার জনয কখরনাই Word WordPerfect OpenOffice বা এধররণর বকারনা ওোডে িরসসর বযবহার করা ারব না ldquoহাই এনডrdquo ওোডে িরসসরগরলা এরিাই সমাটে ব িারা িারির রনজসব ফরমেরটর বকাড িরবশ করাে

বযবহার করার জনয সবরিরে ভারলা সফটওোর হরে এরকবারর সাধরণ HTML বলখার জনয সবরিরে উপ ি হরে NotePad রকছ বিাগরাাম শধমাি ওরেব পািা তিররর জনযই রবরশ ভারব রডজাইন করা হরেরছ ব মন

Dreamweaver এ HTML বলখার জনয রবরশষ ফাংশন আরছ া আপনারক বসাজা বকাড রলখরি বিে HTMLKit এর মরিা রকছ বিাগরাাম আরছ া code insertion বিাগরাাম রহরসরব কাজ করর ব খারন বযবহারকারীরক বকাড রলখরি হেনা িার বিরল বিাগরাামরক HTMLXHTML বলক িরবশ করারি রনরিেশ করর রিও এই বিাগরাামগরল বকাড বলখা সহজ করর রিরেরছ িথারপ বকাড জানাও জররী

এই রটউরটাররোরল আমরা আপনারক NotePad এই ধররণর বিাগরাাম বযবহার কররি পরামশে বিরবা

ওরেব বনাম রিনট

আমরা জারন ব একই সারথ কাজ করা এবং অনলাইরন উিাহরণ অনসরণ করা করিন িাই আমারির এই রটউরটাররোরলর একরট রিরনটড সংসকরণও আরছ া এখান বথরক ডাউনরলাড কররি পাররন িারপর আপরন রিরনটড সংসকরণ পড়রি পাররন এবং করমপউটারর ধাপগরল সমপািন কররি পাররন

শর হরে

আপনার ওরেব িরজকট শর করার জনয আপনার সাইটরট সরিকভারব বসটাপ কররি হরব সাইরটর গিন এরকবারর সহজ আপনার িরজরকটর একরট ldquoরট বফালডারrdquo থাকরব ব টারি সাইটরট সমপরকেি সকল ফাইল থাকরব রট বফালডাররর বভিরর

5

( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা

রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব

indexhtm

indexhtml

defaulthtm

defaulthtml

থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর

রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে

NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন

ববরসক বকাড বসট করা

একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা

ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন

lthtmlgt

lthtmlgt

6

এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে

িারন এখন বরড টযাগ ব াগ করন

ফাইল সংরকষণ করন

এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ

এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox

Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন

lthtmlgt

ltheadgt

ltheadgt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

7

আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে

বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর

পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন

বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)

বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা

পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

8

বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtLorem ipsum dolor

sit

amet consectetur

adipisicing

elit sed do eiusmod

tempor

incididunt ut labore et

dolore

magna aliqua Ut enim

ad

minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea

commodo

consequat Duis aute

irure dolor

in reprehenderit in

voluptate

velit esse cillum

dolore eu

fugiat nulla pariatur

Excepteur

sint occaecat cupidatat

non

proident sunt in culpa

qui

officia deserunt mollit

anim id

est laborumltpgt

ltbodygt

lthtmlgt

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 5: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

5

( ারক আসরল ব ldquoরটrdquo ই বলরি হরব িা নে আপনার ইোমরিা নাম রিরি পাররন) রনরিেষট ধররণর ফাইরলর জনয আলািা সাব-রফালডার থাকরব ব রহি ওরেব পািার HTML ফাইলগরল রট বফালডারর হারররে ব রি পারর িাই আমরা ছরবগরলা images বফালডারর PDF ফাইল PDF বফালডারর এমন করর সবগরলা সারজরে রাখরবা ডারনর ডাোগরাারম রিনরট HTML পািা এবং দইরট সাব বফালডার সমবরলি একরট টযানডাডে ওরেব সাইরটর গিন বিখারনা হরলা

রট এবং িরোজনীে সাব বফালডার সহ আপরন আপনার করমপউটারর খন আপনার সাইটরট বসটাপ কররবন সারথ সারথই আপরন আপনার িথম ওরেব পািা তিরর শর কররি পাররন মরন করন এটা আপনার বহামরপজ হরব রি অনয বকারনা রনরিেশনা না বিো থারক িরব আপনার বহামরপরজর নাম রনরির একরট হরব

indexhtm

indexhtml

defaulthtm

defaulthtml

থা থ নামরট আপনার সাইরটর বহাট সাভোররর পররিালক ওরেব মাটার কিেক রনধোররি হরব ববরশরভাগ ওরেব সাভোররর নারমর একরট িারলকা থারক খন একজন সাইরটর রভরজটর িার বরাউজারর একরট ওরেব সাইরটর URL টাইপ করর িখন বরাউজাররটরক বহাট সাভোরর পািারনা হে বহাট সাভোররট িখন সবেংরিেভারব রলরটর িম অনসারর বহামরপজ খরজ এবং িা পাওো মািই এরট ও এটার সারথ সংরিষট সকল ফাইল রভরজটররর করমপউটারর বিরণ করর বসখান বথরক বরাউজার িারপর রিরন একি করর

রি সাভোর HTML ফাইরলর সংগরাহ বথরক শরর বহামরপরজর নাম খরজ না পাে িরব সবেংরিেভারব রিিীে নারমর ফাইল খরজ রি িাও না পাে িরব িিীে নাম এবং এভারব বাকী গরলা িাই আপনার উরিি শরর নারমর একরট ফাইল নাম বিো ারি ফাইল খজরি রগরে আপনার বহাট সাভোররর সমে নষট না হে

NotePad ( বা আপরন ব বিাগরাাম বযবহার কররি িান) এ একরট নিন ডকরমনট খলন এবং িারপর রট বফালডারর উপররর ব রকারনা একরট নারম বহামরপজরট সংরকষণ করন

ববরসক বকাড বসট করা

একরট ওরেব পািা দই অংরশ রবভি বহড এবং বরড বহড এর মরধয বপরজর িথয থারক ব মন বমটা টযাগ কখন এরট বানারনা হরেরছ এবং বকারডর রবসতাররি রববরণ বরডরি থারক িাই া আপরন পািাে বিখরি পান বহরডর মধযকার ডাটা বিখা াে না রিও বরডরি ldquoরজরনসগরলrdquo বকমন বিখারব িার রনরিেশনা এরি থাকরি পারর বহড এবং বরড সহ সকল টযাগ lthtmlgtlthtmlgt টযারগর মরধয থারক ারক ldquoপরম করনটইনারrdquo টযাগ বলা হে ব রট বরাউজাররক বরল ব এর মরধয া রকছ আরছ িা একরট ওরেব পািা

ডান রিরক বিখারনার মরিা করর HTML টযারগর শর এবং বশষ অংশ lthtmlgtlthtmlgt রলখন

lthtmlgt

lthtmlgt

6

এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে

িারন এখন বরড টযাগ ব াগ করন

ফাইল সংরকষণ করন

এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ

এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox

Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন

lthtmlgt

ltheadgt

ltheadgt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

7

আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে

বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর

পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন

বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)

বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা

পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

8

বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtLorem ipsum dolor

sit

amet consectetur

adipisicing

elit sed do eiusmod

tempor

incididunt ut labore et

dolore

magna aliqua Ut enim

ad

minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea

commodo

consequat Duis aute

irure dolor

in reprehenderit in

voluptate

velit esse cillum

dolore eu

fugiat nulla pariatur

Excepteur

sint occaecat cupidatat

non

proident sunt in culpa

qui

officia deserunt mollit

anim id

est laborumltpgt

ltbodygt

lthtmlgt

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 6: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

6

এখন HTML পািার জনয বহড টযারগর শর এবং বশষ অংশ রলখন ারি িা ডারনর উিাহররণর মরিা বিখা াে

িারন এখন বরড টযাগ ব াগ করন

ফাইল সংরকষণ করন

এখন আপনার ওরেব পািাে রকছ বলখা ব াগ করন ারি পরীকষা করার সমে আপরন িা বিখরি পাররন এটা অবশযই বরডর মরধয রলখরি হরব বরড টযারগর শর এবং বশষ অংরশর মারঝ

এখন আপনার ওরেব বরাউজার িাল করন এটা হরি পারর Internet Explorer Firefox

Mozilla Safari Opera বা আপনার া পছনদ আপনার নিন ওরেব পািারট খলন এবং ফাইলরট বিখন ববরশরভাগ বরাউজারর আপনারক এভারব ফাইলরট খলরি হরব File এ রিক করর Open ( বা Open File) এ রিক করন িারপর আপনার সংররকষি ফাইলরটরি রগরে OK রিক করন

lthtmlgt

ltheadgt

ltheadgt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

7

আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে

বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর

পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন

বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)

বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা

পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

8

বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtLorem ipsum dolor

sit

amet consectetur

adipisicing

elit sed do eiusmod

tempor

incididunt ut labore et

dolore

magna aliqua Ut enim

ad

minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea

commodo

consequat Duis aute

irure dolor

in reprehenderit in

voluptate

velit esse cillum

dolore eu

fugiat nulla pariatur

Excepteur

sint occaecat cupidatat

non

proident sunt in culpa

qui

officia deserunt mollit

anim id

est laborumltpgt

ltbodygt

lthtmlgt

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 7: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

7

আপনার পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এখন আপনার ওরেব পািার বহড অংরশ রকছ িথয ব াগ করন ারি িা আপনার রভরজটররর জনয উপকারী হে

বহড টযারগর মরধয title টযাগ ব াগ করন এবং আপনার ওরেব পািার একরট রশররানাম রিন রশররানামরট ফাইরলর নাম নে বরং এরট বরাউজাররর উপররর বারর বিখা ারব এবং রভরজটর বকান পািাে আরছ িা রিরিি করর পািারট রকরসর সমপরকে িা রনধোরন কররি সািে ইরিন িা বযবহার করর

পািারট সংরকষন করর আবার বিখন বরাউজাররর এরকবারর উপররর বারর পািার রশররানামরট বিখরি পাররবন

বনাট িরিবার সংররকষি পািারট বিখার জনয বারবার FilegtOpen ইিযারি করা লাগরব না শধ পািারট সংররকষি হরেরছ রকনা িা রনরিি হরে বরাউজাররর Refresh বা Reload বাটরন রিক করন (রকান বরাউজার বযবহার কররছন িার উপর রনভের করর)

বটকসট ব াগ এবং ফরমেট করা পরবিেী ধাপ সমরহ আপরন বিখরবন কী করর আপনার ওরেব পািাে বটকসট ব াগ কররি পাররন এবং িা বিখার জনয ফরমেট কররি পাররন আপনার ওরেব পািার বরডরি একরট পযারাগরাাফ টযাগ ব াগ করর শর করন ডারন বকাডরট বিখারনা হরলা

পযারাগরাাফ হরে অনযিম একরট উপািান া রিরিি করার জনয HTML রডজাইন করা হরেরছ বিখন পযারাগরাাফরট p টযাগ িারা রনরিেরশি হরে ltpgtltpgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

This is my first Web

page

ltbodygt

lthtmlgt

8

বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtLorem ipsum dolor

sit

amet consectetur

adipisicing

elit sed do eiusmod

tempor

incididunt ut labore et

dolore

magna aliqua Ut enim

ad

minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea

commodo

consequat Duis aute

irure dolor

in reprehenderit in

voluptate

velit esse cillum

dolore eu

fugiat nulla pariatur

Excepteur

sint occaecat cupidatat

non

proident sunt in culpa

qui

officia deserunt mollit

anim id

est laborumltpgt

ltbodygt

lthtmlgt

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 8: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

8

বনাট এই বটকসরট রক ডারনর উিাহররনর বলখারক এর িথম দরট শে অন ােী Lorem Ipsum বলা হে এরট একরট িযারসকাল লযারটন রিনা া রনেরমি রিনটার গরাারফক আরটেট এবং ওরেব রডজাইনার কিেক ldquoডারমrdquo বটকসট রহরসরব বযবহি হে রডজাইন ওরেব পািা রকংবা রিনটকি বররসউর এর নমনা বিখারি ব রহি বটকসরট English এ আরছ এবং ববরশরভাগ বলাক লযারটন পড়রি পারর না িাই রডজাইন বকমন বিখারব িার জনয এরট বযবহার করা হে সারথ সারথ রক বলখা আরছ িার রিক বথরক মনর াগ সরাে Lorem Ipsum এর ভারলা একরট উৎস হরে এর ওরেব সাইট httpwwwlipsumcom ব খারন এরট সমপরকে আররা জানরি পাররবন এবং নমনা করপ কররি পাররবন এই রটউরটাররোরলর জনয আপনারক Lorem Ipsum বযবহার কররি হরব না আপনার া ইো িাই টাইপ কররি পাররবন

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtLorem ipsum dolor

sit

amet consectetur

adipisicing

elit sed do eiusmod

tempor

incididunt ut labore et

dolore

magna aliqua Ut enim

ad

minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea

commodo

consequat Duis aute

irure dolor

in reprehenderit in

voluptate

velit esse cillum

dolore eu

fugiat nulla pariatur

Excepteur

sint occaecat cupidatat

non

proident sunt in culpa

qui

officia deserunt mollit

anim id

est laborumltpgt

ltbodygt

lthtmlgt

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 9: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

9

বকারনা সরনদহ বনই ব রক করর করনটইনার টযাগগরলা ফরমের করা হে িার পযাটানে আপরন লকষয করররছন করনটইনার টযারগর বশরষর অংরশ সবেিা একরট সামরন বহলারনা সলযাস থাকরব এই সলযাসরটই আপনার বরাউজাররক বরল ব টযাগরট এখারনই বশষ এবং বনধ করা হরেরছ

িলন পযারাগরাাফরটর িথম রকছ শে ববালড করর আপনার বটকসটরক আররকট ফরমেট করা াক ডারনর মরিা করর strong টযাগ ব াগ করন বরাউজারর বিখারনার সমে এরট বকমন বিখারে পাইলরট সংরকষন করর িা আপনার বরাউজারর বিখন

বখোল করন শধমাি strong টযারগর মরধয থাকা শেগরলাই ববালড রহরসরব বিখারে রিক এভারবই করনটইনার টযাগগরলা কাজ করর

বটকসটরক ইিারলক করর বিখারনার জনয আররকরট করনটইনার টযাগ আরছ এটা হরলা ltemgtltemgt ববালড করা অংশ বারি বটকসরটর অনয অংরশ এই টযাগরট িরোগ করর বিখন কীভারব কররি হরব িা ডারনর উিাহররণ বিো হরলা

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur adipisicing

elit sed

do eiusmod tempor

incididunt

ut labore et dolore magna

aliqua Ut enim ad minim

veniam quis nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltstronggtLorem ipsum

dolorltstronggt sit amet

consectetur

ltemgtadipisicing

elitltemgt sed do eiusmod

tempor incididunt ut

labore et

dolore magna aliqua Ut

enim

ad minim veniam quis

nostrud

exercitation ullamco

laboris nisi

ut aliquip ex ea commodo

consequatltpgt

ltbodygt

lthtmlgt

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 10: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

10

বনরটং টযাগ

একরট বলখাংশ বা অনয বকারনা বসতরি একারধক টযাগ িরোগ করা হরল বকান িরম িারির শর এবং বশষ অংশ আসরব িা বনরটং টযাগ িারা বঝারনা হে ব মন বটকসরটর বকারনা অংশ একই সারথ ববালড এবং ইিারলক হরি পারর strong এবং emphasis টযারগর সরিক বনরটং হরব রনরির মরিা

ltstronggtltemgtThis is bold and italicsltemgtltstronggt

strong টযাগরট ldquoবাইররrdquo ব খারন emphasis টযাগরট ldquoবভিররrdquo এবং বটকসরট আরছ মারঝ

আপরন টযাগগরলা এভারবও বনট কররি পাররিন

ltemgtltstronggtThis is bold and italicsltstronggtltemgt

ভলভারব বনট করা টযারগর বারহর-রভির-মারঝ িমরট থাকরব না ভলভারব বনট করা টযারগর একরট উিাহরণ হরে

ltstronggtltemgtThis is bold and italicsltstronggtltemgt

ওরেরবর আরগর রিরন ভলভারব বনট করা টযারগ সাধারণি বকারনা সমসযা কররিা না রকনত ব রহি ওোলেড ওোইড ওরেব তিরর হরে বগরছ িাই বরাউজারগরলারক একই টযানডারডে ি থাকা জররী হরে পড়রছ

বিেমারনর XHTML HTML এর আররা থা থ সংসকরণ রহরসরব বরণেি হরেরছ অরনক বকষরিই এরট সরিক XHTML এর রনেম সরিক বনরটং টযাগ বলখা এবং অনযানয গরতবপণে রবষে রনরিেষট করর আধরনক বরাউজারগরলা এই সকল রনেম ররনষঠভারব বমরন িরল রি আপনার বকাড সরিকভারব XHTML এর রনেম বমরন না িরল িরব িা মরনটরর সরিকভারব নাও বিখারি পারর

HTML এবং XHTML এর রনেম সমপরকে আররা জানরি World Wide Web Consortium এর ওরেব সাইট wwww3xorg রভরজট করন এই সংসথারট ওরেব সংরিষট সকল রজরনরসর মান রনধোরণ করর

অযাডভানসড বটকস ফরমেরটং

বটকসট ববালড এবং ইিারলক করার সারথ সারথ HTML বযবহার করর আররা উননি উপারে িার সজজা পররবিেন করা াে এর মরধয বলখাে রং বিো ফনট রনেনতরন এবং বলখার সাইজ পররবিেন করা ারব

ফনট টযাগ ltfontgtltfontgt এর মাধযরম ফরনটর উপসথাপনা রনেনতরন করা হে ডারনর উিাহররণ ফরনটর সাইজ ৩ রনরিেষট করা আরছ ফরনটর সাইজ ১ বথরক ৭ এর মরধয রনরিেষট করা াে ব খারন ১ সবরিরে বছাট এবং ৭ সবরিরে বড়

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

ltpgtltfont size=3gtThis

text is

font size 3ltfontgtltpgt

ltbodygt

lthtmlgt

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 11: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

11

রডফলট সাইজ হরে ৩ ববরশরভাগ বকষরিই অরধকাংশ বরাউজার ldquoসাধরণিrdquo এই সাইজরটই বিখাে

আপরন ফরনটর সাইরজর মান ১ বথরক ৭ প েনত করর বিখরি পাররন রনরির িারলকাে সবগরলা সাইরজ বটকসট বকমন বিখারব িা বিখারনা হরলা মরন রাখন ফরনটর সরিক সাইজ অরনক রবষরের উপর রনরভর করর ব মন আপনার মরনটর রিরনর সাইজ

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

বরাউজাররর বসরটংস অন ােীও ফরনটর সাইজ রনরিেষট করা াে ফনট সাইজ অযারটররবউরট + বা - রিরে এরট করা হে ডারনর উিাহররন ফরনটর সাইজ +২ বযবহার করা হরেরছ এর মারন হরে বরাউজাররর রডফলট সাইজ বথরক ২ সাইজ বড় করর ফনটরট বিখারব

HTML এর রনেম অন ােী এই ফনট সাইজগরলা রভরজটররর বরাউজাররর বসরটংসরক অগরাাহয কররব অনয কথাে আপনার ওরেব পািার রভরজটর রি িার বরাউজাররর ফনট বসরটংসরক কারটামাইজ করর িরব ফনট টযারগ বযবহি সাইজ অযরটররবউট বসটার ldquoরনরজর মরিাrdquo করে রনরে বনে এবং আপনার মরিা কররই বলখারট বিখারব

িাহরল + বা - আসরল রক বলা ারব না কারণ িরিরট বরাউজাররর রডফলট ফনট সাইজ এরকক রকম হরব এবং বটকসট বিখরি বকমন হরব িা রনণেে করা সমভব নে কারণ এরট বমরশন বথরক বমরশরন পররবরিেি হে রনরির উিাহরণরট আপনারক রকছটা ধারণা বিরব রকনত আসরল এরট বকমন বিখারব িা বিখরি আপরন পািারট অনয বমরশরন অনয বরাউজার বসরটংসএ বিখরি পাররন

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 12: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

12

This Font size +1

This Font size +2

This Font size +3

This Font size +4

This Font size +5

This Font size +6

This Font size +7

This is font size -1

This is font size -2

This is font size -3

This is font size -4

This is font size -5

This is font size -6

This is font size -7

এরট সমভব ব উপররর উিাহররণর মরধয ববশ রকছ বিখরি একই রকম লাগরছ এর কারন রকছ বরাউজারর বড় বা বছাট ফনট বিখারনার একরট সীমাররখা বটরন বিে পড়া ােনা এমন বটকসট তিররর বকারনা মারনই হেনা এটা হরি পারর ওরনক বড় রকংবা অরনক বছাট হরল

বটকসট ফরমেট করার আররকরট উপাে হরে রং এর বযবহার রং িার নাম অনসারর রনরিেষট করা াে ব মন red blue বা ForestGreen RGB ( Red Green Blue) মান বযবহার কররও িারির রনধোরণ করা াে ওরেরব রংরক সবরিরে সাধারণ ভারব বযবহার করার উপাে হরে িারির বহকসারডরসরমল মান বযবহার করা িরিযক পিরির উিাহরণ রনরি বিো হরলা

ltfont color=redgtThis is red specified as a color nameltfontgt

ltfont color=25500gtThis is red specified as an RGB valueltfontgt

ltfont color=ff0000gtThis is red specified in hexadecimalltfontgt

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 13: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

13

রং এবং ওরেব

ওরেবরপইজ রডজাইরন রং একরট গরতবপণে ভরমকাে অংশ বনে এটা বযবহার করা হে বশাভাবধেরনর উরেরশয ব মন বকান রকছরক রফটফাট এবং িটকিার করর তিরর কররি অথবা এটা বযবহার করা হে বকান কাজরক অথবা বকান ফাংশনরক রনরিেশ কররি উিাহরণসবরপ এই পািার রলংকগরলার রং নীল এবং এরি করর এরট রিরিি করা সহজ হে

রং বযবহার করা াে শরে বযাকগরাাউরনড এবং রনরিেষট ধররনর সীমানাে রং বযবহাররর সরবধা এবং অসরবধাগরলাও বরঝ রাখা জররী খন বকান ওরেবসাইরটর বযাকগরাাউনড কারলা হরব এবং বলখাগরলার রং থাকরব ধসর বরণের িখন িা অরভজাি হরি পারর রকনত এটা পড়া করিন হরব

ওরেব সাইরট ববশ রকছ িমৎকার টল আরছ া আপনারক রং সমপরকে সবরিরে ভাল বঝরি সহােিা কররব রকছ রলংক বিওো হল

bull Color and the Web

(httplibraryalbanyeduimcwebcolorindexhtm) the

Interactive Media Centers online tutorial

bull Browser Safe Color Chart

(httplibraryalbanyeduimcwebcolorshtm) online chart

of Web safe colors from the Interactive Media Center

bull Color Names Chart

(httpwwww3schoolscomhtmlhtml_colornamesasp) online

chart from the W3 Schools

bull The Browser Safe Color Pallet

(httpwwwlyndacomhexasp) online guide from Lynda

Weinman

বহরডং

ওরেব বপইরজর একরট অবরজকট হল বহরডং (রশররানাম) া রিরিি কররি HTML এবং XHTML এ ি থারক

বহরডং টযাগ বযবহার করা হে গরতব উরেখ কররি এবং িা রিরিি করা হে ldquohrdquo টযাগ বযবহার করর ১ বথরক ৬ এই ছেরট বহরডং টযাগ আরছ ার মরধয ১ সবরিরে গরতবপণে এবং ৬ কম গরতবপণে

মরন করন আপরন পরিকা অথবা একরট িবরনধ া রলখরছন িার জনয সনািন আউটলাইন তিরর কররছন এটা বিখরি অরনকটা এই রকম হরব

I Introduction

A Welcome

II Main Message

A Part 1 - What I did on my summer vacation

1 Getting to the airport

2 Flying on the airplane

a Visiting Alaska

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 14: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

14

b Seeing a bear

3 Flying home

B Summing my vacation

III Conclusion

এই আউট লাইরনর সবরিরে গরতবপণে অংশ হল বরামান সংখযা রিিীে গরতবপণে অংশ হল বড় হারির হরফ এবং এরট িমশ িলরি থারক বহরডং একই ধরন অনসরণ করর সবরিরে গরতবপণে h1 িলনা করা হে বরামান সংখযা রিরে রিিীে গরতবপণে বহরডং h2 বড় হারির হরফ িারা এটা িলরি থারক বশরষর h6 টযাগ প েনত

বহরডং টযাগ হল ধারক টযাগ রনরি এরির রবনযাস রিরিি করা হল

lth1gtThis is heading H1lth1gt

খন বকান ওরেবরপরজ h1 টযাগ বযবহার করা হে িখন বকান ডান পারশ বিখারনা উিাহররণর মি হরব

এটা একরট সাধারণ ওরেবরপইজ h1 টযাগ ডানরিরকর রিরির মরিা হরব

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lth1gtThis is an example

of the

h1 taglth1gt

ltbodygt lthtmlgt

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 15: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

15

রলট

রলট HTML এবং XHTML এর একরট অবরজকট া সংজঞারেি কররি ি করা হে এর বকাড দই ধররনর রলট অডোডে রলট এবং আনঅডোডে রলট রনরিেষট কররি অনমরি বিে এই দই ধররনর িাথরমক পাথেকয হল ব অডোডে রলট গরতব রিরিি করর এবং আনঅডোডে রলট শধ মাি রিরিি করর ব ডাটাগরলা একরট রলট বকান গরতব রিরি এগরলা করা হেরন

রলট টযাগ একরট ধারক টযাগ রকনত এরির দইরট অংশ আরছ িথম অংশ রিরিি করর ব রলটরট অডোডে না আনঅডোডে রিিীে অংরশ রলরটর রনরজর আইরটমগরলা থারক রনরি একরট অডোডে রলরটর উিাহরণ বিখারনা হল

1 Dinner at 800 pm 2 Lunch at noon

3 Snacks at 1100 am

এই রলট রিরিি করর ব সবরিরে গরতবপণে আইরটম হল রাি আটটাে রারির খাবার রিিীে গরতবপণে আইরটম হল দপররর খাবার এবং সবরিরে কম গরতবপণে আইরটম হল সকাল এগাররাটার হালকা নাসতা এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltolgt

ltligtDinner at 800 pmltligt

ltligtLunch at noonltligt

ltligtSnacks at 1100 amltligt

ltolgt

মরন রাখরি হরব ব িরিরট আইরটমই রলট আইরটরমর টযাগ ltligtltligt এর বভিরর থাকরব এবং রলরটর পররা বসটটা অডোডে রলট টযাগ ltolgtltolgt এর বভিরর থাকরব

অডোডে রলরটর একরট উিাহরণ রনরি বিওো হল

bull Apples

bull Oranges

bull grapes

এই আনঅডোডে রলট বকানরট সবরিরে গরতবপণে িা রিরিি কররি পারর না এই রলরটর বছাট একরট বকাড রনরি বিওো হল

ltulgt

ltligtApplesltligt

ltligtOrangesltligt

ltligtgrapesltligt

ltulgt

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 16: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

16

আনঅডোডে রলট টযাগ হল ltulgtltulgt এবং অডোডে রলরটর মরিা রলরটর িরিরট আইরটম ltligtltligt টযারগর বভিরর থাকরব

উপসথাপনার উরেরশয অরনরকই অডোডে এবং আন অডোডে রলট টযাগ বযবহার করর থারকন অনয ভারব বলা াে খন িারা সরিযকার রলরট আগরাহী হেনা রকনত রলরটর আইরটরমর িরিরটর শররি বরলট আকারর িারলকা িান িখন িারা আনঅডোডে রলট বযবহার কররন খন িারা বরলরটর বিরল নামবার িান িখন অডোডে রলট বযবহার কররন ওরেরবর জরনয এটা খব ভাল অনশীলনী নে রলট টযাগ শধ মাি রলট ববাঝারিই বযবহার কররি হে এবং এটা বকান রকছরক বিখারি বযবহার করা হে না এটারক একরট মামলী বযাপার মরন হরি পারর রকনত রকছ পরররসথরি আরছ ( ব মন সািে ইরিরনর জরনয) সরিকভারব রলট টযাগ বযবহার করা না হরল সমসযা হরি পারর

উপররর উিাহরণগরলারি রি অডোডে রলট সরিকভারব বযবহার করা না হি িাহরল বকাড সািে ইরিনরক বলি ব রলরট ওররি হল একরট গরতবপণে রজরনস এর বিরকষরি আমরা সরিক বমরসজরট বপিাম না এটা হরি পারর ব বপইজ রডজাইনার শধমাি বিরেরছল রলরট থাকা লাইরনর শররি একরসট নামবার এবং িার ওরররির গরতব রিরিি করার ইো রছল না এই কাররণ সািে খন কাজ করর িখন পািারট অসরনতাষজনক ভারব সামরন আরস

রলংক

রলংক ওরেরবর সবরিরে গরতবপণে অংশ িকিপরকষ ওোলডে ওোইড ওরেব বা WWW এর পররাটা এক ডকরমনট বথরক আররক ডকরমরনটর সারথ রলংরকর িকষিার উপর রনভের করর এখন অবশযই রলংক এক সাইট বথরক আররক সাইরট রনরে ব রি বনিতব বিে এবং একরট সাইরটর রনরিেষট পরেনট রিরিি করর

দই ধররনর রলংক বিখরি পাওো াে এবসরলট এবং রররলরটভ সকল রলংক টযাগ হল ধারক টযাগ

এবসরলট টযাগরক এভারব রিনতা করা হে ব এটা বরাউজাররক বরল বিে সকল িরোজনীে পথ অনসরণ করর আসরল বকাথাে ব রি হরব এক ওরেব সাইট বথরক অনয সাইরট সংর াগ রিরি এটা বযবহার করা হে রররলরটভ রলংক (র টারক মারঝ মারঝ ldquoবলাকাল রলংকrdquo ও বলা হে) শধমাি শটেকাটটা বরল

এখন আমরা আলবযারন রবশবরবিযালরের ওরেবসাইরট একরট এবসরলট রলংক তিরর কররি িাই রলংক A টযারগর বভিরর থারক ব টা বিখরি হে রনরির মরিা

lta href=httpwwwalbanyedugtLink to UAlbanyltagt

বমাটামরট ভারব অনবািকি রলংকরট বরল ব হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর বরাউজার ব ন ওোলডে ওোইড ওরেরব াে এবং একরট ওরেব সাইট খরজ ববর করর ব টার নাম albanyedu আমরা রবশবরবিযালরের ওরেবসাইট বথরক রনরিেষট একরট রডপাটেরমরনটর বহাম বপইজ খরজ বপরি িাই করমউরনরকশন রডপাটেরমরনটর বহামরপরজর এবসরলট রলংকরট হল

lta

href=httpwwwalbanyeducommunicationindexhtmlgtLink

to the Communication Department home page ltagt

এই রলংরক বিখরি পাই ব বরাউজার অবশযই হাইপার বটকসট টরানসফার বিারটাকল বযবহার করর ওোলডে ওোইড

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 17: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

17

ওরেরব াে এবং রবশবরবিযালরের ওরেবসাইট খরজ ববর করর এরপর এই রবশবরবিযালরের সাইরটর বভির বথরক করমউরনরকশন রডপাটেরমরনটর সাইট খরজ ববর করর এবং বশষপ েনত একরট বপইজ উপসথাপন করর ারক বলা হে indexhtml

এখারন ht t p www al bany edu communi cat i on রগরে Communi cat i on Depar t ment রভরজট করন

রররলরটভ রলঙক সকল ldquohttp রবষেrdquo বথরক দরর থারক িারা বরল ব বরাউজার ব রনা সমসত ওোলেড ওোইড ওরেরব না রগরে শধমাি ldquoআরশ পারশrdquo থারক এবং একরট পািা রনরে বনে ভারলা একরট উিাহরণ হরে এই রটউরটাররোরলর বপছরনর বকারনা পািাে াওোর রলঙক এরট পঞচম পষঠা এবং মরন করন ব আপরন এর বপছরনর পািাে াওোর জনয রলঙক কররি িারেন ফরল এরট হরব

lta href=page4htmlgtPrevious Pageltagt

এই রররলরটভ রলঙক আপনারক শধ page4html এ ব রি বরল ldquoসমসতrdquo ওরেব ররর আবার এই রবশবরবিযালরের ওরেব সাইরট রফরর আসরি না

anchor টযাগ বযবহার করর আপরন একরট ওরেব পািার মরধয অনতঃসংর াগ ও করারি পাররবন anchor টযাগ আপনারক সরাসরর একরট পািার বকারনা অংরশ ব রি বিে আমারির পািাে ldquotoprdquo নারমর একরট anchor টযাগ ররেরছ এই anchor পরেরনটর জনয বকাড হরে

lta name=topgtltagt

আর এটারি রলঙক করার জনয

lta href=topgtGo to the top of this pageltagt

ডান পারশর উিাহরণরটরি বিখারনা হরেরছ রকভারব একরট ওরেব পািাে এরট বকাড কররবন

বনাট িরিরট anchor টযাগ সবেিা ldquordquo রিরে শর হরব

আপরন একরট অযাবসলট বা রররলরটভ রলরঙকও এই anchor পরেনট ি কররি পাররন এই পািার top anchor পরেরনটর জনয রররলরটভ রলঙক হরে

lta href=page5htmltopgtTop of Page 5ltagt

lthtmlgt

ltheadgt

lttitlegtMy Web

Pagelttitlegt

ltheadgt

ltbodygt

lta name=topgtltagt

ltpgtWelcome to my Web

page

You can go to the top of

the

page by lta href=topgtby

clicking hereltagtltpgt

ltbodygt

lthtmlgt

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 18: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

18

বলআউট এবং বটরবল

ওরেব পািার বলআউট খবই গরতবপণে একরট পািাে রবরভনন উপািান ব মন বটকসট ছরব এবং বহরডং ইিযারি শধ পািার িিশেরনর জনযই সাজারনা হেনা বরং এরট কি সনদর ও ববাধগমযভারব রভরজটররর কারছ উপসথাপন করা াে িাও বখোল রাখা হে একরট খারাপ বলআউট বিখরি খারাপ বিখারব সারথ সারথ পািাে থাকা িথয খরজ বপরি ও বঝরিও করিন হরব

ওরেব সাইট বলআউট করার িথয জানরি আমারির Media Center Web Design অনলাইন রটউরটাররোল বিখন এখারন httplibraryalbanyeduimcwebdesign

ওরেব পািাগরলরি িার উপািানগরলা পািার উলমবভারব বামপারশ রবনযসত থাকরি ldquoিােrdquo অরনক উপািারন মাঝ ও ডান অযালাইনরমনট অযারটররবউটও িরোগ করা াে

ডানপারশর এই ছরবরটরি বিখা ারে ব বকারনা ফরমেরটং না কররল একরট ওরেব পািা বকমন বিখারব

বাম মাঝ ও ডান অযালাইনরমনট অযারটররবউট বযবহার করর একরট ওরেব পািাে রবরভনন উপািান সনদর ভারব উপসথাপন করা াে আমরা এই রটউরটাররোরলর পরবিেী অংরশ এই অবসথান অযারটররবউট ও বসনটার টযাগ রবসতাররিভারব আরলািনা কররবা

টযানডাডে HTML এবং XHTML বকাড এর বাম অযালাইনরমনট এর িারা সষট সমসযা সমাধারনর উপাে হরে বটরবল বযবহার ldquoবটবলারrdquo ফরমের মল উরেশয রছরলা িথযগরলা কলাম ও সারর আকারর সারজরে রাখা রকনত বিেমারন ওরেব পািাে উপািানগরলর সরিক রবনযারসর জনয বটরবল ওরেব রডজাইনাররর ldquoপরম বনধrdquo বি পররনি হরেরছ

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 19: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

19

ডারনর উিাহরণরটরি একরট ওরেব পািা বিখারনা হরেরছ ার উপািানগরল বটরবল বযবহার করর সাজারনা হরেরছ এখারন বটরবল অিশয

ডারন রিক একই পািা বিখারনা হরেরছ রকনত এবার বটরবরলর বডোর বিখারনা হরেরছ বটরবরলর বডোর সহরজই বিখা ারে এবং পািাে কীভারব উপািানগরল সাজারনা হরেরছ িা লকষয কররি পাররছন

বটরবল টযাগরট একরট করনটইনার টযাগ ার িধান রিনরট অংশ ররেরছ বটরবল সারর ও বসরলর সমনবরে গরিি এবং িরিরটর জনয আলািা টযাগ আরছ সরিকভারব কাজ করার জনয িরিরট টযাগ সরিক িরম রলখরি হরব টযাগগরলা হরে

বটরবল টযাগ - lttablegtlttablegt

বটরবল বরা টযাগ - lttrgtlttrgt

বটরবল বসল টযাগ - lttdgtlttdgt

রনরি একরট সাধারণ বটরবল বিখারনা হরলা

এই বটরবরলর রিনরট সারর ও রিনরট কলাম ররেরছ বটরবল তিরর শর কররি আমরা শর এবং বশষ বটরবল টযাগ রলরখ শর কররবা

lttablegtlttablegt

বাকী টযাগগরলা বলখার সরবধারথে আমরা শর এবং বশষ বটরবল টযাগ দই লাইরন রলখরবা

lttablegt

lttablegt

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 20: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

20

এখন আমরা িথম বটরবল বরা টযাগ ি কররবা

lttablegt

lttrgtlttrgt

lttablegt

িকষণ না রিনরট বটরবল বসল ি না কররবা িরিাকষণ প েনত সারর সমপনন হরব না

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরট এরকম করর তিরর হরব

রি Notepad বযবহার কররন িরব অনয দরট সারর ব াগ করার জনয সহরজ শধ ldquoকাট এবং বপট কাজrdquo করন

lttablegt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

এখন বটরবলরটর গিন এমন হরব

বটরবলরট বকাথাে বটরবলরট এখারনই আরছ রকনত বটরবরল আমরা বকারনা অযারটররবউট িরোগ করররন িাই এরট এখারন থাকা সরেও অিশয এরটরক রিরন বিখারনার জনয আমারিররক অবশযই এরট বকমন বিখারব িা রনধোরণ করর রিরি হরব িথম ধাপ হরে বডোর ি করা রনরির মরিা করর বটরবরলর শরর টযারগ border=1 টাইপ করন এরট বটরবরলর বডোররক ১ রপরকসল পর কররব

lttable border=1gt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttrgtlttdgtlttdlttdgtlttdgtlttdgtlttdgtlttrgt

lttablegt

বটরবলরট এখন বিখা ারে রকনত এরট খবই বছাট কারন আমরা এরি বকারনা সাইজ অযারটররবউট িরোগ করররন

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 21: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

21

উপরনত HTML এবং XHTML এর একরট বকৌিহলী রফিার আরছ ার কাররন বটরবল বিখরি খারাপ বিখাে রি বটরবল বসরল বকারনা ধররণর উপািান না থারক িরব ববরশরভাগ বরাউজার বটরবলরটর বসল বা এর বাইররর বডোর বিখাে না

এরট রকছ অদভি িভারবর সরষট করর রকছ বরাউজার বসল বিখারব না অনযগরল বিখারব রনরির বটরবরলর সব বসরলই উপািান ররেরছ শধ মারঝর বসল ছাড়া আপনার বযবহি বরাউজাররর উপর রনভের কররব মারঝর বসলগরল রিকভারব বিখারব রকনা

Text Object

Text Object

বনাট আপরন রক মারঝর একরট বসল বিখরি পাররছন বা বকারনা ldquoবারলরশর-মরিাrdquo ইরফকট বিখরি পাররছন অনয একরট বরাউজারর পািারট বিখার বিষটা করন এখন আপরন রক বিখরছন

বসরলর উপািান বটকসট ছরব রকংবা এমনরক অনয একরট বটরবলও হরি পারর এরিররক ldquoবনরটড বটরবলrdquo বরল উপািানরট একরট রবরশষ ধররণর বকাডও হরি পারর এ ধররণর বযবহাররর সবরিরে সাধারণ উরেশয হরে ldquononbreaking spacerdquo

nonbreaking space হরে একরট সরিযকাররর অিশয উপািান এরট বলখার মারঝ অরিররি বেস এবং সব বরাউজারর বসল িিশেরনর জনয বটরবল বসরলর অিশয উপািান তিরর কররি বযবহি হে nonbreaking space তিরর করার জনয বটরবল বসরল সহজ একরট ASCII বকাড টাইপ কররি হে

বনাট ASCII বকাড হরে কীরবারডে িাপত এবং কী ছাড়া বরণের গারণরিক রপােন করমপউটারর এবং ওরেরব বযবহি হে এমন সব বণে রিরন িিশেন করা া কী বি থারক না রকংবা আসল কী বরাক বযবহার কররি না িাইরল রকছ ASCII বকাড ওরেব বরাবরটর কাছ বথরক ইরমইল রিকানা লকারনার জনয বযবহার করা হে ব গরল েযারমং করার জনয ইরমইল রিকানা সংগরাহ করে ASCII বকাড এবং এরির রববরণ পাওো ারব wwwasciitablecom

nonbreaking space এর ASCII বকাড হরে ampnbsp মারঝর বটরবল বসরল nonbreaking space ি করা হরল িা রনরির মরিা রিক িাক ভারব ওরেব পািাে িিরশেি হরব

Text Object

Text Object

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 22: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

22

আরগর উিাহরণ অন ােী এরট আপনার বরাউজাররর উপর রনভের কররব রকছ বকষরি বিখরবন ব বকারনা পররবিেনই হেরন কারণ বসলগরল সবসমেই রিকভারব বিখারেরলা nonbreaking space এর মরিা উপািান বযবহার কররল সবসমে আপনার পছনদ অন ােী পািারট বিখারব

আমরা ব বটরবলরট রনরে কাজ কররছলাম িারি nonbreaking space ব াগ কররি পারর ফরল বকাডরট বিখরি এমন হরব

lttable border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

বটরবলরট বড় করর বিখারি িাইরল আমরা এর width অযারটররবউট ৩০০ রপরকসল বিরবা বকমন করর কররবন রনরির উিাহরণরটরি িা বিখারনা হরেরছ

lttable width=300 border=1gt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttrgtlttdgtampnbsplttdlttdgtampnbsplttdgtlttdgtampnbsplttdgtlttrgt

lttablegt

এখারন 300 রিরে বঝারনা হরে বটরবরলর িসথ হরব ৩০০ রপরকসল উরেখ না করর রিরল মাপামারপ সবেিা রপরকসরল হে

অযাডভানসড বটরবল ফরমেট

বটরবল ফরমেট করার বকষরি আপনারক শধমাি সাইজ এবং বডোর রনরিেষট করার মরধযই সীমাবি থাকরি হরব না আপরন আপনার পছনদমরিা বটরবল তিরর করার জনয আররা অরনক অপশন পারবন

বটরবরল অযাসাইন করার জনয cell padding এবং cell spacing দরট গরতবপণে অযারটররবউট Cell padding হরে বটরবল বসরলর মরধয থাকা উপািান বথরক বসরলর বডোররর মধযকার ফাকা সথান রনরির দরট উিাহররণ এই রবষেরট ভারলা করর বঝারনা হরেরছ

এরি বকারনা Cell padding বনই

এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 23: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

23

রিিীে উিাহরণরটরি বিখন বলখার আরশপারশ আররা জােগা আরছ এটা পড়রিও সরবধাজনক আর বিখরিও সনদর padding অযারটররবউটরট বটরবরলর শরর টযারগ রাখরি হে এই বটরবরলর বকাড হরে

lttable width=284 border=1 cellspacing=0 cellpad-

ding=10gt

lttrgt

lttd align=centergt এরি Cell padding অযারটররবউট রহরসরব ১০ রপরকসল বসট করা হরেরছ lttdgt lttrgt

lttablegt

Cell spacing হরে বসলগরলর মধযকার ফাকা সথান Cell spacing ছাড়া একরট বটরবরলর উিাহরণ বিখন

আর এখারন বিখন ১০ রপরকসরলর cell spacing সমবরলি একরট বটরবল

বিরখ মরন হরে বডোর আকারর বড় হরেরছ রকনত আসরল হেরন Cell spacing ছাড়া শধ বডোর গাঢ় করর রিরল বটরবলরট এমন বিখারব

cell spacing এবং বডোররর মরধয থা সমভব পাথেকয বঝারনার জনয বসই একই বটরবরলর cell spac-ing ১০ রপরকসল এবং বটরবল বডোর ৫ রপরকসল করর বিখা াক

cell padding cell spacing এবং বডোররর রবরভনন সমনবে আপনারক বটরবরলর বসৌনদ ে রনেনতরণ কররি বিে ারি এরট আপনার উপকারর লারগ এখারন একরট বটরবল বিখারনা হরলা ারি রিনরট অযারটররবউটই ররেরছ

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 24: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

24

cell padding ৮ রপরকসল

বটরবল বডোর ৪ রপরকসল

cell spacing ১০ রপরকসল

বটরবল ৩০০ রপরকসল িওড়া

এই বটরবরলর বকাড হরে

lttable width=300 border=4 cellspacing=10 cellpad-

ding=8gt

lttrgt

lttdgtCell Padding 8 pixelslttdgt

lttdgtTable borders are 4 pixelslttdgt

lttrgt

lttrgt

lttdgtCell spacing is 10 pixelslttdgt

lttdgtThe table is 300 pixels widelttdgt

lttrgt

lttablegt

বনাট টযানডাডে বটরবল বডোররর 3D ইরফকট একরট পরারনা টাইল অরনক ওরেব পািার রিরেিারা আজ কাল বটরবরলর বডোর বযবহার কররি িান রকনত উপরর বিখা হাল ফযাশরনর ldquoছরবর বেমrdquo এর মরিা বকারনা বডোর না Cascading Style Sheets বা সংরকষরপ CSS রিরে রবরভনন ধররণর বডোর তিরর করা াে রকনত CSS বযবহার এই রটউরটাররোরলর মরধয পরর না CSS সমপরকে রবসতাররি িথয জানরি আমারির Cascading Style Sheets অনলাইন রটউরটাররোল বিখরি পাররন এখারন httplibraryalbanyeducsstut CSS বডোররর উিাহরণ ডান পারশ বিো হরলা

বটরবরল রিন ভারব রং ব াগ করা াে

1 বটরবরলর বযাকগরাাউনড রং

2 বসরলর বযাকগরাাউনড রং

3 বডোররর রং

রনরির বটরবলরটর বযাকগরাাউনড রং 993300 এরটর টযানডাডে ১ রপরকসল বডোর ররেরছ

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 25: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

25

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

ব রহি বটরবল বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরলর বযাকগরাাউনড রং পররবিেন করর িাই এরটরক বটরবল টযারগর শরর অংরশ রাখরি হরব

এখারন একরট বটরবল বিখারনা হরেরছ ার একরট বসরলর বযাকগরাাউনড রং 993366

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0

cellspacing=0gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন এই বযাকগরাাউনড রং অযারটররবউটরট বটরবল বসল টযারগর শরর অংরশ আরছ আমরা এমনও বটরবল তিরর কররি পারর ার বযাকগরাাউনড রং এক রকম আর িার একরট বসরলর বযাকগরাাউনড রং অনযরকম ব মন

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 26: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

26

এই বটরবরলর বকাডরট ভারলা করর পরীকষা করন

lttable width=300 border=1 cellpadding=0

cellspacing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

বিখন ব বযাকগরাাউনড রং অযারটররবউটরট সমসত বটরবরল িরোগ করা হরেরছ রকনত বকবল মাি একরট বসরলর বযাকগরাাউনড রং রনরিেষট করর বিো হরেরছ এরট খবই গরতবপণে ধারণা া রনরির বটরবরল আররা সবরবসতারর বিখারনা হরেরছ

এই বটরবরলর বকাড হরে

lttable width=300 border=1 cellpadding=0 cellspac-

ing=0

bgcolor=993300gt

lttrgt

lttd bgcolor=993366gtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttrgt

lttd bgcolor=FFCC33gtampnbsplttdgt

lttd bgcolor=0000FFgtampnbsplttdgt

lttrgt

lttablegt

রিনরট বসরলর রং রনরিেষট করর বিো আরছ বাকীরটর বনই ব ই বসরলর রং রনরিেষট করা বনই বসরটই বকবলমাি বটরবরলর বযাকগরাাউনড রং বিখারে বসরলর রং বটরবরলর রং এর আরগই বিখারব এজনযই রিও বটরবরলর বযাকগরাাউনড রং বিো আরছ িথারপ শধ বসরলর বযাকগরাাউনড রংই বিখারে রনরির উিাহররণ এরট আররকট রবসতাররিভারব বিখারনা হরেরছ

বসরলর বযাকগরাাউনড রং বটরবরলর বযাকগরাাউনড রং

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 27: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

27

বসরলর বযাকগরাাউনড রং বসরলর বযাকগরাাউনড রং

রবভরানত লাগরছ এই ধারণারট হেরিা িথরমই ধরা াে না httplibraryal-

banyeduimchtml_tuttable_demotxt এখারনর এই ফাইলরট একরট সাধারণ বনাটপযাড ডকরমনট ারি বটরবল তিররর িরোজনীে বকাড বিো আরছ আপরন এরট খরল সমপািনা করর পনরাে html একসরটনশন রিরে সংরকষণ কররি পাররন বটরবলরটরি রবরভনন বযাকগরাাউনড রং এবং বডোর রিরে বিখন রক হে

বযাকগরাাউনড ছরবও রংরের মরিা একই অগরাারধকার নীরি অণসরণ করর বটরবল এবং বটরবল বসল উভরেরই বযাকগরাাউনড ছরব থাকরি পারর

এখারন এই বটরবরলর বযাকগরাাউনড রহরসরব একরট ররড়র ছরব ররেরছ

বিখন ছরবরট বারবার এরসরছ এই বারবার আসারক ldquoটাইরলংrdquo বলা হে কারণ টাইস ব ভারব বসারনা হে ছরবগরলাও বসভারব এরসরছ

রনরি একই রকরমর দই সারর ও দই কলারমর একরট বটরবল আরছ

এখারন একরট বসরলর বযাকগরাাউনড রহরসরব একরট বখলনা হারসর ছরব ররেরছ এরটও টাইল হরেরছ িরব শধ বসরলর বভিরর এই বটরবরলর বকাড হরে

lttable width=267 border=0 cellpadding=0

cellspacing=0

background=imagesclock_60jpggt

lttrgt

lttd width=171 back-

ground=imgesduck_smalljpggtampnbsplttdgt

lttd width=96gt lttdgt

lttrgt

lttrgt

lttdgtampnbsplttdgt

lttdgtampnbsplttdgt

lttrgt

lttablegt

অযারটররবউট রহরসরব উভে বটরবল ও বসরল বযাকগরাাউনড ব াগ করা হরেরছ

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 28: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

28

বটরবল সমপরকে ব বশষ পরেনটরট এখারন ধরা উরিি িা হরলা বটরবরলর অযালাইনরমরনটর জনয িাররট অযারটররবউট আরছ িারা হরলা রডফলট বারম মারঝ এবং ডারন রডফলট হরলা সাধারণি বযবহারকারীর বরাউজার রি পররবিেন না করর িরব িা পািার বাম রিরক অবসথান কররব বাম অযালাইনরমনট বটরবলরটরক পািার বারম মাঝ অযালাইনরমনট পািার মারঝ এবং ডান অযালাইনরমনট পািার ডারন সথাপন করর এই অযারটররবউটগরলা বটরবল টযারগর শরর অংরশ রাখা হে রসনটযাকস হরে

lttable align=leftgt

lttable align=centergt

lttable align=rightgt

রডফলট অযালাইনরমরনটর জনয বকারনা অযারটররবউট লারগ না

ছরব

ছরব হরলা ওরেব পািার একরট গরতবপণে অংশ HTML এবং XHTML আপনারক ওরেব পািাে ছরব বসারি বিে এবং এর অযারটররবউট বসট করর আকার ও অবসথান রনেনতরন কররি বিে পরবিেী অংরশ আপরন ছরব ও ছরবর বকারডং সমপরকে জানরবন

ছরবর বসাসে টযাগরট একরট একক টযাগ িা হরলা

ltimg src=nameofyouimagegif gt

এরট একরট সাধারণ ছরবর অবসথারনর উিাহরণ

এই ছরবর জনয বকাড হরে

ltimg src=imagesdogonhatjpg alt= width=205

height=170 gt

এই বকাড বথরক পাওো িথয অনসারর ছরবর নাম হরে ldquodogonhatjpgrdquo এবং এরট ওরেব সাইরটর im-ages বফালডারর আরছ এই বকাড আররা রনরিেশ করর ব ছরবরটর িসথ ২০৫ রপরকসল এবং উচচিা ১৭০ রপরকসল

লকষয করন রিন ধররণর ছরব আপরন ওরেরব বযবহার কররি পাররবন িারা হরলা JPG (Joint Photographers Experiment Group) GIF (Graphics Interchange

Format) এবং PNG (Portable Networks Graphics) এই রিন ধররনর ফরমেট সমপরকে আররা জানরি এই ডকরমরনটর বশরষ পরররশষট ১ বিখন

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 29: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

29

ছরবর মাপ অযারটররবউট রহরসরব রনরিেশ করা হে মাপ রনরিেশ কররল বরাউজার আপনার ইো অন ােী ছরবরট িিশেন কররব উপরনত আপরন আপনার সরবধার জনয ছরবরক মযারনপরলট কররি পাররন ব মন এখারন খবই বছাট আকাররর একরট ছরব িার ldquoিকিrdquo আকার অথোৎ িসথ ২ রপরকসল এবং উচচিা ২ রপরকসল রহরসরব বিখারনা হরলা

আপরন রক এরট বিখরি পাররছন এই ছরবরট এরিাই বছাট ব বকারনা বকারনা মরনটরর এরট িাে বিখাই াে না াই বহাক আমরা এর আকার পররবিেন করর আররা বড় করর ছরবরট বিখারি পারর এখারন আমরা ছরবরটর িসথ ৪০ রপরকসল এবং উচচিা ৪০ রপরকসল করর রিরেরছ

এই ছরবর জনয বকাড হরে

ltimg src=imagesorangedotgif alt=Orange dot 40 x 40

width=40

height=40 gt

ব রহি উভে বকষরিই একই ছরব বিখারনা হরেরছ িাই একারধকবার ডাউনরলাড বা বড় আকাররর ফাইল ডাউনরলাড করর সমে নষট হরব না

এখারন বসই একই কমলা রংরের রবনদরক একরট বরখা রহরসরব বিখারনা হরেরছ

বকাডরট হরে

ltimg src=imagesorangedotgif alt=Orange dot as line

width=300

height=4 border=0 gt

বনাট HTML বকারড ছরবর আকার পররবিেন করা হরল িা আসল ছরবর বকারনা পররবিেন করর না আপরন শধ বরাউজাররক বলরছন ছরবরক বকমন করর বিখারনা হরব বছাট ছরবরক বড় করা হরল এর ফাইরলর আকার বড় হরে ােনা রকংবা ডাউনরলারডর সমেও বারড় না একই ভারব বড় ছরবরক বছাট কররলই এর ফাইরলর আকার বা ডাউনরলাড সমে করম ারব না

ফরটাগরাাফ রনরিেষট ধররণর আকাআরক এবং ফাইন লাইন বফড বফিাররং বা অনয সকষম ইরফকট সমবরলি ছরব মযারনপরলট করার বকষরি সিকে থাকন বছাট ছরবরক বড় করর বিখারনা হরল এরটর ডাটা (এরকষরি রপরকসল) বডোররর উপর রিরে ছারড়রে াে এর ফরল ছরবর অরনক রববরণ হারররে াে এবং রপরকসল বভরঙগ াে

ডারনর ছরবরট িার রডফলট আকারর অথোৎ িসথ ১৫০ রপরকসল এবং উচচিা ১০০ রপরকসল এ িিশেন করা হরেরছ

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 30: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

30

এখারন একই ছরব রকনত রভনন আকাররর অযারটররবউট বিো হরেরছ অথোৎ িসথ ৪০০ রপরকসল এবং উচচিা ২৬৭ রপরকসল বিখন ছরবরটর রপরকসল করিা বভরঙগ বগরছ

ছরবরি বাম ও ডান অযালাইনরমনট অযারটররবউট বিো াে অযালাইনরমনট এর জনয রসনটযাকস হরে

ltimg src=yourimagegif alt= align=left gt

ltimg src=yourimagegif alt= align=right gt

Alt টযাগরট একরট রবরশষ অযারটররবউট া ছরবরট রক এবং রকরসর জনয িা জানার জনয িরোগ করা হে বলাকজন ারির িরষটশরি িবেল িারা িােই ওরেব বরাউজাররর রিন-রররডং রফিার বযবহার কররন ব খারন ওরেব পািার িথয িারির পরড় বশানারনা হে একরট ছরবর alt টযাগ বরাউজার পড়রব

অরনক সািে ইরিনও িারির অযালগররিরমর উপািান রহরসরব alt টযাগ বযবহার করর া ফলাফরলর অবসথান গণনা করর িাই রিন-রররডং বরাউজার সািে ইরিন সরিকভারব বলখা alt টযারগর উপর রনভের করর রনরির ছরবরটরি al t টযাগ িরোগ করা হরেরছ

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 31: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

31

এই ছরবর alt টযাগ হরে ldquoGreen 1940 Ford Deluxe hot rod automobilerdquo এবং পররা ছরবর টযাগ হরে

ltimg src=imagesgreen40jpg alt=Green 1940 Ford Deluxe

hot rod automobile width=300 height=261 gt

সব একরিি করা এই অংরশ আপরন একরট সহজ ওরেব পািা বানারবন ব সকল কাজ আপরন এখারন কররবন িা হরলা ছরব সথাপন করা বটকসট সথাপন ও ফরমেট করা বটরবল তিরর করা এবং রবরভনন িকার উপািারন রবরভনন অযারটররবউট অযাসাইন করা

সব বশরষ পািারট বকমন বিখারব িা ডারন বিখারনা হরলা

এই রটরটাররোরলর শরর কথা রি রিনতা কররন িরব রনিেই আপনার মরন থাকরব ব আপনার িরজরকটর জনয একরট রট বফালডার কররি হরব এখনই এটা করর বফলন

বনাটপযাড িাল করন রিনা ইরিমরধযই িাল করা থারক এবং নিন একরট ফাইল তিরর করন এটার নাম রিন indexhtml এবং িা রট বফালডারর সংরকষণ করন

এখন HTML টযারগর শরর এবং বশষ অংশ রলখন রনরি িারির বিখারনা হরলা

lthtmlgt

lthtmlgt

শরর HTML টযারগর একরট গরতবপণে উপািান হরে doctype (document type) বটটরমনট doctype বটটরমনটরট বরাউজাররক ওরেব পািারট সমপরকে রবসতাররি িথয এবং বকান বকাড বযবহার করর এরট

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 32: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

32

বানারনা হরেরছ িার িথয বিে রিও এরটরক জরটল মরন হরে আসরল এরট িা নে HTML টযারগর শরর অংরশর রিক আরগ doctype বটটরমনট ব াগ করন ারি বকাডরট বিখরি এমন হে

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtmlgt

lthtmlgt

Doctype বটটরমনট সমপরকে আররা রবসতাররি িথয World Wide Web Consortium এর ওরেব সাইরটর এখারন পাওো ারব httpwwww3orgQATipsDoctype

বশষ একরট বটকরনকযাল রববরণ আপনার ওরেব সাইট বরাউজারর রিকভারব বরনডার করা রনরিি কররি সাহা য কররব আপনারক া কররি হরব িা হরলা HTML টযারগর শরর অংরশ একরট অযারটররবউট ব াগ কররি হরব া name space বক বরফার কররব name space নবীন HTML বলখকরির কারছ একরট জরটল ধারণা িাই এখারন আমরা রবসতাররি রকছ বলরবা না রি আররা রকছ জানরি উৎসাহী বহান িরব বিখন httpwwww3orgTRREC-xml-names HTML টযারগর শরর অংরশ name space

অযারটররবউট ব াগ করন ফরল এটা এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

lthtmlgt

াক এখন সকল িসতরি সমপনন হরেরছ এবং আপরন ওরেব বপরজর ldquoমল অংশrdquo শর কররি পাররন

head টযারগর শর এবং বশষ অংশ ব াগ করন নিন বকাডরট এমন বিখারব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

lthtmlgt

এখন body টযারগর শর এবং বশষ অংশ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgtltheadgt

ltbodygtltbodygt

lthtmlgt

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 33: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

33

রি বিখরি বগালরমরল লাগা শর হে িরব head এবং body টযারগর শর এবং বশষ অংরশর মরধয রকছটা বেস রিরে রনন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltbodygt

lthtmlgt

আপনার নিন ওরেব পািারট সংরকষণ করন এই প োরে এরস আপরন আপনার বরাউজারর ওরেব পািারট বিখরি পাররন ব রহি পািাে আপরন বিখার মরিা রকছই রারখনরন িাই পািারট খালী বিখারব এরট পরীকষা কররি আপনার বরাউজার খলন File এ রিক করন িারপর আপনার বযবহি বরাউজার অন ােী Open File বা Open এ রিক করন আপনার নিন ওরেব পািারট রনবোিন করর OK বা Open এ রিক করন আপনার িীরন একরট খালী পািা বিখরি পাররবন

একরট ছরব ব াগ করা

পরবিেীরি আপরন ব টা কররবন িা হরলা আপনার পািার বহডার রহরসরব একরট ছরব ব াগ করা িথরম আপনারক ছরবরট ডাউনরলাড করর আপনার images বফালডারর সংরকষণ কররি হরব এই ওরেব সাইরট বগরল httplibraryalbanyeduimchtml_tutdownload_imagesgaragehea

derjpg আপরন garageheaderjpg নারমর একরট বহডার ছরব বিখরি পাররবন বরাউজারর ছরবর উপর মাউরসর ডান বাটন রিক করন িারপর আপনার িরজরকটর রট বফালডাররর i mages বফালডারর সংরকষণ করার জনয Save Image বা Save Picture As ( আবারও আপনার বরাউজার অন ােী) এ রিক করন

আপরন হেরিা িাইরবন বহডার ছরবরট আপনার ওরেব পািার মাঝামারঝ আসক রনরির মরিা করর center টযাগ ব াগ করন

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltcentergt

ltbodygt

lthtmlgt

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 34: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

34

এখন img src (image source) টযাগ ি করন া বহডার ছরবরট আপনার পািাে ব াগ কররব ব রহি ছরবরট আপরন images বফালডারর সংরকষণ করররছন িাই বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg gtltcentergt

ltbodygt

lthtmlgt

ছরবরটর িসথ ৮০০ রপরকসল আর উচচিা ২০৮ রপরকসল img src টযারগ আকাররর অযারটররবউট ব াগ করন আর হযা al t টযাগ ব াগ কররি ভলরবন না ব রনা ব মন রলখন Sammys Garage এখন বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

ltbodygt

lthtmlgt

সাধারণ একরট বটরবল ব াগ

এখন আপরন একরট সাধারণ বটরবল ব াগ কররবন ারি বকারনা বডোর বা সীরমি অযারটররবউট থাকরব না ওরেব পািাে Sammys Garage এর রনটার কাজগরলা সরিকভারব সথাপরনর জনয এই বটরবলরট বযবহি হরব আপরন রকছ বটকসট ফরমেরটংও কররবন

রনরির মরিা করর আপনার ওরেব পািাে বটরবল টযাগ বটরবরলর সারর ও বটরবরলর বসরলর টযাগ ি করন

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 35: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

35

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10

TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-

transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন বটরবরলর বসরল রকছ বটকসট ব াগ করন ারি Sammys Garage এর রনটার কাজ বলখা থাকরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage

width=800 height=208 gtltcentergt

lttablegt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

এখন আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন বিখরবন ব বটকসট এবং বটরবলরট রিরনর বামপারশ আরছ এবং রিক ভারলা বিখারে না পররর ধাপ হরে বটরবল টযারগর শরর অংরশ রকছ অযারটররবউট ব াগ করা ারি িা মাঝামারঝ থারক িারপর বটরবরলর িসথ ৮০০ রপরকসরল বসট করন এবং cell padding রিন ৬ রপরকসল বডোর ও cel l spaci ng ০ রপরকসরল বসট করন বকাডরট বিখরি এখন এমন হরব

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 36: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

36

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transiio-

nalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center

cellpadding=6 cellspacing=0gt

lttrgt

lttdgtHours Monday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noon lttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

আপরন পািারট সংরকষণ করর বরাউজারর বিখরি পাররন ব এসকল অযারটররবউট ব াগ করার ফরল বটরবল ও বটকসট বকমন বিখারে

আপরন এখরনা বটকসট ফরমেরটং কররন রন এটাই হরব আপনার পরবিেী পিরকষপ বটকসটরটরক অযারটররবউট সহ font টযারগর শর এবং বশষ অংশ রিরে ldquoআবিrdquo করন ারি এরট Arial ফরনট বিখাে 600 pm এর পর লাইন ববরক করারনার জনয ltbrgt টযাগ ব াগ করন ফরল বকাডরট বিখরি এমন হরব

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt lttable

width=800 border=0 align=center cellpadding=6 cell-

spacing=0gt

lttrgt

lttdgtltfont face=ArialgtHoursMonday through Friday - 800 am

to 600

pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 37: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

37

এবং Hours শরের দপারশ strong টযাগ

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttdgtltfont face=ArialgtltstronggtHoursltstronggtMonday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

রি আপরন পািারট সংরকষণ করর বরাউজারর বিরখন িরব বিখরবন ব বটকসটরট বারম বিখারে বটকসটরটরক মারঝ বিখারনার জনয বটরবল বসরল center অযারটররবউট ব াগ করন এ প েনত বকাডরট হরলা

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 Transi-

tionalEN httpwwww3orgTRxhtml1DTDxhtml1-transi-

tionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys

Garage width=800 height=208 gtltcentergt

lttable width=800 border=0 align=center cellpad-

ding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=Arialgt ltstronggtHours

ltstronggtMonday through Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

ltbodygt

lthtmlgt

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 38: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

38

িধান বরডর িথয

এই ধাপসমহ পার করর আপরন পািার জনয িধান বটরবলরট তিরর কররবন ারি Sammys Garage সমপরকে গরতবপণে িথয থাকরব বটরবলরটর এই অযারটররবউটগরলা থাকরব

িসথ ৮০০ রপরকসল

বডোর ১ রপরকসল

cel l paddi ng ১০ রপরকসল

cel l spaci ng ০ রপরকসল

বযাকগরাাউরনডর রং সািা পািার মারঝ থাকরব

বটরবল বসরলর অযারটররবউটগরলা হরব left এবং top

বিখন বটরবলরটরক পািাে রনরে আসার জনয রিকমরিা বকাড রলখরি পাররন রকনা রি রনরিি না থারকন িরব ডান পারশর বকসরট বিখন

এখন আপরন বটরবলরল বটকসট ব াগ কররি পাররন এবং একরট রলট h1 বহরডং এবং রলঙক সহ িা ফরমেরটং করন বটকসরট বকমন বিখারব িা রনরি বিখারনা হরলা

বিষটা কররই বিখন না ফলাফল রনরে সনতষট না হরল পরররশষট ২ এর বকাডরট বিরখ রনরি পাররন

lttable width=800

border=1

align=center

cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left

valign=topgtlttdgt

lttrgt

lttablegt

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 39: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

39

রফরনরশং টাি

িরজকটরট বশষ কররি আর ববরশ রকছ করা লাগরব না পািার রনরি একরট পযারাগরাারফ Sammys Garage এর রিকানা রলখরলই হরে ারব রকছ রজরনস কররি ভলরবন না ব মন পযারাগরাাফরট মাঝামারঝ রাখা বটকসরট strong টযাগ িরোগ করা এবং ফনট Arial বিো বকাডরট হরে

ltp align=centergtltstronggtltfont face=ArialgtSammys Garage

ampamp

Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

সকল ওরেব পািার একরট রশররানাম থাকরি হে রশররানামরট বরাউজাররর উপররর বারর বিখাে এবং বরাউজাররর উপর রনভের করর এরট বকমারকেও আসরি পারর সািে ইরিনও এরট বযবহার করর ওরেব পািার head অংরশ title টযাগ ি করন বকাড হরে

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

পররা পািার বকাড বিখরি পরররশষট ৩ বিখন

সংরকষণ করর পািারট বরাউজারর বিখন

িারন আপনার পািারট বকমন বিখারে

রি আপরন আররা িারলরে ব রি িান

HTML এবং XHTML রনরে আপরন রি আররা অনসনধান িারলরে ান িরব বিখরবন ব আপনার ওরেব পািারটরক আররা সনদর করর িলরি পাররবন আপরন া কররি পাররন িার মরধয রকছ হরলা

আপনার পািারটরক সািে ইরিন ারি খরজ পাে িার জনয meta টযাগ ব াগ করা বটকসট ও ছরবর িষটরগািরিা রনেনতরণ করা িিশেরনর জনয বটরবলরক ফরমেট করা রমরডো ফাইল বসারনা উপািারন অযারটররবউট ি করা

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 40: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

40

ওোলেড ওোইড ওরেরব িির রররসাসে আরছ আররা িরথযর জনয রনরির রলরঙক রভরজট কররি ভলরবন না

The Interactive Media Centers Introduction to Web Design

online tutorial at httplibraryalbanyeduimcwebdesign

The IMCs Color and the Web online Tutorial at

httplibraryalbanyeduimcwebcolor

The IMC HTMLXHTML tag list at

httplibraryalbanyeduimctagsheethtm

The World Wide Web Consortium at httpwwww3org

আপনার ওরেব তিররর জনয শভকামনা রইল

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 41: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

41

পরররশষট ১

ছরবর ফাইল ফরমেট

ওরেরব রিন ধররণর ছরবর ফাইল ফরমেট বযবহার করা হে িারা হরলা JPG (Joint Photographers Experimental Group) GIF (Graphics Interchange Format) এবং PNG (Portable Networks Graphics ( রিও BMP ফাইল ফরমেট ববরশরভাগ বরাউজারর িিরশেি হে বযবহাররক কাররণ িা ওরেরব বযবহি হে না) এই রিন ফরমেরটর মরধয JPG এবং GIF সবরিরে পরারনা

JPG হরলা একরট সঙকরিি ফরমেট ফাইল সংরকষরণর সমে ডাটা বখাো াে সঙকরিি করার মািা ছরব সমপািনার সফটওোর ব মন Photoshop বা PaintShop Pro িারা বসট করা হে JPG ফরটাগরাারফর জনয সবরিরে ভারলা কারন এরট রং ববশ ভারলা ভারব পররিালনা কররি পারর হাজার হাজার রং এরট িিশেন কররি পারর রিও সংরকািরনর পররমারনর উপর িা রনভের করর

ডান রিরকর JPG ছরবরটরক খব অলপ সংরকািন করর তিরর করা হরেরছ রং ভারলা এবং ছাোর রিরক ববশ ভারলা রববরন ররেরছ

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 42: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

42

একই ছরব ডারন বিখারনা হরেরছ রকনত এই উিাহররণ এরটরক উচচমািাে সংরকািন করা হরেরছ বিখন ববশ রকছ ldquoউলটাপালটাrdquo রজরনস বিখা ারে হে ডট রহরসরব রকংবা ভরির মরিা উচচমািার সংরকািন ফাইরলর সাইজ করমরে রনরে আরস সারথ সারথ ডাউনরলারডর সমেও এমন একরট সংরকািন মািা বাছাই করা জররী া ছরবর মান এবং ফাইল সাইজ ও ডাউনরলারডর সমরের সারথ সামিসয রাখরব

GIF ফরমেট রডজাইন করা হরেরছ বসসকল ছরবর জনয ব গরলারি সরলড রং থারক ব মন ডররেং এবং বলারগা এরট মাি ২৫৬ রট রংরের মরধয সীমাবি রিও অরনক সফটওোর ফাইল সাইজ ও ডাউনরলারডর সমে কমারনার জনয বযবহারকারীরক আররা কম রং বাছাই কররি অনমরি বিে

অলপ রংরের জনয GIF ফরমেট ফরটাগরাাফ পররিালনা কররি পাররনা রিও এরট সরলড রং ববশ ভারলাভারব পররিালনা কররি পারর ডারনর ছরবরট একরট GIF বিখন ব সরলড রংরের বকষরি রপরকসরলর বকারনা সমসযাই

হরে না

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 43: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

43

ডারনর ফরটাগরাাফরট GIF রহরসরব সংরকষণ করা হরেরছ বখোল করর বিখন আকারশ বকমন বযারনডং ইরফকট পরড়রছ GIF ব রহি মাি ২৫৬ রট রং ধারণ কররি পারর িাই আকারশর অরনক এং এরি বিখা াে না ঐ রংগরলর বিরল িার কাছাকারছ রং বিখাে ফলাফল রহরসরব বযারনডং রাইপ বা মারঝ মারঝ পারনর মরিা ইরফকট বিখা াে

PNG ফরমেট GIF ফরমেট এর বিলী রহরসরব পররকলপনা করা হরেরছরলা রিও িা সফলিা পােরন PNG ছরবগরলা GIF এর মরিা সরলড রং ধারণ করি পারর সারথ সারথ িারা ফরটাগরাারফক রংও পররিালনা কররি পারর ডারনর ফরটাগরাাফরট বিখন এরটরি আকারশর রং সরিকভারব বিখারে এবং উপররর GIF ছরবর মরিা বকারনা বযারনডং ইরফকট পড়রছ না

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 44: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

44

পরররশষট ২

lth1 align=centergtWelcome to Sammys Garage Home Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift To-

day we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our restora-

tion shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgt

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 45: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

45

পরররশষট ৩

ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN

httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt

lthtml xmlns=httpwwww3org1999xhtmlgt

ltheadgt

lttitlegtSammys Garage - Demo page for IMC HTMLXHTML

Tutoriallttitlegt

ltheadgt

ltbodygt

ltcentergtltimg src=imagesgarageheaderjpg alt=Sammys Garage

width=800

height=208 gtltcentergt

lttable width=800 border=0 align=center cellpadding=6

cellspacing=0gt

lttrgt

lttd align=centergtltfont face=ArialgtltstronggtHoursltstronggt

Monday through

Friday - 800 am to 600 pmltbr gt

Saturday - 800 am to 1200 noonltfontgtlttdgt

lttrgt

lttablegt

lttable width=800 border=1 align=center cellpadding=10

cellspacing=0

bgcolor=FFFFFFgt

lttrgt

lttd align=left valign=topgtlth1 align=centergtWelcome to

Sammys Garage Home

Pagelth1gt

ltpgtltstronggtltfont color=990000 size=4gtSammys Garage ampamp

Restoration

Shopltfontgtltstronggt has been in business since 1957 We started

in a small building

just off of La Cienega Boulevard with only one bay and lift

Today we occupy a 35000

square foot building that is centrally located near the Santa

Monica Airport No matter

what your automotive needs are we do it allltpgt

ltulgt

ltligtFull automobile restorationltligt

ltligtStandard vehicle serviceltligt

ltligtShow-quality detailingltligt

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt

Page 46: HTML - SysnovaHyper Text Markup Language) হর্ে রনরমেি সকল ওর্েব পািার ম xল রভরি। রিও নিন ধরর্ণর

46

ltligtAccident repairltligt

ltulgt

ltpgtAlthough we service nearly all makes and models our

restoration shop specializes in

American Iron Included are modern manufacturers such as lta

href=httpwwwfordcomgtFordltagt lta

href=httpwwwgmcomgtGeneral

Motorsltagt and lta href=httpwwwchryslercomgtChryslerltagt

Long-gone marques

such as American Motors Willys Hudson and Studebaker also

find careful attention

here at Sammysltpgt

ltpgtltemgtYou are invited to inspect our shop anytime during normal

business

hoursltemgtltpgtlttdgt

lttrgt

lttablegt

ltp align=centergtltstronggtltfont face=Arial Helvetica sans-

serifgtSammys Garage

ampamp Restoration Shopltbr gt

1234 Airport Avenueltbr gt

Los Angeles CA 90405ltfontgtltstronggtltpgt

ltbodygt

lthtmlgt